diff --git a/.jules/palette.md b/.jules/palette.md index e048c06..564205e 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 - Dynamic Button Labels and Contextual Disabled Help +**Learning:** In async operations or disabled button states, static text like "Clean Selected" leaves the user guessing why a button is disabled (e.g. no selection) or if an action is currently running. +**Action:** Use conditional labels (e.g., `viewModel.isScanning ? "Scanning..." : "Scan"`) and add `.help()` tooltips explaining exactly why a button is disabled (e.g. "Select items to clean") to provide immediate, clear feedback. diff --git a/Sources/Cacheout/Views/ContentView.swift b/Sources/Cacheout/Views/ContentView.swift index e242eac..f412971 100644 --- a/Sources/Cacheout/Views/ContentView.swift +++ b/Sources/Cacheout/Views/ContentView.swift @@ -222,19 +222,21 @@ struct ContentView: View { Button { Task { await viewModel.scan() } } label: { - Label("Scan", systemImage: "arrow.clockwise") + Label(viewModel.isScanning ? "Scanning..." : "Scan", systemImage: "arrow.clockwise") } .disabled(viewModel.isScanning) + .help(viewModel.isScanning ? "Scan in progress" : "Scan for caches") // Clean button Button { viewModel.showCleanConfirmation = true } label: { - Label("Clean Selected", systemImage: "trash") + Label(viewModel.isCleaning ? "Cleaning..." : "Clean Selected", systemImage: "trash") } .buttonStyle(.borderedProminent) .tint(.red) .disabled(!viewModel.hasSelection || viewModel.isCleaning) + .help(!viewModel.hasSelection ? "Select items to clean" : (viewModel.isCleaning ? "Cleaning in progress" : "Clean selected items")) } .padding(.horizontal) .padding(.vertical, 10)