crazy-macs/tag-launcher.git

			@@ -204,6 +204,7 @@
			@State private var successToast: String? = nil
			@State private var draggedTagNames: [String] = [] // live drag order
			@State private var dragItem: String? = nil // currently dragged tag
			@State private var highlightedGroup: String? = nil // container highlight

			// Configurable defaults
			@AppStorage("defaultGroupName") private var defaultGroupName = "Other"
			@@ -212,6 +213,7 @@
			@AppStorage("tagPosition") private var tagPosition = "left"
			@State private var notchHeight: CGFloat = 0
			@AppStorage("displayMode") private var displayMode = "flat"
			@AppStorage("hideAppNames") private var hideAppNames = false

			private var isSideLayout: Bool {
			tagPosition == "left" \|\| tagPosition == "right"
			@@ -271,10 +273,10 @@
			if phase != .none {
			NotificationCenter.default.post(name: .apptagEditModeChanged, object: nil, userInfo: ["active": true])
			NSApp.activate(ignoringOtherApps: true)
			// Sync drag order from database when entering edit mode
			if draggedTagNames.isEmpty {
			draggedTagNames = TagEditor.orderedTagNames()
			}
			// Always sync tag list from database when entering edit mode
			let store = TagDatabase.load()
			tagColors = store.tags.mapValues { $0.color }
			draggedTagNames = TagEditor.orderedTagNames()
			}
			editPhase = phase
			if phase == .none {
			@@ -338,7 +340,11 @@
			HStack(spacing: 8) {
			ForEach(tagLabels) { tag in
			TagPill(name: tag.name, colorIndex: tag.colorIndex,
			action: { scrollTo(tag.id) })
			action: {
			if highlightedGroup == tag.id { highlightedGroup = nil }
			else { highlightedGroup = tag.id }
			scrollTo(tag.id)
			})
			}
			}.padding(.horizontal, 24)
			}
			@@ -349,7 +355,11 @@
			VStack(spacing: 6) {
			ForEach(tagLabels) { tag in
			SideTagPill(name: tag.name, colorIndex: tag.colorIndex,
			action: { scrollTo(tag.id) })
			action: {
			if highlightedGroup == tag.id { highlightedGroup = nil }
			else { highlightedGroup = tag.id }
			scrollTo(tag.id)
			})
			}
			}.padding(12)
			}.frame(width: 135)
			@@ -382,41 +392,80 @@
			group: group,
			onSelectApp: { app in openApp(app) },
			tagFontSize: tagFontSize,
			iconSize: iconSize
			iconSize: iconSize,
			showNames: !hideAppNames
			).id(group.id)
			}
			}.padding(20)
			}.onAppear { scrollProxy = proxy }
			}
			.id(displayMode) // force rebuild on mode switch
			.onAppear { scrollProxy = proxy }
			}
			}

			private var containerGrid: some View {
			let gap: CGFloat = 16
			let minCardW: CGFloat = 260
			let maxCardW: CGFloat = 500
			return ScrollView {
			LazyVGrid(
			columns: [GridItem(.adaptive(minimum: minCardW, maximum: maxCardW), spacing: gap)],
			spacing: gap
			) {
			ForEach(groups) { group in
			containerView(for: group)
			.id(group.id)
			GeometryReader { geo in
			let outerPad: CGFloat = 20
			let gap: CGFloat = 16
			let available = geo.size.width - outerPad * 2
			let colW: CGFloat = 280
			let colCount = max(1, Int((available + gap) / (colW + gap)))
			let actualColW = (available - gap * CGFloat(colCount - 1)) / CGFloat(colCount)

			let columns = distributeToColumns(groups: groups, colCount: colCount, colWidth: actualColW)

			ScrollViewReader { proxy in
			ScrollView {
			HStack(alignment: .top, spacing: gap) {
			ForEach(0..<colCount, id: \.self) { ci in
			LazyVStack(spacing: gap) {
			ForEach(columns[ci]) { group in
			masonryCard(group, width: actualColW)
			.id(group.id)
			}
			}
			}
			}
			.padding(outerPad)
			}
			.id(displayMode) // force rebuild on mode switch
			.onAppear { scrollProxy = proxy }
			}
			.padding(20)
			}
			}

			/// Single container: header + app grid inside rounded rect.
			/// Width is intrinsic (not fixed) — adapts to content and grid column.
			private func containerView(for group: TagGroup) -> some View {
			VStack(alignment: .leading, spacing: 6) {
			/// Distribute groups to the shortest column.
			private func distributeToColumns(groups: [TagGroup], colCount: Int, colWidth: CGFloat) -> [[TagGroup]] {
			var cols = Array(repeating: [TagGroup](), count: colCount)
			var h = Array(repeating: CGFloat(0), count: colCount)
			for g in groups {
			let est = estimatedCardHeight(g, width: colWidth)
			let ci = h.firstIndex(of: h.min()!)!
			cols[ci].append(g)
			h[ci] += est + 16
			}
			return cols
			}

			private func estimatedCardHeight(_ group: TagGroup, width: CGFloat) -> CGFloat {
			let inner = width - 32
			let itemW = iconSize + 28 + 6
			let perRow = max(1, Int(inner / itemW))
			let rows = (group.apps.count + perRow - 1) / perRow
			return 32 + CGFloat(rows) * (iconSize + 30)
			}

			private func masonryCard(_ group: TagGroup, width: CGFloat) -> some View {
			let isHL = highlightedGroup == group.name
			let hlColor = Color(nsColor: TagColor.nsColor(for: tagColors[group.name] ?? 0))
			return VStack(alignment: .leading, spacing: 6) {
			HStack(spacing: 0) {
			Rectangle().fill(.secondary.opacity(0.25)).frame(height: 1)
			Text(group.name)
			.font(.system(size: tagFontSize, weight: .semibold))
			.foregroundStyle(.secondary)
			.lineLimit(1)
			.truncationMode(.middle)
			.padding(.horizontal, 10)
			Rectangle().fill(.secondary.opacity(0.25)).frame(height: 1)
			}
			@@ -426,10 +475,11 @@
			spacing: 2
			) {
			ForEach(group.apps) { app in
			AppGridItem(app: app, iconSize: iconSize, onSelect: { openApp(app) })
			AppGridItem(app: app, iconSize: iconSize, showName: !hideAppNames, onSelect: { openApp(app) })
			}
			}
			}
			.frame(maxWidth: width)
			.padding(16)
			.background(
			RoundedRectangle(cornerRadius: 14)
			@@ -437,7 +487,8 @@
			)
			.overlay(
			RoundedRectangle(cornerRadius: 14)
			.stroke(Color.primary.opacity(0.08), lineWidth: 1)
			.stroke(isHL ? hlColor : Color.primary.opacity(0.08),
			lineWidth: isHL ? 3 : 1)
			)
			}