16 KiB
16 KiB
phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves
| phase | plan | type | wave | depends_on | files_modified | autonomous | requirements | must_haves | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 04-ux-improvements | 02 | execute | 1 |
|
true |
|
|
Purpose: Makes the dashboard usable at scale (finding specific images) and accessible (theme choice, visible drag handles). Output: New FilterBar component, theme toggle in Header, updated ServiceCard drag handle, filter logic in App.tsx.
<execution_context> @$HOME/.claude/get-shit-done/workflows/execute-plan.md @$HOME/.claude/get-shit-done/templates/summary.md </execution_context>
@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/04-ux-improvements/04-CONTEXT.md @.planning/phases/04-ux-improvements/04-RESEARCH.md From frontend/src/types/diun.ts: ```typescript export interface Tag { id: number name: string } export interface UpdateEntry { event: DiunEvent received_at: string acknowledged: boolean tag: Tag | null } export type UpdatesMap = Record ```From frontend/src/App.tsx (current entries derivation):
const entries = Object.entries(updates)
const taggedSections = tags.map(tag => ({
tag,
rows: entries
.filter(([, e]) => e.tag?.id === tag.id)
.map(([image, entry]) => ({ image, entry })),
}))
const untaggedRows = entries
.filter(([, e]) => !e.tag)
.map(([image, entry]) => ({ image, entry }))
From frontend/src/components/Header.tsx:
interface HeaderProps {
onRefresh: () => void
}
From frontend/src/components/ServiceCard.tsx (drag handle - current opacity pattern):
<button
{...attributes}
{...listeners}
className="text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-grab active:cursor-grabbing shrink-0 touch-none"
>
From frontend/src/lib/utils.ts:
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
From frontend/src/main.tsx (current hardcoded dark mode):
document.documentElement.classList.add('dark')
From frontend/src/index.css (CSS vars - note: no --destructive or --card defined):
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
/* ... light theme vars ... */
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
/* ... dark theme vars ... */
}
2. **index.css**: Add `--destructive` and `--destructive-foreground` CSS variables to both `:root` and `.dark` blocks (needed for destructive button variant used in Plan 03). Also add `--card` and `--card-foreground` if missing:
In `:root` block, add:
```css
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
```
In `.dark` block, add:
```css
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 85.7% 97.3%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
```
3. **Header.tsx** (per D-14): Add theme toggle button. Import `Sun, Moon` from `lucide-react`. Add a `toggleTheme` function:
```typescript
function toggleTheme() {
const isDark = document.documentElement.classList.toggle('dark')
localStorage.setItem('theme', isDark ? 'dark' : 'light')
}
```
Add a second Button next to the refresh button:
```tsx
<Button
variant="ghost"
size="sm"
onClick={toggleTheme}
className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
title="Toggle theme"
>
<Sun className="h-4 w-4 hidden dark:block" />
<Moon className="h-4 w-4 block dark:hidden" />
</Button>
```
Wrap both buttons in a `<div className="flex items-center gap-1">`.
4. **ServiceCard.tsx** (per D-16): Change the drag handle button's className from `opacity-0 group-hover:opacity-100` to `opacity-40 hover:opacity-100`. The full className becomes:
```
text-muted-foreground opacity-40 hover:opacity-100 transition-opacity cursor-grab active:cursor-grabbing shrink-0 touch-none
```
5. **lib/utils.ts**: Extract `getRegistry` function from ServiceCard.tsx and add it as a named export in utils.ts:
```typescript
export function getRegistry(image: string): string {
const parts = image.split('/')
if (parts.length === 1) return 'Docker Hub'
const first = parts[0]
if (!first.includes('.') && !first.includes(':') && first !== 'localhost') return 'Docker Hub'
if (first === 'ghcr.io') return 'GitHub'
if (first === 'gcr.io') return 'GCR'
return first
}
```
Then in ServiceCard.tsx, remove the local `getRegistry` function and add `import { getRegistry } from '@/lib/utils'` (alongside the existing `cn` import: `import { cn, getRegistry } from '@/lib/utils'`).