Settings redesign: hub-based navigation, plus hardening and bug fixes
Rework the settings app around hub pages (home, network, displays, input, apps, privacy, system) with a redesigned sidebar, shared nav state, and new hub view components. Alongside the redesign: validate webview inputs into root commands (users, firewall, snapshots, wifi), fix set_charge_threshold writing the percentage via tee stdin, prevent streaming installs from hanging on inherited stdin, add frontend type fixes, sync versions to 0.8.2, and clean up clippy/svelte-check warnings.
This commit is contained in:
Breadway
parent
f7b114f778
commit
dce2031743
97 changed files with 2723 additions and 1142 deletions
|
|
@ -24,7 +24,7 @@
|
|||
// The backend reports the GPU as a raw lspci device string, e.g.
|
||||
// "Advanced Micro Devices, Inc. [AMD/ATI] Krackan [Radeon 840M / 860M Graphics] (rev c2)".
|
||||
// That's too technical for a general settings page, so extract just the
|
||||
// marketing model name. Heuristic (not exhaustive — just needs to read
|
||||
// marketing model name. Heuristic (not exhaustive - just needs to read
|
||||
// well for common vendors): drop the trailing "(rev ..)", prefer the
|
||||
// text inside the last [...] bracket group (usually the model name),
|
||||
// collapse "840M / 860M" style multi-model lists to the last variant,
|
||||
|
|
|
|||
14
frontend/src/lib/views/AboutHub.svelte
Normal file
14
frontend/src/lib/views/AboutHub.svelte
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<script lang="ts">
|
||||
import Hub from "$lib/components/Hub.svelte";
|
||||
import About from "./About.svelte";
|
||||
import DateTime from "./DateTime.svelte";
|
||||
</script>
|
||||
|
||||
<Hub
|
||||
title="About"
|
||||
lede="This machine and the clock."
|
||||
tabs={[
|
||||
{ id: "about", label: "Machine", component: About },
|
||||
{ id: "datetime", label: "Date & time", component: DateTime },
|
||||
]}
|
||||
/>
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
{/if}
|
||||
</Group>
|
||||
|
||||
<Group title="Magnifier" hint="Hyprland’s real magnifier is cursor:zoom_factor — pointer-centered zoom. Applies to this session.">
|
||||
<Group title="Magnifier" hint="Zooms around the cursor. This session only.">
|
||||
{#if st}
|
||||
<NumberField label="Zoom factor" bind:value={zoom} min={1} max={8} step={0.25} />
|
||||
<button class="primary" onclick={applyZoom}>Apply zoom</button>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,12 @@
|
|||
import Group from "$lib/components/Group.svelte";
|
||||
import SwitchField from "$lib/components/SwitchField.svelte";
|
||||
import SelectField from "$lib/components/SelectField.svelte";
|
||||
import NumberField from "$lib/components/NumberField.svelte";
|
||||
import SliderField from "$lib/components/SliderField.svelte";
|
||||
import HyprColorField from "$lib/components/HyprColorField.svelte";
|
||||
import Row from "$lib/components/Row.svelte";
|
||||
import Hint from "$lib/components/Hint.svelte";
|
||||
import SaveButton from "$lib/components/SaveButton.svelte";
|
||||
import { debounce } from "$lib/debounce";
|
||||
|
||||
// Common XKB layout codes. Not exhaustive — if the config holds
|
||||
// Common XKB layout codes. Not exhaustive - if the config holds
|
||||
// something else, it's merged in below so it's never dropped from the
|
||||
// dropdown.
|
||||
const COMMON_KB_LAYOUTS = [
|
||||
|
|
@ -25,13 +24,51 @@
|
|||
// window under the cursor; 2 = focus follows the cursor, but clicking a
|
||||
// window keeps keyboard focus there until the mouse moves again; 3 =
|
||||
// cursor and keyboard focus are fully independent.
|
||||
const FOLLOW_MOUSE_MODES: { value: number; label: string }[] = [
|
||||
{ value: 0, label: "Off — click to focus" },
|
||||
{ value: 1, label: "Follow mouse" },
|
||||
{ value: 2, label: "Follow mouse, detach on click" },
|
||||
{ value: 3, label: "Fully detached from keyboard focus" },
|
||||
const FOLLOW_MOUSE_MODES: { value: string; label: string }[] = [
|
||||
{ value: "0", label: "Click to focus" },
|
||||
{ value: "1", label: "Follow mouse" },
|
||||
{ value: "2", label: "Follow, keep focus on click" },
|
||||
{ value: "3", label: "Mouse and keys independent" },
|
||||
];
|
||||
|
||||
const KB_LABELS: Record<string, string> = {
|
||||
us: "English (US)",
|
||||
gb: "English (UK)",
|
||||
de: "German",
|
||||
fr: "French",
|
||||
es: "Spanish",
|
||||
it: "Italian",
|
||||
pt: "Portuguese",
|
||||
nl: "Dutch",
|
||||
se: "Swedish",
|
||||
no: "Norwegian",
|
||||
dk: "Danish",
|
||||
fi: "Finnish",
|
||||
pl: "Polish",
|
||||
cz: "Czech",
|
||||
sk: "Slovak",
|
||||
hu: "Hungarian",
|
||||
ro: "Romanian",
|
||||
gr: "Greek",
|
||||
tr: "Turkish",
|
||||
ru: "Russian",
|
||||
ua: "Ukrainian",
|
||||
jp: "Japanese",
|
||||
kr: "Korean",
|
||||
cn: "Chinese",
|
||||
br: "Portuguese (Brazil)",
|
||||
ca: "English (Canada)",
|
||||
ch: "German (Switzerland)",
|
||||
be: "Belgian",
|
||||
at: "German (Austria)",
|
||||
ie: "English (Ireland)",
|
||||
};
|
||||
|
||||
const LAYOUT_LABELS: Record<string, string> = {
|
||||
dwindle: "Tiling",
|
||||
master: "Master stack",
|
||||
};
|
||||
|
||||
interface Appearance {
|
||||
gaps_in: number;
|
||||
gaps_out: number;
|
||||
|
|
@ -53,76 +90,73 @@
|
|||
}
|
||||
|
||||
let cfg = $state<Appearance | null>(null);
|
||||
let loaded = $state(false);
|
||||
let followMouse = $state("1");
|
||||
|
||||
let kbLayoutOptions = $derived(
|
||||
cfg && !COMMON_KB_LAYOUTS.includes(cfg.kb_layout) ? [...COMMON_KB_LAYOUTS, cfg.kb_layout] : COMMON_KB_LAYOUTS,
|
||||
);
|
||||
|
||||
const persist = debounce(() => {
|
||||
if (!cfg) return;
|
||||
invoke("save_appearance", { appearance: { ...cfg, follow_mouse: Number(followMouse) } });
|
||||
}, 450);
|
||||
|
||||
onMount(async () => {
|
||||
cfg = await invoke<Appearance>("get_appearance");
|
||||
followMouse = String(cfg.follow_mouse);
|
||||
loaded = true;
|
||||
});
|
||||
|
||||
async function save() {
|
||||
await invoke("save_appearance", { appearance: cfg });
|
||||
}
|
||||
let primed = false;
|
||||
$effect(() => {
|
||||
if (!loaded || !cfg) return;
|
||||
JSON.stringify(cfg);
|
||||
void followMouse;
|
||||
if (!primed) {
|
||||
primed = true;
|
||||
return;
|
||||
}
|
||||
persist();
|
||||
});
|
||||
</script>
|
||||
|
||||
<ViewScaffold title="Appearance">
|
||||
{#if cfg}
|
||||
<Group title="Windows & borders" hint="Gaps, borders, and tiling — the same settings.json Hyprland reads at login.">
|
||||
<NumberField label="Gaps between windows" bind:value={cfg.gaps_in} min={0} max={50} />
|
||||
<NumberField label="Gaps around screen edge" bind:value={cfg.gaps_out} min={0} max={50} />
|
||||
<NumberField label="Border width" bind:value={cfg.border_size} min={0} max={10} />
|
||||
<HyprColorField label="Active border color" bind:value={cfg.active_border} />
|
||||
<HyprColorField label="Inactive border color" bind:value={cfg.inactive_border} />
|
||||
<SelectField label="Tiling layout" bind:value={cfg.layout} options={["dwindle", "master"]} />
|
||||
<SwitchField label="Resize by dragging borders" bind:value={cfg.resize_on_border} />
|
||||
<Group title="Windows">
|
||||
<SliderField label="Gaps between windows" bind:value={cfg.gaps_in} min={0} max={50} />
|
||||
<SliderField label="Gaps around the edge" bind:value={cfg.gaps_out} min={0} max={50} />
|
||||
<SliderField label="Border width" bind:value={cfg.border_size} min={0} max={10} />
|
||||
<HyprColorField label="Active border" bind:value={cfg.active_border} />
|
||||
<HyprColorField label="Inactive border" bind:value={cfg.inactive_border} />
|
||||
<SelectField label="Layout" bind:value={cfg.layout} options={["dwindle", "master"]} labels={LAYOUT_LABELS} />
|
||||
<SwitchField label="Resize by dragging the border" bind:value={cfg.resize_on_border} />
|
||||
</Group>
|
||||
|
||||
<Group title="Effects">
|
||||
<NumberField label="Corner rounding" bind:value={cfg.rounding} min={0} max={30} />
|
||||
<SliderField label="Corner rounding" bind:value={cfg.rounding} min={0} max={30} />
|
||||
<SwitchField label="Blur" bind:value={cfg.blur_enabled} />
|
||||
<NumberField label="Blur size" bind:value={cfg.blur_size} min={0} max={20} />
|
||||
<NumberField label="Blur passes" bind:value={cfg.blur_passes} min={1} max={5} />
|
||||
<SwitchField label="Window shadows" bind:value={cfg.shadow_enabled} />
|
||||
<NumberField label="Shadow range" bind:value={cfg.shadow_range} min={0} max={40} />
|
||||
<NumberField label="Shadow render power" bind:value={cfg.shadow_render_power} min={1} max={4} />
|
||||
{#if cfg.blur_enabled}
|
||||
<SliderField label="Blur size" bind:value={cfg.blur_size} min={0} max={20} />
|
||||
<SliderField label="Blur quality" bind:value={cfg.blur_passes} min={1} max={5} />
|
||||
{/if}
|
||||
<SwitchField label="Shadows" bind:value={cfg.shadow_enabled} />
|
||||
{#if cfg.shadow_enabled}
|
||||
<SliderField label="Shadow size" bind:value={cfg.shadow_range} min={0} max={40} />
|
||||
{/if}
|
||||
</Group>
|
||||
|
||||
<Group title="Input">
|
||||
<SelectField label="Keyboard layout" bind:value={cfg.kb_layout} options={kbLayoutOptions} />
|
||||
<Row label="Focus-follows-mouse mode">
|
||||
<select bind:value={cfg.follow_mouse}>
|
||||
{#each FOLLOW_MOUSE_MODES as mode (mode.value)}
|
||||
<option value={mode.value}>{mode.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</Row>
|
||||
<SwitchField label="Natural scrolling (touchpad)" bind:value={cfg.natural_scroll} />
|
||||
<Group title="Keyboard and mouse">
|
||||
<SelectField label="Keyboard layout" bind:value={cfg.kb_layout} options={kbLayoutOptions} labels={KB_LABELS} />
|
||||
<SelectField
|
||||
label="Focus"
|
||||
bind:value={followMouse}
|
||||
options={FOLLOW_MOUSE_MODES.map((m) => m.value)}
|
||||
labels={Object.fromEntries(FOLLOW_MOUSE_MODES.map((m) => [m.value, m.label]))}
|
||||
/>
|
||||
<SwitchField label="Natural scrolling" hint="Touchpad" bind:value={cfg.natural_scroll} />
|
||||
</Group>
|
||||
|
||||
<Hint text="Changes apply on next login or Hyprland reload — this saves settings.json, it doesn't reload Hyprland live." />
|
||||
<SaveButton onSave={save} />
|
||||
<Hint text="Applies as you change it." />
|
||||
{/if}
|
||||
</ViewScaffold>
|
||||
|
||||
<style>
|
||||
select {
|
||||
color-scheme: dark;
|
||||
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);
|
||||
}
|
||||
|
||||
option {
|
||||
background-color: var(--bg);
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
14
frontend/src/lib/views/AppearanceHub.svelte
Normal file
14
frontend/src/lib/views/AppearanceHub.svelte
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<script lang="ts">
|
||||
import Hub from "$lib/components/Hub.svelte";
|
||||
import Breadpaper from "./Breadpaper.svelte";
|
||||
import Appearance from "./Appearance.svelte";
|
||||
</script>
|
||||
|
||||
<Hub
|
||||
title="Appearance"
|
||||
lede="Wallpaper sets the colors. Windows follow."
|
||||
tabs={[
|
||||
{ id: "breadpaper", label: "Wallpaper", component: Breadpaper },
|
||||
{ id: "appearance", label: "Windows", component: Appearance },
|
||||
]}
|
||||
/>
|
||||
16
frontend/src/lib/views/AppsHub.svelte
Normal file
16
frontend/src/lib/views/AppsHub.svelte
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<script lang="ts">
|
||||
import Hub from "$lib/components/Hub.svelte";
|
||||
import Defaults from "./Defaults.svelte";
|
||||
import Optional from "./Optional.svelte";
|
||||
import Printing from "./Printing.svelte";
|
||||
</script>
|
||||
|
||||
<Hub
|
||||
title="Default apps"
|
||||
lede="Browser, files, terminal, and extras."
|
||||
tabs={[
|
||||
{ id: "defaults", label: "Defaults", component: Defaults },
|
||||
{ id: "optional", label: "Optional", component: Optional },
|
||||
{ id: "printing", label: "Printing", component: Printing },
|
||||
]}
|
||||
/>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<ViewScaffold title="AUR">
|
||||
<Group
|
||||
title="Search"
|
||||
hint="Search the Arch User Repository via yay. Installing opens a terminal — AUR packages run arbitrary build scripts, and reviewing what yay is about to do (and entering your password) is a real safety step."
|
||||
hint="Opens a terminal. Review the PKGBUILD before you confirm."
|
||||
wide
|
||||
>
|
||||
<div class="search-row">
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
{#if entries}
|
||||
<Group
|
||||
title="Extra autostart apps"
|
||||
hint="What launches after login, beyond the core desktop (bar, theme, clipboard, etc. always start regardless). Toggle off, edit, or add your own."
|
||||
hint="Extra apps after login. Bar and clipboard always start."
|
||||
wide
|
||||
>
|
||||
{#each entries as entry, i (i)}
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@
|
|||
log = [...log, line];
|
||||
});
|
||||
busy = false;
|
||||
if (!ok) message = "Command failed — see the log.";
|
||||
if (!ok) message = "Failed. See the log.";
|
||||
}
|
||||
|
||||
async function listSnaps() {
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
<ViewScaffold title="Backup">
|
||||
<Group
|
||||
title="Repository"
|
||||
hint="restic to a local directory or sftp:user@host:/path. Path and password are stored in ~/.config/bos-settings/backup.toml (mode 0600). The password field is write-only."
|
||||
hint="Local folder or sftp. Password is write-only."
|
||||
wide
|
||||
>
|
||||
{#if !st}
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
|
||||
<Group
|
||||
title="Actions"
|
||||
hint="This backs up your @home life — documents, configs, the stuff snapper does not. Snapshots on the Snapshots page are root (@) only. Skips caches, Trash, Steam, containers, cargo/rustup, Flatpak, node_modules, target, and .git."
|
||||
hint="Home directory. Snapshots page is the root filesystem."
|
||||
>
|
||||
<div class="btn-row">
|
||||
<button disabled={busy} onclick={() => run("restic_init")}>Init repo</button>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,10 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<ViewScaffold title="Bluetooth">
|
||||
<ViewScaffold
|
||||
title="Bluetooth"
|
||||
lede="Paired devices and nearby scan."
|
||||
>
|
||||
{#if powered === null}
|
||||
<EmptyState
|
||||
icon={BluetoothOff}
|
||||
|
|
@ -97,7 +100,7 @@
|
|||
{#each paired as dev (dev.address)}
|
||||
<div class="row">
|
||||
<span class="name" class:active={dev.connected}>{dev.name}{dev.connected ? " (connected)" : ""}</span>
|
||||
<button class="action" onclick={() => toggleConnect(dev)}>{dev.connected ? "Disconnect" : "Connect"}</button>
|
||||
<button class="btn" onclick={() => toggleConnect(dev)}>{dev.connected ? "Disconnect" : "Connect"}</button>
|
||||
<button class="remove" onclick={() => forget(dev)}>Forget</button>
|
||||
</div>
|
||||
{/each}
|
||||
|
|
@ -107,7 +110,7 @@
|
|||
|
||||
<Group
|
||||
title="Available devices"
|
||||
hint="Scanning takes a few seconds. Devices needing a PIN aren't supported — only "just works" pairing (most headphones, speakers, keyboards, and mice)."
|
||||
hint="PIN pairing is not supported."
|
||||
>
|
||||
<div class="list">
|
||||
{#if scanResults === null}
|
||||
|
|
@ -144,9 +147,13 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm, 8px);
|
||||
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);
|
||||
}
|
||||
|
||||
.row:first-child {
|
||||
border-top: none;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.name {
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
let cfg = $state<BreadConfig | null>(null);
|
||||
// The daemon's 4 compiled-in modules plus every *.lua file actually
|
||||
// sitting in the configured module directory — real installed modules,
|
||||
// sitting in the configured module directory - real installed modules,
|
||||
// not a guess, so picking one to disable is a click.
|
||||
let knownModules = $state<string[]>([]);
|
||||
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@
|
|||
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 TextField from "$lib/components/TextField.svelte";
|
||||
import NumberField from "$lib/components/NumberField.svelte";
|
||||
import SaveButton from "$lib/components/SaveButton.svelte";
|
||||
import SliderField from "$lib/components/SliderField.svelte";
|
||||
import Hint from "$lib/components/Hint.svelte";
|
||||
import { debounce } from "$lib/debounce";
|
||||
import ChevronDown from "@lucide/svelte/icons/chevron-down";
|
||||
import ChevronRight from "@lucide/svelte/icons/chevron-right";
|
||||
|
||||
|
|
@ -23,20 +23,33 @@
|
|||
}
|
||||
|
||||
let style = $state<BreadbarStyle | null>(null);
|
||||
let loaded = $state(false);
|
||||
let advancedOpen = $state(false);
|
||||
let css = $state("");
|
||||
let cssStatus = $state("");
|
||||
let cssSaving = $state(false);
|
||||
|
||||
const persist = debounce(() => {
|
||||
if (!style) return;
|
||||
invoke("save_breadbar_style", { style }).then(() => invoke<string>("get_breadbar_css").then((c) => (css = c)));
|
||||
}, 320);
|
||||
|
||||
onMount(async () => {
|
||||
style = await invoke<BreadbarStyle>("get_breadbar_style");
|
||||
css = await invoke<string>("get_breadbar_css");
|
||||
loaded = true;
|
||||
});
|
||||
|
||||
async function saveStyle() {
|
||||
await invoke("save_breadbar_style", { style });
|
||||
css = await invoke<string>("get_breadbar_css");
|
||||
}
|
||||
let primed = false;
|
||||
$effect(() => {
|
||||
if (!loaded || !style) return;
|
||||
JSON.stringify(style);
|
||||
if (!primed) {
|
||||
primed = true;
|
||||
return;
|
||||
}
|
||||
persist();
|
||||
});
|
||||
|
||||
async function saveCss() {
|
||||
cssSaving = true;
|
||||
|
|
@ -55,36 +68,37 @@
|
|||
|
||||
<ViewScaffold title="Bar">
|
||||
{#if style}
|
||||
<Group title="Text" hint="Applies to the clock, workspace numbers, and stat labels.">
|
||||
<Group title="Text" hint="Clock, workspace numbers, and stats.">
|
||||
<TextField label="Font" bind:value={style.font_family} placeholder="Varela Round" />
|
||||
<NumberField label="Font size" bind:value={style.font_size} min={8} max={32} />
|
||||
<SliderField label="Font size" bind:value={style.font_size} min={8} max={32} />
|
||||
</Group>
|
||||
|
||||
<Group title="Bar shape">
|
||||
<NumberField label="Corner rounding" bind:value={style.bar_border_radius} min={0} max={40} />
|
||||
<NumberField label="Inner padding" bind:value={style.bar_padding} min={0} max={40} />
|
||||
<SliderField label="Corner rounding" bind:value={style.bar_border_radius} min={0} max={40} />
|
||||
<SliderField label="Inner padding" bind:value={style.bar_padding} min={0} max={40} />
|
||||
</Group>
|
||||
|
||||
<Group title="Workspace indicator">
|
||||
<NumberField label="Size" bind:value={style.workspace_font_size} min={8} max={40} />
|
||||
<Row label="Inactive dimness">
|
||||
<div class="opacity-row">
|
||||
<input type="range" min="0" max="1" step="0.05" bind:value={style.workspace_inactive_opacity} />
|
||||
<span class="pct">{Math.round(style.workspace_inactive_opacity * 100)}%</span>
|
||||
</div>
|
||||
</Row>
|
||||
<Group title="Workspaces">
|
||||
<SliderField label="Number size" bind:value={style.workspace_font_size} min={8} max={40} />
|
||||
<SliderField
|
||||
label="Inactive dimness"
|
||||
bind:value={style.workspace_inactive_opacity}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.05}
|
||||
/>
|
||||
</Group>
|
||||
|
||||
<Group title="Spacing & icons">
|
||||
<NumberField label="Gap between stats" bind:value={style.stat_gap} min={0} max={40} />
|
||||
<NumberField label="Tray icon size" bind:value={style.tray_icon_size} min={8} max={32} />
|
||||
<NumberField label="Notification corner rounding" bind:value={style.notification_border_radius} min={0} max={24} />
|
||||
<Group title="Spacing and icons">
|
||||
<SliderField label="Gap between stats" bind:value={style.stat_gap} min={0} max={40} />
|
||||
<SliderField label="Tray icon size" bind:value={style.tray_icon_size} min={8} max={32} />
|
||||
<SliderField label="Notification rounding" bind:value={style.notification_border_radius} min={0} max={24} />
|
||||
</Group>
|
||||
|
||||
<SaveButton onSave={saveStyle} />
|
||||
<Hint text="Applies as you change it." />
|
||||
{/if}
|
||||
|
||||
<Group title="Advanced" hint="Raw stylesheet. Anything set here can also be changed above — those fields edit this same file." wide>
|
||||
<Group title="Advanced" hint="Raw CSS. Same file as the fields above." wide>
|
||||
<button class="toggle" onclick={() => (advancedOpen = !advancedOpen)}>
|
||||
{#if advancedOpen}<ChevronDown size={14} />{:else}<ChevronRight size={14} />{/if}
|
||||
Edit raw CSS
|
||||
|
|
@ -101,22 +115,6 @@
|
|||
</ViewScaffold>
|
||||
|
||||
<style>
|
||||
.opacity-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm, 8px);
|
||||
}
|
||||
|
||||
.opacity-row input[type="range"] {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.pct {
|
||||
opacity: 0.6;
|
||||
font-size: var(--font-size-secondary, 12px);
|
||||
width: 4ch;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
{#if contexts}
|
||||
<Group
|
||||
title="Contexts"
|
||||
hint="Launcher contexts — each lists, in priority order, the apps/categories surfaced first."
|
||||
hint="Apps and categories shown first."
|
||||
wide
|
||||
>
|
||||
{#if contexts.length === 0}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<ViewScaffold title="Clipboard">
|
||||
<Group
|
||||
title="Clipboard history"
|
||||
hint="Keeps a history of copied text/images and shows it as a popup. breadclipd (right) is the background daemon that watches the clipboard — breadclip itself is just the popup UI, launched on demand by the keybind or the button below."
|
||||
hint="History popup. Super+V."
|
||||
>
|
||||
<button class="open-btn" onclick={openHistory}>Open history (SUPER+V)</button>
|
||||
</Group>
|
||||
|
|
|
|||
|
|
@ -44,11 +44,11 @@
|
|||
|
||||
let cfg = $state<BreadcrumbsConfig | null>(null);
|
||||
// Profile names are free-text (set via "Add profile" below), not a fixed
|
||||
// enum — populate the default-profile options from whatever profiles
|
||||
// enum - populate the default-profile options from whatever profiles
|
||||
// actually exist, rather than a hardcoded guess that can't match a
|
||||
// user's real profile names.
|
||||
let profileNames = $derived(cfg?.profiles.map((p) => p.name) ?? []);
|
||||
// Saved network SSIDs feed the per-profile network pickers below — no
|
||||
// Saved network SSIDs feed the per-profile network pickers below - no
|
||||
// typing an SSID by hand and hoping it matches one saved above.
|
||||
let savedSsids = $derived(cfg?.networks.map((n) => n.ssid).filter((s) => s.trim().length > 0) ?? []);
|
||||
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
|
||||
<Group
|
||||
title="Saved networks"
|
||||
hint="Password is write-only — leave it blank to keep an already-saved secret or let NetworkManager remember it after the first connect. Breadcrumbs never writes a PSK back into breadcrumbs.toml; new passwords go only to networks.toml (0600) and are cleared there after the first successful connect."
|
||||
hint="Leave password blank to keep the saved one."
|
||||
wide
|
||||
>
|
||||
<div class="list">
|
||||
|
|
|
|||
|
|
@ -47,15 +47,15 @@
|
|||
<ViewScaffold title="Help">
|
||||
<Group
|
||||
title="BOS Help"
|
||||
hint="breadhelp is the onboarding and help center — searchable guides, a keybind cheatsheet, a troubleshoot wizard, and a live tour. This panel just launches it; it doesn't copy the help app into Settings."
|
||||
hint="Opens the help app."
|
||||
>
|
||||
<button class="primary" onclick={() => invoke("open_breadhelp")}>Open breadhelp</button>
|
||||
</Group>
|
||||
|
||||
<Group title="First-run autostart" hint="The extra autostart entry in hypr/autostart.json (breadhelp --autostart). Core desktop launch is separate and always runs.">
|
||||
<Group title="Show on login">
|
||||
<SwitchField label="Show help on login" bind:value={() => autostartOn, (v) => setAutostart(v)} />
|
||||
{#if !helpEntry}
|
||||
<Hint text="No breadhelp entry in autostart.json yet — turning this on adds the default first-run command." />
|
||||
<Hint text="Turning this on adds the first-run command." />
|
||||
{/if}
|
||||
{#if status}
|
||||
<Hint text={status} />
|
||||
|
|
|
|||
|
|
@ -33,28 +33,23 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<ViewScaffold title="Lock & greet">
|
||||
<ViewScaffold title="Lock">
|
||||
<Group
|
||||
title="How locking works"
|
||||
hint="This panel does not configure PAM. Authentication is the breadlock PAM service (/etc/pam.d/breadlock) plus greetd for login — both are packaged, not user-editable from Settings."
|
||||
hint="Login and PAM are packaged. This only styles the lock screen."
|
||||
>
|
||||
<Hint
|
||||
text="Super+L runs loginctl lock-session. hypridle's lock_cmd / idle listener then starts breadlock, which owns the already-running Hyprland session via ext-session-lock-v1."
|
||||
/>
|
||||
<Hint
|
||||
text="breadgreet is the graphical greetd greeter (replacing tuigreet). Its live config is typically /etc/greetd/breadgreet.toml, owned by the greeter user — not written from here."
|
||||
/>
|
||||
<Hint text="Super+L locks. Login screen is packaged separately." />
|
||||
<button class="primary" onclick={() => invoke("lock_session")}>Lock now</button>
|
||||
</Group>
|
||||
|
||||
{#if cfg}
|
||||
<Group title="Lock screen" hint="~/.config/breadlock/breadlock.toml — every field is optional; breadlock runs with these defaults if the file is missing.">
|
||||
<Group title="Lock screen">
|
||||
<SelectField label="Background" bind:value={cfg.background_mode} options={["color", "image"]} />
|
||||
{#if cfg.background_mode === "image"}
|
||||
<FileField label="Image" bind:value={cfg.background_path} placeholder="PNG, cover-fit" extensions={["png"]} />
|
||||
{/if}
|
||||
<SwitchField label="Blur background" bind:value={cfg.background_blur} />
|
||||
<Hint text="Blur is accepted in the file but not implemented yet (needs a wlr-screencopy capture). breadlock logs a warning and shows the background unblurred." />
|
||||
<Hint text="Blur is saved but not drawn yet." />
|
||||
<TextField label="Clock format" bind:value={cfg.clock_format} placeholder="%H:%M" />
|
||||
<TextField label="Font" bind:value={cfg.font_family} placeholder="Varela Round" />
|
||||
<NumberField label="Wrong-password timeout (ms)" bind:value={cfg.fail_timeout_ms} min={0} max={10000} />
|
||||
|
|
|
|||
|
|
@ -8,14 +8,9 @@
|
|||
<ViewScaffold title="Monitors">
|
||||
<Group
|
||||
title="Two different jobs"
|
||||
hint="This is not a second Display editor. Display (monitors.json) is the login-time layout Hyprland itself reads. breadmon is a TUI for live arrange / mirror / named profiles."
|
||||
hint="Live arrange, mirror, and named profiles."
|
||||
>
|
||||
<Hint
|
||||
text="Use Display when you want the persistent Hyprland rule set (output / mode / position / scale) that applies on next login or hyprctl reload."
|
||||
/>
|
||||
<Hint
|
||||
text="Use breadmon when you want to drag monitors around live, pick a common mirror mode, or save/load a profile under ~/.config/breadmon/profiles/. Settings never writes those profiles."
|
||||
/>
|
||||
<Hint text="Layout tab is the login config. This opens the live TUI." />
|
||||
<button class="primary" onclick={() => invoke("open_breadmon")}>Open breadmon</button>
|
||||
</Group>
|
||||
</ViewScaffold>
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@
|
|||
<NumberField label="Archive after (days)" bind:value={cfg.archive_after_days} min={0} max={3650} />
|
||||
</Group>
|
||||
|
||||
<Group title="Classifier model" hint="The local model breadpad uses to guess note vs. reminder vs. task — no network needed.">
|
||||
<Group title="Classifier model" hint="Local model. No network.">
|
||||
<FileField label="ONNX model" bind:value={cfg.model_path} placeholder="~/.local/share/breadpad/model/classifier.onnx" extensions={["onnx"]} />
|
||||
<FileField label="Tokenizer" bind:value={cfg.tokenizer_path} placeholder="~/.local/share/breadpad/model/tokenizer.json" extensions={["json"]} />
|
||||
</Group>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,12 @@
|
|||
onMount(async () => {
|
||||
libraryDir = await invoke<string>("wallpaper_library_dir_display");
|
||||
await refreshCurrent();
|
||||
scanning = true;
|
||||
try {
|
||||
library = await invoke<LibraryEntry[]>("list_wallpaper_library");
|
||||
} finally {
|
||||
scanning = false;
|
||||
}
|
||||
});
|
||||
|
||||
async function apply(path: string) {
|
||||
|
|
@ -30,7 +36,7 @@
|
|||
try {
|
||||
await invoke("set_wallpaper", { path });
|
||||
await refreshCurrent();
|
||||
status = "Wallpaper set";
|
||||
status = "Set";
|
||||
} catch (e) {
|
||||
status = `${e}`;
|
||||
} finally {
|
||||
|
|
@ -43,51 +49,40 @@
|
|||
title: "Choose a wallpaper",
|
||||
filters: [{ name: "Images", extensions: ["png", "jpg", "jpeg", "webp", "gif", "bmp"] }],
|
||||
});
|
||||
if (typeof path === "string") {
|
||||
await apply(path);
|
||||
}
|
||||
}
|
||||
|
||||
async function browseLibrary() {
|
||||
scanning = true;
|
||||
library = await invoke<LibraryEntry[]>("list_wallpaper_library");
|
||||
scanning = false;
|
||||
if (typeof path === "string") await apply(path);
|
||||
}
|
||||
</script>
|
||||
|
||||
<ViewScaffold title="Wallpaper">
|
||||
<Group
|
||||
title="Current wallpaper"
|
||||
hint="Sets the desktop wallpaper, generates a matching pywal palette, and reloads the shared bread-theme stylesheet — the wallpaper drives the whole desktop's accent colors."
|
||||
>
|
||||
<div class="preview-card">
|
||||
{#if currentPath}
|
||||
<img class="preview" src={convertFileSrc(currentPath)} alt="Current wallpaper" />
|
||||
<span class="path">{currentPath.split("/").pop()}</span>
|
||||
{:else}
|
||||
<div class="preview placeholder">No wallpaper set</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<Group title="Wallpaper" hint="This also updates desktop colors.">
|
||||
{#if currentPath}
|
||||
<div class="hero" style="background-image: url('{convertFileSrc(currentPath)}')">
|
||||
<span class="cap">{currentPath.split("/").pop()}</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="hero placeholder">No wallpaper</div>
|
||||
{/if}
|
||||
<div class="btn-row">
|
||||
<button class="choose" onclick={chooseImage}>Choose image…</button>
|
||||
<button class="btn primary" onclick={chooseImage}>Choose image</button>
|
||||
<span class="status">{status}</span>
|
||||
</div>
|
||||
</Group>
|
||||
|
||||
<Group title="Library" wide>
|
||||
{#if library === null}
|
||||
<button class="browse" disabled={scanning} onclick={browseLibrary}>
|
||||
{scanning ? "Scanning…" : `Browse ${libraryDir}`}
|
||||
</button>
|
||||
{:else if library.length === 0}
|
||||
<div class="empty">Nothing under {libraryDir} — use Choose image… above instead.</div>
|
||||
{:else}
|
||||
{#if scanning && library === null}
|
||||
<div class="empty">Loading {libraryDir}…</div>
|
||||
{:else if library && library.length === 0}
|
||||
<div class="empty">Nothing in {libraryDir}</div>
|
||||
{:else if library}
|
||||
<div class="grid">
|
||||
{#each library as item (item.path)}
|
||||
<button class="thumb" onclick={() => apply(item.path)} title={item.path}>
|
||||
<button
|
||||
class="thumb"
|
||||
class:on={item.path === currentPath}
|
||||
onclick={() => apply(item.path)}
|
||||
title={item.path}
|
||||
>
|
||||
<img src={convertFileSrc(item.path)} alt={item.name} loading="lazy" />
|
||||
<span class="name">{item.name}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
@ -96,105 +91,74 @@
|
|||
</ViewScaffold>
|
||||
|
||||
<style>
|
||||
.preview-card {
|
||||
background-color: var(--surface);
|
||||
border-radius: var(--radius-primary, 8px);
|
||||
padding: var(--space-md, 12px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-sm, 8px);
|
||||
}
|
||||
|
||||
.preview {
|
||||
display: block;
|
||||
width: 320px;
|
||||
.hero {
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius-secondary, 6px);
|
||||
border-radius: 12px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview.placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.5;
|
||||
.hero.placeholder {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--bg);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.path {
|
||||
display: block;
|
||||
margin-top: var(--space-xs, 4px);
|
||||
opacity: 0.6;
|
||||
font-size: var(--font-size-secondary, 12px);
|
||||
.cap {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
bottom: 10px;
|
||||
font-size: 12px;
|
||||
color: #fffc;
|
||||
background: #0006;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.btn-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md, 12px);
|
||||
justify-content: center;
|
||||
margin-top: var(--space-sm, 8px);
|
||||
}
|
||||
|
||||
.choose,
|
||||
.browse {
|
||||
background-color: var(--accent);
|
||||
color: var(--on-accent);
|
||||
border: none;
|
||||
border-radius: var(--radius-primary, 8px);
|
||||
padding: var(--space-sm, 8px) var(--space-lg, 16px);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.browse {
|
||||
background-color: var(--surface);
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
.browse:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.status {
|
||||
opacity: 0.6;
|
||||
font-size: var(--font-size-secondary, 12px);
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
opacity: 0.6;
|
||||
font-size: var(--font-size-secondary, 12px);
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: var(--space-sm, 8px);
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 0;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
aspect-ratio: 16/10;
|
||||
}
|
||||
|
||||
.thumb.on {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.thumb img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 88px;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius-tertiary, 4px);
|
||||
}
|
||||
|
||||
.thumb .name {
|
||||
font-size: 11px;
|
||||
opacity: 0.6;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
{#if cfg}
|
||||
<Group
|
||||
title="Power"
|
||||
hint="breadmill's embedding step is CPU/NPU/GPU-heavy. Turn it off entirely, or just pause it on battery — it resumes automatically on AC power."
|
||||
hint="Indexing is heavy. Pause it on battery if you want."
|
||||
>
|
||||
<SwitchField label="Enabled" bind:value={cfg.power_enabled} />
|
||||
<SwitchField label="Index while on battery" bind:value={cfg.run_on_battery} />
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
|
||||
<Group
|
||||
title="Model"
|
||||
hint="What hardware does the indexing. Check journalctl --user -u breadmill after restarting to confirm it registered."
|
||||
hint="Hardware used for indexing."
|
||||
>
|
||||
<Row label="Search acceleration">
|
||||
<select bind:value={cfg.backend}>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
<ViewScaffold title="Screenshots">
|
||||
<Group
|
||||
title="Keybinds"
|
||||
hint="Read-only from binds.json. Super+Shift+S/C/P is the BOS default (region→file / region→clipboard / screen→file). Change them on the Keybinds panel."
|
||||
hint="Change shortcuts under Keyboard."
|
||||
>
|
||||
{#if binds && binds.length > 0}
|
||||
{#each binds as b (`${b.shortcut}:${b.command}`)}
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
</Group>
|
||||
|
||||
{#if cfg}
|
||||
<Group title="breadshot" hint="~/.config/breadshot/config.toml — grim + slurp + wl-copy, Hyprland-aware. All keys optional.">
|
||||
<Group title="Capture">
|
||||
<FileField label="Save directory" bind:value={cfg.save_dir} placeholder="~/Pictures/Screenshots" mode="folder" />
|
||||
<SwitchField label="Silent (no notifications)" bind:value={cfg.silent} />
|
||||
<SwitchField label="Freeze screen during select" bind:value={cfg.freeze} />
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
<ViewScaffold title="Bakery channel">
|
||||
<Group
|
||||
title="Track"
|
||||
hint="bakery track show / bakery track set. This only changes the preference — nothing is downloaded until you update."
|
||||
hint="Nothing downloads until you update."
|
||||
>
|
||||
{#if !track}
|
||||
<Hint text="Loading…" />
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
import ViewScaffold from "$lib/components/ViewScaffold.svelte";
|
||||
import Group from "$lib/components/Group.svelte";
|
||||
import Hint from "$lib/components/Hint.svelte";
|
||||
import SaveButton from "$lib/components/SaveButton.svelte";
|
||||
import Row from "$lib/components/Row.svelte";
|
||||
|
||||
interface DesktopApp {
|
||||
id: string;
|
||||
|
|
@ -34,25 +34,23 @@
|
|||
async function save() {
|
||||
if (!st) return;
|
||||
await invoke("save_default_apps", { input: { current: st.current } });
|
||||
st = await invoke<DefaultsStatus>("get_default_apps");
|
||||
}
|
||||
</script>
|
||||
|
||||
<ViewScaffold title="Default apps">
|
||||
<Group title="MIME associations" hint={st ? `Read and written at ${st.path}. Terminal also writes ~/.config/xdg-terminals.list.` : "Loading…"} wide>
|
||||
<Group title="Apps" wide>
|
||||
{#if st}
|
||||
{#each CATEGORIES as cat (cat.id)}
|
||||
<div class="field-row">
|
||||
<span class="label">{cat.label}</span>
|
||||
<select bind:value={st.current[cat.id]}>
|
||||
<option value="">—</option>
|
||||
<Row label={cat.label}>
|
||||
<select bind:value={st.current[cat.id]} onchange={save}>
|
||||
<option value="">Not set</option>
|
||||
{#each st.options[cat.id] ?? [] as app (app.id)}
|
||||
<option value={app.id}>{app.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</Row>
|
||||
{/each}
|
||||
<SaveButton onSave={save} />
|
||||
<Hint text="Applies as you change it." />
|
||||
{:else}
|
||||
<Hint text="Loading…" />
|
||||
{/if}
|
||||
|
|
@ -60,45 +58,18 @@
|
|||
</ViewScaffold>
|
||||
|
||||
<style>
|
||||
.field-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-lg, 16px);
|
||||
background-color: var(--surface);
|
||||
border-radius: var(--radius-primary, 8px);
|
||||
padding: var(--space-md, 12px) var(--space-lg, 16px);
|
||||
margin-bottom: var(--space-sm, 8px);
|
||||
}
|
||||
|
||||
:global(.field-row + .field-row) {
|
||||
margin-top: calc(var(--space-sm, 8px) * -1);
|
||||
border-top: 1px solid var(--bg);
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
:global(.field-row:has(+ .field-row)) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
select {
|
||||
color-scheme: dark;
|
||||
background-color: var(--bg);
|
||||
background: 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);
|
||||
max-width: 28ch;
|
||||
border-radius: 10px;
|
||||
padding: 6px 10px;
|
||||
min-width: 22ch;
|
||||
max-width: 36ch;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
22
frontend/src/lib/views/DesktopHub.svelte
Normal file
22
frontend/src/lib/views/DesktopHub.svelte
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<script lang="ts">
|
||||
import Hub from "$lib/components/Hub.svelte";
|
||||
import Breadbar from "./Breadbar.svelte";
|
||||
import Breadbox from "./Breadbox.svelte";
|
||||
import Breadlock from "./Breadlock.svelte";
|
||||
import Breadshot from "./Breadshot.svelte";
|
||||
import Autostart from "./Autostart.svelte";
|
||||
import DesktopMore from "./DesktopMore.svelte";
|
||||
</script>
|
||||
|
||||
<Hub
|
||||
title="Bar & apps"
|
||||
lede="Bar, lock screen, screenshots, and startup."
|
||||
tabs={[
|
||||
{ id: "breadbar", label: "Bar", component: Breadbar },
|
||||
{ id: "breadlock", label: "Lock", component: Breadlock },
|
||||
{ id: "breadshot", label: "Screenshots", component: Breadshot },
|
||||
{ id: "autostart", label: "Startup", component: Autostart },
|
||||
{ id: "breadbox", label: "Launcher", component: Breadbox },
|
||||
{ id: "more", label: "More", component: DesktopMore },
|
||||
]}
|
||||
/>
|
||||
29
frontend/src/lib/views/DesktopMore.svelte
Normal file
29
frontend/src/lib/views/DesktopMore.svelte
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script lang="ts">
|
||||
import Subnav from "$lib/components/Subnav.svelte";
|
||||
import Embed from "$lib/components/Embed.svelte";
|
||||
import Breadclip from "./Breadclip.svelte";
|
||||
import Breadpad from "./Breadpad.svelte";
|
||||
import Breadsearch from "./Breadsearch.svelte";
|
||||
import Bread from "./Bread.svelte";
|
||||
import Breadhelp from "./Breadhelp.svelte";
|
||||
|
||||
const tabs = [
|
||||
{ id: "breadclip", label: "Clipboard", component: Breadclip },
|
||||
{ id: "breadpad", label: "Notes", component: Breadpad },
|
||||
{ id: "breadsearch", label: "Search", component: Breadsearch },
|
||||
{ id: "bread", label: "Daemon", component: Bread },
|
||||
{ id: "breadhelp", label: "Help", component: Breadhelp },
|
||||
];
|
||||
|
||||
let tab = $state(tabs[0].id);
|
||||
let Active = $derived(tabs.find((t) => t.id === tab)?.component);
|
||||
</script>
|
||||
|
||||
<Subnav items={tabs.map(({ id, label }) => ({ id, label }))} bind:value={tab} />
|
||||
<Embed>
|
||||
{#key tab}
|
||||
{#if Active}
|
||||
<Active />
|
||||
{/if}
|
||||
{/key}
|
||||
</Embed>
|
||||
|
|
@ -2,151 +2,369 @@
|
|||
import { onMount } from "svelte";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import ViewScaffold from "$lib/components/ViewScaffold.svelte";
|
||||
import InfoRow from "$lib/components/InfoRow.svelte";
|
||||
import Group from "$lib/components/Group.svelte";
|
||||
import Hint from "$lib/components/Hint.svelte";
|
||||
import SaveButton from "$lib/components/SaveButton.svelte";
|
||||
import Row from "$lib/components/Row.svelte";
|
||||
|
||||
interface LiveMonitor {
|
||||
name: string;
|
||||
mode: string;
|
||||
}
|
||||
interface MonitorRule {
|
||||
output: string;
|
||||
mode: string;
|
||||
position: string;
|
||||
scale: string;
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
refresh: number;
|
||||
scale: number;
|
||||
transform: number;
|
||||
available_modes: string[];
|
||||
}
|
||||
|
||||
let liveMonitors = $state<LiveMonitor[] | null>(null);
|
||||
let rules = $state<MonitorRule[] | null>(null);
|
||||
const SCALES = [
|
||||
{ label: "100%", value: 1 },
|
||||
{ label: "125%", value: 1.25 },
|
||||
{ label: "150%", value: 1.5 },
|
||||
{ label: "200%", value: 2 },
|
||||
];
|
||||
|
||||
onMount(async () => {
|
||||
liveMonitors = await invoke<LiveMonitor[]>("get_live_monitors");
|
||||
rules = await invoke<MonitorRule[]>("get_monitor_rules");
|
||||
const TURNS = [
|
||||
{ label: "Landscape", value: 0 },
|
||||
{ label: "Right", value: 1 },
|
||||
{ label: "Upside down", value: 2 },
|
||||
{ label: "Left", value: 3 },
|
||||
];
|
||||
|
||||
const PAD = 28;
|
||||
const STAGE_H = 300;
|
||||
|
||||
let monitors = $state<LiveMonitor[]>([]);
|
||||
let selected = $state<string | null>(null);
|
||||
let stageEl: HTMLDivElement | undefined = $state();
|
||||
let stageW = $state(640);
|
||||
let message = $state("");
|
||||
let applying = $state(false);
|
||||
|
||||
let live = $derived(monitors.find((m) => m.name === selected) ?? null);
|
||||
|
||||
let view = $derived.by(() => {
|
||||
if (monitors.length === 0) return { minX: 0, minY: 0, scale: 0.1 };
|
||||
let minX = Infinity;
|
||||
let minY = Infinity;
|
||||
let maxX = -Infinity;
|
||||
let maxY = -Infinity;
|
||||
for (const m of monitors) {
|
||||
const w = boxW(m);
|
||||
const h = boxH(m);
|
||||
minX = Math.min(minX, m.x);
|
||||
minY = Math.min(minY, m.y);
|
||||
maxX = Math.max(maxX, m.x + w);
|
||||
maxY = Math.max(maxY, m.y + h);
|
||||
}
|
||||
const bw = Math.max(maxX - minX, 1);
|
||||
const bh = Math.max(maxY - minY, 1);
|
||||
const scale = Math.min((stageW - PAD * 2) / bw, (STAGE_H - PAD * 2) / bh);
|
||||
return { minX, minY, scale };
|
||||
});
|
||||
|
||||
function addRule() {
|
||||
rules = [...(rules ?? []), { output: "", mode: "preferred", position: "auto", scale: "auto" }];
|
||||
type Drag = { i: number; grabX: number; grabY: number; pointer: number };
|
||||
let drag = $state<Drag | null>(null);
|
||||
|
||||
function rotated(m: LiveMonitor): boolean {
|
||||
return m.transform === 1 || m.transform === 3 || m.transform === 5 || m.transform === 7;
|
||||
}
|
||||
function boxW(m: LiveMonitor): number {
|
||||
return rotated(m) ? m.height : m.width;
|
||||
}
|
||||
function boxH(m: LiveMonitor): number {
|
||||
return rotated(m) ? m.width : m.height;
|
||||
}
|
||||
|
||||
function removeRule(i: number) {
|
||||
rules = rules!.filter((_, idx) => idx !== i);
|
||||
if (rules.length === 0) {
|
||||
rules = [{ output: "", mode: "preferred", position: "auto", scale: "auto" }];
|
||||
function screenX(m: LiveMonitor): number {
|
||||
return PAD + (m.x - view.minX) * view.scale;
|
||||
}
|
||||
function screenY(m: LiveMonitor): number {
|
||||
return PAD + (m.y - view.minY) * view.scale;
|
||||
}
|
||||
function screenW(m: LiveMonitor): number {
|
||||
return Math.max(48, boxW(m) * view.scale);
|
||||
}
|
||||
function screenH(m: LiveMonitor): number {
|
||||
return Math.max(32, boxH(m) * view.scale);
|
||||
}
|
||||
|
||||
function nearestScale(v: number): number {
|
||||
return SCALES.reduce((best, s) => (Math.abs(s.value - v) < Math.abs(best - v) ? s.value : best), 1);
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
monitors = await invoke<LiveMonitor[]>("get_live_monitors");
|
||||
if (!selected || !monitors.some((m) => m.name === selected)) {
|
||||
selected = monitors[0]?.name ?? null;
|
||||
}
|
||||
}
|
||||
|
||||
async function save() {
|
||||
await invoke("save_monitor_rules", { rules });
|
||||
onMount(refresh);
|
||||
|
||||
$effect(() => {
|
||||
const el = stageEl;
|
||||
if (!el) return;
|
||||
stageW = el.clientWidth;
|
||||
const ro = new ResizeObserver(() => {
|
||||
stageW = el.clientWidth;
|
||||
});
|
||||
ro.observe(el);
|
||||
return () => ro.disconnect();
|
||||
});
|
||||
|
||||
function snap(idx: number, x: number, y: number): { x: number; y: number } {
|
||||
const moving = monitors[idx];
|
||||
if (!moving) return { x, y };
|
||||
const mw = boxW(moving);
|
||||
const mh = boxH(moving);
|
||||
const thresh = Math.max(16, 18 / Math.max(view.scale, 0.01));
|
||||
let bestX = x;
|
||||
let bestY = y;
|
||||
let bestXd = thresh + 1;
|
||||
let bestYd = thresh + 1;
|
||||
for (let i = 0; i < monitors.length; i++) {
|
||||
if (i === idx) continue;
|
||||
const o = monitors[i];
|
||||
const ow = boxW(o);
|
||||
const oh = boxH(o);
|
||||
const xs = [x - o.x, x - (o.x + ow), x + mw - o.x, x + mw - (o.x + ow)];
|
||||
for (const d of xs) {
|
||||
const ad = Math.abs(d);
|
||||
if (ad < bestXd) {
|
||||
bestXd = ad;
|
||||
bestX = x - d;
|
||||
}
|
||||
}
|
||||
const ys = [y - o.y, y - (o.y + oh), y + mh - o.y, y + mh - (o.y + oh)];
|
||||
for (const d of ys) {
|
||||
const ad = Math.abs(d);
|
||||
if (ad < bestYd) {
|
||||
bestYd = ad;
|
||||
bestY = y - d;
|
||||
}
|
||||
}
|
||||
}
|
||||
return { x: Math.round(bestX), y: Math.round(bestY) };
|
||||
}
|
||||
|
||||
function onDown(e: PointerEvent, i: number) {
|
||||
const m = monitors[i];
|
||||
if (!m || !stageEl) return;
|
||||
selected = m.name;
|
||||
const rect = stageEl.getBoundingClientRect();
|
||||
const px = e.clientX - rect.left;
|
||||
const py = e.clientY - rect.top;
|
||||
drag = { i, grabX: px - screenX(m), grabY: py - screenY(m), pointer: e.pointerId };
|
||||
(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function onMove(e: PointerEvent) {
|
||||
if (!drag || !stageEl) return;
|
||||
const rect = stageEl.getBoundingClientRect();
|
||||
const px = e.clientX - rect.left - drag.grabX;
|
||||
const py = e.clientY - rect.top - drag.grabY;
|
||||
const wx = view.minX + (px - PAD) / view.scale;
|
||||
const wy = view.minY + (py - PAD) / view.scale;
|
||||
const snapped = snap(drag.i, wx, wy);
|
||||
monitors[drag.i].x = snapped.x;
|
||||
monitors[drag.i].y = snapped.y;
|
||||
monitors = [...monitors];
|
||||
}
|
||||
|
||||
async function onUp(e: PointerEvent) {
|
||||
if (!drag) return;
|
||||
if (e.pointerId !== drag.pointer && e.type !== "pointerleave") return;
|
||||
drag = null;
|
||||
await apply();
|
||||
}
|
||||
|
||||
async function apply() {
|
||||
if (monitors.length === 0) return;
|
||||
applying = true;
|
||||
message = "";
|
||||
try {
|
||||
await invoke("apply_monitor_layout", { monitors });
|
||||
await refresh();
|
||||
} catch (err) {
|
||||
message = `${err}`;
|
||||
} finally {
|
||||
applying = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function setScale(value: number) {
|
||||
if (!live) return;
|
||||
live.scale = value;
|
||||
monitors = [...monitors];
|
||||
await apply();
|
||||
}
|
||||
|
||||
async function setTransform(value: number) {
|
||||
if (!live) return;
|
||||
live.transform = value;
|
||||
monitors = [...monitors];
|
||||
await apply();
|
||||
}
|
||||
|
||||
async function setMode(modeStr: string) {
|
||||
if (!live) return;
|
||||
const cleaned = modeStr.replace(/Hz$/i, "");
|
||||
const [res, hz] = cleaned.split("@");
|
||||
const [w, h] = (res ?? "").split("x");
|
||||
const width = Number(w);
|
||||
const height = Number(h);
|
||||
const refresh = Number(hz);
|
||||
if (!width || !height) return;
|
||||
live.width = width;
|
||||
live.height = height;
|
||||
if (refresh) live.refresh = refresh;
|
||||
live.mode = `${width}x${height} @ ${Math.round(live.refresh)}Hz`;
|
||||
monitors = [...monitors];
|
||||
await apply();
|
||||
}
|
||||
</script>
|
||||
|
||||
<ViewScaffold title="Display">
|
||||
<Group title="Connected monitors">
|
||||
{#if liveMonitors && liveMonitors.length > 0}
|
||||
{#each liveMonitors as m (m.name)}
|
||||
<InfoRow label={m.name} value={m.mode} />
|
||||
{/each}
|
||||
<ViewScaffold title="Displays" lede="Drag to arrange. Edges snap. Changes apply now.">
|
||||
<Group title="Arrangement" wide>
|
||||
{#if monitors.length === 0}
|
||||
<Hint text="No monitors detected." />
|
||||
{:else}
|
||||
<Hint text="No monitors detected (is Hyprland running?)" />
|
||||
<div
|
||||
class="mon-stage"
|
||||
role="application"
|
||||
aria-label="Monitor arrangement canvas. Drag to reorder monitors."
|
||||
bind:this={stageEl}
|
||||
onpointermove={onMove}
|
||||
onpointerup={onUp}
|
||||
onpointercancel={onUp}
|
||||
>
|
||||
{#each monitors as m, i (m.name)}
|
||||
<button
|
||||
type="button"
|
||||
class="mon"
|
||||
class:sel={selected === m.name}
|
||||
class:dragging={drag?.i === i}
|
||||
style="left:{screenX(m)}px; top:{screenY(m)}px; width:{screenW(m)}px; height:{screenH(m)}px;"
|
||||
onpointerdown={(e) => onDown(e, i)}
|
||||
>
|
||||
<div class="screen"></div>
|
||||
<div class="chin">{m.name}</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<Hint text={applying ? "Applying…" : "Drag a panel. It sticks when you let go."} />
|
||||
{/if}
|
||||
</Group>
|
||||
|
||||
<Group title="Advanced">
|
||||
<button class="secondary" onclick={() => invoke("open_hyprland_conf")}>Open hyprland.lua in editor</button>
|
||||
<button class="secondary" onclick={() => invoke("open_keybinds_viewer")}>View keybinds (breadhelp)</button>
|
||||
</Group>
|
||||
|
||||
{#if rules}
|
||||
<Group
|
||||
title="Layout"
|
||||
hint="One row per monitor rule. Leave Output blank to match any monitor (the default — works on any hardware). Applies on next login/reload."
|
||||
wide
|
||||
>
|
||||
{#each rules as rule, i (i)}
|
||||
<div class="rule-row">
|
||||
<label>Output <input type="text" bind:value={rule.output} placeholder="any (blank = all)" class="w-output" /></label>
|
||||
<label>Mode <input type="text" bind:value={rule.mode} placeholder="preferred / 1920x1080@60" class="w-mode" /></label>
|
||||
<label>Position <input type="text" bind:value={rule.position} placeholder="auto / 0x0" class="w-position" /></label>
|
||||
<label>Scale <input type="text" bind:value={rule.scale} placeholder="auto / 1" class="w-scale" /></label>
|
||||
<button class="remove" onclick={() => removeRule(i)}>Remove</button>
|
||||
{#if live}
|
||||
<Group title={live.name}>
|
||||
<Row label="Resolution">
|
||||
{#if live.available_modes.length > 0}
|
||||
<select value={`${live.width}x${live.height}@${live.refresh.toFixed(2)}Hz`} onchange={(e) => setMode(e.currentTarget.value)}>
|
||||
{#each live.available_modes as mode (mode)}
|
||||
<option value={mode}>{mode}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{:else}
|
||||
<span class="mode">{live.mode}</span>
|
||||
{/if}
|
||||
</Row>
|
||||
<Row label="Scale">
|
||||
<div class="pills">
|
||||
{#each SCALES as s (s.value)}
|
||||
<button type="button" class="pill" class:on={nearestScale(live.scale) === s.value} onclick={() => setScale(s.value)}>
|
||||
{s.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
<button class="add" onclick={addRule}>Add monitor rule</button>
|
||||
|
||||
<SaveButton onSave={save} />
|
||||
</Row>
|
||||
<Row label="Rotation">
|
||||
<div class="pills">
|
||||
{#each TURNS as t (t.value)}
|
||||
<button type="button" class="pill" class:on={live.transform % 4 === t.value} onclick={() => setTransform(t.value)}>
|
||||
{t.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</Row>
|
||||
<Row label="Position">
|
||||
<span class="mode">{live.x}, {live.y}</span>
|
||||
</Row>
|
||||
{#if message}
|
||||
<Hint text={message} />
|
||||
{/if}
|
||||
</Group>
|
||||
{/if}
|
||||
</ViewScaffold>
|
||||
|
||||
<style>
|
||||
.rule-row {
|
||||
.mon-stage {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
background: var(--bg);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mon {
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
background: var(--surface-2, var(--surface));
|
||||
border: 2px solid color-mix(in srgb, var(--fg) 10%, transparent);
|
||||
box-shadow: 0 12px 28px #0005;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm, 8px);
|
||||
margin-bottom: var(--space-xs, 4px);
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
cursor: grab;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rule-row label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: var(--font-size-secondary, 12px);
|
||||
.mon.sel {
|
||||
border-color: var(--accent);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.w-output {
|
||||
width: 12ch;
|
||||
}
|
||||
.w-mode {
|
||||
width: 18ch;
|
||||
}
|
||||
.w-position {
|
||||
width: 10ch;
|
||||
}
|
||||
.w-scale {
|
||||
width: 8ch;
|
||||
.mon.dragging {
|
||||
cursor: grabbing;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
background-color: var(--bg);
|
||||
.screen {
|
||||
flex: 1;
|
||||
margin: 6px 6px 0;
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(160deg, var(--surface) 10%, var(--accent) 140%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.chin {
|
||||
height: 22px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mode {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
select {
|
||||
color-scheme: dark;
|
||||
background: 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);
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
border-radius: var(--radius-primary, 8px);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.remove {
|
||||
background-color: var(--red);
|
||||
color: var(--on-red);
|
||||
padding: var(--space-xs, 4px) var(--space-md, 12px);
|
||||
}
|
||||
|
||||
.add {
|
||||
background-color: var(--surface);
|
||||
color: var(--on-surface);
|
||||
margin-top: var(--space-sm, 8px);
|
||||
padding: var(--space-xs, 4px) var(--space-md, 12px);
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background-color: var(--bg);
|
||||
color: var(--on-surface);
|
||||
padding: var(--space-sm, 8px) var(--space-lg, 16px);
|
||||
align-self: flex-start;
|
||||
margin-bottom: var(--space-xs, 4px);
|
||||
border-radius: 10px;
|
||||
padding: 6px 10px;
|
||||
max-width: 28ch;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
16
frontend/src/lib/views/DisplaysHub.svelte
Normal file
16
frontend/src/lib/views/DisplaysHub.svelte
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<script lang="ts">
|
||||
import Hub from "$lib/components/Hub.svelte";
|
||||
import Display from "./Display.svelte";
|
||||
import NightLight from "./NightLight.svelte";
|
||||
import Breadmon from "./Breadmon.svelte";
|
||||
</script>
|
||||
|
||||
<Hub
|
||||
title="Displays"
|
||||
lede="Drag to arrange. Scale and rotate apply now."
|
||||
tabs={[
|
||||
{ id: "hyprland", label: "Layout", component: Display },
|
||||
{ id: "nightlight", label: "Night light", component: NightLight },
|
||||
{ id: "breadmon", label: "Live arrange", component: Breadmon },
|
||||
]}
|
||||
/>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import ViewScaffold from "$lib/components/ViewScaffold.svelte";
|
||||
import Row from "$lib/components/Row.svelte";
|
||||
|
|
@ -22,12 +23,28 @@
|
|||
let newRule = $state("");
|
||||
let log = $state<string[]>([]);
|
||||
|
||||
onMount(refresh);
|
||||
|
||||
function friendlyError(raw: string): string {
|
||||
const s = raw.toLowerCase();
|
||||
if (
|
||||
s.includes("polkit") ||
|
||||
s.includes("pkexec") ||
|
||||
s.includes("password") ||
|
||||
s.includes("authentication") ||
|
||||
s.includes("controlling terminal")
|
||||
) {
|
||||
return "Need your password to read firewall rules.";
|
||||
}
|
||||
return raw;
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
try {
|
||||
status = await invoke<FirewallStatus>("get_firewall_status");
|
||||
enabledSensitive = true;
|
||||
} catch (e) {
|
||||
status = { error: `${e}` };
|
||||
status = { error: friendlyError(`${e}`) };
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -66,10 +83,7 @@
|
|||
</script>
|
||||
|
||||
<ViewScaffold title="Firewall">
|
||||
<Group
|
||||
title="Firewall"
|
||||
hint="Reading and changing firewall state needs your password (polkit) — ufw requires root even just to check status."
|
||||
>
|
||||
<Group title="Firewall" hint="Needs your password.">
|
||||
<Row label="Firewall enabled">
|
||||
<button
|
||||
class="switch"
|
||||
|
|
@ -95,7 +109,7 @@
|
|||
<Group title="Rules" wide>
|
||||
<div class="list">
|
||||
{#if status === "unloaded"}
|
||||
<EmptyState icon={Shield} title="Status not loaded" hint="Click Refresh below to check the firewall's current state." />
|
||||
<EmptyState icon={Shield} title="Loading…" hint="May ask for your password." />
|
||||
{:else if "error" in status}
|
||||
<EmptyState icon={ShieldAlert} title="Couldn't read firewall status" hint={status.error} />
|
||||
{:else if status.rules.length === 0}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
<ViewScaffold title="Firmware">
|
||||
<Group
|
||||
title="Updatable devices"
|
||||
hint="Firmware updates for hardware that supports them (UEFI, some peripherals). fwupd-refresh.timer already keeps update metadata current in the background."
|
||||
hint="UEFI and devices that speak fwupd."
|
||||
wide
|
||||
>
|
||||
<div class="list">
|
||||
|
|
|
|||
315
frontend/src/lib/views/Home.svelte
Normal file
315
frontend/src/lib/views/Home.svelte
Normal file
|
|
@ -0,0 +1,315 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { go, nav } from "$lib/nav.svelte";
|
||||
import { searchSettings, type SearchHit } from "$lib/search";
|
||||
import Search from "@lucide/svelte/icons/search";
|
||||
import Wifi from "@lucide/svelte/icons/wifi";
|
||||
import BatteryFull from "@lucide/svelte/icons/battery-full";
|
||||
import Download from "@lucide/svelte/icons/download";
|
||||
import Monitor from "@lucide/svelte/icons/monitor";
|
||||
import Palette from "@lucide/svelte/icons/palette";
|
||||
import Volume2 from "@lucide/svelte/icons/volume-2";
|
||||
import Keyboard from "@lucide/svelte/icons/keyboard";
|
||||
import AppWindow from "@lucide/svelte/icons/app-window";
|
||||
import Shield from "@lucide/svelte/icons/shield";
|
||||
import Package from "@lucide/svelte/icons/package";
|
||||
|
||||
let query = $state("");
|
||||
let searchEl: HTMLInputElement | undefined = $state();
|
||||
let hits = $derived(query.trim() ? searchSettings(query) : []);
|
||||
|
||||
let wifiLabel = $state("Wi-Fi");
|
||||
let wifiDetail = $state("Checking…");
|
||||
let batteryLabel = $state("Battery");
|
||||
let batteryDetail = $state("Checking…");
|
||||
let updateLabel = $state("Updates");
|
||||
let updateDetail = $state("Checking…");
|
||||
|
||||
const tiles: { id: string; tab?: string; title: string; desc: string; icon: typeof Wifi }[] = [
|
||||
{ id: "network", title: "Wi-Fi & internet", desc: "Radio, saved networks, VPN.", icon: Wifi },
|
||||
{ id: "displays", title: "Displays", desc: "Arrange, scale, night light.", icon: Monitor },
|
||||
{ id: "appearance", title: "Appearance", desc: "Wallpaper drives the palette.", icon: Palette },
|
||||
{ id: "sound", title: "Sound", desc: "Devices, volume, mute.", icon: Volume2 },
|
||||
{ id: "power", title: "Power", desc: "Brightness, charge limit, battery.", icon: BatteryFull },
|
||||
{ id: "input", title: "Keyboard & mouse", desc: "Layouts, keybinds, tap-to-click.", icon: Keyboard },
|
||||
{ id: "desktop", title: "Bar & apps", desc: "Bar, launcher, lock, screenshots.", icon: AppWindow },
|
||||
{ id: "privacy", title: "Privacy & users", desc: "Firewall and accounts.", icon: Shield },
|
||||
{ id: "system", title: "Updates", desc: "Bakery, pacman, snapshots, restic.", icon: Package },
|
||||
];
|
||||
|
||||
$effect(() => {
|
||||
if (nav.searchNonce > 0) {
|
||||
searchEl?.focus();
|
||||
searchEl?.select();
|
||||
}
|
||||
});
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
const net = await invoke<{ radio_enabled: boolean; ethernet: string | null }>("get_network_info");
|
||||
if (!net.radio_enabled) {
|
||||
wifiLabel = "Wi-Fi off";
|
||||
wifiDetail = "Radio disabled";
|
||||
} else {
|
||||
const networks = await invoke<{ ssid: string; active: boolean; signal: number }[]>("scan_wifi").catch(
|
||||
() => [],
|
||||
);
|
||||
const active = networks.find((n) => n.active);
|
||||
if (active) {
|
||||
wifiLabel = active.ssid;
|
||||
wifiDetail = `Wi-Fi · ${active.signal}%`;
|
||||
} else {
|
||||
wifiLabel = "Wi-Fi";
|
||||
wifiDetail = net.ethernet ? "On · no network" : "On";
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
wifiDetail = "Unavailable";
|
||||
}
|
||||
|
||||
try {
|
||||
const power = await invoke<{ battery: [string, string][]; power_source: string }>("get_power_info");
|
||||
const charge = power.battery.find(([k]) => k === "Charge")?.[1] ?? "";
|
||||
const remain = power.battery.find(([k]) => k === "Time remaining")?.[1];
|
||||
batteryLabel = charge || power.power_source;
|
||||
batteryDetail = remain ? `${remain}` : power.power_source;
|
||||
} catch {
|
||||
batteryDetail = "Unavailable";
|
||||
}
|
||||
|
||||
try {
|
||||
const st = await invoke<{
|
||||
pacman: unknown[];
|
||||
bakery: unknown[];
|
||||
firmware: unknown[];
|
||||
}>("get_updates_status");
|
||||
const n = st.pacman.length + st.bakery.length + st.firmware.length;
|
||||
updateLabel = n === 0 ? "Up to date" : `${n} update${n === 1 ? "" : "s"}`;
|
||||
updateDetail = n === 0 ? "bakery + pacman" : "bakery + pacman + firmware";
|
||||
} catch {
|
||||
updateDetail = "Unavailable";
|
||||
}
|
||||
});
|
||||
|
||||
function goHit(hit: SearchHit) {
|
||||
go(hit.page, hit.tab);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="home">
|
||||
<h1>Settings</h1>
|
||||
<p class="lede">Wi-Fi, lock screen, updates, keybinds.</p>
|
||||
|
||||
<div class="search-wrap">
|
||||
<Search size={18} />
|
||||
<input
|
||||
bind:this={searchEl}
|
||||
class="bigsearch"
|
||||
bind:value={query}
|
||||
placeholder="Try “night light”, “keybinds”, “forget network”…"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if hits.length > 0}
|
||||
<div class="results">
|
||||
{#each hits as hit (`${hit.page}:${hit.tab ?? ""}:${hit.label}`)}
|
||||
<button class="hit" onclick={() => goHit(hit)}>
|
||||
<span>{hit.label}</span>
|
||||
<em>{hit.tab ?? hit.page}</em>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="status">
|
||||
<button class="stat" onclick={() => go("network")}>
|
||||
<Wifi size={18} />
|
||||
<div><b>{wifiLabel}</b><span>{wifiDetail}</span></div>
|
||||
</button>
|
||||
<button class="stat" onclick={() => go("power")}>
|
||||
<BatteryFull size={18} />
|
||||
<div><b>{batteryLabel}</b><span>{batteryDetail}</span></div>
|
||||
</button>
|
||||
<button class="stat" onclick={() => go("system")}>
|
||||
<Download size={18} />
|
||||
<div><b>{updateLabel}</b><span>{updateDetail}</span></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="tiles">
|
||||
{#each tiles as tile (tile.id + (tile.tab ?? ""))}
|
||||
<button class="tile" onclick={() => go(tile.id, tile.tab)}>
|
||||
<div class="ico"><tile.icon size={18} /></div>
|
||||
<div class="t">{tile.title}</div>
|
||||
<div class="d">{tile.desc}</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.home {
|
||||
padding: 28px 36px 56px;
|
||||
max-width: 1080px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.04em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.lede {
|
||||
margin: 6px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
position: relative;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.search-wrap :global(svg) {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 16px;
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bigsearch {
|
||||
width: 100%;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
padding: 14px 16px 14px 44px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.stat {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.stat :global(svg) {
|
||||
color: var(--accent);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat b {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat span {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.tiles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.tile {
|
||||
text-align: left;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
padding: 16px 16px 14px;
|
||||
min-height: 108px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
transition:
|
||||
transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
|
||||
border-color 0.15s;
|
||||
}
|
||||
|
||||
.tile:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: color-mix(in srgb, var(--fg) 18%, transparent);
|
||||
}
|
||||
|
||||
.ico {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 10px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: color-mix(in oklab, var(--fg) 9%, transparent);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 14.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.d {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.results {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.hit {
|
||||
text-align: left;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.hit:hover {
|
||||
background: var(--surface-2, var(--surface));
|
||||
}
|
||||
|
||||
.hit em {
|
||||
font-style: normal;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.status,
|
||||
.tiles {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
16
frontend/src/lib/views/InputHub.svelte
Normal file
16
frontend/src/lib/views/InputHub.svelte
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<script lang="ts">
|
||||
import Hub from "$lib/components/Hub.svelte";
|
||||
import Keybinds from "./Keybinds.svelte";
|
||||
import InputMethod from "./InputMethod.svelte";
|
||||
import Accessibility from "./Accessibility.svelte";
|
||||
</script>
|
||||
|
||||
<Hub
|
||||
title="Keyboard & mouse"
|
||||
lede="Shortcuts, input method, and accessibility."
|
||||
tabs={[
|
||||
{ id: "keybinds", label: "Shortcuts", component: Keybinds },
|
||||
{ id: "ime", label: "Input method", component: InputMethod },
|
||||
{ id: "accessibility", label: "Accessibility", component: Accessibility },
|
||||
]}
|
||||
/>
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
<ViewScaffold title="Input method">
|
||||
<Group
|
||||
title="fcitx5"
|
||||
hint="Writes ~/.config/environment.d/90-fcitx5.conf and a Hyprland source fragment, then starts fcitx5 for this user. Already-running apps keep their old IM until you log out."
|
||||
hint="Starts fcitx5. Running apps need a logout."
|
||||
>
|
||||
{#if !st}
|
||||
<Hint text="Loading…" />
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
{#if st}
|
||||
<ul>
|
||||
{#each st.packages as p (p.name)}
|
||||
<li class:missing={!p.installed}>{p.name}{p.installed ? "" : " — not installed"}</li>
|
||||
<li class:missing={!p.installed}>{p.name}{p.installed ? "" : " (missing)"}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -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<string, unknown>;
|
||||
// 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<string, string> = {
|
||||
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<string, string> = {
|
||||
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<string, string> = {
|
||||
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<BindsPayload>("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"}
|
||||
<span class="extra-note">Mouse-drag bind — nothing else to set.</span>
|
||||
<span class="extra-note">Mouse-drag bind.</span>
|
||||
{:else if row.action === "close" || row.action === "fullscreen" || row.action === "float" || row.action === "pseudo" || row.action === "resize" || row.action === "focus_last" || row.action === "exit"}
|
||||
<span class="extra-note">No extra options for this action.</span>
|
||||
{:else}
|
||||
|
|
@ -375,30 +507,19 @@
|
|||
{#each rows as row, i (i)}
|
||||
<div class="bind-card">
|
||||
<div class="bind-top">
|
||||
<input
|
||||
class="mods"
|
||||
type="text"
|
||||
placeholder="SUPER, SHIFT"
|
||||
bind:value={row.mods}
|
||||
oninput={() => (row.modsTouched = true)}
|
||||
/>
|
||||
<input class="key" type="text" placeholder="key" bind:value={row.key} />
|
||||
<select
|
||||
class="action-select"
|
||||
value={KNOWN_ACTIONS.includes(row.action as (typeof KNOWN_ACTIONS)[number]) ? row.action : "__custom__"}
|
||||
onchange={(e) => {
|
||||
const v = e.currentTarget.value;
|
||||
row.action = v === "__custom__" ? "" : v;
|
||||
}}
|
||||
>
|
||||
{#each KNOWN_ACTIONS as a (a)}
|
||||
<option value={a}>{a}</option>
|
||||
{/each}
|
||||
<option value="__custom__">Custom…</option>
|
||||
</select>
|
||||
{#if !KNOWN_ACTIONS.includes(row.action as (typeof KNOWN_ACTIONS)[number])}
|
||||
<input class="action-custom" type="text" placeholder="action name" bind:value={row.action} />
|
||||
{/if}
|
||||
<span class="what">{bindTitle(row)}</span>
|
||||
<button type="button" class="capture" class:listening={row.capturing} onclick={() => beginCapture(row)}>
|
||||
{#if row.capturing}
|
||||
Press a key
|
||||
{:else if keyChips(row).length}
|
||||
{#each keyChips(row) as k, ki (`${k}-${ki}`)}
|
||||
{#if ki > 0}<span class="plus">+</span>{/if}
|
||||
<span class="kbd">{k}</span>
|
||||
{/each}
|
||||
{:else}
|
||||
Set shortcut
|
||||
{/if}
|
||||
</button>
|
||||
<button type="button" class="remove" onclick={() => onRemove(i)}>Remove</button>
|
||||
</div>
|
||||
<div class="bind-bottom">
|
||||
|
|
@ -436,7 +557,7 @@
|
|||
{:else if kind === "flat"}
|
||||
<Group
|
||||
title="Defaults"
|
||||
hint={`Mods/Key pick the shortcut; Action picks what it does. Choosing a known action (exec, move_dir, focus, ...) shows the fields it actually needs — e.g. a Command box for exec — instead of raw JSON. "Advanced" reveals the underlying JSON per bind for anything not covered (or breadhelp's label/category metadata). This machine's binds.json uses BOS's flat schema (no keyboard-layout switching), so that's all there is. Applies on next login/reload.`}
|
||||
hint="Click a shortcut, then press the keys. Save when you are done."
|
||||
>
|
||||
<TextField label="Default mods" bind:value={defaultMods} placeholder="SUPER" />
|
||||
</Group>
|
||||
|
|
@ -453,7 +574,7 @@
|
|||
{:else}
|
||||
<Group
|
||||
title="Layout"
|
||||
hint={`Mods/Key pick the shortcut; Action picks what it does. Choosing a known action (exec, move_dir, focus, ...) shows the fields it actually needs — e.g. a Command box for exec — instead of raw JSON. "Advanced" reveals the underlying JSON per bind for anything not covered. Applies on next login/reload.`}
|
||||
hint="Click a shortcut, then press the keys. Save when you are done."
|
||||
>
|
||||
{#if layoutOrder.length > 0}
|
||||
<SelectField label="Active layout" bind:value={activeLayout} options={layoutOrder} />
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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<string | null>(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<string, string> = {
|
||||
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<WifiNetwork[]>("scan_wifi");
|
||||
status = `Found ${networks.length} network(s)`;
|
||||
scanning = false;
|
||||
try {
|
||||
networks = await invoke<WifiNetwork[]>("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;
|
||||
}
|
||||
</script>
|
||||
|
||||
<ViewScaffold title="Network">
|
||||
<Group title="Wi-Fi">
|
||||
<Row label="Wi-Fi radio">
|
||||
<button class="switch" class:on={radioEnabled} role="switch" aria-checked={radioEnabled} aria-label="Wi-Fi radio" onclick={() => toggleRadio(!radioEnabled)}>
|
||||
<span class="knob"></span>
|
||||
</button>
|
||||
</Row>
|
||||
<ViewScaffold title="Wi-Fi">
|
||||
<Group title="Radio">
|
||||
<SwitchField label="Wi-Fi" hint={radioEnabled ? "On" : "Off"} bind:value={() => radioEnabled, (v) => toggleRadio(v)} />
|
||||
{#if ethernetLabel}
|
||||
<InfoRow label="Ethernet" value={ethernetLabel} />
|
||||
{/if}
|
||||
</Group>
|
||||
|
||||
{#if ethernetLabel}
|
||||
<Group title="Ethernet">
|
||||
<InfoRow label="Status" value={ethernetLabel} />
|
||||
{#if activeNet}
|
||||
<Group title="This network">
|
||||
<div class="wifi">
|
||||
<div class="bars on">
|
||||
{#each [1, 2, 3, 4] as n (n)}
|
||||
<b style="height: {3 + n * 3}px" class:lit={bars(activeNet.signal) >= n}></b>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="ssid">
|
||||
<strong>{activeNet.ssid}</strong>
|
||||
<small>{activeNet.secured ? "Secured" : "Open"} · {activeNet.signal}%</small>
|
||||
</div>
|
||||
<span class="pill on">Connected</span>
|
||||
</div>
|
||||
</Group>
|
||||
{/if}
|
||||
|
||||
<Group title="Available networks" wide>
|
||||
<Group title="Nearby" wide>
|
||||
<div class="list">
|
||||
{#if networks === null}
|
||||
{#if scanning && networks === null}
|
||||
<div class="empty">
|
||||
<Wifi size={40} />
|
||||
<span>Not scanned yet</span>
|
||||
<span class="hint">Press Scan to see nearby networks.</span>
|
||||
<Wifi size={36} />
|
||||
<span>Scanning…</span>
|
||||
</div>
|
||||
{:else if networks.length === 0}
|
||||
{:else if networks === null}
|
||||
<div class="empty">
|
||||
<WifiOff size={40} />
|
||||
<Wifi size={36} />
|
||||
<span>No scan yet</span>
|
||||
</div>
|
||||
{:else if nearby.length === 0 && !activeNet}
|
||||
<div class="empty">
|
||||
<WifiOff size={36} />
|
||||
<span>No networks found</span>
|
||||
<span class="hint">Try Scan again, or check Wi-Fi radio is on.</span>
|
||||
</div>
|
||||
{:else}
|
||||
{#each networks as net (net.ssid)}
|
||||
<div class="net-row">
|
||||
<span class="ssid" class:active={net.active}>{net.ssid}{net.active ? " (connected)" : ""}</span>
|
||||
{#each nearby as net (net.ssid)}
|
||||
<div class="wifi">
|
||||
<div class="bars">
|
||||
{#each [1, 2, 3, 4] as n (n)}
|
||||
<b style="height: {3 + n * 3}px" class:lit={bars(net.signal) >= n}></b>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="ssid">
|
||||
{net.ssid}
|
||||
<small>{net.known ? "Saved" : net.secured ? "Secured" : "Open"}</small>
|
||||
</div>
|
||||
{#if net.secured}<Lock size={14} />{/if}
|
||||
<span class="signal">{signalLabel(net.signal)}</span>
|
||||
{#if !net.active}
|
||||
<button class="connect" onclick={() => connect(net.ssid, net.secured, net.known)}>Connect</button>
|
||||
{/if}
|
||||
<button class="btn" onclick={() => connect(net.ssid, net.secured, net.known)}>Connect</button>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
|
|
@ -145,52 +166,28 @@
|
|||
|
||||
{#if pendingSsid}
|
||||
<div class="pw-row">
|
||||
<input type="password" bind:value={password} placeholder="Password" />
|
||||
<button class="connect" onclick={connectWithPassword}>Connect</button>
|
||||
<input type="password" bind:value={password} placeholder="Password for {pendingSsid}" />
|
||||
<button class="btn primary" onclick={connectWithPassword}>Connect</button>
|
||||
</div>
|
||||
{/if}
|
||||
{#if status}
|
||||
<span class="status">{status}</span>
|
||||
{/if}
|
||||
|
||||
<button class="scan" disabled={scanning} onclick={scan}>{scanning ? "Scanning…" : "Scan"}</button>
|
||||
<button class="btn" disabled={scanning} onclick={scan}>{scanning ? "Scanning…" : "Scan"}</button>
|
||||
</Group>
|
||||
|
||||
<Group title="Advanced" hint="VPN, 802.1x, and static IP configuration aren't covered here.">
|
||||
<button class="secondary" onclick={() => invoke("open_connection_editor")}>Open connection editor</button>
|
||||
<Group title="Advanced">
|
||||
<button class="btn" onclick={() => invoke("open_connection_editor")}>Connection editor</button>
|
||||
</Group>
|
||||
</ViewScaffold>
|
||||
|
||||
<style>
|
||||
.switch {
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
border-radius: 999px;
|
||||
border: none;
|
||||
background-color: var(--overlay);
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.switch.on {
|
||||
background-color: var(--accent);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.knob {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--on-surface);
|
||||
}
|
||||
|
||||
.list {
|
||||
min-height: 100px;
|
||||
max-height: 260px;
|
||||
min-height: 72px;
|
||||
max-height: 280px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
|
|
@ -198,79 +195,80 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: var(--space-xl, 20px) 0;
|
||||
padding: 20px 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: var(--font-size-secondary, 12px);
|
||||
}
|
||||
|
||||
.net-row {
|
||||
.wifi {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm, 8px);
|
||||
background-color: var(--surface);
|
||||
border-radius: var(--radius-secondary, 6px);
|
||||
padding: var(--space-sm, 8px) var(--space-md, 12px);
|
||||
gap: 10px;
|
||||
padding: 10px 2px;
|
||||
}
|
||||
|
||||
.wifi + .wifi {
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.bars {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
height: 14px;
|
||||
width: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bars b {
|
||||
width: 3px;
|
||||
background: color-mix(in srgb, var(--fg) 22%, transparent);
|
||||
border-radius: 1px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bars b.lit,
|
||||
.bars.on b.lit {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.ssid {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ssid.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.signal {
|
||||
opacity: 0.6;
|
||||
font-size: var(--font-size-secondary, 12px);
|
||||
.ssid small {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.pw-row {
|
||||
display: flex;
|
||||
gap: var(--space-sm, 8px);
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.pw-row input {
|
||||
flex: 1;
|
||||
background-color: var(--surface);
|
||||
color: var(--on-surface);
|
||||
background: var(--bg);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-secondary, 6px);
|
||||
padding: var(--space-xs, 4px) var(--space-sm, 8px);
|
||||
border-radius: 10px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.status {
|
||||
opacity: 0.6;
|
||||
font-size: var(--font-size-secondary, 12px);
|
||||
display: block;
|
||||
margin: 8px 0;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
button.connect,
|
||||
button.scan,
|
||||
button.secondary {
|
||||
border: none;
|
||||
border-radius: var(--radius-primary, 8px);
|
||||
padding: var(--space-xs, 4px) var(--space-md, 12px);
|
||||
cursor: pointer;
|
||||
background-color: var(--accent);
|
||||
color: var(--on-accent);
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
background-color: var(--bg);
|
||||
color: var(--on-surface);
|
||||
align-self: flex-start;
|
||||
padding: var(--space-sm, 8px) var(--space-lg, 16px);
|
||||
}
|
||||
|
||||
button.scan {
|
||||
.btn {
|
||||
margin-top: 10px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
.wifi .btn {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
16
frontend/src/lib/views/NetworkHub.svelte
Normal file
16
frontend/src/lib/views/NetworkHub.svelte
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<script lang="ts">
|
||||
import Hub from "$lib/components/Hub.svelte";
|
||||
import Network from "./Network.svelte";
|
||||
import Vpn from "./Vpn.svelte";
|
||||
import Breadcrumbs from "./Breadcrumbs.svelte";
|
||||
</script>
|
||||
|
||||
<Hub
|
||||
title="Wi-Fi & internet"
|
||||
lede="Wi-Fi, saved networks, and VPN."
|
||||
tabs={[
|
||||
{ id: "network", label: "Wi-Fi", component: Network },
|
||||
{ id: "vpn", label: "VPN", component: Vpn },
|
||||
{ id: "breadcrumbs", label: "Saved networks", component: Breadcrumbs },
|
||||
]}
|
||||
/>
|
||||
|
|
@ -5,8 +5,10 @@
|
|||
import ViewScaffold from "$lib/components/ViewScaffold.svelte";
|
||||
import Group from "$lib/components/Group.svelte";
|
||||
import Hint from "$lib/components/Hint.svelte";
|
||||
import NumberField from "$lib/components/NumberField.svelte";
|
||||
import SwitchField from "$lib/components/SwitchField.svelte";
|
||||
import SliderField from "$lib/components/SliderField.svelte";
|
||||
import LogView from "$lib/components/LogView.svelte";
|
||||
import { debounce } from "$lib/debounce";
|
||||
|
||||
interface NightlightStatus {
|
||||
installed: boolean;
|
||||
|
|
@ -20,19 +22,18 @@
|
|||
let log = $state<string[]>([]);
|
||||
let busy = $state(false);
|
||||
let message = $state("");
|
||||
|
||||
async function refresh() {
|
||||
st = await invoke<NightlightStatus>("get_nightlight");
|
||||
}
|
||||
|
||||
onMount(refresh);
|
||||
|
||||
async function apply(enabled: boolean) {
|
||||
async function applyNow() {
|
||||
if (!st) return;
|
||||
message = "";
|
||||
try {
|
||||
st = await invoke<NightlightStatus>("set_nightlight", {
|
||||
enabled,
|
||||
enabled: st.enabled,
|
||||
temperature: st.temperature,
|
||||
});
|
||||
if (st.error) message = st.error;
|
||||
|
|
@ -41,6 +42,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
const persistTemp = debounce(applyNow, 200);
|
||||
|
||||
async function install() {
|
||||
log = [];
|
||||
busy = true;
|
||||
|
|
@ -53,93 +56,30 @@
|
|||
</script>
|
||||
|
||||
<ViewScaffold title="Night light">
|
||||
<Group
|
||||
title="Hyprland twilight"
|
||||
hint="hyprsunset owns the compositor color filter. hyprctl hyprsunset talks to its socket — the binary has to be installed and running."
|
||||
>
|
||||
<Group title="Night light" hint="Warmer screen after dark.">
|
||||
{#if !st}
|
||||
<Hint text="Loading…" />
|
||||
{:else if !st.installed}
|
||||
<Hint text="hyprsunset is not installed. Night light cannot run without it." />
|
||||
<button class="primary" disabled={busy} onclick={install}>Install hyprsunset</button>
|
||||
<Hint text="hyprsunset is not installed." />
|
||||
<button class="btn primary" disabled={busy} onclick={install}>Install</button>
|
||||
{:else}
|
||||
<div class="row-switch">
|
||||
<span>Night light</span>
|
||||
<button
|
||||
class="switch"
|
||||
class:on={st.enabled}
|
||||
role="switch"
|
||||
aria-checked={st.enabled}
|
||||
aria-label="Night light"
|
||||
onclick={() => apply(!st!.enabled)}
|
||||
>
|
||||
<span class="knob"></span>
|
||||
</button>
|
||||
</div>
|
||||
<NumberField label="Temperature (K)" bind:value={st.temperature} min={2000} max={6500} step={100} />
|
||||
<button disabled={!st.enabled} onclick={() => apply(true)}>Apply temperature</button>
|
||||
<Hint text={st.running ? "hyprsunset is running." : "hyprsunset will start when you enable night light."} />
|
||||
<SwitchField
|
||||
label="Night light"
|
||||
bind:value={() => st!.enabled, (v) => { st!.enabled = v; applyNow(); }}
|
||||
/>
|
||||
{#if st.enabled}
|
||||
<SliderField
|
||||
label="Warmth"
|
||||
bind:value={st.temperature}
|
||||
min={2000}
|
||||
max={6500}
|
||||
step={100}
|
||||
suffix="K"
|
||||
onChange={persistTemp}
|
||||
/>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if message}<Hint text={message} />{/if}
|
||||
</Group>
|
||||
<LogView lines={log} />
|
||||
</ViewScaffold>
|
||||
|
||||
<style>
|
||||
.row-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: var(--surface);
|
||||
border-radius: var(--radius-primary, 8px);
|
||||
padding: var(--space-md, 12px) var(--space-lg, 16px);
|
||||
margin-bottom: var(--space-sm, 8px);
|
||||
}
|
||||
|
||||
.switch {
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 999px;
|
||||
border: none;
|
||||
background-color: var(--overlay);
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.switch.on {
|
||||
background-color: var(--accent);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.knob {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--on-surface);
|
||||
display: block;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: var(--surface);
|
||||
color: var(--on-surface);
|
||||
border: none;
|
||||
border-radius: var(--radius-primary, 8px);
|
||||
padding: var(--space-xs, 4px) var(--space-md, 12px);
|
||||
cursor: pointer;
|
||||
align-self: flex-start;
|
||||
margin-top: var(--space-sm, 8px);
|
||||
}
|
||||
|
||||
button.primary {
|
||||
background-color: var(--accent);
|
||||
color: var(--on-accent);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
log = [...log, line];
|
||||
});
|
||||
busy = false;
|
||||
if (!ok) message = "Install failed — see the log.";
|
||||
if (!ok) message = "Install failed. See the log.";
|
||||
await refresh();
|
||||
return ok;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
|
||||
<Group
|
||||
title="System packages (pacman)"
|
||||
hint="Base system, kernel, bos-settings, and republished AUR packages — the other half of what bos-update covers. Needs your password (polkit) since pacman requires root."
|
||||
hint="Official repos. Needs your password."
|
||||
>
|
||||
<button disabled={busy} onclick={updateSystem}>Update system (pacman -Syu)</button>
|
||||
</Group>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,10 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<ViewScaffold title="Power">
|
||||
<ViewScaffold
|
||||
title="Power & battery"
|
||||
lede="Brightness, battery, and charge limits."
|
||||
>
|
||||
{#if info}
|
||||
<Group title="Battery">
|
||||
{#each info.battery as [label, value] (label)}
|
||||
|
|
@ -63,20 +66,22 @@
|
|||
{#if info.charge_start !== null && info.charge_end !== null}
|
||||
<Group
|
||||
title="Charge limits"
|
||||
hint="Some laptops let you cap charging below 100% to slow battery wear on a machine that's mostly plugged in."
|
||||
hint="Keeps the battery off 100% when this machine stays plugged in."
|
||||
>
|
||||
<Row label="Start charging below (%)">
|
||||
<input type="number" min="0" max="100" bind:value={chargeStart} onchange={() => setChargeThreshold("start", chargeStart)} />
|
||||
<Row label="Start charging below">
|
||||
<input type="range" min="0" max="100" bind:value={chargeStart} onchange={() => setChargeThreshold("start", chargeStart)} />
|
||||
<span class="pct">{chargeStart}%</span>
|
||||
</Row>
|
||||
<Row label="Stop charging at (%)">
|
||||
<input type="number" min="1" max="100" bind:value={chargeEnd} onchange={() => setChargeThreshold("end", chargeEnd)} />
|
||||
<Row label="Stop charging at">
|
||||
<input type="range" min="1" max="100" bind:value={chargeEnd} onchange={() => setChargeThreshold("end", chargeEnd)} />
|
||||
<span class="pct">{chargeEnd}%</span>
|
||||
</Row>
|
||||
</Group>
|
||||
{/if}
|
||||
|
||||
<Group
|
||||
title="TLP"
|
||||
hint="TLP automatically applies a power-saving profile on battery and a performance profile on AC — there's no manual switch by design."
|
||||
hint="TLP picks battery vs AC on its own."
|
||||
>
|
||||
<InfoRow label="Current profile" value={info.tlp_profile ?? "unknown"} />
|
||||
</Group>
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
14
frontend/src/lib/views/PrivacyHub.svelte
Normal file
14
frontend/src/lib/views/PrivacyHub.svelte
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<script lang="ts">
|
||||
import Hub from "$lib/components/Hub.svelte";
|
||||
import Firewall from "./Firewall.svelte";
|
||||
import Users from "./Users.svelte";
|
||||
</script>
|
||||
|
||||
<Hub
|
||||
title="Privacy & users"
|
||||
lede="Firewall and accounts."
|
||||
tabs={[
|
||||
{ id: "firewall", label: "Firewall", component: Firewall },
|
||||
{ id: "users", label: "Users", component: Users },
|
||||
]}
|
||||
/>
|
||||
|
|
@ -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 {
|
||||
|
|
@ -62,10 +62,10 @@
|
|||
</script>
|
||||
|
||||
<ViewScaffold title="Snapshots">
|
||||
<Hint text="This is how you undo a bad update: reboot and pick the snapshot in GRUB (BOS snapshots)." />
|
||||
<Hint text="Reboot and pick a snapshot in GRUB to undo an update." />
|
||||
<Group
|
||||
title="What to pick in GRUB"
|
||||
hint="Number, date, and description match the GRUB “BOS snapshots” submenu. Reboot, then choose that entry. This page does not run snapper rollback."
|
||||
hint="Reboot and choose that entry in GRUB."
|
||||
wide
|
||||
>
|
||||
<div class="list">
|
||||
|
|
|
|||
|
|
@ -24,107 +24,154 @@
|
|||
let output = $state<DeviceSection | null>(null);
|
||||
let input = $state<DeviceSection | null>(null);
|
||||
|
||||
function pick(devices: SoundDevice[], defaultName: string | null): number {
|
||||
const i = devices.findIndex((d) => d.name === defaultName);
|
||||
return i >= 0 ? i : 0;
|
||||
}
|
||||
|
||||
async function loadSection(kind: "sinks" | "sources", title: string): Promise<DeviceSection> {
|
||||
const section = await invoke<{ devices: SoundDevice[]; default_name: string | null }>("get_sound_section", { kind });
|
||||
const selected = Math.max(0, section.devices.findIndex((d) => d.name === section.default_name));
|
||||
return { kind, title, devices: section.devices, selected };
|
||||
const section = await invoke<{ devices: SoundDevice[]; default_name: string | null }>("get_sound_section", {
|
||||
kind,
|
||||
});
|
||||
return { kind, title, devices: section.devices, selected: pick(section.devices, section.default_name) };
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
output = await loadSection("sinks", "Output");
|
||||
input = await loadSection("sources", "Input");
|
||||
try {
|
||||
output = await loadSection("sinks", "Output");
|
||||
input = await loadSection("sources", "Input");
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
output = { kind: "sinks", title: "Output", devices: [], selected: 0 };
|
||||
input = { kind: "sources", title: "Input", devices: [], selected: 0 };
|
||||
}
|
||||
});
|
||||
|
||||
function current(section: DeviceSection): SoundDevice | null {
|
||||
return section.devices[section.selected] ?? section.devices[0] ?? null;
|
||||
}
|
||||
|
||||
async function selectDevice(section: DeviceSection, index: number) {
|
||||
const device = section.devices[index];
|
||||
if (!device) return;
|
||||
section.selected = index;
|
||||
await invoke("set_default_sound_device", { kind: section.kind, name: section.devices[index].name });
|
||||
await invoke("set_default_sound_device", { kind: section.kind, name: device.name });
|
||||
}
|
||||
|
||||
async function setVolume(section: DeviceSection, percent: number) {
|
||||
const device = section.devices[section.selected];
|
||||
const device = current(section);
|
||||
if (!device) return;
|
||||
device.percent = percent;
|
||||
await invoke("set_sound_volume", { kind: section.kind, name: device.name, percent });
|
||||
await invoke("set_sound_volume", { kind: section.kind, name: device.name, percent: Math.round(percent) });
|
||||
}
|
||||
|
||||
async function setMute(section: DeviceSection, mute: boolean) {
|
||||
const device = section.devices[section.selected];
|
||||
const device = current(section);
|
||||
if (!device) return;
|
||||
device.mute = mute;
|
||||
await invoke("set_sound_mute", { kind: section.kind, name: device.name, mute });
|
||||
}
|
||||
</script>
|
||||
|
||||
{#snippet deviceSection(section: DeviceSection | null)}
|
||||
{#if section}
|
||||
<Group title={section.title}>
|
||||
{#if section.devices.length === 0}
|
||||
<Hint text="No devices found." />
|
||||
{:else}
|
||||
<Row label="Device">
|
||||
<select
|
||||
value={section.selected}
|
||||
onchange={(e) => selectDevice(section, Number(e.currentTarget.value))}
|
||||
>
|
||||
{#each section.devices as d, i (d.name)}
|
||||
<option value={i}>{d.description}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</Row>
|
||||
{#snippet sectionCard(section: DeviceSection)}
|
||||
<Group title={section.title}>
|
||||
{#if section.devices.length === 0}
|
||||
<Hint text="No devices found." />
|
||||
{:else}
|
||||
{#each section.devices as d, i (d.name + i)}
|
||||
<button type="button" class="dev" class:on={section.selected === i} onclick={() => selectDevice(section, i)}>
|
||||
<span class="dev-name">{d.description || d.name}</span>
|
||||
{#if section.selected === i}<span class="mark">In use</span>{/if}
|
||||
</button>
|
||||
{/each}
|
||||
{#if current(section)}
|
||||
<Row label="Volume">
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="150"
|
||||
value={section.devices[section.selected].percent}
|
||||
value={Math.round(current(section)!.percent)}
|
||||
oninput={(e) => setVolume(section, Number(e.currentTarget.value))}
|
||||
/>
|
||||
<span class="pct">{section.devices[section.selected].percent}%</span>
|
||||
<span class="pct">{Math.round(current(section)!.percent)}%</span>
|
||||
</Row>
|
||||
<SwitchField
|
||||
label="Mute"
|
||||
bind:value={
|
||||
() => section.devices[section.selected].mute,
|
||||
(v) => setMute(section, v)
|
||||
}
|
||||
bind:value={() => current(section)!.mute, (v) => setMute(section, v)}
|
||||
/>
|
||||
{/if}
|
||||
</Group>
|
||||
{/if}
|
||||
{/if}
|
||||
</Group>
|
||||
{/snippet}
|
||||
|
||||
<ViewScaffold title="Sound">
|
||||
{@render deviceSection(output)}
|
||||
{@render deviceSection(input)}
|
||||
<ViewScaffold title="Sound" lede="Output, input, and volume.">
|
||||
{#if output}
|
||||
{@render sectionCard(output)}
|
||||
{/if}
|
||||
{#if input}
|
||||
{@render sectionCard(input)}
|
||||
{/if}
|
||||
|
||||
<Group title="Advanced" hint="Per-app volume, port selection, and profile switching aren't covered here.">
|
||||
<button class="secondary" onclick={() => invoke("open_mixer")}>Open advanced mixer (pavucontrol)</button>
|
||||
<Group title="Advanced">
|
||||
<button class="secondary" onclick={() => invoke("open_mixer")}>Per-app volume</button>
|
||||
</Group>
|
||||
</ViewScaffold>
|
||||
|
||||
<style>
|
||||
select {
|
||||
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);
|
||||
.dev {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-top: 1px solid var(--line, #ffffff12);
|
||||
padding: 10px 2px;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dev:first-child {
|
||||
border-top: none;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.dev.on .dev-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dev-name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mark {
|
||||
font-size: 11px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
width: 180px;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
|
||||
.pct {
|
||||
margin-left: var(--space-sm, 8px);
|
||||
font-size: var(--font-size-secondary, 12px);
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
min-width: 4ch;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background-color: var(--bg);
|
||||
color: var(--on-surface);
|
||||
border: none;
|
||||
border-radius: var(--radius-primary, 8px);
|
||||
padding: var(--space-sm, 8px) var(--space-lg, 16px);
|
||||
border-radius: 10px;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
|
|
|||
24
frontend/src/lib/views/SystemHub.svelte
Normal file
24
frontend/src/lib/views/SystemHub.svelte
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script lang="ts">
|
||||
import Hub from "$lib/components/Hub.svelte";
|
||||
import Updates from "./Updates.svelte";
|
||||
import Packages from "./Packages.svelte";
|
||||
import Aur from "./Aur.svelte";
|
||||
import Firmware from "./Firmware.svelte";
|
||||
import Snapshots from "./Snapshots.svelte";
|
||||
import Backup from "./Backup.svelte";
|
||||
import Channel from "./Channel.svelte";
|
||||
</script>
|
||||
|
||||
<Hub
|
||||
title="Updates & backup"
|
||||
lede="Updates, snapshots, and backups."
|
||||
tabs={[
|
||||
{ id: "updates", label: "Updates", component: Updates },
|
||||
{ id: "packages", label: "Packages", component: Packages },
|
||||
{ id: "aur", label: "AUR", component: Aur },
|
||||
{ id: "firmware", label: "Firmware", component: Firmware },
|
||||
{ id: "snapshots", label: "Snapshots", component: Snapshots },
|
||||
{ id: "backup", label: "Backup", component: Backup },
|
||||
{ id: "channel", label: "Channel", component: Channel },
|
||||
]}
|
||||
/>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { getContext, onMount } from "svelte";
|
||||
import { onMount } from "svelte";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { runStreamed } from "$lib/streaming";
|
||||
import ViewScaffold from "$lib/components/ViewScaffold.svelte";
|
||||
|
|
@ -7,12 +7,10 @@
|
|||
import Hint from "$lib/components/Hint.svelte";
|
||||
import EmptyState from "$lib/components/EmptyState.svelte";
|
||||
import LogView from "$lib/components/LogView.svelte";
|
||||
import { NAVIGATE_KEY, type Navigate } from "$lib/nav";
|
||||
import { go } from "$lib/nav.svelte";
|
||||
import Download from "@lucide/svelte/icons/download";
|
||||
import Cpu from "@lucide/svelte/icons/cpu";
|
||||
|
||||
const navigate = getContext<Navigate | undefined>(NAVIGATE_KEY);
|
||||
|
||||
interface PendingUpdate {
|
||||
name: string;
|
||||
current: string;
|
||||
|
|
@ -114,7 +112,7 @@
|
|||
|
||||
<Group
|
||||
title="Bread ecosystem (bakery)"
|
||||
hint="bakery --dry-run update --all — bakery has no separate outdated command. Per-package install still lives on Packages."
|
||||
hint="Bakery packages waiting to update."
|
||||
wide
|
||||
>
|
||||
{#if !status}
|
||||
|
|
@ -164,10 +162,9 @@
|
|||
title="Rollback"
|
||||
hint="Boot a snapshot from GRUB (BOS snapshots)."
|
||||
>
|
||||
<Hint text="Snapshots lists number, date, and description so you know which GRUB entry to pick. snapper rollback will not change what GRUB boots (rootflags=subvol=@)." />
|
||||
<Hint text="Bakery also has bakery rollback <pkg> for a single ecosystem binary — that is not a system rollback." />
|
||||
<Hint text="Pick the snapshot in GRUB. bakery rollback undoes one package." />
|
||||
<div class="btn-row">
|
||||
<button disabled={!navigate} onclick={() => navigate?.("snapshots")}>Open Snapshots</button>
|
||||
<button onclick={() => go("snapshots")}>Open Snapshots</button>
|
||||
</div>
|
||||
</Group>
|
||||
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
</script>
|
||||
|
||||
<ViewScaffold title="Users">
|
||||
<Group title="Accounts" hint="Real login accounts on this machine (system/service accounts aren't shown). Your own account can't be removed from here." wide>
|
||||
<Group title="Accounts" hint="Login accounts. You cannot delete yourself." wide>
|
||||
<div class="list">
|
||||
{#if accounts}
|
||||
{#each accounts as acc (acc.username)}
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
<ViewScaffold title="VPN / WireGuard">
|
||||
<Group
|
||||
title="NetworkManager tunnels"
|
||||
hint="Lists connection type vpn and wireguard only. Wi-Fi profiles stay on breadcrumbs; Tailscale is not managed here."
|
||||
hint="WireGuard and OpenVPN. Tailscale is under Saved networks."
|
||||
wide
|
||||
>
|
||||
{#if !status}
|
||||
|
|
|
|||
|
|
@ -1,83 +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 Updates from "./Updates.svelte";
|
||||
import Printing from "./Printing.svelte";
|
||||
import Vpn from "./Vpn.svelte";
|
||||
import NightLight from "./NightLight.svelte";
|
||||
import InputMethod from "./InputMethod.svelte";
|
||||
import Accessibility from "./Accessibility.svelte";
|
||||
import Defaults from "./Defaults.svelte";
|
||||
import Channel from "./Channel.svelte";
|
||||
import Backup from "./Backup.svelte";
|
||||
import Optional from "./Optional.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<string, Component> = {
|
||||
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,
|
||||
updates: Updates,
|
||||
printing: Printing,
|
||||
vpn: Vpn,
|
||||
nightlight: NightLight,
|
||||
ime: InputMethod,
|
||||
accessibility: Accessibility,
|
||||
defaults: Defaults,
|
||||
channel: Channel,
|
||||
backup: Backup,
|
||||
optional: Optional,
|
||||
displays: DisplaysHub,
|
||||
sound: Sound,
|
||||
power: Power,
|
||||
appearance: AppearanceHub,
|
||||
desktop: DesktopHub,
|
||||
input: InputHub,
|
||||
apps: AppsHub,
|
||||
privacy: PrivacyHub,
|
||||
system: SystemHub,
|
||||
about: AboutHub,
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue