diff --git a/.jules/palette.md b/.jules/palette.md index e048c06..3127e00 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -9,3 +9,7 @@ ## 2024-05-24 - Empty States in Process Lists **Learning:** Users can misinterpret an empty dynamic list (like processes) as a broken UI or a frozen app if there's no visual feedback indicating that the list is intentionally empty. **Action:** Always provide a clear, empty state with an icon and brief text for dynamic lists that might temporarily yield no results, preventing user confusion. + +## 2024-05-25 - Consistency in Empty States +**Learning:** Standardizing visual empty states across an app creates a more predictable and polished experience. Plain text empty states (e.g. "No items found") feel unpolished compared to the rest of the application. +**Action:** When working on lists or dynamic content, ensure empty states match the established pattern (usually a centered VStack with a large tertiary icon and callout secondary text). diff --git a/Sources/Cacheout/Views/NodeModulesSection.swift b/Sources/Cacheout/Views/NodeModulesSection.swift index c5110e6..9f0af4e 100644 --- a/Sources/Cacheout/Views/NodeModulesSection.swift +++ b/Sources/Cacheout/Views/NodeModulesSection.swift @@ -106,10 +106,16 @@ struct NodeModulesSection: View { } if isExpanded && !viewModel.isNodeModulesScanning && viewModel.nodeModulesItems.isEmpty { - Text("No node_modules directories found") - .font(.caption) - .foregroundStyle(.tertiary) - .padding(.vertical, 8) + VStack(spacing: 8) { + Image(systemName: "shippingbox") + .font(.largeTitle) + .foregroundStyle(.tertiary) + Text("No node_modules directories found") + .font(.callout) + .foregroundStyle(.secondary) + } + .frame(maxWidth: .infinity, alignment: .center) + .padding(.vertical, 24) } } }