b2600e2577
* Add editable display-name field to generic integrations Lets users set a custom name for Proxmox, Docker, AWS, Remote Desktop, Netbird, Cloudflare, Uptime Kuma, and Weather integrations, separate from the host/IP field, mirroring the SSH host rename pattern. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016kF4hZWEkRCPPvCZTeXxn4 * Surface the new-integration name field as a labeled input The name field for new generic integrations was a faint header input with only placeholder text, easy to miss. Move it into the form grid as a proper labeled "Name" field next to the other connection fields. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016kF4hZWEkRCPPvCZTeXxn4 * Add file upload for SSH private key and certificate fields Lets users pick a key file from disk (e.g. ~/.ssh) instead of pasting its contents into the Private Key / OPKSSH Certificate fields. * Fix SSH private key paste corrupting multi-line PEM format Private Key and Certificate fields were single-line <input> elements, which strip newlines on paste and corrupt PEM-formatted keys (causing 'Unsupported key format' errors). Render them as multi-line textareas instead so pasted keys keep their line breaks. * Add JSON-converted bookmark import file for Archnest data import Converts homarr-bookmarks.md into the format expected by /api/data/import. * Auto-populate bookmark icons via favicon service in import JSON Each bookmark now points to Google's favicon endpoint for its domain instead of having no icon at all. * docs: fix conflicting Kiro steering/spec files missed in prior cleanup The earlier doc-cleanup pass only checked root-level markdown files and missed .kiro/, a dotdir holding Kiro IDE spec-driven-dev artifacts. Two files there directly contradicted the real app and design-decisions.md: - .kiro/steering/design-rules.md is auto-injected into every Kiro session, but stated an 80px/50px sidebar and Zustand state management — both wrong (real app: 200px/64px sidebar, plain React state + localStorage, no Zustand). Rewrote it to match design-decisions.md so Kiro doesn't steer future sessions on stale info. - .kiro/specs/archnest-dashboard/requirements.md was an abandoned requirements-only spec (no design.md/tasks.md ever followed) for the original 6-page/Network-page/CDN-asset vision, same vintage as the already-deleted archnest-blueprint.md. Removed the whole spec directory since nothing references it and it never matured past requirements. Documented both files (and why they were removed/rewritten) in the README's documentation map. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016kF4hZWEkRCPPvCZTeXxn4 --------- Co-authored-by: Claude <noreply@anthropic.com>
90 lines
3.6 KiB
Markdown
90 lines
3.6 KiB
Markdown
# ArchNest Design Rules — Must Follow on Every Page
|
|
|
|
> Kept in sync with `/design-decisions.md` at the repo root, which is the
|
|
> canonical source — if the two ever disagree, trust `design-decisions.md`
|
|
> and fix this file to match. This file exists so Kiro steering injects the
|
|
> same rules automatically; it intentionally duplicates rather than replaces
|
|
> the root doc.
|
|
|
|
---
|
|
|
|
## Sidebar
|
|
|
|
- **Expanded width**: 200px (not 80px — that was the original pre-build mockup spec)
|
|
- **Collapsed width**: 64px (icon only)
|
|
- **Manually collapsible** via a toggle button (not just responsive breakpoints)
|
|
- **Active indicator**: gold left border + gold text
|
|
- **System status**: bottom of sidebar, colored dot + text, driven by live
|
|
integration-status polling (not a static config)
|
|
- Main content `margin-left` must match the sidebar width exactly
|
|
|
|
## Top Bar
|
|
|
|
- **Page title**: 18px, bold, uppercase, tracking-wide, **gold (#C8A434)** — not white
|
|
- **Height**: 56px, sticky, z-40 (72px + larger 28px title on pages with a
|
|
subtitle — currently only BookNest, via the `pageSubtitles` map)
|
|
- **Search bar**: ~300px, rounded-full, searches across pages/integrations/bookmarks
|
|
- **Avatar**: 36px, gold border + glow, initials or uploaded image
|
|
- **Dropdown menu**: Profile, Appearance, Security, Help & Support, Sign Out (red)
|
|
|
|
## Hero Banner
|
|
|
|
- Shown on: Glance, Infrastructure, BookNest (not Network — there is no
|
|
Network page; Infrastructure has a disabled "Network" sub-tab instead)
|
|
- Not shown on: Terminal, Tunnels, Files, Containers, Remote Desktop,
|
|
Host Metrics, Settings, Help
|
|
- `object-cover` with a tuned `object-position` per page (configured in
|
|
`App.tsx`'s `heroObjectPosition` map) to show the upper portion, not center-crop
|
|
- Status/KPI cards overlap the bottom of the banner via negative margin
|
|
- If the image fails to load, the banner area just shows the card background
|
|
color — no broken-image icon
|
|
|
|
## KPI / Status Cards
|
|
|
|
- Background `#141518`, border `1px solid #1E2025`, 12px radius, no box-shadow
|
|
- Padding ~16px for KPI cards, ~20-24px for content cards
|
|
- Hover: border transitions to gold, 0.2s ease
|
|
- Card titles: 10-11px uppercase, tracking-[1.5px], secondary color
|
|
- Large numbers: 24-28px bold, primary color
|
|
|
|
## Content Rows
|
|
|
|
- All rows in a page share the same horizontal padding so the hero banner,
|
|
status cards, and content rows line up left/right
|
|
- No footer/status bar on any page — don't add one unless explicitly requested
|
|
|
|
## Colors
|
|
|
|
| Role | Value |
|
|
|------|-------|
|
|
| Page background | `#0D0E10` |
|
|
| Card background | `#141518` |
|
|
| Sidebar background | `#0A0B0D` |
|
|
| Border | `#1E2025` |
|
|
| Gold accent | `#C8A434` |
|
|
| Success | `#2ECC71` |
|
|
| Warning | `#E67E22` |
|
|
| Danger | `#E74C3C` |
|
|
| Text primary | `#E8E6E0` |
|
|
| Text secondary | `#7A7D85` |
|
|
|
|
## State Management
|
|
|
|
- **No Zustand or other global state library is used.** State is plain React
|
|
component state plus `localStorage` for a small number of client-only
|
|
preferences (Terminal theme/font prefs; `AuthContext`'s JWT). All
|
|
dashboard data (integrations, bookmarks, resources, events, etc.) is
|
|
fetched live from the Fastify backend via `src/lib/api.ts` — there is no
|
|
client-side cache/store layer to keep in sync with the server.
|
|
|
|
## Target Screen
|
|
|
|
- Primary design target: 16-inch display / 1920px+ viewport
|
|
- Should feel spacious, not cramped — use the full width
|
|
|
|
## See also
|
|
|
|
- `/design-decisions.md` — full per-page implementation notes (what each
|
|
page actually renders and where its data comes from)
|
|
- `/README.md` — architecture overview, page list, backend routes
|
|
- `/HANDOFF.md` — current task state and what to work on next
|