Skip to content

Give LocalKit a face: monogram tiles, a Home screen, a live rail, and a light theme #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jhd3197 merged 13 commits into from
Jul 22, 2026
Merged

Give LocalKit a face: monogram tiles, a Home screen, a live rail, and a light theme #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
379dab8
docs: plan 27 — visual identity pass (tiles, icons, micro-polish)
jhd3197 Jul 22, 2026
c12895a
ui: lucide icon set + offline brand marks (plan 27)
jhd3197 Jul 22, 2026
fa9c376
ui: monogram site tiles + dashboard and sidebar polish (plan 27)
jhd3197 Jul 22, 2026
af71ce9
ui: site detail header tile + iconed section titles (plan 27)
jhd3197 Jul 22, 2026
956b511
docs: regenerate screenshots; mark plan 27 shipped
jhd3197 Jul 22, 2026
964f1a3
docs: screenshot pipeline upgrades + import/tools/snapshots captures
jhd3197 Jul 22, 2026
a23ddbe
docs: plan 28 — control room (home, light theme, rail, stamps)
jhd3197 Jul 22, 2026
33773bb
ui: CSS-var token layer + light theme (plan 28)
jhd3197 Jul 22, 2026
6285653
ui: brand-stamped tiles + icon-only card actions (plan 28)
jhd3197 Jul 22, 2026
a2c03a7
ui: home dashboard, live control rail, detail tabs (plan 28)
jhd3197 Jul 22, 2026
44d06f6
docs: light-theme screenshots incl. home; mark plan 28 shipped
jhd3197 Jul 22, 2026
4ce9a73
Update README screenshots section (all locales)
jhd3197 Jul 22, 2026
1568d49
Make probe_ports test retry to avoid race
jhd3197 Jul 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 17 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,17 +70,27 @@ npm run tauri build
| Dashboard | List View |
| :--------------------------------------------------------------: | :------------------------------------------------------------: |
| ![Dashboard](docs/screenshots/dashboard.png) | ![List view](docs/screenshots/dashboard-list.png) |
| _All your sites at a glance, with live container status badges_ | _A denser take on the dashboard for lots of sites_ |
| _Every site at a glance — WordPress, PHP and Docker — with live status badges_ | _A denser table view for lots of sites_ |

| Site Detail | New Site |
| Site Detail | Tools |
| :-------------------------------------------------------------: | :------------------------------------------------------------: |
| ![Site detail](docs/screenshots/site-detail.png) | ![New site](docs/screenshots/new-site.png) |
| _Credentials, wp-cli info, ServerKit sync & history_ | _Pick a name, WordPress version, and PHP version_ |
| ![Site detail](docs/screenshots/site-detail.png) | ![Tools tab](docs/screenshots/site-tools.png) |
| _Credentials, database, wp-cli info, snapshots & sync_ | _Adminer DB browser, safe search-replace, WP\_DEBUG & a config editor — in-app_ |

| Settings | Local Domains |
| Snapshots | New Site |
| :-------------------------------------------------------------: | :------------------------------------------------------------: |
| ![Snapshots](docs/screenshots/snapshots.png) | ![New site](docs/screenshots/new-site.png) |
| _One-click restore; one is taken before every push, pull & delete_ | _WordPress, PHP/Laravel or a Docker project — blank or from a blueprint_ |

| Import | Settings |
| :-------------------------------------------------------------: | :------------------------------------------------------------: |
| ![Import remote site](docs/screenshots/import-site.png) | ![Settings](docs/screenshots/settings.png) |
| _Clone a remote ServerKit site down as a fresh local copy_ | _Docker status, updates, data paths & defaults_ |

| Local Domains | ServerKit |
| :--------------------------------------------------------------: | :-------------------------------------------------------------: |
| ![Settings](docs/screenshots/settings.png) | ![Local domains](docs/screenshots/settings-domains.png) |
| _Docker status, data paths, and ServerKit connections_ | _Serve sites as `http://<slug>.test` via a shared Caddy router_ |
| ![Local domains](docs/screenshots/settings-domains.png) | ![ServerKit](docs/screenshots/settings-serverkit.png) |
| _Serve sites as `http://<slug>.test` via a shared Caddy router_ | _Browse a server's sites and push/pull or import them_ |
<!-- LOCALKIT:SHOTS:END -->

