hanna/fabrica

feat(web): inline SVG icon set and drop the footer

04276f5 · hanna committed on 2026-07-25

Vendor Lucide (ISC) UI glyphs and Simple Icons (CC0) brand marks as an
inline-SVG `icons` module so no page makes a network request (§9.5), and
replace the emoji glyphs in the top bar, drawer, and tree listing. Remove
the page footer per operator preference.

The full glyph set is vendored up front; a temporary `allow(dead_code)`
covers the variants the profile, explore, and settings views wire in next.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Signed by hannaSSH key fingerprint: SHA256:4g9cWhkAAw8gwqhJUcVbSnGEvdGwklW+1Aa/fMUu59k

assets/base.css +33 −12

config.toml +73 −0

crates/web/src/icons.rs +137 −0

crates/web/src/layout.rs +14 −22

crates/web/src/lib.rs +1 −0

crates/web/src/repo.rs +7 −6

data/fabrica/secret +1 −1

data/host_key +7 −0

   font-family: var(--fb-font-mono);
+}
+/* Inline icons inherit colour and scale to the current font size. */
+.icon {
+  width: 1em;
+  height: 1em;
+  flex: none;
+  vertical-align: -0.125em;
+}
 /* Accessibility: visible focus, skip link. */
 :focus-visible {
   outline: 2px solid var(--fb-accent);
 .icon-btn:hover {
   background: var(--fb-bg-inset);
+}
+.icon-btn .icon {
+  width: 1.15rem;
+  height: 1.15rem;
+}
 /* ---- Drawer (off-canvas nav) ---- */
 .drawer-backdrop {
+}
 .drawer nav a,
 .drawer .drawer-item {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  width: 100%;
   padding: 0.4rem 0.5rem;
   border-radius: var(--fb-radius);
   color: var(--fb-fg);
+  font: inherit;
+  text-align: left;
+}
+.drawer .drawer-item {
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+.drawer nav a .icon,
+.drawer .drawer-item .icon {
+  color: var(--fb-fg-muted);
+}
-.drawer nav a:hover {
+.drawer nav a:hover,
+.drawer .drawer-item:hover {
   background: var(--fb-bg-inset);
   text-decoration: none;
+}
 .tree-icon {
   width: 1.5rem;
   text-align: center;
+  color: var(--fb-fg-muted);
+}
+.tree-icon .icon {
+  vertical-align: -0.15em;
+}
 .blob-header {
+  }
+}
-/* ---- Footer ---- */
-.footer {
-  max-width: 76rem;
-  margin: 2rem auto 1rem;
-  padding: 1rem var(--fb-gap) 0;
-  border-top: 1px solid var(--fb-border);
-  color: var(--fb-fg-muted);
-  font-size: 0.85em;
-}
 /* ---- Responsive: single breakpoint at 48rem ---- */
 @media (max-width: 48rem) {
   .topbar .tabs {

+[instance]
+name = "fabrica"
+url = "http://localhost:8080"
+description = ""
+default_branch = "main"
+allow_anonymous = true
+[server]
+address = "0.0.0.0"
+port = 8080
+behind_proxy = false
+graceful_shutdown_secs = 20
+max_body_bytes = 1048576
+[ssh]
+enabled = true
+address = "0.0.0.0"
+port = 2222
+host_key_path = "data/host_key"
+clone_host = "localhost"
+clone_port = 22
+[storage]
+data_dir = "data/fabrica"
+repo_dir = "data/repos"
+[database]
+url = "sqlite://data/fabrica.db"
+max_connections = 16
+[auth]
+session_ttl_days = 30
+token_ttl_days = 90
+invite_ttl_hours = 72
+cookie_name = "fabrica_session"
+cookie_secure = true
+argon2_m_cost = 19456
+argon2_t_cost = 2
+argon2_p_cost = 1
+[mail]
+backend = "stdout"
+from = "fabrica@localhost"
+host = ""
+port = 587
+username = ""
+encryption = "starttls"
+timeout_secs = 15
+[ui]
+theme = "dark"
+themes_dir = "data/themes"
+assets_dir = "data/assets"
+allow_theme_choice = true
+show_runs = false
+diff_context_lines = 3
+max_highlight_bytes = 1048576
+max_diff_bytes = 5242880
+tree_history_limit = 1000
+[git]
+binary = "git"
+transport_timeout_secs = 3600
+max_pack_size_bytes = 536870912
+[search]
+concurrency = 4
+timeout_secs = 10
+max_results = 200
+[log]
+level = "info"
+format = "pretty"

+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+//! Inline SVG icons.
+//!
+//! Vendored from [Lucide](https://lucide.dev) (ISC) for UI glyphs and
+//! [Simple Icons](https://simpleicons.org) (CC0) for brands, inlined so no page
+//! makes a network request. Icons inherit `currentColor` and size to `1em`.
+use maud::{Markup, PreEscaped, html};
+/// A vendored icon.
+// The full glyph set is vendored up front; the profile, explore, and settings
+// views wire in the remaining variants. Removed once every variant is consumed.
+#[allow(dead_code)]
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Icon {
+    PanelLeft,
+    House,
+    Folder,
+    File,
+    GitBranch,
+    Tag,
+    Search,
+    Copy,
+    ChevronRight,
+    Box,
+    Link,
+    User,
+    Settings,
+    LogOut,
+    Upload,
+    Plus,
+    Dashboard,
+    Compass,
+    MapPin,
+    Globe,
+    Download,
+    AtSign,
+    Github,
+    Mastodon,
+}
+impl Icon {
+    /// Whether the icon is a filled brand glyph rather than a stroked Lucide one.
+    fn brand(self) -> bool {
+        matches!(self, Icon::Github | Icon::Mastodon)
+    }
+    /// The inner SVG geometry.
+    fn geometry(self) -> &'static str {
+        match self {
+            Icon::PanelLeft => {
+                r#"<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/>"#
+            }
+            Icon::House => {
+                r#"<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>"#
+            }
+            Icon::Folder => {
+                r#"<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>"#
+            }
+            Icon::File => {
+                r#"<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/>"#
+            }
+            Icon::GitBranch => {
+                r#"<path d="M15 6a9 9 0 0 0-9 9V3"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/>"#
+            }
+            Icon::Tag => {
+                r#"<path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/>"#
+            }
+            Icon::Search => r#"<path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/>"#,
+            Icon::Copy => {
+                r#"<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>"#
+            }
+            Icon::ChevronRight => r#"<path d="m9 18 6-6-6-6"/>"#,
+            Icon::Box => {
+                r#"<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>"#
+            }
+            Icon::Link => {
+                r#"<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>"#
+            }
+            Icon::User => {
+                r#"<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>"#
+            }
+            Icon::Settings => {
+                r#"<path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/>"#
+            }
+            Icon::LogOut => {
+                r#"<path d="m16 17 5-5-5-5"/><path d="M21 12H9"/><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>"#
+            }
+            Icon::Upload => {
+                r#"<path d="M12 3v12"/><path d="m17 8-5-5-5 5"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>"#
+            }
+            Icon::Plus => r#"<path d="M5 12h14"/><path d="M12 5v14"/>"#,
+            Icon::Dashboard => {
+                r#"<rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/>"#
+            }
+            Icon::Compass => {
+                r#"<circle cx="12" cy="12" r="10"/><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"/>"#
+            }
+            Icon::MapPin => {
+                r#"<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/>"#
+            }
+            Icon::Globe => {
+                r#"<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>"#
+            }
+            Icon::Download => {
+                r#"<path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/>"#
+            }
+            Icon::AtSign => {
+                r#"<circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"/>"#
+            }
+            Icon::Github => {
+                r#"<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>"#
+            }
+            Icon::Mastodon => {
+                r#"<path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>"#
+            }
+        }
+    }
+}
+/// Render an icon inheriting `currentColor` and sized to `1em`.
+#[must_use]
+pub fn icon(name: Icon) -> Markup {
+    let brand = name.brand();
+    html! {
+        svg class="icon" viewBox="0 0 24 24" width="1em" height="1em"
+            fill=(if brand { "currentColor" } else { "none" })
+            stroke=(if brand { "none" } else { "currentColor" })
+            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            aria-hidden="true" focusable="false" {
+            (PreEscaped(name.geometry()))
+        }
+    }
+}

@@ -2,7 +2,7 @@
2	// License, v. 2.0. If a copy of the MPL was not distributed with this	2	// License, v. 2.0. If a copy of the MPL was not distributed with this
3	// file, You can obtain one at https://mozilla.org/MPL/2.0/.	3	// file, You can obtain one at https://mozilla.org/MPL/2.0/.
4		4
5	//! The page shell: `<head>`, top bar, off-canvas drawer, theme picker, footer.	5	//! The page shell: `<head>`, top bar, off-canvas drawer, theme picker.
6	//!	6	//!
7	//! Every full page is wrapped by [`page`]; htmx partials return fragments instead.	7	//! Every full page is wrapped by [`page`]; htmx partials return fragments instead.
8	//! Structure is server-rendered and works without JavaScript — the drawer is a	8	//! Structure is server-rendered and works without JavaScript — the drawer is a
@@ -13,6 +13,7 @@ use maud::{DOCTYPE, Markup, html};
13	use model::User;	13	use model::User;
14		14
15	use crate::assets::{Scheme, ThemeInfo};	15	use crate::assets::{Scheme, ThemeInfo};
		16	use crate::icons::{Icon, icon};
16		17
17	/// The per-request chrome data the shell needs.	18	/// The per-request chrome data the shell needs.
18	pub struct Chrome {	19	pub struct Chrome {
@@ -59,7 +60,6 @@ pub fn page(chrome: &Chrome, title: &str, body: Markup) -> Markup {
59	(drawer(chrome))	60	(drawer(chrome))
60	div class="drawer-backdrop" {}	61	div class="drawer-backdrop" {}
61	main id="main" class="page" { (body) }	62	main id="main" class="page" { (body) }
62	(footer(chrome))
63	}	63	}
64	}	64	}
65	}	65	}
@@ -70,10 +70,11 @@ fn topbar(chrome: &Chrome) -> Markup {
70	html! {	70	html! {
71	header class="topbar" {	71	header class="topbar" {
72	button class="icon-btn" type="button" data-drawer-toggle aria-label="Menu"	72	button class="icon-btn" type="button" data-drawer-toggle aria-label="Menu"
73	aria-controls="drawer" aria-expanded="false" { "☰" }	73	aria-controls="drawer" aria-expanded="false" { (icon(Icon::PanelLeft)) }
74	span class="slug" { a href="/" { (chrome.instance_name) } }	74	span class="slug" { a href="/" { (chrome.instance_name) } }
75	nav class="tabs" aria-label="Primary" {}	75	nav class="tabs" aria-label="Primary" {}
76	a class="icon-btn" href="/" aria-label="Home" { "⌂" }	76	a class="icon-btn" href="/search" aria-label="Search" { (icon(Icon::Search)) }
		77	a class="icon-btn" href="/" aria-label="Home" { (icon(Icon::House)) }
77	}	78	}
78	}	79	}
79	}	80	}
@@ -84,9 +85,12 @@ fn drawer(chrome: &Chrome) -> Markup {
84	aside id="drawer" class="drawer" aria-label="Navigation" {	85	aside id="drawer" class="drawer" aria-label="Navigation" {
85	h2 { (chrome.instance_name) }	86	h2 { (chrome.instance_name) }
86	nav {	87	nav {
87	a href="/" { "Home" }
88	@if let Some(user) = &chrome.user {	88	@if let Some(user) = &chrome.user {
89	a href={ "/" (user.username) } { "Your repositories" }	89	a href="/" { (icon(Icon::Dashboard)) span { "Dashboard" } }
		90	a href="/explore" { (icon(Icon::Compass)) span { "Explore" } }
		91	a href={ "/" (user.username) } { (icon(Icon::User)) span { "Your profile" } }
		92	} @else {
		93	a href="/explore" { (icon(Icon::Compass)) span { "Explore" } }
90	}	94	}
91	}	95	}
92	hr;	96	hr;
@@ -96,16 +100,15 @@ fn drawer(chrome: &Chrome) -> Markup {
96	}	100	}
97	nav {	101	nav {
98	@if chrome.user.is_some() {	102	@if chrome.user.is_some() {
99	a href="/settings" { "Settings" }	103	a href="/settings" { (icon(Icon::Settings)) span { "Settings" } }
100	form method="post" action="/logout" {	104	form method="post" action="/logout" {
101	input type="hidden" name="_csrf" value=(chrome.csrf);	105	input type="hidden" name="_csrf" value=(chrome.csrf);
102	button class="drawer-item" type="submit"	106	button class="drawer-item" type="submit" {
103	style="width:100%;text-align:left;border:none;background:none;color:inherit;cursor:pointer" {	107	(icon(Icon::LogOut)) span { "Log out" }
104	"Log out"
105	}	108	}
106	}	109	}
107	} @else {	110	} @else {
108	a href="/login" { "Sign in" }	111	a href="/login" { (icon(Icon::User)) span { "Sign in" } }
109	}	112	}
110	}	113	}
111	}	114	}
@@ -131,14 +134,3 @@ fn theme_picker(chrome: &Chrome) -> Markup {
131	}	134	}
132	}	135	}
133	}	136	}
134
135	/// The page footer.
136	fn footer(chrome: &Chrome) -> Markup {
137	html! {
138	footer class="footer" {
139	span { (chrome.instance_name) }
140	" · "
141	a href="/version" { "version" }
142	}
143	}
144	}

 mod diff;
 mod error;
 mod git_http;
