diff --git a/frontend/src/lib/views/Home.svelte b/frontend/src/lib/views/Home.svelte
new file mode 100644
index 0000000..77268c3
--- /dev/null
+++ b/frontend/src/lib/views/Home.svelte
@@ -0,0 +1,315 @@
+
+
+
+
Settings
+
Wi-Fi, lock screen, updates, keybinds.
+
+
+
+
+
+
+ {#if hits.length > 0}
+
+ {#each hits as hit (`${hit.page}:${hit.tab ?? ""}:${hit.label}`)}
+
+ {/each}
+
+ {:else}
+
+
+
+
+
+
+
+ {#each tiles as tile (tile.id + (tile.tab ?? ""))}
+
+ {/each}
+
+ {/if}
+
+
+
diff --git a/frontend/src/lib/views/InputHub.svelte b/frontend/src/lib/views/InputHub.svelte
new file mode 100644
index 0000000..e9a7664
--- /dev/null
+++ b/frontend/src/lib/views/InputHub.svelte
@@ -0,0 +1,16 @@
+
+
+
diff --git a/frontend/src/lib/views/InputMethod.svelte b/frontend/src/lib/views/InputMethod.svelte
new file mode 100644
index 0000000..c485eb5
--- /dev/null
+++ b/frontend/src/lib/views/InputMethod.svelte
@@ -0,0 +1,166 @@
+
+
+
+
+ {#if !st}
+
+ {:else}
+
+ Enable fcitx5 for this session
+
+
+
+
+ {/if}
+ {#if message}{/if}
+
+
+
+ {#if st}
+
+ {#each st.packages as p (p.name)}
+ - {p.name}{p.installed ? "" : " (missing)"}
+ {/each}
+
+ {/if}
+ {#if missing.length}
+
+ {/if}
+
+
+
+
+
diff --git a/frontend/src/lib/views/Keybinds.svelte b/frontend/src/lib/views/Keybinds.svelte
index dc710cf..07b7b70 100644
--- a/frontend/src/lib/views/Keybinds.svelte
+++ b/frontend/src/lib/views/Keybinds.svelte
@@ -9,7 +9,7 @@
import SaveButton from "$lib/components/SaveButton.svelte";
import Switch from "$lib/components/Switch.svelte";
- // Mirrors src-tauri/src/commands/keybinds.rs's `Bind` — `action`/`key`/
+ // Mirrors src-tauri/src/commands/keybinds.rs's `Bind` - `action`/`key`/
// `mods` are the only fields every bind has; everything else (`command`,
// `direction`, `workspace`, `options`, breadhelp's `label`/`category`/
// `demo_cmd`, ...) round-trips through serde's `#[serde(flatten)]` as
@@ -35,7 +35,7 @@
}
// Every action actually seen in real binds.json files (BOS's shipped
- // flat schema and this app's own dev MultiLayout config) — an `action`
+ // flat schema and this app's own dev MultiLayout config) - an `action`
// dropdown beats free-typing a dispatcher name from memory. "Custom…"
// keeps anything not in this list reachable without blocking on it.
const KNOWN_ACTIONS = [
@@ -56,7 +56,7 @@
] as const;
// The editable, per-row UI state a bind gets flattened into on load and
- // reconstructed back into a `Bind` on save — same trade-off the GTK
+ // reconstructed back into a `Bind` on save - same trade-off the GTK
// version made with individual `Entry` widgets per field.
interface EditRow {
action: string;
@@ -64,7 +64,7 @@
mods: string;
// Whether `mods` has been explicitly set (present in the loaded JSON,
// or touched by the user since). `None`/absent means "fall back to
- // default_mods"; `Some([])` — an explicitly *empty* mods list — means
+ // default_mods"; `Some([])` - an explicitly *empty* mods list - means
// "use no modifiers at all, even though default_mods exists" (real
// BOS binds rely on this for e.g. bare media keys). Collapsing both
// cases to "omit when empty" would silently turn an explicit
@@ -77,12 +77,123 @@
// key they don't know about (label/category/demo_cmd, or an action
// shape this editor has no dedicated fields for) survives untouched.
extraValue: Record
;
- // Raw-JSON view of `extraValue`, kept in sync both directions —
+ // Raw-JSON view of `extraValue`, kept in sync both directions -
// only actually shown when `advancedOpen` is true, or for an action
// not in `KNOWN_ACTIONS` (nothing dedicated to show instead).
extraText: string;
extraError: boolean;
advancedOpen: boolean;
+ capturing: boolean;
+ }
+
+ const ACTION_LABELS: Record = {
+ exec: "Run command",
+ close: "Close window",
+ fullscreen: "Fullscreen",
+ float: "Float window",
+ pseudo: "Fake fullscreen",
+ resize: "Resize",
+ focus: "Go to workspace",
+ focus_last: "Last workspace",
+ move: "Move window to workspace",
+ move_dir: "Move window",
+ resize_dir: "Resize window",
+ layout: "Layout",
+ drag: "Mouse drag",
+ exit: "Exit Hyprland",
+ };
+
+ const KEY_LABELS: Record = {
+ RETURN: "Enter",
+ SPACE: "Space",
+ ESCAPE: "Esc",
+ BACKSPACE: "Backspace",
+ TAB: "Tab",
+ SUPER: "Super",
+ CTRL: "Ctrl",
+ ALT: "Alt",
+ SHIFT: "Shift",
+ XF86AudioRaiseVolume: "Vol +",
+ XF86AudioLowerVolume: "Vol -",
+ XF86AudioMute: "Mute",
+ XF86AudioMicMute: "Mic mute",
+ XF86MonBrightnessUp: "Bright +",
+ XF86MonBrightnessDown: "Bright -",
+ XF86AudioNext: "Next",
+ XF86AudioPrev: "Prev",
+ XF86AudioPlay: "Play",
+ Print: "Print",
+ };
+
+ const CODE_TO_HYPR: Record = {
+ Space: "SPACE",
+ Enter: "RETURN",
+ Escape: "ESCAPE",
+ Backspace: "BACKSPACE",
+ Tab: "TAB",
+ AudioVolumeUp: "XF86AudioRaiseVolume",
+ AudioVolumeDown: "XF86AudioLowerVolume",
+ AudioVolumeMute: "XF86AudioMute",
+ AudioMicMute: "XF86AudioMicMute",
+ BrightnessUp: "XF86MonBrightnessUp",
+ BrightnessDown: "XF86MonBrightnessDown",
+ MediaTrackNext: "XF86AudioNext",
+ MediaTrackPrevious: "XF86AudioPrev",
+ MediaPlayPause: "XF86AudioPlay",
+ PrintScreen: "Print",
+ };
+
+ function keyLabel(k: string): string {
+ return KEY_LABELS[k] ?? k;
+ }
+
+ function bindTitle(row: EditRow): string {
+ if (row.action === "exec") {
+ const cmd = String(row.extraValue.command ?? "");
+ if (cmd.includes("set-volume") && cmd.includes("+")) return "Volume up";
+ if (cmd.includes("set-volume") && cmd.includes("-")) return "Volume down";
+ if (cmd.includes("set-mute") && cmd.includes("SINK")) return "Mute";
+ if (cmd.includes("set-mute") && cmd.includes("SOURCE")) return "Mute mic";
+ if (cmd.includes("brightnessctl") && cmd.includes("+")) return "Brightness up";
+ if (cmd.includes("brightnessctl") && cmd.includes("-")) return "Brightness down";
+ if (cmd.includes("playerctl next")) return "Next track";
+ if (cmd.includes("playerctl previous")) return "Previous track";
+ if (cmd.includes("playerctl play-pause")) return "Play/pause";
+ if (cmd) return cmd.split(/\s+/)[0].split("/").pop() ?? "Command";
+ }
+ return ACTION_LABELS[row.action] ?? row.action;
+ }
+
+ function keyChips(row: EditRow): string[] {
+ const mods = textToMods(row.mods);
+ const key = row.key.trim();
+ return [...mods, key].filter(Boolean).map(keyLabel);
+ }
+
+ function hyprFromEvent(e: KeyboardEvent): { mods: string[]; key: string } | null {
+ if (["Shift", "Control", "Alt", "Meta"].includes(e.key)) return null;
+ const mods: string[] = [];
+ if (e.metaKey) mods.push("SUPER");
+ if (e.ctrlKey) mods.push("CTRL");
+ if (e.altKey) mods.push("ALT");
+ if (e.shiftKey) mods.push("SHIFT");
+ let key = CODE_TO_HYPR[e.code] ?? CODE_TO_HYPR[e.key];
+ if (!key) {
+ if (e.code.startsWith("Key") && e.code.length === 4) key = e.code.slice(3);
+ else if (e.code.startsWith("Digit")) key = e.code.slice(5);
+ else if (e.code.startsWith("F") && /^F\d+$/.test(e.code)) key = e.code;
+ else key = e.key.length === 1 ? e.key.toUpperCase() : e.key;
+ }
+ return { mods, key };
+ }
+
+ function allRows(): EditRow[] {
+ return [...globalsRows, ...commonRows, ...bindingsRows, ...Object.values(layoutRows).flat()];
+ }
+
+ function beginCapture(row: EditRow) {
+ for (const r of allRows()) r.capturing = false;
+ row.capturing = true;
}
function syncExtraText(row: EditRow) {
@@ -114,7 +225,7 @@
}
// Hyprland workspace refs mix bare integers ("1") and relative tokens
- // ("e+1", "e-1") in the same field — keep whichever shape the user typed
+ // ("e+1", "e-1") in the same field - keep whichever shape the user typed
// instead of forcing everything through one type.
function parseWorkspaceValue(s: string): string | number | undefined {
const trimmed = s.trim();
@@ -143,13 +254,14 @@
extraText: "",
extraError: false,
advancedOpen: false,
+ capturing: false,
};
syncExtraText(row);
return row;
}
function rowToBind(r: EditRow): Bind {
- // `drag` binds are only meaningful as a mouse bind — there's no
+ // `drag` binds are only meaningful as a mouse bind - there's no
// dedicated field for `options.mouse` (nothing to configure, it's
// always true), so pin it here rather than exposing a checkbox
// whose only correct state is "on".
@@ -193,6 +305,7 @@
extraText: "",
extraError: false,
advancedOpen: false,
+ capturing: false,
};
}
@@ -208,13 +321,32 @@
let newLayoutName = $state("");
let loadError = $state("");
- onMount(async () => {
+ onMount(() => {
+ const onKey = (e: KeyboardEvent) => {
+ const row = allRows().find((r) => r.capturing);
+ if (!row) return;
+ const mapped = hyprFromEvent(e);
+ if (!mapped) return;
+ e.preventDefault();
+ row.mods = mapped.mods.join(", ");
+ row.modsTouched = true;
+ row.key = mapped.key;
+ row.capturing = false;
+ };
+ window.addEventListener("keydown", onKey);
+ void loadKeybinds();
+ // Register cleanup synchronously so Svelte types the onMount
+ // callback as returning a function (not a Promise-of-function).
+ return () => window.removeEventListener("keydown", onKey);
+ });
+
+ async function loadKeybinds() {
try {
const p = await invoke("get_keybinds");
kind = p.kind;
// Rust's `#[serde(skip_serializing_if = ...)]` on every one of
// these fields means an empty one is OMITTED from the JSON
- // entirely, not sent as `[]`/`{}`/`""` — every field here needs
+ // entirely, not sent as `[]`/`{}`/`""` - every field here needs
// a `??` fallback, not just the ones that are "usually" empty.
activeLayout = p.file.active_layout ?? "";
defaultMods = modsToText(p.file.default_mods ?? []);
@@ -229,7 +361,7 @@
} catch (e) {
loadError = String(e);
}
- });
+ }
function addLayout() {
const name = newLayoutName.trim();
@@ -248,7 +380,7 @@
// A row whose "extra" column currently holds text that doesn't parse as
// JSON keeps its *last successfully parsed* value in `extraValue` (see
// `onExtraInput`) rather than losing it on every keystroke while the
- // user is mid-edit — but that means saving while such a row is still
+ // user is mid-edit - but that means saving while such a row is still
// showing invalid/incomplete text would silently write that stale (or,
// for a brand new row, empty) value instead of what's actually on
// screen. Block save entirely until every row's extra JSON is valid, so
@@ -349,7 +481,7 @@
oninput={(e) => setExtra(row, "layout", e.currentTarget.value)}
/>
{:else if row.action === "drag"}
-
+
{:else if row.action === "close" || row.action === "fullscreen" || row.action === "float" || row.action === "pseudo" || row.action === "resize" || row.action === "focus_last" || row.action === "exit"}
{:else}
@@ -375,30 +507,19 @@
{#each rows as row, i (i)}
- (row.modsTouched = true)}
- />
-
-
- {#if !KNOWN_ACTIONS.includes(row.action as (typeof KNOWN_ACTIONS)[number])}
-
- {/if}
+ {bindTitle(row)}
+
@@ -436,7 +557,7 @@
{:else if kind === "flat"}
@@ -453,7 +574,7 @@
{:else}
{#if layoutOrder.length > 0}
@@ -512,9 +633,13 @@
display: flex;
flex-direction: column;
gap: var(--space-xs, 4px);
- background-color: var(--surface);
- border-radius: var(--radius-secondary, 6px);
- padding: var(--space-sm, 8px) var(--space-md, 12px);
+ padding: 10px 2px;
+ border-top: 1px solid var(--line);
+ }
+
+ .bind-card:first-child {
+ border-top: none;
+ padding-top: 0;
}
.bind-top,
@@ -525,6 +650,34 @@
flex-wrap: wrap;
}
+ .what {
+ flex: 1;
+ min-width: 12ch;
+ }
+
+ .capture {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ background: color-mix(in srgb, var(--fg) 6%, transparent);
+ border: 1px solid var(--line);
+ border-radius: 10px;
+ padding: 6px 10px;
+ color: inherit;
+ cursor: pointer;
+ min-height: 32px;
+ }
+
+ .capture.listening {
+ border-color: var(--accent);
+ color: var(--accent);
+ }
+
+ .plus {
+ opacity: 0.4;
+ padding: 0 1px;
+ }
+
.bind-card input,
.bind-card select {
background-color: var(--bg);
@@ -544,26 +697,6 @@
border-color: var(--red);
}
- .mods {
- width: 14ch;
- flex-shrink: 0;
- }
-
- .key {
- width: 9ch;
- flex-shrink: 0;
- }
-
- .action-select {
- width: 11ch;
- flex-shrink: 0;
- }
-
- .action-custom {
- width: 11ch;
- flex-shrink: 0;
- }
-
.extra-wide {
flex: 1;
min-width: 16ch;
diff --git a/frontend/src/lib/views/Network.svelte b/frontend/src/lib/views/Network.svelte
index 0a8e788..b8e2f1b 100644
--- a/frontend/src/lib/views/Network.svelte
+++ b/frontend/src/lib/views/Network.svelte
@@ -3,9 +3,8 @@
import { invoke } from "@tauri-apps/api/core";
import ViewScaffold from "$lib/components/ViewScaffold.svelte";
import Group from "$lib/components/Group.svelte";
- import Row from "$lib/components/Row.svelte";
+ import SwitchField from "$lib/components/SwitchField.svelte";
import InfoRow from "$lib/components/InfoRow.svelte";
- import Hint from "$lib/components/Hint.svelte";
import Wifi from "@lucide/svelte/icons/wifi";
import WifiOff from "@lucide/svelte/icons/wifi-off";
import Lock from "@lucide/svelte/icons/lock";
@@ -26,12 +25,6 @@
let pendingSsid = $state(null);
let password = $state("");
- // The backend reports the first `nmcli`-visible device of TYPE=ethernet,
- // which on a machine running containers/VMs can be a virtual interface
- // (docker/podman veth pairs, libvirt bridges, VPN tuns) rather than a
- // real NIC — nmcli doesn't distinguish these from physical ethernet.
- // Names like "vethYCF3ZA: unmanaged" are meaningless to a non-technical
- // user, so hide the card rather than show raw interface jargon.
const VIRTUAL_IFACE_PREFIXES = ["veth", "docker", "br-", "virbr", "vnet", "tun", "tap", "vmnet", "podman"];
const ETHERNET_STATE_LABELS: Record = {
connected: "Connected",
@@ -47,11 +40,14 @@
if (!iface || VIRTUAL_IFACE_PREFIXES.some((prefix) => iface.startsWith(prefix))) return null;
return ETHERNET_STATE_LABELS[rawState ?? ""] ?? "Not connected";
});
+ let activeNet = $derived(networks?.find((n) => n.active) ?? null);
+ let nearby = $derived(networks?.filter((n) => !n.active) ?? []);
onMount(async () => {
const info = await invoke<{ radio_enabled: boolean; ethernet: string | null }>("get_network_info");
radioEnabled = info.radio_enabled;
ethernet = info.ethernet;
+ if (info.radio_enabled) await scan();
});
async function toggleRadio(enabled: boolean) {
@@ -61,10 +57,12 @@
async function scan() {
scanning = true;
- status = "Scanning…";
- networks = await invoke("scan_wifi");
- status = `Found ${networks.length} network(s)`;
- scanning = false;
+ try {
+ networks = await invoke("scan_wifi");
+ } finally {
+ scanning = false;
+ status = "";
+ }
}
async function connect(ssid: string, secured: boolean, known: boolean) {
@@ -76,8 +74,9 @@
try {
await invoke("connect_wifi", { ssid, password: null });
status = `Connected to ${ssid}`;
+ await scan();
} catch (e) {
- status = `Failed to connect to ${ssid}: ${e}`;
+ status = `Failed: ${e}`;
}
}
@@ -90,54 +89,76 @@
try {
await invoke("connect_wifi", { ssid, password: pw });
status = `Connected to ${ssid}`;
+ await scan();
} catch {
- status = `Failed to connect to ${ssid}: wrong password?`;
+ status = "Wrong password?";
}
}
- function signalLabel(signal: number): string {
- return `${Math.min(100, Math.max(0, signal))}%`;
+ function bars(signal: number): number {
+ if (signal >= 75) return 4;
+ if (signal >= 50) return 3;
+ if (signal >= 25) return 2;
+ return 1;
}
-
-
-
-
-
+
+
+ radioEnabled, (v) => toggleRadio(v)} />
+ {#if ethernetLabel}
+
+ {/if}
- {#if ethernetLabel}
-
-
+ {#if activeNet}
+
+
+
+ {#each [1, 2, 3, 4] as n (n)}
+ = n}>
+ {/each}
+
+
+ {activeNet.ssid}
+ {activeNet.secured ? "Secured" : "Open"} · {activeNet.signal}%
+
+
Connected
+
- {#if networks === null}
+ {#if scanning && networks === null}
-
- Not scanned yet
- Press Scan to see nearby networks.
+
+ Scanning…
- {:else if networks.length === 0}
+ {:else if networks === null}
-
+
+ No scan yet
+
+ {:else if nearby.length === 0 && !activeNet}
+
+
No networks found
- Try Scan again, or check Wi-Fi radio is on.
{:else}
- {#each networks as net (net.ssid)}
-
-
{net.ssid}{net.active ? " (connected)" : ""}
+ {#each nearby as net (net.ssid)}
+
+
+ {#each [1, 2, 3, 4] as n (n)}
+ = n}>
+ {/each}
+
+
+ {net.ssid}
+ {net.known ? "Saved" : net.secured ? "Secured" : "Open"}
+
{#if net.secured}
{/if}
-
{signalLabel(net.signal)}
- {#if !net.active}
-
- {/if}
+
{/each}
{/if}
@@ -145,52 +166,28 @@
{#if pendingSsid}
-
-
+
+
{/if}
{#if status}
{status}
{/if}
-
-
+
-
-
+
+
diff --git a/frontend/src/lib/views/NetworkHub.svelte b/frontend/src/lib/views/NetworkHub.svelte
new file mode 100644
index 0000000..da2b0fd
--- /dev/null
+++ b/frontend/src/lib/views/NetworkHub.svelte
@@ -0,0 +1,16 @@
+
+
+
diff --git a/frontend/src/lib/views/NightLight.svelte b/frontend/src/lib/views/NightLight.svelte
new file mode 100644
index 0000000..8f07737
--- /dev/null
+++ b/frontend/src/lib/views/NightLight.svelte
@@ -0,0 +1,85 @@
+
+
+
+
+ {#if !st}
+
+ {:else if !st.installed}
+
+
+ {:else}
+ st!.enabled, (v) => { st!.enabled = v; applyNow(); }}
+ />
+ {#if st.enabled}
+
+ {/if}
+ {/if}
+ {#if message}{/if}
+
+
+
diff --git a/frontend/src/lib/views/Optional.svelte b/frontend/src/lib/views/Optional.svelte
new file mode 100644
index 0000000..882d537
--- /dev/null
+++ b/frontend/src/lib/views/Optional.svelte
@@ -0,0 +1,149 @@
+
+
+
+
+ {#if !st}
+
+ {:else}
+ {#each st.items as item (item.id)}
+
+
+ {#if item.installed}
+
Installed
+ {:else}
+
+ {/if}
+
- setChargeThreshold("start", chargeStart)} />
+
+ setChargeThreshold("start", chargeStart)} />
+ {chargeStart}%
-
- setChargeThreshold("end", chargeEnd)} />
+
+ setChargeThreshold("end", chargeEnd)} />
+ {chargeEnd}%
{/if}
@@ -88,15 +93,6 @@
width: 180px;
}
- input[type="number"] {
- width: 8ch;
- background-color: var(--bg);
- color: var(--on-surface);
- border: 1px solid transparent;
- border-radius: var(--radius-secondary, 6px);
- padding: var(--space-xs, 4px) var(--space-sm, 8px);
- }
-
.pct {
margin-left: var(--space-sm, 8px);
font-size: var(--font-size-secondary, 12px);
diff --git a/frontend/src/lib/views/Printing.svelte b/frontend/src/lib/views/Printing.svelte
new file mode 100644
index 0000000..2fc3ac5
--- /dev/null
+++ b/frontend/src/lib/views/Printing.svelte
@@ -0,0 +1,147 @@
+
+
+
+
+ {#if !status}
+
+ {:else if status.error}
+
+ {:else if status.printers.length === 0}
+
+ {:else}
+
+ {#each status.printers as p (p.name)}
+
+
+ {p.name}{p.is_default ? " (default)" : ""}
+ {p.enabled ? p.status : "disabled"}
+
+
+
+ {/each}
+
+
+
+
+ {#if message}{/if}
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/lib/views/PrivacyHub.svelte b/frontend/src/lib/views/PrivacyHub.svelte
new file mode 100644
index 0000000..e0f7ef1
--- /dev/null
+++ b/frontend/src/lib/views/PrivacyHub.svelte
@@ -0,0 +1,14 @@
+
+
+
diff --git a/frontend/src/lib/views/Snapshots.svelte b/frontend/src/lib/views/Snapshots.svelte
index 8687a00..592f82a 100644
--- a/frontend/src/lib/views/Snapshots.svelte
+++ b/frontend/src/lib/views/Snapshots.svelte
@@ -25,7 +25,7 @@
} catch (e) {
const msg = `${e}`.toLowerCase();
if (msg.includes("no permission")) {
- errorHint = "This user isn't allowed to run snapper. Check ALLOW_USERS in /etc/snapper/configs/root — it should list your username.";
+ errorHint = "This user is not in ALLOW_USERS for snapper.";
} else if (msg.includes("unknown config") || msg.includes("no such file")) {
errorHint = "No snapper config exists for root yet, so nothing is being snapshotted. This should be set up automatically at install.";
} else {
@@ -42,7 +42,7 @@
if (!selected) return;
if (
confirm(
- `Boot into snapshot #${selected}? Snapshots on BOS are booted directly from the GRUB menu (under "BOS snapshots"), not rolled back in place. Reboot now and pick this snapshot there.`,
+ `Reboot to pick snapshot #${selected} in GRUB? BOS boots snapshots from the GRUB “BOS snapshots” submenu. This does not run snapper rollback.`,
)
) {
invoke("reboot_system");
@@ -62,9 +62,10 @@
+
@@ -75,6 +76,11 @@
{:else if snapshots.length === 0}
{:else}
+
{#each snapshots as snap (snap.number)}
-
-
+{#snippet sectionCard(section: DeviceSection)}
+
+ {#if section.devices.length === 0}
+
+ {:else}
+ {#each section.devices as d, i (d.name + i)}
+
+ {/each}
+ {#if current(section)}
setVolume(section, Number(e.currentTarget.value))}
/>
- {section.devices[section.selected].percent}%
+ {Math.round(current(section)!.percent)}%
section.devices[section.selected].mute,
- (v) => setMute(section, v)
- }
+ bind:value={() => current(section)!.mute, (v) => setMute(section, v)}
/>
{/if}
-
- {/if}
+ {/if}
+
{/snippet}
-
- {@render deviceSection(output)}
- {@render deviceSection(input)}
+
+ {#if output}
+ {@render sectionCard(output)}
+ {/if}
+ {#if input}
+ {@render sectionCard(input)}
+ {/if}
-
-
+
+
diff --git a/frontend/src/lib/views/Users.svelte b/frontend/src/lib/views/Users.svelte
index 08868f5..5a74504 100644
--- a/frontend/src/lib/views/Users.svelte
+++ b/frontend/src/lib/views/Users.svelte
@@ -69,7 +69,7 @@
-
+
{#if accounts}
{#each accounts as acc (acc.username)}
diff --git a/frontend/src/lib/views/Vpn.svelte b/frontend/src/lib/views/Vpn.svelte
new file mode 100644
index 0000000..1973575
--- /dev/null
+++ b/frontend/src/lib/views/Vpn.svelte
@@ -0,0 +1,148 @@
+
+
+
+
+ {#if !status}
+
+ {:else if status.error}
+
+ {:else if status.connections.length === 0}
+
+ {:else}
+
+ {#each status.connections as c (c.name)}
+
+
+ {c.name}
+ {c.kind}{c.active ? " · connected" : ""}{c.autoconnect ? " · autoconnect" : ""}
+
+ {#if c.active}
+
+ {:else}
+
+ {/if}
+
+ {/each}
+
+
+
diff --git a/frontend/src/lib/views/registry.ts b/frontend/src/lib/views/registry.ts
index ee0e5e4..d36e136 100644
--- a/frontend/src/lib/views/registry.ts
+++ b/frontend/src/lib/views/registry.ts
@@ -1,63 +1,30 @@
-// Maps a sidebar page id to its view component. Every sidebar id has a
-// real view — +page.svelte's Placeholder is only a safety net for typos.
-
import type { Component } from "svelte";
-import About from "./About.svelte";
-import Breadclip from "./Breadclip.svelte";
-import Bread from "./Bread.svelte";
-import Breadbar from "./Breadbar.svelte";
-import Breadbox from "./Breadbox.svelte";
-import Breadpad from "./Breadpad.svelte";
-import Breadpaper from "./Breadpaper.svelte";
-import Breadsearch from "./Breadsearch.svelte";
-import Breadcrumbs from "./Breadcrumbs.svelte";
-import Appearance from "./Appearance.svelte";
-import Autostart from "./Autostart.svelte";
-import Display from "./Display.svelte";
-import Keybinds from "./Keybinds.svelte";
-import Sound from "./Sound.svelte";
-import DateTime from "./DateTime.svelte";
-import Power from "./Power.svelte";
-import Network from "./Network.svelte";
+import AboutHub from "./AboutHub.svelte";
+import AppearanceHub from "./AppearanceHub.svelte";
+import AppsHub from "./AppsHub.svelte";
import Bluetooth from "./Bluetooth.svelte";
-import Firewall from "./Firewall.svelte";
-import Users from "./Users.svelte";
-import Packages from "./Packages.svelte";
-import Aur from "./Aur.svelte";
-import Firmware from "./Firmware.svelte";
-import Snapshots from "./Snapshots.svelte";
-import Breadlock from "./Breadlock.svelte";
-import Breadshot from "./Breadshot.svelte";
-import Breadmon from "./Breadmon.svelte";
-import Breadhelp from "./Breadhelp.svelte";
+import DesktopHub from "./DesktopHub.svelte";
+import DisplaysHub from "./DisplaysHub.svelte";
+import Home from "./Home.svelte";
+import InputHub from "./InputHub.svelte";
+import NetworkHub from "./NetworkHub.svelte";
+import Power from "./Power.svelte";
+import PrivacyHub from "./PrivacyHub.svelte";
+import Sound from "./Sound.svelte";
+import SystemHub from "./SystemHub.svelte";
export const VIEWS: Record
= {
- about: About,
- breadclip: Breadclip,
- bread: Bread,
- breadbar: Breadbar,
- breadbox: Breadbox,
- breadpad: Breadpad,
- breadpaper: Breadpaper,
- breadsearch: Breadsearch,
- breadcrumbs: Breadcrumbs,
- appearance: Appearance,
- autostart: Autostart,
- hyprland: Display,
- keybinds: Keybinds,
- sound: Sound,
- datetime: DateTime,
- power: Power,
- network: Network,
+ home: Home,
+ network: NetworkHub,
bluetooth: Bluetooth,
- firewall: Firewall,
- users: Users,
- packages: Packages,
- aur: Aur,
- firmware: Firmware,
- snapshots: Snapshots,
- breadlock: Breadlock,
- breadshot: Breadshot,
- breadmon: Breadmon,
- breadhelp: Breadhelp,
+ displays: DisplaysHub,
+ sound: Sound,
+ power: Power,
+ appearance: AppearanceHub,
+ desktop: DesktopHub,
+ input: InputHub,
+ apps: AppsHub,
+ privacy: PrivacyHub,
+ system: SystemHub,
+ about: AboutHub,
};
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 22b7a6c..7916d15 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,65 +1,66 @@
-
-
-
- {#if ActiveView}
-
- {:else}
-
- {/if}
-
+
+
+
+
+
+ {#key nav.page}
+ {#if ActiveView}
+
+ {:else}
+
+ {/if}
+ {/key}
+
+