feat: flow-wrap category chips in Discover, add FlowLayout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: yibie

SkillsManager.xcodeproj/project.pbxproj

@@ -26,6 +26,7 @@
 		7970AB614D3D0C641C9FB0EC /* SidebarView.swift in Sources */ = {isa = PBXBuildFile; fileRef = AFF0465C82F147C7332064AC /* SidebarView.swift */; };
 		79C92DE48CAF4F5BBAEDF299 /* InstallService.swift in Sources */ = {isa = PBXBuildFile; fileRef = CC4AC87ED906F4D954E16850 /* InstallService.swift */; };
 		7A8064994B4633978FA3E334 /* DiscoverView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 42BA7574CDF65767B64E1FEE /* DiscoverView.swift */; };
+		BB9876543210FEDCBA987654 /* FlowLayout.swift in Sources */ = {isa = PBXBuildFile; fileRef = AA1234567890ABCDEF123456 /* FlowLayout.swift */; };
 		7C0C9E9A97FA6E85F1819B7B /* ProjectScanner.swift in Sources */ = {isa = PBXBuildFile; fileRef = 52C4A4957C14CE0EEBB00D79 /* ProjectScanner.swift */; };
 		7E6931289A067C712BB9B78B /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 7DBBBF8B70FCF8E665BA164F /* Assets.xcassets */; };
 		85E646533EC754C4C02414FE /* ClaudeCodeAdapter.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3BE38B49272B1AA0A1752A87 /* ClaudeCodeAdapter.swift */; };
@@ -50,6 +51,7 @@
 		34850DA72E29812DF60C423C /* SkillsManager/Services/SymlinkInstaller.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SkillsManager/Services/SymlinkInstaller.swift; sourceTree = SOURCE_ROOT; };
 		3BE38B49272B1AA0A1752A87 /* ClaudeCodeAdapter.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ClaudeCodeAdapter.swift; sourceTree = "<group>"; };
 		42BA7574CDF65767B64E1FEE /* DiscoverView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DiscoverView.swift; sourceTree = "<group>"; };
+		AA1234567890ABCDEF123456 /* FlowLayout.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FlowLayout.swift; sourceTree = "<group>"; };
 		50069145DEE4F107B789596A /* VersionHistoryView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VersionHistoryView.swift; sourceTree = "<group>"; };
 		522C4FF85D5865CEB9DEEF64 /* LLMService.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LLMService.swift; sourceTree = "<group>"; };
 		5274AE0EE82A46941B29B3F1 /* SandboxSlot.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SandboxSlot.swift; sourceTree = "<group>"; };
@@ -98,6 +100,7 @@
 			children = (
 				2F161109A29CF7DCE1257393 /* ContentView.swift */,
 				42BA7574CDF65767B64E1FEE /* DiscoverView.swift */,
+				AA1234567890ABCDEF123456 /* FlowLayout.swift */,
 				F000347C95927A1B1EE9704F /* ProjectSkillsView.swift */,
 				F6BD0C5D68F6CEB4FE4C14CD /* SandboxView.swift */,
 				8B204889413D1B5B1DE273D2 /* SettingsView.swift */,
@@ -274,6 +277,7 @@
 				617909719D9F4BFBB8B9BCDD /* UniversalAdapter.swift in Sources */,
 				5427BC541444486E97ABECF1 /* ContentView.swift in Sources */,
 				7A8064994B4633978FA3E334 /* DiscoverView.swift in Sources */,
+				BB9876543210FEDCBA987654 /* FlowLayout.swift in Sources */,
 				67760A8B31C1AA2B7744DF2D /* FileWatcher.swift in Sources */,
 				0947139B78E3F9D9857F730A /* GitService.swift in Sources */,
 				79C92DE48CAF4F5BBAEDF299 /* InstallService.swift in Sources */,

SkillsManager/Views/DiscoverView.swift

