fix(symbol-groups): API + Frontend auf category-Objekt-Format umgestellt – zeigt jetzt alle Kategorien korrekt

src/app/api/icons/route.ts

@@ -115,12 +115,12 @@ export async function GET() {
 
       const groups = new Map<string | null, any[]>()
       for (const sym of flatTenantSymbols) {
-        const key = sym.categoryId || null
+        const key = sym.categoryId || '__none__'
         if (!groups.has(key)) groups.set(key, [])
         groups.get(key)!.push(sym)
       }
 
-      const catIds = Array.from(groups.keys()).filter(Boolean) as string[]
+      const catIds = Array.from(groups.keys()).filter(k => k !== '__none__') as string[]
       let tenantCategories: any[] = []
       if (catIds.length > 0) {
         tenantCategories = await prisma.$queryRawUnsafe(
@@ -132,15 +132,12 @@ export async function GET() {
       const catMap = new Map(tenantCategories.map((c: any) => [c.id, c]))
 
       tenantSymbolGroups = Array.from(groups.entries()).map(([catId, symbols]) => {
-        const cat = catId ? catMap.get(catId) : null
+        const cat = catId !== '__none__' ? catMap.get(catId) : null
         return {
-          categoryId: catId,
+          category: cat ? { id: cat.id, name: cat.name } : null,
-          categoryName: cat ? cat.name || 'Kategorie' : 'Ohne Kategorie',
-          sortOrder: cat ? cat.sortOrder ?? 999 : 999,
           symbols,
         }
       })
-      tenantSymbolGroups.sort((a, b) => a.sortOrder - b.sortOrder)
     }
   } catch (err) {
     console.error('Error fetching tenant symbols:', err)

src/app/api/tenant/symbols/route.ts

@@ -84,11 +84,13 @@ export async function GET(req: NextRequest) {
     }
 
     // Group by category
-    const groupedResult: Record<string, any[]> = {}
+    const groupedResult: Record<string, { catId: string | null; catName: string; symbols: any[] }> = {}
     for (const sym of mapped) {
-      const catName = sym.categoryName
+      const key = sym.categoryId || '__none__'
-      if (!groupedResult[catName]) groupedResult[catName] = []
+      if (!groupedResult[key]) {
-      groupedResult[catName].push(sym)
+        groupedResult[key] = { catId: sym.categoryId, catName: sym.categoryName, symbols: [] }
+      }
+      groupedResult[key].symbols.push(sym)
     }
 
     // Get categories for ordering
@@ -97,16 +99,16 @@ export async function GET(req: NextRequest) {
       tenantId
     )
 
-    const ordered: Array<{ categoryId: string | null; categoryName: string; symbols: any[] }> = []
+    const ordered: Array<{ category: { id: string; name: string } | null; symbols: any[] }> = []
     for (const cat of categories) {
-      if (groupedResult[cat.name]) {
+      if (groupedResult[cat.id]) {
-        ordered.push({ categoryId: cat.id, categoryName: cat.name, symbols: groupedResult[cat.name] })
+        ordered.push({ category: { id: cat.id, name: cat.name }, symbols: groupedResult[cat.id].symbols })
-        delete groupedResult[cat.name]
+        delete groupedResult[cat.id]
       }
     }
     // Append any remaining uncategorized
-    for (const [catName, symbols] of Object.entries(groupedResult)) {
+    for (const entry of Object.values(groupedResult)) {
-      ordered.push({ categoryId: null, categoryName: catName, symbols })
+      ordered.push({ category: null, symbols: entry.symbols })
     }
 
     return NextResponse.json({ categories: ordered })

src/components/layout/right-sidebar.tsx

@@ -25,8 +25,7 @@ interface DisplayCategory {
 }
 
 interface TenantSymbolGroup {
-  categoryId: string | null
+  category: { id: string; name: string } | null
-  categoryName: string
   symbols: DisplaySymbol[]
 }
 
@@ -143,8 +142,7 @@ export function RightSidebar({ onSymbolDrop, canEdit, isOpen, onToggle, activeTa
 
           // ─── New tenant symbol groups (Phase 1) ───
           const groups: TenantSymbolGroup[] = (data.tenantSymbolGroups || []).map((g: any) => ({
-            categoryId: g.categoryId,
+            category: g.category,
-            categoryName: g.categoryName,
             symbols: g.symbols.map((s: any) => ({
               id: s.id,
               name: s.name,
@@ -155,8 +153,7 @@ export function RightSidebar({ onSymbolDrop, canEdit, isOpen, onToggle, activeTa
           // Merge legacy "Eigene" into tenant groups if present
           if (eigene && eigene.symbols.length > 0) {
             const legacyGroup: TenantSymbolGroup = {
-              categoryId: '__legacy__',
+              category: { id: '__legacy__', name: 'Eigene' },
-              categoryName: 'Eigene',
               symbols: eigene.symbols,
             }
             groups.unshift(legacyGroup)
@@ -166,7 +163,7 @@ export function RightSidebar({ onSymbolDrop, canEdit, isOpen, onToggle, activeTa
 
           // Auto-expand all tenant groups, auto-collapse library if tenant has symbols
           if (groups.length > 0 && groups.some(g => g.symbols.length > 0)) {
-            setExpandedTenantCats(new Set(groups.map(g => g.categoryId || '__none__')))
+            setExpandedTenantCats(new Set(groups.map(g => g.category?.id || '__none__')))
             setShowLibrarySection(false)
           }
         }
@@ -357,17 +354,17 @@ export function RightSidebar({ onSymbolDrop, canEdit, isOpen, onToggle, activeTa
                       </div>
                     ) : (
                       filteredTenantGroups.map(g => {
-                        const key = g.categoryId || '__none__'
+                        const key = g.category?.id || '__none__'
                         const expanded = expandedTenantCats.has(key)
                         return (
                           <div key={key} className="border rounded-md">
                             <button
-                              onClick={() => toggleTenantCat(g.categoryId)}
+                              onClick={() => toggleTenantCat(g.category?.id || null)}
                               className="w-full flex items-center justify-between px-2 py-1 text-[11px] font-medium hover:bg-muted/40 transition-colors"
                             >
                               <span className="flex items-center gap-1.5">
                                 <FolderOpen className="w-3 h-3 text-muted-foreground" />
-                                {g.categoryName}
+                                {g.category?.name || 'Ohne Kategorie'}
                                 <span className="text-[10px] text-muted-foreground">({g.symbols.length})</span>
                               </span>
                               <ChevronRight className={`w-3 h-3 transition-transform ${expanded ? 'rotate-90' : ''}`} />