mitchell/hamlab
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

Rail: proper folder icon for Files (inline SVG, matches the monochrome glyphs)

Browse Source 
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Mitchell-Johnson
2026-09-18 05:54:20 -07:00
co-authored by Claude Fable 5.1
parent 2d23ba8582
commit 116f4c72f6
3 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/Rail.tsx
+2 -2
View File
@@ -1,10 +1,10 @@
import { useState } from 'react' import { ReactNode, useState } from 'react'
import { Term } from './api' import { Term } from './api'
import { Spinner } from './ui' import { Spinner } from './ui'
// A group is either a page (clicking the head opens it — Dashboard) or a folder of // A group is either a page (clicking the head opens it — Dashboard) or a folder of
// leaves (Terminal). `soon` groups are inert placeholders for the roadmap. // leaves (Terminal). `soon` groups are inert placeholders for the roadmap.
export interface Group { id: string; label: string; icon: string; soon?: boolean; page?: boolean } export interface Group { id: string; label: string; icon: ReactNode; soon?: boolean; page?: boolean }
interface Props { interface Props {
groups: Group[]; terms: Term[]; active: string | null; view: string; creating?: boolean groups: Group[]; terms: Term[]; active: string | null; view: string; creating?: boolean
web/src/Shell.tsx
+8 -1
View File
@@ -12,6 +12,13 @@ import Files from './Files'
import Power from './Power' import Power from './Power'
import { Btn, NetBar, Toasts, toast } from './ui' import { Btn, NetBar, Toasts, toast } from './ui'
// Inline outline icon so it matches the monochrome glyphs in the rail (emoji would be full colour).
const FolderIcon = (
<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" aria-hidden="true">
<path d="M1.5 4a1 1 0 0 1 1-1h3.2l1.6 1.6h6.2a1 1 0 0 1 1 1V12a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1V4z" />
</svg>
)
const GROUPS: Group[] = [ const GROUPS: Group[] = [
{ id: 'dashboard', label: 'Dashboard', icon: '◔', page: true }, { id: 'dashboard', label: 'Dashboard', icon: '◔', page: true },
{ id: 'terminal', label: 'Terminal', icon: '>_' }, { id: 'terminal', label: 'Terminal', icon: '>_' },
@@ -19,7 +26,7 @@ const GROUPS: Group[] = [
{ id: 'cron', label: 'Cron', icon: '⏱', page: true }, { id: 'cron', label: 'Cron', icon: '⏱', page: true },
{ id: 'updates', label: 'Updates', icon: '⇪', page: true }, { id: 'updates', label: 'Updates', icon: '⇪', page: true },
{ id: 'disks', label: 'Disks', icon: '▤', page: true }, { id: 'disks', label: 'Disks', icon: '▤', page: true },
{ id: 'files', label: 'Files', icon: '▧', page: true }, { id: 'files', label: 'Files', icon: FolderIcon, page: true },
] ]
type View = 'terminal' | 'dashboard' | 'services' | 'cron' | 'updates' | 'disks' | 'files' type View = 'terminal' | 'dashboard' | 'services' | 'cron' | 'updates' | 'disks' | 'files'
web/src/styles.css
+1 -1
View File
@@ -43,7 +43,7 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
.group.soon .group-head { color: var(--muted); cursor: default; } .group.soon .group-head { color: var(--muted); cursor: default; }
.group.soon .group-head:hover { background: none; } .group.soon .group-head:hover { background: none; }
.chev { width: 10px; color: var(--muted); font-size: 11px; } .chev { width: 10px; color: var(--muted); font-size: 11px; }
.gicon { width: 18px; text-align: center; color: var(--accent2); font-family: ui-monospace, monospace; font-size: 12px; } .gicon { width: 18px; text-align: center; color: var(--accent2); font-family: ui-monospace, monospace; font-size: 12px; display: inline-flex; justify-content: center; align-items: center; }
.badge { margin-left: auto; font-size: 10px; text-transform: uppercase; border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; } .badge { margin-left: auto; font-size: 10px; text-transform: uppercase; border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; }
.leaves { padding: 2px 0 6px; } .leaves { padding: 2px 0 6px; }
.leaf { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 30px; cursor: pointer; width: 100%; text-align: left; } .leaf { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 30px; cursor: pointer; width: 100%; text-align: left; }