## 🎯 Features
Expand Down
24 changes: 17 additions & 7 deletions docs/README.es.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,17 +68,27 @@ npm run tauri build
| Panel Principal | Vista de Lista |
| :--------------------------------------------------------------: | :------------------------------------------------------------: |
| ![Panel Principal](screenshots/dashboard.png) | ![Vista de lista](screenshots/dashboard-list.png) |
| _Todos tus sitios de un vistazo, con insignias de estado de contenedores en vivo_ | _Una versión más densa del panel para muchos sitios_ |
| _Todos tus sitios de un vistazo — WordPress, PHP y Docker — con insignias de estado en vivo_ | _Una vista de tabla más densa para muchos sitios_ |

| Detalle del Sitio | Nuevo Sitio |
| Detalle del Sitio | Herramientas |
| :-------------------------------------------------------------: | :------------------------------------------------------------: |
| ![Detalle del sitio](screenshots/site-detail.png) | ![Nuevo sitio](screenshots/new-site.png) |
| _Credenciales, información de wp-cli, sincronización con ServerKit e historial_ | _Elige un nombre, versión de WordPress y versión de PHP_ |
| ![Detalle del sitio](screenshots/site-detail.png) | ![Herramientas](screenshots/site-tools.png) |
| _Credenciales, base de datos, información de wp-cli, snapshots y sincronización_ | _Explorador de BD Adminer, buscar-reemplazar seguro, WP\_DEBUG y editor de configuración — dentro de la app_ |

| Ajustes | Dominios Locales |
| Snapshots | Nuevo Sitio |
| :-------------------------------------------------------------: | :------------------------------------------------------------: |
| ![Snapshots](screenshots/snapshots.png) | ![Nuevo sitio](screenshots/new-site.png) |
| _Restauración en un clic; se toma uno antes de cada push, pull y borrado_ | _WordPress, PHP/Laravel o un proyecto Docker — en blanco o desde un blueprint_ |

| Importar | Ajustes |
| :-------------------------------------------------------------: | :------------------------------------------------------------: |
| ![Importar sitio remoto](screenshots/import-site.png) | ![Ajustes](screenshots/settings.png) |
| _Clona un sitio remoto de ServerKit como una copia local nueva_ | _Estado de Docker, actualizaciones, rutas de datos y valores por defecto_ |

| Dominios Locales | ServerKit |
| :--------------------------------------------------------------: | :-------------------------------------------------------------: |
| ![Ajustes](screenshots/settings.png) | ![Dominios locales](screenshots/settings-domains.png) |
| _Estado de Docker, rutas de datos y conexiones con ServerKit_ | _Sirve sitios como `http://<slug>.test` mediante un router Caddy compartido_ |
| ![Dominios locales](screenshots/settings-domains.png) | ![ServerKit](screenshots/settings-serverkit.png) |
| _Sirve sitios como `http://<slug>.test` mediante un router Caddy compartido_ | _Explora los sitios de un servidor y haz push/pull o impórtalos_ |
<!-- LOCALKIT:SHOTS:END -->

## 🎯 Funcionalidades
Expand Down
24 changes: 17 additions & 7 deletions docs/README.pt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,17 +68,27 @@ npm run tauri build
| Painel | Visualização em Lista |
| :--------------------------------------------------------------: | :------------------------------------------------------------: |
| ![Painel](screenshots/dashboard.png) | ![Visualização em lista](screenshots/dashboard-list.png) |
| _Todos os seus sites num relance, com selos de status dos contêineres ao vivo_ | _Uma versão mais densa do painel para muitos sites_ |
| _Todos os seus sites num relance — WordPress, PHP e Docker — com selos de status ao vivo_ | _Uma visão em tabela mais densa para muitos sites_ |

| Detalhe do Site | Novo Site |
| Detalhe do Site | Ferramentas |
| :-------------------------------------------------------------: | :------------------------------------------------------------: |
| ![Detalhe do site](screenshots/site-detail.png) | ![Novo site](screenshots/new-site.png) |
| _Credenciais, informações do wp-cli, sincronização com ServerKit e histórico_ | _Escolha um nome, a versão do WordPress e a versão do PHP_ |
| ![Detalhe do site](screenshots/site-detail.png) | ![Ferramentas](screenshots/site-tools.png) |
| _Credenciais, banco de dados, informações do wp-cli, snapshots e sincronização_ | _Navegador de BD Adminer, busca-substituição segura, WP\_DEBUG e editor de configuração — no app_ |

