| | |
| | | } |
| | | |
| | | private var containerGrid: some View { |
| | | let minContainerWidth: CGFloat = max(iconSize * 3 + 100, 300) |
| | | let columns = [GridItem(.adaptive(minimum: minContainerWidth, maximum: minContainerWidth * 1.5), spacing: 16)] |
| | | return ScrollView { |
| | | LazyVGrid(columns: columns, alignment: .leading, spacing: 16) { |
| | | ForEach(groups) { group in |
| | | VStack(alignment: .leading, spacing: 6) { |
| | | // Group header |
| | | HStack(spacing: 0) { |
| | | Rectangle().fill(.secondary.opacity(0.25)).frame(height: 1) |
| | | Text(group.name) |
| | | .font(.system(size: tagFontSize, weight: .semibold)) |
| | | .foregroundStyle(.secondary) |
| | | .padding(.horizontal, 10) |
| | | Rectangle().fill(.secondary.opacity(0.25)).frame(height: 1) |
| | | } |
| | | // App grid |
| | | let itemSize = iconSize + 28 |
| | | LazyVGrid( |
| | | columns: [GridItem(.adaptive(minimum: itemSize, maximum: itemSize + 36), spacing: 6)], |
| | | spacing: 2 |
| | | ) { |
| | | ForEach(group.apps) { app in |
| | | AppGridItem(app: app, iconSize: iconSize, onSelect: { openApp(app) }) |
| | | 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) |
| | | |
| | | 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) |
| | | } |
| | | } |
| | | } |
| | | .id(group.id) |
| | | .padding(16) |
| | | .background( |
| | | RoundedRectangle(cornerRadius: 14) |
| | | .fill(.ultraThinMaterial) |
| | | ) |
| | | .overlay( |
| | | RoundedRectangle(cornerRadius: 14) |
| | | .stroke(Color.primary.opacity(0.08), lineWidth: 1) |
| | | ) |
| | | } |
| | | .padding(outerPad) |
| | | } |
| | | } |
| | | } |
| | | |
| | | /// 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 { |
| | | 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) |
| | | } |
| | | let itemSize = iconSize + 28 |
| | | LazyVGrid( |
| | | columns: [GridItem(.adaptive(minimum: itemSize, maximum: itemSize + 36), spacing: 6)], |
| | | spacing: 2 |
| | | ) { |
| | | ForEach(group.apps) { app in |
| | | AppGridItem(app: app, iconSize: iconSize, onSelect: { openApp(app) }) |
| | | } |
| | | } |
| | | .padding(20) |
| | | } |
| | | .frame(maxWidth: width) |
| | | .padding(16) |
| | | .background( |
| | | RoundedRectangle(cornerRadius: 14) |
| | | .fill(.ultraThinMaterial) |
| | | ) |
| | | .overlay( |
| | | RoundedRectangle(cornerRadius: 14) |
| | | .stroke(Color.primary.opacity(0.08), lineWidth: 1) |
| | | ) |
| | | } |
| | | |
| | | // MARK: - Edit Tags View |