@@ -12,6 +12,9 @@ struct DiscoverView: View {
     @State private var searchText = ""
     @State private var selectedCategory: String?
 
+    /// Max chips shown inline; the rest go into the "More" menu.
+    private static let maxVisible = 8
+
     private var filtered: [MarketplacePlugin] {
         plugins.filter { plugin in
             let matchesSearch = searchText.isEmpty
@@ -23,29 +26,56 @@ struct DiscoverView: View {
         }
     }
 
-    private var categories: [String] {
-        Array(Set(plugins.compactMap { $0.category })).sorted()
+    /// All categories sorted by frequency descending, then alphabetically.
+    private var rankedCategories: [String] {
+        var freq: [String: Int] = [:]
+        for p in plugins { if let c = p.category { freq[c, default: 0] += 1 } }
+        return freq.keys.sorted { freq[$0]! != freq[$1]! ? freq[$0]! > freq[$1]! : $0 < $1 }
     }
 
+    private var visibleCategories: [String] { Array(rankedCategories.prefix(Self.maxVisible)) }
+    private var overflowCategories: [String] { Array(rankedCategories.dropFirst(Self.maxVisible)) }
+
     var body: some View {
         VStack(spacing: 0) {
-            if !categories.isEmpty {
-                ScrollView(.horizontal, showsIndicators: false) {
-                    HStack(spacing: 8) {
-                        CategoryChip(label: "All", isSelected: selectedCategory == nil) {
-                            selectedCategory = nil
+            if !rankedCategories.isEmpty {
+                FlowLayout(hSpacing: 8, vSpacing: 6) {
+                    CategoryChip(label: "All", isSelected: selectedCategory == nil) {
+                        selectedCategory = nil
+                    }
+                    ForEach(visibleCategories, id: \.self) { cat in
+                        CategoryChip(label: cat.capitalized, isSelected: selectedCategory == cat) {
+                            selectedCategory = cat
                         }
-                        ForEach(categories, id: \.self) { cat in
-                            CategoryChip(label: cat.capitalized, isSelected: selectedCategory == cat) {
-                                selectedCategory = cat
+                    }
+                    if !overflowCategories.isEmpty {
+                        let isMoreSelected = selectedCategory.map { overflowCategories.contains($0) } ?? false
+                        Menu {
+                            Button("All Categories") { selectedCategory = nil }
+                            Divider()
+                            ForEach(overflowCategories, id: \.self) { cat in
+                                Button(cat.capitalized) { selectedCategory = cat }
+                            }
+                        } label: {
+                            HStack(spacing: 4) {
+                                Text(isMoreSelected ? selectedCategory!.capitalized : "More")
+                                    .font(.caption)
+                                    .lineLimit(1)
+                                Image(systemName: "chevron.down")
+                                    .font(.caption2)
                             }
+                            .padding(.horizontal, 10)
+                            .padding(.vertical, 5)
+                            .background(isMoreSelected ? Color.accentColor : Color.secondary.opacity(0.1), in: Capsule())
+                            .foregroundStyle(isMoreSelected ? Color.white : Color.primary)
                         }
+                        .menuStyle(.borderlessButton)
+                        .menuIndicator(.hidden)
+                        .fixedSize()
                     }
-                    .padding(.horizontal, 16)
-                    .fixedSize(horizontal: false, vertical: true)
                 }
-                .frame(maxWidth: .infinity)
-                .padding(.vertical, 8)
+                .padding(.horizontal, 16)
+                .padding(.vertical, 10)
                 Divider()
             }
 
@@ -154,6 +184,8 @@ private struct CategoryChip: View {
         Button(action: action) {
             Text(label)
                 .font(.caption)
+                .lineLimit(1)
+                .fixedSize()
                 .padding(.horizontal, 10)
                 .padding(.vertical, 5)
                 .background(

SkillsManager/Views/FlowLayout.swift

@@ -0,0 +1,47 @@
+import SwiftUI
+
+/// A layout that wraps children into multiple rows like CSS `flex-wrap`.
+struct FlowLayout: Layout {
+    var hSpacing: CGFloat = 8
+    var vSpacing: CGFloat = 8
+
+    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
+        let rows = computeRows(proposal: proposal, subviews: subviews)
+        let height = rows.map { $0.map { $0.size.height }.max() ?? 0 }.reduce(0) { $0 + $1 }
+            + CGFloat(max(rows.count - 1, 0)) * vSpacing
+        return CGSize(width: proposal.width ?? 0, height: height)
+    }
+
+    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
+        let rows = computeRows(proposal: proposal, subviews: subviews)
+        var y = bounds.minY
+        for row in rows {
+            let rowHeight = row.map { $0.size.height }.max() ?? 0
+            var x = bounds.minX
+            for item in row {
+                item.view.place(at: CGPoint(x: x, y: y), proposal: ProposedViewSize(item.size))
+                x += item.size.width + hSpacing
+            }
+            y += rowHeight + vSpacing
+        }
+    }
+
+    private struct Item { let view: LayoutSubview; let size: CGSize }
+
+    private func computeRows(proposal: ProposedViewSize, subviews: Subviews) -> [[Item]] {
+        let maxWidth = proposal.width ?? .infinity
+        var rows: [[Item]] = [[]]
+        var rowWidth: CGFloat = 0
+
+        for view in subviews {
+            let size = view.sizeThatFits(.unspecified)
+            if rowWidth + size.width > maxWidth, !rows[rows.endIndex - 1].isEmpty {
+                rows.append([])
+                rowWidth = 0
+            }
+            rows[rows.endIndex - 1].append(Item(view: view, size: size))
+            rowWidth += size.width + hSpacing
+        }
+        return rows
+    }
+}