| Configurações | Domínios Locais |
| Snapshots | Novo Site |
| :-------------------------------------------------------------: | :------------------------------------------------------------: |
| ![Snapshots](screenshots/snapshots.png) | ![Novo site](screenshots/new-site.png) |
| _Restauração num clique; um é feito antes de cada push, pull e exclusão_ | _WordPress, PHP/Laravel ou um projeto Docker — em branco ou a partir de um blueprint_ |

| Importar | Configurações |
| :-------------------------------------------------------------: | :------------------------------------------------------------: |
| ![Importar site remoto](screenshots/import-site.png) | ![Configurações](screenshots/settings.png) |
| _Clone um site remoto do ServerKit como uma nova cópia local_ | _Status do Docker, atualizações, caminhos de dados e padrões_ |

| Domínios Locais | ServerKit |
| :--------------------------------------------------------------: | :-------------------------------------------------------------: |
| ![Configurações](screenshots/settings.png) | ![Domínios locais](screenshots/settings-domains.png) |
| _Status do Docker, caminhos de dados e conexões com ServerKit_ | _Sirva sites como `http://<slug>.test` através de um roteador Caddy compartilhado_ |
| ![Domínios locais](screenshots/settings-domains.png) | ![ServerKit](screenshots/settings-serverkit.png) |
| _Sirva sites como `http://<slug>.test` através de um roteador Caddy compartilhado_ | _Navegue pelos sites de um servidor e faça push/pull ou importe-os_ |
<!-- LOCALKIT:SHOTS:END -->

## 🎯 Funcionalidades
Expand Down
24 changes: 17 additions & 7 deletions docs/README.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,17 +68,27 @@ npm run tauri build
| 仪表盘 | 列表视图 |
| :--------------------------------------------------------------: | :------------------------------------------------------------: |
| ![仪表盘](screenshots/dashboard.png) | ![列表视图](screenshots/dashboard-list.png) |
| _一览所有站点，容器状态徽标实时更新_ | _站点较多时更紧凑的仪表盘视图_ |
| _一览所有站点 —— WordPress、PHP 与 Docker —— 状态徽标实时更新_ | _站点较多时更紧凑的表格视图_ |

| 站点详情 | 新建站点 |
| 站点详情 | 工具 |
| :-------------------------------------------------------------: | :------------------------------------------------------------: |
| ![站点详情](screenshots/site-detail.png) | ![新建站点](screenshots/new-site.png) |
| _凭据、wp-cli 信息、ServerKit 同步与历史记录_ | _选择名称、WordPress 版本和 PHP 版本_ |
| ![站点详情](screenshots/site-detail.png) | ![工具](screenshots/site-tools.png) |
| _凭据、数据库、wp-cli 信息、快照与同步_ | _Adminer 数据库浏览器、安全的搜索替换、WP\_DEBUG 与配置编辑器 —— 全部内置_ |

| 设置 | 本地域名 |
| 快照 | 新建站点 |
| :-------------------------------------------------------------: | :------------------------------------------------------------: |
| ![快照](screenshots/snapshots.png) | ![新建站点](screenshots/new-site.png) |
| _一键还原；每次推送、拉取和删除前都会自动生成一个_ | _WordPress、PHP/Laravel 或 Docker 项目 —— 空白或基于蓝图_ |

| 导入 | 设置 |
| :-------------------------------------------------------------: | :------------------------------------------------------------: |
| ![导入远程站点](screenshots/import-site.png) | ![设置](screenshots/settings.png) |
| _将远程 ServerKit 站点克隆为一个全新的本地副本_ | _Docker 状态、更新、数据路径与默认设置_ |

| 本地域名 | ServerKit |
| :--------------------------------------------------------------: | :-------------------------------------------------------------: |
| ![设置](screenshots/settings.png) | ![本地域名](screenshots/settings-domains.png) |
| _Docker 状态、数据路径和 ServerKit 连接_ | _通过共享 Caddy 路由器以 `http://<slug>.test` 提供站点访问_ |
| ![本地域名](screenshots/settings-domains.png) | ![ServerKit](screenshots/settings-serverkit.png) |
| _通过共享 Caddy 路由器以 `http://<slug>.test` 提供站点访问_ | _浏览服务器上的站点并进行推送/拉取或导入_ |
<!-- LOCALKIT:SHOTS:END -->