+mod icons;
 mod layout;
 mod markdown;
 mod pages;

@@ -24,6 +24,7 @@ use serde::Deserialize;
24	use crate::AppState;	24	use crate::AppState;
25	use crate::diff::{self, RenderedFile};	25	use crate::diff::{self, RenderedFile};
26	use crate::error::{AppError, AppResult};	26	use crate::error::{AppError, AppResult};
		27	use crate::icons::{Icon, icon};
27	use crate::layout::page;	28	use crate::layout::page;
28	use crate::markdown;	29	use crate::markdown;
29	use crate::pages::build_chrome;	30	use crate::pages::build_chrome;
@@ -1096,7 +1097,7 @@ fn tree_table(
1096	tbody {	1097	tbody {
1097	@for entry in entries {	1098	@for entry in entries {
1098	tr {	1099	tr {
1099	td class="tree-icon" { (entry_icon(entry.kind)) }	1100	td class="tree-icon" { (icon(entry_icon(entry.kind))) }
1100	td { a href=(href(&entry.name, entry.kind)) { (entry.name) } }	1101	td { a href=(href(&entry.name, entry.kind)) { (entry.name) } }
1101	}	1102	}
1102	}	1103	}
@@ -1106,12 +1107,12 @@ fn tree_table(
1106	}	1107	}
1107		1108
1108	/// An icon glyph for a tree entry kind.	1109	/// An icon glyph for a tree entry kind.
1109	fn entry_icon(kind: git::EntryKind) -> &'static str {	1110	fn entry_icon(kind: git::EntryKind) -> Icon {
1110	match kind {	1111	match kind {
1111	git::EntryKind::Directory => "📁",	1112	git::EntryKind::Directory => Icon::Folder,
1112	git::EntryKind::Submodule => "📦",	1113	git::EntryKind::Submodule => Icon::Box,
1113	git::EntryKind::Symlink => "🔗",	1114	git::EntryKind::Symlink => Icon::Link,
1114	git::EntryKind::File => "📄",	1115	git::EntryKind::File => Icon::File,
1115	}	1116	}
1116	}	1117	}
1117		1118

@@ -0,0 +1 @@
0	\ No newline at end of file	1	3cIBhLUwUan-vB0uok4Ajb2uEJOzapkIB9BwdLB9lXA

+-----BEGIN OPENSSH PRIVATE KEY-----
+b3BlbnNzaC1rZXktdjEAAAAABG5vbmUAAAAEbm9uZQAAAAAAAAABAAAAMwAAAAtzc2gtZW
+QyNTUxOQAAACDtfdqbDHDx719TofjNfw7zjd2rZtQAace+caQQ1fYOPgAAAIgq2mooKtpq
+KAAAAAtzc2gtZWQyNTUxOQAAACDtfdqbDHDx719TofjNfw7zjd2rZtQAace+caQQ1fYOPg
+AAAEDpF5CAVCkyKaFFhvhp2OLdmWtIH33H8XFaS8GhVscL5u192psMcPHvX1Oh+M1/DvON
+atm1ABpx75xpBDV9g4+AAAAAAECAwQF
+-----END OPENSSH PRIVATE KEY-----