## 🎯 功能特性
Expand Down
79 changes: 79 additions & 0 deletions docs/plans/27_visual-identity-pass.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
# 27 — Visual identity pass: site tiles, action icons, micro-polish

Status: ✅ shipped

Frontend-only. No Rust, no migrations. Two icon dependencies, per the
maintainer's direction (the Faro pattern): `lucide-react` for UI chrome and
`@iconify/react/offline` + a committed, generated subset of
`@iconify-json/simple-icons` for real brand marks — zero icon network calls.

## Motivation

The UI is structurally complete but visually anonymous: every site is a block
of text, every action is a gray text pill, and the sidebar is two text links.
Competing tools (LocalWP, Herd, DevKinsta) feel "alive" mostly through one
device — each site is a recognizable *thing* with a face and a glanceable
running state. LocalKit has the information architecture; this pass gives it
the identity layer.

## Design

The existing token system (navy-tinted zinc scale, violet `#6C5CE7`, Inter +
JetBrains Mono, radius scale) is good and stays untouched. This is a pass
*within* the system, and the boldness is spent in exactly one place:

**Signature: deterministic monogram tiles.** `SiteTile` renders a rounded
square with the site's initials, tinted by a hue hashed from the site *slug*
(FNV-1a → 0–360). The color is therefore stable across grid, list, detail,
restarts and machines — a site's tile is its face. The tile doubles as a
status light:

- **up** (running/degraded): saturated gradient + soft same-hue glow
- **down** (stopped/error): same hue, desaturated and dim — identity
persists while the site sleeps
- **creating**: dim + pulse

Everything else stays quiet and disciplined:

- **Icons on actions.** `components/icons.tsx` becomes thin lucide-react
wrappers keeping the old names and `h-4 w-4` default (the hand-rolled set
was feather-derived, so nothing shifts visually): play, stop,
arrow-up-right (open), wrench (details), duplicate (clone), trash,
bookmark (blueprint), camera (snapshots), database, key, file-text (logs),
sync, search, bug, layers (sites nav). Buttons keep their labels — icons
lead, text stays for discoverability.
- **Real brand marks.** `scripts/gen-brand-icons.mjs` (Faro plan-14 pattern)
bakes a curated simple-icons subset (wordpress, docker, php, laravel,
mariadb) into `src/lib/brandIconData.ts`; `lib/brandIcons.tsx` renders
them offline. `KindBadge` shows the actual logo — and gains a distinct
PHP variant (it previously mislabeled `php` sites as "WP").
- **Hero action.** "Open" on an up site becomes a violet-tinted button —
the one thing you most likely came to do.
- **Section headers** on SiteDetail + the Tools/Snapshots/Sync panels get a
small leading icon via a shared `SectionTitle`.
- **Sidebar**: layers icon on Sites plus a live running-count pill;
Terminal keeps its icon.
- **Empty state**: three overlapping tiles (one violet, glowing) as a pure-CSS
illustration + invitation copy.
- **Micro-motion**: card hover lift + border tint, transitions on buttons.
All transform motion gated behind `motion-reduce`.

Out of scope, deliberately: Settings modal headers (secondary surface), light
theme, any palette/typography change, dialogs.

## Phases

1. `SiteTile` + `SectionTitle` + icon set additions.
2. Dashboard (grid cards, list rows, toolbar, empty state) + Sidebar.
3. SiteDetail header + section headers; Snapshots/Push/Tools panel headers.
4. Regenerate `docs/screenshots/` via `npm run shots`; verify `npm run build`
+ `npm run test`; mark shipped.

## Verification

- `npm run build`, `npm run test` green; `cargo check` untouched by design.
- `npm run shots` — visual review of dashboard, dashboard-list, site-detail,
site-tools, snapshots captures; screenshots are the artifact of record.
- Screenshot script contract unchanged: it clicks by `textContent.trim()`
equality — icons are `aria-hidden` SVGs and contribute no text, so
`clickText`/`shotElement` selectors keep matching.
Loading
Loading