Merge pull request 'Settings redesign: hub navigation (reconciled with the operand hardening)' (#2) from feature/settings-redesign into main
All checks were successful
dev release / build (push) Successful in 2m31s
All checks were successful
dev release / build (push) Successful in 2m31s
This commit is contained in:
commit
b34fd6c807
97 changed files with 2664 additions and 1142 deletions
5
.gitignore
vendored
5
.gitignore
vendored
|
|
@ -32,3 +32,8 @@ logs/
|
|||
|
||||
# Claude Code local agent state
|
||||
.claude/
|
||||
|
||||
# .freebuff local tool state (not for commit)
|
||||
.freebuff/
|
||||
# graphify knowledge-graph output (local tool cache, not for commit)
|
||||
graphify-out/
|
||||
|
|
|
|||
18
frontend/package-lock.json
generated
18
frontend/package-lock.json
generated
|
|
@ -19,6 +19,7 @@
|
|||
"@sveltejs/kit": "^2.9.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
||||
"@tauri-apps/cli": "^2",
|
||||
"@types/node": "^26.4.0",
|
||||
"svelte": "^5.0.0",
|
||||
"svelte-check": "^4.0.0",
|
||||
"typescript": "~5.6.2",
|
||||
|
|
@ -1308,6 +1309,16 @@
|
|||
"integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "26.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-26.4.0.tgz",
|
||||
"integrity": "sha512-faiGnoIrLH/V8cibOMEAZ8pMw6oXqSukl29ra4mN8GdaB2ZewzeaLj+INpV5N+Z1eKWzY+IzaIZH2EIR6YZRNQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"undici-types": "~8.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/trusted-types": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
|
||||
|
|
@ -1837,6 +1848,13 @@
|
|||
"node": ">=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/undici-types": {
|
||||
"version": "8.3.0",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-8.3.0.tgz",
|
||||
"integrity": "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "6.4.3",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.4.3.tgz",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bos-settings-frontend",
|
||||
"version": "0.8.0",
|
||||
"version": "0.8.2",
|
||||
"description": "Frontend for BOS Settings",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
|
@ -23,6 +23,7 @@
|
|||
"@sveltejs/kit": "^2.9.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
||||
"@tauri-apps/cli": "^2",
|
||||
"@types/node": "^26.4.0",
|
||||
"svelte": "^5.0.0",
|
||||
"svelte-check": "^4.0.0",
|
||||
"typescript": "~5.6.2",
|
||||
|
|
|
|||
10
frontend/src/lib/components/Embed.svelte
Normal file
10
frontend/src/lib/components/Embed.svelte
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
import { setContext } from "svelte";
|
||||
import { EMBEDDED_KEY } from "$lib/embed";
|
||||
|
||||
let { children }: { children: Snippet } = $props();
|
||||
setContext(EMBEDDED_KEY, true);
|
||||
</script>
|
||||
|
||||
{@render children()}
|
||||
|
|
@ -16,8 +16,8 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: var(--space-xl, 20px) 0;
|
||||
opacity: 0.7;
|
||||
padding: 28px 8px;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,33 +22,35 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line, color-mix(in srgb, var(--fg) 8%, transparent));
|
||||
border-radius: var(--radius, 14px);
|
||||
padding: 16px 18px;
|
||||
}
|
||||
|
||||
.group.wide {
|
||||
grid-column: 1 / -1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 1.05em;
|
||||
margin: 0 0 var(--space-sm, 8px);
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted, color-mix(in oklab, var(--fg) 58%, transparent));
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
opacity: 0.75;
|
||||
color: var(--muted, color-mix(in oklab, var(--fg) 58%, transparent));
|
||||
font-size: var(--font-size-secondary, 12px);
|
||||
line-height: 1.4;
|
||||
margin: 0 0 var(--space-sm, 8px);
|
||||
margin: -6px 0 12px;
|
||||
}
|
||||
|
||||
.rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* Flex children default to refusing to shrink below their content's
|
||||
natural width (min-width: auto) — without this, a button/input
|
||||
with enough text overflows past the grid column's actual pixel
|
||||
width instead of wrapping, visually spilling into the next
|
||||
column. */
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,13 +6,9 @@
|
|||
|
||||
<style>
|
||||
.hint {
|
||||
opacity: 0.6;
|
||||
color: var(--muted, color-mix(in oklab, var(--fg) 58%, transparent));
|
||||
font-size: var(--font-size-secondary, 12px);
|
||||
margin: 0 0 var(--space-xs, 4px);
|
||||
/* No-op unless this Hint is a direct child of ViewScaffold's CSS
|
||||
grid (i.e. used standalone between Groups, not nested inside
|
||||
one) — in that case it spans full width instead of getting
|
||||
squeezed into whichever grid column it happened to land in. */
|
||||
grid-column: 1 / -1;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
51
frontend/src/lib/components/Hub.svelte
Normal file
51
frontend/src/lib/components/Hub.svelte
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<script lang="ts">
|
||||
import type { Component } from "svelte";
|
||||
import ViewScaffold from "./ViewScaffold.svelte";
|
||||
import Subnav from "./Subnav.svelte";
|
||||
import Embed from "./Embed.svelte";
|
||||
import { nav } from "$lib/nav.svelte";
|
||||
|
||||
interface Tab {
|
||||
id: string;
|
||||
label: string;
|
||||
component: Component;
|
||||
}
|
||||
|
||||
let { title, lede, tabs }: { title: string; lede: string; tabs: Tab[] } = $props();
|
||||
|
||||
function takeTab(): string {
|
||||
const wanted = nav.tab;
|
||||
nav.tab = null;
|
||||
if (wanted && tabs.some((t) => t.id === wanted)) return wanted;
|
||||
return tabs[0]?.id ?? "";
|
||||
}
|
||||
|
||||
let tab = $state(takeTab());
|
||||
|
||||
$effect(() => {
|
||||
const wanted = nav.tab;
|
||||
if (wanted === null) return;
|
||||
if (wanted === "") {
|
||||
tab = tabs[0]?.id ?? "";
|
||||
nav.tab = null;
|
||||
} else if (tabs.some((t) => t.id === wanted)) {
|
||||
tab = wanted;
|
||||
nav.tab = null;
|
||||
}
|
||||
});
|
||||
|
||||
let Active = $derived(tabs.find((t) => t.id === tab)?.component);
|
||||
</script>
|
||||
|
||||
<ViewScaffold {title} {lede}>
|
||||
{#if tabs.length > 1}
|
||||
<Subnav items={tabs.map(({ id, label }) => ({ id, label }))} bind:value={tab} />
|
||||
{/if}
|
||||
<Embed>
|
||||
{#key tab}
|
||||
{#if Active}
|
||||
<Active />
|
||||
{/if}
|
||||
{/key}
|
||||
</Embed>
|
||||
</ViewScaffold>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import Row from "./Row.svelte";
|
||||
|
||||
// Hyprland's own color format: "rgba(RRGGBBAA)" — a plain hex color input
|
||||
// Hyprland's own color format: "rgba(RRGGBBAA)" - a plain hex color input
|
||||
// has no alpha channel, so this pairs one with an alpha slider and
|
||||
// recombines them into that exact string on every change.
|
||||
let { label, value = $bindable() }: { label: string; value: string } = $props();
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@
|
|||
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);
|
||||
border-radius: var(--radius-sm, 10px);
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
|
|
|
|||
|
|
@ -1,57 +1,51 @@
|
|||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
let { label, children }: { label: string; children: Snippet } = $props();
|
||||
let { label, hint, children }: { label: string; hint?: string; children: Snippet } = $props();
|
||||
</script>
|
||||
|
||||
<div class="field-row">
|
||||
<span class="label">{label}</span>
|
||||
<div class="meta">
|
||||
<span class="label">{label}</span>
|
||||
{#if hint}<span class="hint">{hint}</span>{/if}
|
||||
</div>
|
||||
<div class="control">
|
||||
{@render children()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* GNOME Settings' "boxed list" look: consecutive rows merge into one
|
||||
card with a thin divider between them, rounding only the outer
|
||||
corners of the run — not each row individually. `.field-row` is a
|
||||
distinctive name (not just `.row`) so the :global() adjacency rules
|
||||
below can't collide with an unrelated `.row` class elsewhere (e.g.
|
||||
Sidebar's own nav rows) — every Row instance (and everything that
|
||||
wraps it — InfoRow, the field components) renders this same element,
|
||||
so a run of them is just plain DOM adjacency; no parent wrapper
|
||||
component needed. */
|
||||
.field-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-lg, 16px);
|
||||
background-color: var(--surface);
|
||||
color: var(--on-surface);
|
||||
border-radius: var(--radius-primary, 8px);
|
||||
padding: var(--space-md, 12px) var(--space-lg, 16px);
|
||||
margin-bottom: var(--space-sm, 8px);
|
||||
gap: 14px;
|
||||
padding: 11px 2px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
: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;
|
||||
border-top: 1px solid var(--line, color-mix(in srgb, var(--fg) 8%, transparent));
|
||||
}
|
||||
|
||||
:global(.field-row:has(+ .field-row)) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
margin-bottom: 0;
|
||||
.meta {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--muted, color-mix(in oklab, var(--fg) 58%, transparent));
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</script>
|
||||
|
||||
<div class="row">
|
||||
<button disabled={saving} onclick={save}>Save</button>
|
||||
<button class="btn primary" disabled={saving} onclick={save}>Save</button>
|
||||
<span class="status">{status}</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -28,28 +28,11 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md, 12px);
|
||||
margin-top: var(--space-lg, 16px);
|
||||
/* Always spans the full grid width, regardless of how many
|
||||
Group columns the rest of the page laid out above it. */
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
button {
|
||||
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;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.status {
|
||||
opacity: 0.6;
|
||||
color: var(--muted, color-mix(in oklab, var(--fg) 58%, transparent));
|
||||
font-size: var(--font-size-secondary, 12px);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,25 @@
|
|||
<script lang="ts">
|
||||
import Row from "./Row.svelte";
|
||||
|
||||
let { label, value = $bindable(), options }: { label: string; value: string; options: string[] } = $props();
|
||||
let {
|
||||
label,
|
||||
hint,
|
||||
value = $bindable(),
|
||||
options,
|
||||
labels = {},
|
||||
}: {
|
||||
label: string;
|
||||
hint?: string;
|
||||
value: string;
|
||||
options: string[];
|
||||
labels?: Record<string, string>;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<Row {label}>
|
||||
<Row {label} {hint}>
|
||||
<select bind:value>
|
||||
{#each options as opt (opt)}
|
||||
<option value={opt}>{opt}</option>
|
||||
<option value={opt}>{labels[opt] ?? opt}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</Row>
|
||||
|
|
@ -18,8 +30,8 @@
|
|||
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);
|
||||
border-radius: var(--radius-sm, 10px);
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
option {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
function toggle() {
|
||||
if (active && critical) {
|
||||
if (!confirm(`Stop ${unit}? This is a core part of the desktop's event handling — stopping it may affect other bread apps until it's restarted.`)) {
|
||||
if (!confirm(`Stop ${unit}? Other bread apps may stall until it is restarted.`)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
<button onclick={openLogs}>View logs</button>
|
||||
</div>
|
||||
{#if hasConfig}
|
||||
<Hint text="Save (below) only writes the config file — click Restart above for the running service to pick up the change." />
|
||||
<Hint text="Save writes the file. Restart the service to apply." />
|
||||
{/if}
|
||||
</Group>
|
||||
|
||||
|
|
@ -74,16 +74,16 @@
|
|||
}
|
||||
|
||||
button {
|
||||
background-color: var(--surface);
|
||||
background-color: var(--surface-2, var(--bg));
|
||||
color: var(--on-surface);
|
||||
border: none;
|
||||
border-radius: var(--radius-primary, 8px);
|
||||
border: 1px solid var(--line, transparent);
|
||||
border-radius: var(--radius-sm, 10px);
|
||||
padding: var(--space-sm, 8px) var(--space-lg, 16px);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: color-mix(in srgb, var(--on-surface) 14%, transparent);
|
||||
background-color: color-mix(in srgb, var(--on-surface) 10%, transparent);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
|
|
|
|||
|
|
@ -1,59 +1,130 @@
|
|||
<script lang="ts">
|
||||
import Search from "@lucide/svelte/icons/search";
|
||||
import { SIDEBAR_SECTIONS } from "$lib/sidebar";
|
||||
import { searchSettings } from "$lib/search";
|
||||
import { go, nav } from "$lib/nav.svelte";
|
||||
|
||||
let { activePage = $bindable() }: { activePage: string } = $props();
|
||||
let query = $state("");
|
||||
let hits = $derived(query.trim().length >= 1 ? searchSettings(query, 6) : []);
|
||||
|
||||
function jump(page: string, tab?: string) {
|
||||
query = "";
|
||||
go(page, tab);
|
||||
}
|
||||
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if (e.key === "Enter" && hits[0]) {
|
||||
jump(hits[0].page, hits[0].tab);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav class="sidebar">
|
||||
{#each SIDEBAR_SECTIONS as section (section.title ?? "untitled")}
|
||||
{#if section.title}
|
||||
<div class="section-header">{section.title}</div>
|
||||
{/if}
|
||||
{#each section.items as item (item.id)}
|
||||
<button
|
||||
class="row"
|
||||
class:selected={activePage === item.id}
|
||||
onclick={() => (activePage = item.id)}
|
||||
>
|
||||
<item.icon size={16} />
|
||||
<span class="label">{item.label}</span>
|
||||
</button>
|
||||
{/each}
|
||||
{/each}
|
||||
<div class="search-wrap">
|
||||
<Search size={16} />
|
||||
<input bind:value={query} placeholder="Search settings" onkeydown={onKey} />
|
||||
</div>
|
||||
|
||||
{#if hits.length > 0}
|
||||
<div class="hits">
|
||||
{#each hits as hit (`${hit.page}:${hit.tab ?? ""}:${hit.label}`)}
|
||||
<button type="button" class="hit" onclick={() => jump(hit.page, hit.tab)}>
|
||||
<span>{hit.label}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="nav">
|
||||
{#each SIDEBAR_SECTIONS as section (section.title ?? "untitled")}
|
||||
{#if section.title}
|
||||
<div class="section-header">{section.title}</div>
|
||||
{/if}
|
||||
{#each section.items as item (item.id)}
|
||||
<button
|
||||
type="button"
|
||||
class="row"
|
||||
class:selected={nav.page === item.id}
|
||||
onclick={() => go(item.id)}
|
||||
>
|
||||
<item.icon size={16} />
|
||||
<span class="label">{item.label}</span>
|
||||
</button>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 220px;
|
||||
width: 248px;
|
||||
flex-shrink: 0;
|
||||
min-height: 0;
|
||||
background-color: var(--surface);
|
||||
background: var(--bg-2, var(--surface));
|
||||
color: var(--on-surface);
|
||||
border-right: 1px solid var(--line, color-mix(in srgb, var(--fg) 8%, transparent));
|
||||
overflow: hidden;
|
||||
padding: 12px 10px 14px;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
position: relative;
|
||||
margin: 2px 6px 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-wrap :global(svg) {
|
||||
position: absolute;
|
||||
left: 11px;
|
||||
top: 10px;
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-wrap input {
|
||||
width: 100%;
|
||||
background: var(--surface);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10px;
|
||||
padding: 9px 10px 9px 34px;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.search-wrap input:focus {
|
||||
border-color: color-mix(in oklab, var(--accent) 55%, transparent);
|
||||
}
|
||||
|
||||
.nav,
|
||||
.hits {
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding: var(--space-sm, 8px);
|
||||
gap: 1px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 0 4px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: var(--space-lg, 16px) var(--space-sm, 8px) var(--space-xs, 4px);
|
||||
font-size: 11px;
|
||||
padding: 14px 10px 6px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.5;
|
||||
color: var(--faint, color-mix(in oklab, var(--fg) 38%, transparent));
|
||||
}
|
||||
|
||||
.section-header:first-child {
|
||||
padding-top: var(--space-xs, 4px);
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.row {
|
||||
.row,
|
||||
.hit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
|
|
@ -61,24 +132,29 @@
|
|||
font: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
padding: 9px var(--space-md, 12px);
|
||||
border-radius: var(--radius-secondary, 6px);
|
||||
transition: background-color 0.1s ease;
|
||||
padding: 8px 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.row:hover {
|
||||
background-color: color-mix(in srgb, var(--on-surface) 8%, transparent);
|
||||
.row:hover,
|
||||
.hit:hover {
|
||||
background: color-mix(in srgb, var(--fg) 6%, transparent);
|
||||
}
|
||||
|
||||
.row.selected {
|
||||
background-color: var(--accent);
|
||||
color: var(--on-accent);
|
||||
background: var(--accent-soft, color-mix(in oklab, var(--accent) 18%, transparent));
|
||||
color: var(--fg);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.row.selected :global(svg) {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
44
frontend/src/lib/components/SliderField.svelte
Normal file
44
frontend/src/lib/components/SliderField.svelte
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<script lang="ts">
|
||||
import Row from "./Row.svelte";
|
||||
|
||||
let {
|
||||
label,
|
||||
hint,
|
||||
value = $bindable(),
|
||||
min,
|
||||
max,
|
||||
step = 1,
|
||||
suffix = "",
|
||||
onChange,
|
||||
}: {
|
||||
label: string;
|
||||
hint?: string;
|
||||
value: number;
|
||||
min: number;
|
||||
max: number;
|
||||
step?: number;
|
||||
suffix?: string;
|
||||
onChange?: () => void;
|
||||
} = $props();
|
||||
|
||||
let shown = $derived(step < 1 ? Number(value).toFixed(2).replace(/0+$/, "").replace(/\.$/, "") : String(Math.round(value)));
|
||||
</script>
|
||||
|
||||
<Row {label} {hint}>
|
||||
<input type="range" {min} {max} {step} bind:value oninput={() => onChange?.()} />
|
||||
<span class="val">{shown}{suffix}</span>
|
||||
</Row>
|
||||
|
||||
<style>
|
||||
input[type="range"] {
|
||||
width: 160px;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
|
||||
.val {
|
||||
min-width: 4.5ch;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
</style>
|
||||
40
frontend/src/lib/components/Subnav.svelte
Normal file
40
frontend/src/lib/components/Subnav.svelte
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<script lang="ts">
|
||||
let {
|
||||
items,
|
||||
value = $bindable(),
|
||||
}: { items: { id: string; label: string }[]; value: string } = $props();
|
||||
</script>
|
||||
|
||||
<div class="subnav">
|
||||
{#each items as item (item.id)}
|
||||
<button type="button" class:on={value === item.id} onclick={() => (value = item.id)}>
|
||||
{item.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.subnav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin: -8px 0 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 6px 11px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
background: color-mix(in srgb, var(--fg) 6%, transparent);
|
||||
border: 1px solid var(--line, color-mix(in srgb, var(--fg) 8%, transparent));
|
||||
color: var(--fg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.on {
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
border-color: transparent;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -11,33 +11,40 @@
|
|||
aria-label={ariaLabel}
|
||||
onclick={() => (value = !value)}
|
||||
>
|
||||
<span class="knob"></span>
|
||||
<i></i>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.switch {
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
width: 42px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 999px;
|
||||
border: none;
|
||||
background-color: var(--overlay);
|
||||
background: color-mix(in srgb, var(--fg) 12%, transparent);
|
||||
padding: 2px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: background 0.18s ease;
|
||||
}
|
||||
|
||||
.switch.on {
|
||||
background-color: var(--accent);
|
||||
justify-content: flex-end;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.knob {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
i {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--on-surface);
|
||||
background: #efe8e6;
|
||||
display: block;
|
||||
transform: translateX(0);
|
||||
transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.switch.on i {
|
||||
transform: translateX(18px);
|
||||
background: var(--on-accent);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,13 @@
|
|||
import Row from "./Row.svelte";
|
||||
import Switch from "./Switch.svelte";
|
||||
|
||||
let { label, value = $bindable() }: { label: string; value: boolean } = $props();
|
||||
let {
|
||||
label,
|
||||
hint,
|
||||
value = $bindable(),
|
||||
}: { label: string; hint?: string; value: boolean } = $props();
|
||||
</script>
|
||||
|
||||
<Row {label}>
|
||||
<Row {label} {hint}>
|
||||
<Switch bind:value ariaLabel={label} />
|
||||
</Row>
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@
|
|||
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);
|
||||
border-radius: var(--radius-sm, 10px);
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
|
|
|
|||
75
frontend/src/lib/components/Titlebar.svelte
Normal file
75
frontend/src/lib/components/Titlebar.svelte
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<script lang="ts">
|
||||
import { getCurrentWindow } from "@tauri-apps/api/window";
|
||||
|
||||
function win() {
|
||||
return getCurrentWindow();
|
||||
}
|
||||
|
||||
function close() {
|
||||
win().close();
|
||||
}
|
||||
function minimize() {
|
||||
win().minimize();
|
||||
}
|
||||
function toggleMax() {
|
||||
win().toggleMaximize();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="titlebar" data-tauri-drag-region>
|
||||
<div class="dots">
|
||||
<button class="dot close" aria-label="Close" onclick={close}></button>
|
||||
<button class="dot min" aria-label="Minimize" onclick={minimize}></button>
|
||||
<button class="dot max" aria-label="Maximize" onclick={toggleMax}></button>
|
||||
</div>
|
||||
<div class="name">Settings</div>
|
||||
<div class="grow"></div>
|
||||
<span class="kbd">Ctrl K</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
height: 40px;
|
||||
padding: 0 14px;
|
||||
background: var(--bg-2, var(--bg));
|
||||
border-bottom: 1px solid var(--line, color-mix(in srgb, var(--fg) 8%, transparent));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dots {
|
||||
display: flex;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
padding: 0;
|
||||
background: #2a313c;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dot.close:hover {
|
||||
background: var(--red);
|
||||
}
|
||||
.dot.min:hover,
|
||||
.dot.max:hover {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 12px;
|
||||
color: var(--muted, color-mix(in oklab, var(--fg) 58%, transparent));
|
||||
letter-spacing: 0.02em;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.grow {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,40 +1,64 @@
|
|||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
import { getContext } from "svelte";
|
||||
import { EMBEDDED_KEY } from "$lib/embed";
|
||||
|
||||
let { title, children }: { title: string; children: Snippet } = $props();
|
||||
let { title, lede, children }: { title: string; lede?: string; children: Snippet } = $props();
|
||||
const embedded = getContext<boolean>(EMBEDDED_KEY) ?? false;
|
||||
</script>
|
||||
|
||||
<div class="view">
|
||||
<h1 class="title">{title}</h1>
|
||||
<div class="content">
|
||||
{#if embedded}
|
||||
<div class="embed">
|
||||
{@render children()}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="view">
|
||||
<h1 class="title">{title}</h1>
|
||||
{#if lede}
|
||||
<p class="lede">{lede}</p>
|
||||
{/if}
|
||||
<div class="content">
|
||||
{@render children()}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.view {
|
||||
padding: var(--space-xl, 20px) var(--space-xl, 20px) 48px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 28px 36px 56px;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.6em;
|
||||
font-weight: bold;
|
||||
margin: 0 0 var(--space-xl, 20px);
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.04em;
|
||||
margin: 0 auto;
|
||||
max-width: 920px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Groups lay out as a responsive grid rather than a single narrow
|
||||
column — on a wide (tiled/maximized) window that means multiple
|
||||
independent setting groups sit side by side instead of one column
|
||||
with a wall of empty space either side. `.group.wide` (device
|
||||
lists, thumbnail grids, log views — anything that reads badly
|
||||
squeezed into a card) opts out via `grid-column: 1 / -1`. */
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
|
||||
gap: var(--space-xl, 20px) 32px;
|
||||
align-items: start;
|
||||
max-width: 1400px;
|
||||
.lede {
|
||||
margin: 6px auto 0;
|
||||
color: var(--muted, color-mix(in oklab, var(--fg) 58%, transparent));
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
max-width: 920px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content,
|
||||
.embed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
max-width: 920px;
|
||||
width: 100%;
|
||||
margin-top: 22px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.embed {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
7
frontend/src/lib/debounce.ts
Normal file
7
frontend/src/lib/debounce.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
export function debounce(fn: () => void, ms = 280): () => void {
|
||||
let t: ReturnType<typeof setTimeout> | undefined;
|
||||
return () => {
|
||||
clearTimeout(t);
|
||||
t = setTimeout(fn, ms);
|
||||
};
|
||||
}
|
||||
2
frontend/src/lib/embed.ts
Normal file
2
frontend/src/lib/embed.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
/** When set, ViewScaffold renders inner groups only - used by hub tab panes. */
|
||||
export const EMBEDDED_KEY = "bos-settings-embedded";
|
||||
17
frontend/src/lib/nav.svelte.ts
Normal file
17
frontend/src/lib/nav.svelte.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { DEFAULT_PAGE, resolvePage } from "$lib/sidebar";
|
||||
|
||||
/** Shared navigation - module `$state` so sidebar/search/hubs all see the same page. */
|
||||
export const nav = $state({
|
||||
page: DEFAULT_PAGE,
|
||||
tab: null as string | null,
|
||||
searchNonce: 0,
|
||||
});
|
||||
|
||||
export function go(page: string, tab?: string) {
|
||||
const resolved = resolvePage(page);
|
||||
nav.tab = tab ?? resolved.tab ?? "";
|
||||
nav.page = resolved.page;
|
||||
}
|
||||
|
||||
export type Navigate = (page: string, tab?: string) => void;
|
||||
export const NAVIGATE_KEY = "bos-settings-navigate";
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
/** Sidebar page switch. Set from +page.svelte; views call it to jump. */
|
||||
export type Navigate = (page: string) => void;
|
||||
export const NAVIGATE_KEY = "bos-settings-navigate";
|
||||
120
frontend/src/lib/search.ts
Normal file
120
frontend/src/lib/search.ts
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
export interface SearchHit {
|
||||
page: string;
|
||||
tab?: string;
|
||||
label: string;
|
||||
keywords: string;
|
||||
}
|
||||
|
||||
export const SEARCH_INDEX: SearchHit[] = [
|
||||
{ page: "home", label: "Home", keywords: "search overview status" },
|
||||
{
|
||||
page: "network",
|
||||
label: "Wi-Fi",
|
||||
keywords: "wifi ssid password scan radio ethernet hotspot dns",
|
||||
},
|
||||
{
|
||||
page: "network",
|
||||
tab: "vpn",
|
||||
label: "VPN / WireGuard",
|
||||
keywords: "vpn wireguard tailscale tunnel import conf",
|
||||
},
|
||||
{
|
||||
page: "network",
|
||||
tab: "breadcrumbs",
|
||||
label: "Saved networks",
|
||||
keywords: "wifi profiles breadcrumbs known ssid tailscale",
|
||||
},
|
||||
{ page: "bluetooth", label: "Bluetooth", keywords: "bluetooth headphones pair scan mouse keyboard" },
|
||||
{
|
||||
page: "displays",
|
||||
label: "Displays",
|
||||
keywords: "monitor scale resolution arrange rotate vrr hdr hyprland",
|
||||
},
|
||||
{
|
||||
page: "displays",
|
||||
tab: "nightlight",
|
||||
label: "Night light",
|
||||
keywords: "night light hyprsunset temperature warmth sunset",
|
||||
},
|
||||
{
|
||||
page: "displays",
|
||||
tab: "breadmon",
|
||||
label: "Live arrange",
|
||||
keywords: "breadmon mirror profile arrange",
|
||||
},
|
||||
{
|
||||
page: "appearance",
|
||||
label: "Wallpaper",
|
||||
keywords: "wallpaper theme palette pywal breadpaper accent",
|
||||
},
|
||||
{
|
||||
page: "appearance",
|
||||
tab: "appearance",
|
||||
label: "Windows",
|
||||
keywords: "gaps blur rounding border shadow tiling dwindle",
|
||||
},
|
||||
{ page: "sound", label: "Sound", keywords: "volume mute microphone output input speaker pavucontrol" },
|
||||
{
|
||||
page: "power",
|
||||
label: "Power & battery",
|
||||
keywords: "battery brightness charge tlp suspend idle lid",
|
||||
},
|
||||
{
|
||||
page: "input",
|
||||
label: "Keyboard & mouse",
|
||||
keywords: "keybind shortcut layout touchpad tap natural scroll follow mouse",
|
||||
},
|
||||
{ page: "input", tab: "ime", label: "Input method", keywords: "fcitx5 ime cjk chinese japanese korean" },
|
||||
{
|
||||
page: "input",
|
||||
tab: "accessibility",
|
||||
label: "Accessibility",
|
||||
keywords: "orca screen reader zoom magnifier sticky keys",
|
||||
},
|
||||
{
|
||||
page: "desktop",
|
||||
label: "Bar",
|
||||
keywords: "breadbar modules clock tray workspaces",
|
||||
},
|
||||
{ page: "desktop", tab: "breadbox", label: "Launcher", keywords: "breadbox launcher apps" },
|
||||
{ page: "desktop", tab: "breadlock", label: "Lock screen", keywords: "lock greet breadlock idle" },
|
||||
{ page: "desktop", tab: "breadshot", label: "Screenshots", keywords: "screenshot grim slurp breadshot" },
|
||||
{ page: "desktop", tab: "autostart", label: "Startup apps", keywords: "autostart login startup" },
|
||||
{ page: "desktop", tab: "breadclip", label: "Clipboard", keywords: "clipboard history breadclip" },
|
||||
{ page: "desktop", tab: "breadpad", label: "Notes", keywords: "breadpad notes calendar caldav" },
|
||||
{ page: "desktop", tab: "breadsearch", label: "File search", keywords: "breadsearch breadmill index" },
|
||||
{ page: "desktop", tab: "bread", label: "Daemon", keywords: "breadd daemon adapters lua" },
|
||||
{ page: "apps", label: "Default apps", keywords: "browser terminal pdf mime default" },
|
||||
{ page: "apps", tab: "optional", label: "Optional software", keywords: "steam flatpak libreoffice" },
|
||||
{ page: "apps", tab: "printing", label: "Printing", keywords: "cups printer" },
|
||||
{ page: "privacy", label: "Firewall", keywords: "firewall ufw port allow" },
|
||||
{ page: "privacy", tab: "users", label: "Users", keywords: "users password account" },
|
||||
{ page: "system", label: "Updates", keywords: "update bakery pacman firmware nvidia" },
|
||||
{ page: "system", tab: "packages", label: "Packages", keywords: "packages bakery install" },
|
||||
{ page: "system", tab: "aur", label: "AUR", keywords: "aur yay" },
|
||||
{ page: "system", tab: "snapshots", label: "Snapshots", keywords: "snapper snapshot rollback grub" },
|
||||
{ page: "system", tab: "backup", label: "Backup", keywords: "restic backup restore" },
|
||||
{ page: "system", tab: "channel", label: "Bakery channel", keywords: "track stable beta dev bakery" },
|
||||
{ page: "about", label: "About", keywords: "hostname kernel cpu gpu about machine" },
|
||||
{ page: "about", tab: "datetime", label: "Date & time", keywords: "timezone ntp clock date time" },
|
||||
{ page: "desktop", tab: "breadhelp", label: "Help", keywords: "help breadhelp onboarding" },
|
||||
];
|
||||
|
||||
export function searchSettings(query: string, limit = 8): SearchHit[] {
|
||||
const q = query.trim().toLowerCase();
|
||||
if (q.length < 1) return [];
|
||||
const scored = SEARCH_INDEX.map((hit) => {
|
||||
const hay = `${hit.label} ${hit.keywords} ${hit.page}`.toLowerCase();
|
||||
let score = 0;
|
||||
if (hit.label.toLowerCase().startsWith(q)) score += 8;
|
||||
if (hit.label.toLowerCase().includes(q)) score += 4;
|
||||
if (hay.includes(q)) score += 2;
|
||||
for (const part of q.split(/\s+/)) {
|
||||
if (hay.includes(part)) score += 1;
|
||||
}
|
||||
return { hit, score };
|
||||
})
|
||||
.filter((x) => x.score > 0)
|
||||
.sort((a, b) => b.score - a.score);
|
||||
return scored.slice(0, limit).map((x) => x.hit);
|
||||
}
|
||||
|
|
@ -1,117 +1,112 @@
|
|||
// Ports src/ui/sidebar.rs's declarative item lists verbatim. Grouped by task,
|
||||
// not "app vs system internals" — a user thinks "I want to change my Wi-Fi",
|
||||
// not "which of these is a bread-ecosystem app" (why breadcrumbs/Wi-Fi
|
||||
// Profiles lives in System, not Personalization).
|
||||
|
||||
import type { Component } from "svelte";
|
||||
import House from "@lucide/svelte/icons/house";
|
||||
import Wifi from "@lucide/svelte/icons/wifi";
|
||||
import Network from "@lucide/svelte/icons/network";
|
||||
import Bluetooth from "@lucide/svelte/icons/bluetooth";
|
||||
import Shield from "@lucide/svelte/icons/shield";
|
||||
import Monitor from "@lucide/svelte/icons/monitor";
|
||||
import Volume2 from "@lucide/svelte/icons/volume-2";
|
||||
import BatteryFull from "@lucide/svelte/icons/battery-full";
|
||||
import Clock from "@lucide/svelte/icons/clock";
|
||||
import Monitor from "@lucide/svelte/icons/monitor";
|
||||
import Keyboard from "@lucide/svelte/icons/keyboard";
|
||||
import Rocket from "@lucide/svelte/icons/rocket";
|
||||
import Users from "@lucide/svelte/icons/users";
|
||||
import Palette from "@lucide/svelte/icons/palette";
|
||||
import Image from "@lucide/svelte/icons/image";
|
||||
import LayoutGrid from "@lucide/svelte/icons/layout-grid";
|
||||
import Grid3x3 from "@lucide/svelte/icons/grid-3x3";
|
||||
import Clipboard from "@lucide/svelte/icons/clipboard";
|
||||
import NotebookPen from "@lucide/svelte/icons/notebook-pen";
|
||||
import Search from "@lucide/svelte/icons/search";
|
||||
import Cog from "@lucide/svelte/icons/cog";
|
||||
import Package from "@lucide/svelte/icons/package";
|
||||
import RefreshCw from "@lucide/svelte/icons/refresh-cw";
|
||||
import History from "@lucide/svelte/icons/history";
|
||||
import Info from "@lucide/svelte/icons/info";
|
||||
import Lock from "@lucide/svelte/icons/lock";
|
||||
import Camera from "@lucide/svelte/icons/camera";
|
||||
import AppWindow from "@lucide/svelte/icons/app-window";
|
||||
import CircleHelp from "@lucide/svelte/icons/circle-help";
|
||||
import Keyboard from "@lucide/svelte/icons/keyboard";
|
||||
import LayoutGrid from "@lucide/svelte/icons/layout-grid";
|
||||
import Shield from "@lucide/svelte/icons/shield";
|
||||
import Download from "@lucide/svelte/icons/download";
|
||||
import Printer from "@lucide/svelte/icons/printer";
|
||||
import ShieldEllipsis from "@lucide/svelte/icons/shield-ellipsis";
|
||||
import Moon from "@lucide/svelte/icons/moon";
|
||||
import Languages from "@lucide/svelte/icons/languages";
|
||||
import Accessibility from "@lucide/svelte/icons/accessibility";
|
||||
import AppWindowMac from "@lucide/svelte/icons/app-window-mac";
|
||||
import GitBranch from "@lucide/svelte/icons/git-branch";
|
||||
import Archive from "@lucide/svelte/icons/archive";
|
||||
import Boxes from "@lucide/svelte/icons/boxes";
|
||||
import Info from "@lucide/svelte/icons/info";
|
||||
|
||||
export interface SidebarItem {
|
||||
/** Must match a key in the view component map (see routing in +page.svelte). */
|
||||
id: string;
|
||||
label: string;
|
||||
/** Dim second line — the underlying binary/config name, for items whose
|
||||
* human label doesn't already make that obvious. */
|
||||
sublabel?: string;
|
||||
icon: Component;
|
||||
}
|
||||
|
||||
export const SYSTEM_ITEMS: SidebarItem[] = [
|
||||
{ id: "network", label: "Network", icon: Wifi },
|
||||
{ id: "breadcrumbs", label: "Wi-Fi Profiles", sublabel: "breadcrumbs", icon: Network },
|
||||
{ id: "vpn", label: "VPN / WireGuard", sublabel: "NetworkManager", icon: ShieldEllipsis },
|
||||
{ id: "bluetooth", label: "Bluetooth", icon: Bluetooth },
|
||||
{ id: "printing", label: "Printing", sublabel: "CUPS", icon: Printer },
|
||||
{ id: "firewall", label: "Firewall", icon: Shield },
|
||||
{ id: "sound", label: "Sound", icon: Volume2 },
|
||||
{ id: "power", label: "Power", icon: BatteryFull },
|
||||
{ id: "datetime", label: "Date & Time", icon: Clock },
|
||||
{ id: "hyprland", label: "Display", sublabel: "monitors.json", icon: Monitor },
|
||||
{ id: "nightlight", label: "Night light", sublabel: "hyprsunset", icon: Moon },
|
||||
{ id: "breadmon", label: "Monitors", sublabel: "breadmon", icon: AppWindow },
|
||||
{ id: "breadlock", label: "Lock & greet", sublabel: "breadlock", icon: Lock },
|
||||
{ id: "keybinds", label: "Keybinds", sublabel: "binds.json", icon: Keyboard },
|
||||
{ id: "ime", label: "Input method", sublabel: "fcitx5", icon: Languages },
|
||||
{ id: "accessibility", label: "Accessibility", icon: Accessibility },
|
||||
{ id: "breadshot", label: "Screenshots", sublabel: "breadshot", icon: Camera },
|
||||
{ id: "autostart", label: "Startup Apps", sublabel: "autostart.json", icon: Rocket },
|
||||
{ id: "users", label: "Users", icon: Users },
|
||||
];
|
||||
|
||||
export const PERSONALIZATION_ITEMS: SidebarItem[] = [
|
||||
{ id: "appearance", label: "Appearance", sublabel: "settings.json", icon: Palette },
|
||||
{ id: "breadpaper", label: "Wallpaper", sublabel: "breadpaper", icon: Image },
|
||||
{ id: "breadbar", label: "Bar", sublabel: "breadbar", icon: LayoutGrid },
|
||||
{ id: "breadbox", label: "Launcher", sublabel: "breadbox", icon: Grid3x3 },
|
||||
{ id: "breadclip", label: "Clipboard", sublabel: "breadclipd", icon: Clipboard },
|
||||
{ id: "breadpad", label: "Notes", sublabel: "breadpad", icon: NotebookPen },
|
||||
{ id: "breadsearch", label: "File Search", sublabel: "breadsearch", icon: Search },
|
||||
{ id: "defaults", label: "Default apps", sublabel: "mimeapps.list", icon: AppWindowMac },
|
||||
{ id: "bread", label: "Daemon", sublabel: "breadd", icon: Cog },
|
||||
];
|
||||
|
||||
export const MAINTENANCE_ITEMS: SidebarItem[] = [
|
||||
{ id: "updates", label: "Updates", icon: Download },
|
||||
{ id: "packages", label: "Packages", icon: Package },
|
||||
{ id: "aur", label: "AUR", icon: Search },
|
||||
{ id: "firmware", label: "Firmware", icon: RefreshCw },
|
||||
{ id: "snapshots", label: "Snapshots", icon: History },
|
||||
{ id: "channel", label: "Bakery channel", sublabel: "track", icon: GitBranch },
|
||||
{ id: "backup", label: "Backup", sublabel: "restic", icon: Archive },
|
||||
{ id: "optional", label: "Optional software", icon: Boxes },
|
||||
];
|
||||
|
||||
export const ABOUT_ITEMS: SidebarItem[] = [
|
||||
{ id: "breadhelp", label: "Help", sublabel: "breadhelp", icon: CircleHelp },
|
||||
{ id: "about", label: "About", icon: Info },
|
||||
];
|
||||
|
||||
export interface SidebarSection {
|
||||
title: string | null;
|
||||
items: SidebarItem[];
|
||||
}
|
||||
|
||||
export const SIDEBAR_SECTIONS: SidebarSection[] = [
|
||||
{ title: "System", items: SYSTEM_ITEMS },
|
||||
{ title: "Personalization", items: PERSONALIZATION_ITEMS },
|
||||
{ title: "Maintenance", items: MAINTENANCE_ITEMS },
|
||||
{ title: null, items: ABOUT_ITEMS },
|
||||
{ title: "Overview", items: [{ id: "home", label: "Home", icon: House }] },
|
||||
{
|
||||
title: "Devices",
|
||||
items: [
|
||||
{ id: "network", label: "Wi-Fi & internet", icon: Wifi },
|
||||
{ id: "bluetooth", label: "Bluetooth", icon: Bluetooth },
|
||||
{ id: "displays", label: "Displays", icon: Monitor },
|
||||
{ id: "sound", label: "Sound", icon: Volume2 },
|
||||
{ id: "power", label: "Power & battery", icon: BatteryFull },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Desktop",
|
||||
items: [
|
||||
{ id: "appearance", label: "Appearance", icon: Palette },
|
||||
{ id: "desktop", label: "Bar & apps", icon: AppWindow },
|
||||
{ id: "input", label: "Keyboard & mouse", icon: Keyboard },
|
||||
{ id: "apps", label: "Default apps", icon: LayoutGrid },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "System",
|
||||
items: [
|
||||
{ id: "privacy", label: "Privacy & users", icon: Shield },
|
||||
{ id: "system", label: "Updates & backup", icon: Download },
|
||||
{ id: "about", label: "About", icon: Info },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const DEFAULT_PAGE = "about";
|
||||
/** Old sidebar ids (screenshot CLI, in-app jumps) → hub page + optional tab. */
|
||||
export const PAGE_ALIASES: Record<string, { page: string; tab?: string }> = {
|
||||
home: { page: "home" },
|
||||
network: { page: "network" },
|
||||
vpn: { page: "network", tab: "vpn" },
|
||||
breadcrumbs: { page: "network", tab: "breadcrumbs" },
|
||||
bluetooth: { page: "bluetooth" },
|
||||
displays: { page: "displays" },
|
||||
hyprland: { page: "displays", tab: "hyprland" },
|
||||
nightlight: { page: "displays", tab: "nightlight" },
|
||||
breadmon: { page: "displays", tab: "breadmon" },
|
||||
sound: { page: "sound" },
|
||||
power: { page: "power" },
|
||||
appearance: { page: "appearance" },
|
||||
breadpaper: { page: "appearance", tab: "breadpaper" },
|
||||
desktop: { page: "desktop" },
|
||||
breadbar: { page: "desktop", tab: "breadbar" },
|
||||
breadbox: { page: "desktop", tab: "breadbox" },
|
||||
breadlock: { page: "desktop", tab: "breadlock" },
|
||||
breadshot: { page: "desktop", tab: "breadshot" },
|
||||
autostart: { page: "desktop", tab: "autostart" },
|
||||
breadclip: { page: "desktop", tab: "more" },
|
||||
breadpad: { page: "desktop", tab: "more" },
|
||||
breadsearch: { page: "desktop", tab: "more" },
|
||||
bread: { page: "desktop", tab: "more" },
|
||||
breadhelp: { page: "desktop", tab: "more" },
|
||||
more: { page: "desktop", tab: "more" },
|
||||
input: { page: "input" },
|
||||
keybinds: { page: "input", tab: "keybinds" },
|
||||
ime: { page: "input", tab: "ime" },
|
||||
accessibility: { page: "input", tab: "accessibility" },
|
||||
apps: { page: "apps" },
|
||||
defaults: { page: "apps" },
|
||||
optional: { page: "apps", tab: "optional" },
|
||||
printing: { page: "apps", tab: "printing" },
|
||||
privacy: { page: "privacy" },
|
||||
firewall: { page: "privacy" },
|
||||
users: { page: "privacy", tab: "users" },
|
||||
system: { page: "system" },
|
||||
updates: { page: "system" },
|
||||
packages: { page: "system", tab: "packages" },
|
||||
aur: { page: "system", tab: "aur" },
|
||||
firmware: { page: "system", tab: "firmware" },
|
||||
snapshots: { page: "system", tab: "snapshots" },
|
||||
backup: { page: "system", tab: "backup" },
|
||||
channel: { page: "system", tab: "channel" },
|
||||
about: { page: "about" },
|
||||
datetime: { page: "about", tab: "datetime" },
|
||||
};
|
||||
|
||||
export const DEFAULT_PAGE = "home";
|
||||
|
||||
export function resolvePage(id: string): { page: string; tab?: string } {
|
||||
return PAGE_ALIASES[id] ?? { page: id };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// Frontend half of the event-streaming command pattern (see
|
||||
// src/src/commands/streaming.rs) — listens for `cmd-output` lines from a
|
||||
// src/src/commands/streaming.rs) - listens for `cmd-output` lines from a
|
||||
// typed Tauri command that runs a hardcoded program, then resolves once
|
||||
// the process exits.
|
||||
|
||||
|
|
|
|||
121
frontend/src/lib/styles/app.css
Normal file
121
frontend/src/lib/styles/app.css
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
:root {
|
||||
--bg-2: color-mix(in oklab, var(--bg) 82%, var(--surface));
|
||||
--surface-2: color-mix(in oklab, var(--surface) 72%, var(--overlay));
|
||||
--muted: color-mix(in oklab, var(--fg) 58%, transparent);
|
||||
--faint: color-mix(in oklab, var(--fg) 38%, transparent);
|
||||
--line: color-mix(in srgb, var(--fg) 8%, transparent);
|
||||
--accent-soft: color-mix(in oklab, var(--accent) 18%, transparent);
|
||||
--radius: 14px;
|
||||
--radius-sm: 10px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 100%;
|
||||
color-scheme: dark;
|
||||
background-color: var(--bg, #12161c);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-family, sans-serif);
|
||||
font-size: var(--font-size-base, 14px);
|
||||
}
|
||||
|
||||
#svelte {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid color-mix(in oklab, var(--accent) 70%, white);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: var(--surface-2, var(--surface));
|
||||
border: 1px solid var(--line);
|
||||
padding: 8px 14px;
|
||||
border-radius: var(--radius-sm, 10px);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: color-mix(in oklab, var(--surface-2, var(--surface)) 80%, var(--fg));
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
border-color: transparent;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn.primary:hover {
|
||||
filter: brightness(1.06);
|
||||
}
|
||||
|
||||
.btn.danger {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.kbd {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.04em;
|
||||
background: color-mix(in srgb, var(--fg) 6%, transparent);
|
||||
border: 1px solid var(--line);
|
||||
padding: 2px 7px;
|
||||
border-radius: 6px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 11px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
background: color-mix(in srgb, var(--fg) 6%, transparent);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--fg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pill.on {
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
border-color: transparent;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
// Bridges bread-theme's pywal-derived palette into the webview. Mirrors
|
||||
// bread_theme::gtk::apply_shared()'s two-phase pattern: fetch once at
|
||||
// startup, then keep it live via a backend-pushed event — see
|
||||
// startup, then keep it live via a backend-pushed event - see
|
||||
// src-tauri/src/commands/theme.rs for the file-watch side of this.
|
||||
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,68 +2,65 @@
|
|||
import { onMount, setContext } from "svelte";
|
||||
import { listen } from "@tauri-apps/api/event";
|
||||
import Sidebar from "$lib/components/Sidebar.svelte";
|
||||
import Titlebar from "$lib/components/Titlebar.svelte";
|
||||
import Placeholder from "$lib/components/Placeholder.svelte";
|
||||
import { DEFAULT_PAGE } from "$lib/sidebar";
|
||||
import { NAVIGATE_KEY, type Navigate } from "$lib/nav";
|
||||
import { go, nav, NAVIGATE_KEY, type Navigate } from "$lib/nav.svelte";
|
||||
import { initTheme } from "$lib/theme";
|
||||
import { VIEWS } from "$lib/views/registry";
|
||||
import "$lib/styles/app.css";
|
||||
|
||||
let activePage = $state(DEFAULT_PAGE);
|
||||
let ActiveView = $derived(VIEWS[activePage]);
|
||||
setContext<Navigate>(NAVIGATE_KEY, (page) => {
|
||||
activePage = page;
|
||||
});
|
||||
let ActiveView = $derived(VIEWS[nav.page]);
|
||||
|
||||
setContext<Navigate>(NAVIGATE_KEY, go);
|
||||
|
||||
onMount(() => {
|
||||
initTheme();
|
||||
// Screenshot mode only (src-tauri's screenshot.rs) — lets the Rust
|
||||
// core drive which sidebar section is showing for a capture without
|
||||
// a real user ever clicking the sidebar.
|
||||
const unlisten = listen<string>("screenshot-set-view", (event) => {
|
||||
activePage = event.payload;
|
||||
go(event.payload);
|
||||
});
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
|
||||
e.preventDefault();
|
||||
nav.searchNonce += 1;
|
||||
go("home");
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => {
|
||||
unlisten.then((f) => f());
|
||||
window.removeEventListener("keydown", onKey);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="shell">
|
||||
<Sidebar bind:activePage />
|
||||
<main class="content">
|
||||
{#if ActiveView}
|
||||
<ActiveView />
|
||||
{:else}
|
||||
<Placeholder page={activePage} />
|
||||
{/if}
|
||||
</main>
|
||||
<div class="app">
|
||||
<Titlebar />
|
||||
<div class="shell">
|
||||
<Sidebar />
|
||||
<main class="content">
|
||||
{#key nav.page}
|
||||
{#if ActiveView}
|
||||
<ActiveView />
|
||||
{:else}
|
||||
<Placeholder page={nav.page} />
|
||||
{/if}
|
||||
{/key}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:global(*) {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:global(html, body) {
|
||||
margin: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 100%;
|
||||
color-scheme: dark;
|
||||
background-color: var(--bg, #0c0c0c);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-family, sans-serif);
|
||||
font-size: var(--font-size-base, 14px);
|
||||
}
|
||||
|
||||
:global(#svelte) {
|
||||
height: 100%;
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background-color: var(--bg, #12161c);
|
||||
}
|
||||
|
||||
.shell {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
background-color: var(--bg, #0c0c0c);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import path from "node:path";
|
|||
import { defineConfig } from "vite";
|
||||
import { sveltekit } from "@sveltejs/kit/vite";
|
||||
|
||||
// @ts-expect-error process is a nodejs global
|
||||
const host = process.env.TAURI_DEV_HOST;
|
||||
|
||||
// The Rust/Tauri project dir (../src relative to this file) — an absolute
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@
|
|||
"windows": ["main"],
|
||||
"permissions": [
|
||||
"core:default",
|
||||
"core:window:allow-close",
|
||||
"core:window:allow-minimize",
|
||||
"core:window:allow-toggle-maximize",
|
||||
"core:window:allow-start-dragging",
|
||||
"dialog:default"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,5 +69,7 @@ pub fn get_appearance() -> Appearance {
|
|||
#[tauri::command]
|
||||
pub fn save_appearance(appearance: Appearance) -> Result<(), String> {
|
||||
let json = serde_json::to_string_pretty(&appearance).map_err(|e| e.to_string())?;
|
||||
config::atomic_write(&config_path(), &json).map_err(|e| e.to_string())
|
||||
config::atomic_write(&config_path(), &json).map_err(|e| e.to_string())?;
|
||||
super::util::hypr_reload();
|
||||
Ok(())
|
||||
}
|
||||
|
|
|
|||
|
|
@ -239,7 +239,7 @@ pub fn valid_restore_target(path: &Path) -> bool {
|
|||
return false;
|
||||
}
|
||||
let normalized = normalize_abs(path);
|
||||
if normalized == PathBuf::from("/") {
|
||||
if normalized == *"/" {
|
||||
return false;
|
||||
}
|
||||
normalized != normalize_abs(&home_dir())
|
||||
|
|
|
|||
|
|
@ -51,10 +51,30 @@ fn hypr_path(name: &str) -> std::path::PathBuf {
|
|||
config::config_dir().join("hypr").join(name)
|
||||
}
|
||||
|
||||
#[derive(Serialize)]
|
||||
#[derive(Serialize, Deserialize, Clone)]
|
||||
pub struct LiveMonitor {
|
||||
name: String,
|
||||
mode: String,
|
||||
pub name: String,
|
||||
pub mode: String,
|
||||
pub x: i32,
|
||||
pub y: i32,
|
||||
pub width: u32,
|
||||
pub height: u32,
|
||||
pub refresh: f64,
|
||||
pub scale: f64,
|
||||
pub transform: u32,
|
||||
pub available_modes: Vec<String>,
|
||||
}
|
||||
|
||||
fn json_i32(v: &serde_json::Value, key: &str) -> Option<i32> {
|
||||
v.get(key)?.as_i64().map(|n| n as i32).or_else(|| v.get(key)?.as_f64().map(|n| n.round() as i32))
|
||||
}
|
||||
|
||||
fn json_u32(v: &serde_json::Value, key: &str) -> Option<u32> {
|
||||
v.get(key)?.as_u64().map(|n| n as u32).or_else(|| v.get(key)?.as_f64().map(|n| n.round() as u32))
|
||||
}
|
||||
|
||||
fn json_f64(v: &serde_json::Value, key: &str) -> Option<f64> {
|
||||
v.get(key)?.as_f64().or_else(|| v.get(key)?.as_u64().map(|n| n as f64))
|
||||
}
|
||||
|
||||
#[tauri::command]
|
||||
|
|
@ -69,15 +89,103 @@ pub fn get_live_monitors() -> Vec<LiveMonitor> {
|
|||
monitors
|
||||
.iter()
|
||||
.filter_map(|m| {
|
||||
let name = m.get("name")?.as_str()?;
|
||||
let w = m.get("width")?.as_u64()?;
|
||||
let h = m.get("height")?.as_u64()?;
|
||||
let refresh = m.get("refreshRate")?.as_f64()?;
|
||||
Some(LiveMonitor { name: name.to_string(), mode: format!("{w}x{h} @ {refresh:.0}Hz") })
|
||||
let name = m.get("name")?.as_str()?.to_string();
|
||||
let width = json_u32(m, "width")?;
|
||||
let height = json_u32(m, "height")?;
|
||||
let refresh = json_f64(m, "refreshRate").unwrap_or(60.0);
|
||||
let x = json_i32(m, "x").unwrap_or(0);
|
||||
let y = json_i32(m, "y").unwrap_or(0);
|
||||
let scale = json_f64(m, "scale").unwrap_or(1.0).max(0.1);
|
||||
let transform = json_u32(m, "transform").unwrap_or(0);
|
||||
let available_modes = m
|
||||
.get("availableModes")
|
||||
.and_then(|v| v.as_array())
|
||||
.map(|arr| {
|
||||
arr.iter()
|
||||
.filter_map(|x| x.as_str().map(str::to_string))
|
||||
.collect::<Vec<_>>()
|
||||
})
|
||||
.unwrap_or_default();
|
||||
Some(LiveMonitor {
|
||||
name,
|
||||
mode: format!("{width}x{height} @ {refresh:.0}Hz"),
|
||||
x,
|
||||
y,
|
||||
width,
|
||||
height,
|
||||
refresh,
|
||||
scale,
|
||||
transform,
|
||||
available_modes,
|
||||
})
|
||||
})
|
||||
.collect()
|
||||
}
|
||||
|
||||
fn write_monitor_rules(rules: &[MonitorRule]) -> Result<(), String> {
|
||||
let file = MonitorsFile { monitors: rules.to_vec() };
|
||||
let json = serde_json::to_string_pretty(&file).map_err(|e| e.to_string())?;
|
||||
config::atomic_write(&config_path(), &json).map_err(|e| e.to_string())
|
||||
}
|
||||
|
||||
fn lua_ident(name: &str) -> Result<(), String> {
|
||||
if name.is_empty()
|
||||
|| !name
|
||||
.chars()
|
||||
.all(|c| c.is_ascii_alphanumeric() || c == '-' || c == '_' || c == '.')
|
||||
{
|
||||
return Err(format!("bad monitor name '{name}'"));
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Live-apply a layout via BOS Hyprland `hl.monitor()`, then persist monitors.json.
|
||||
#[tauri::command]
|
||||
pub fn apply_monitor_layout(monitors: Vec<LiveMonitor>) -> Result<(), String> {
|
||||
if monitors.is_empty() {
|
||||
return Err("no monitors".into());
|
||||
}
|
||||
let mut stmts = Vec::new();
|
||||
let mut rules = Vec::new();
|
||||
for m in &monitors {
|
||||
lua_ident(&m.name)?;
|
||||
let refresh = if m.refresh > 1.0 { m.refresh.round() as u32 } else { 60 };
|
||||
let mode = format!("{}x{}@{refresh}", m.width.max(1), m.height.max(1));
|
||||
let position = format!("{}x{}", m.x, m.y);
|
||||
let scale = if (m.scale - 1.0).abs() < 0.001 {
|
||||
"1".to_string()
|
||||
} else {
|
||||
format!("{:.2}", m.scale)
|
||||
};
|
||||
let transform = m.transform.min(7);
|
||||
stmts.push(format!(
|
||||
"hl.monitor({{ output = \"{}\", mode = \"{mode}\", position = \"{position}\", scale = \"{scale}\", transform = {transform}, vrr = false }})",
|
||||
m.name
|
||||
));
|
||||
rules.push(MonitorRule {
|
||||
output: m.name.clone(),
|
||||
mode,
|
||||
position,
|
||||
scale,
|
||||
});
|
||||
}
|
||||
let lua = stmts.join("; ");
|
||||
let output = std::process::Command::new("hyprctl")
|
||||
.args(["eval", &lua])
|
||||
.output()
|
||||
.map_err(|e| e.to_string())?;
|
||||
let stdout = String::from_utf8_lossy(&output.stdout).trim().to_string();
|
||||
if stdout != "ok" {
|
||||
let low = stdout.to_lowercase();
|
||||
if low.contains("unknown request") || low.contains("unknown command") || stdout.is_empty() {
|
||||
return Err("Live layout needs BOS Hyprland (hyprctl eval / hl.monitor).".into());
|
||||
}
|
||||
return Err(format!("hyprctl: {stdout}"));
|
||||
}
|
||||
write_monitor_rules(&rules)?;
|
||||
Ok(())
|
||||
}
|
||||
|
||||
#[tauri::command]
|
||||
pub fn get_monitor_rules() -> Vec<MonitorRule> {
|
||||
std::fs::read_to_string(config_path())
|
||||
|
|
@ -90,9 +198,9 @@ pub fn get_monitor_rules() -> Vec<MonitorRule> {
|
|||
|
||||
#[tauri::command]
|
||||
pub fn save_monitor_rules(rules: Vec<MonitorRule>) -> Result<(), String> {
|
||||
let file = MonitorsFile { monitors: rules };
|
||||
let json = serde_json::to_string_pretty(&file).map_err(|e| e.to_string())?;
|
||||
config::atomic_write(&config_path(), &json).map_err(|e| e.to_string())
|
||||
write_monitor_rules(&rules)?;
|
||||
super::util::hypr_reload();
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Opens `hyprland.lua` in `$EDITOR` (nano if unset) inside a terminal —
|
||||
|
|
|
|||
|
|
@ -254,7 +254,9 @@ pub fn get_keybinds() -> BindsPayload {
|
|||
|
||||
#[tauri::command]
|
||||
pub fn save_keybinds(file: BindsFile, kind: SchemaKind) -> Result<(), String> {
|
||||
save(&file, kind).map_err(|e| e.to_string())
|
||||
save(&file, kind).map_err(|e| e.to_string())?;
|
||||
super::util::hypr_reload();
|
||||
Ok(())
|
||||
}
|
||||
|
||||
#[cfg(test)]
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ use serde::Serialize;
|
|||
use std::collections::{HashMap, HashSet};
|
||||
use tokio::process::Command;
|
||||
|
||||
use super::util;
|
||||
|
||||
#[derive(Serialize, Clone)]
|
||||
pub struct WifiNetwork {
|
||||
ssid: String,
|
||||
|
|
@ -95,6 +97,9 @@ pub async fn scan_wifi() -> Vec<WifiNetwork> {
|
|||
|
||||
#[tauri::command]
|
||||
pub async fn connect_wifi(ssid: String, password: Option<String>) -> Result<(), String> {
|
||||
if !util::valid_nm_id(&ssid) {
|
||||
return Err(format!("invalid SSID '{ssid}'"));
|
||||
}
|
||||
let known = known_connection_names().await;
|
||||
let output = if let Some(password) = password {
|
||||
Command::new("nmcli").args(["dev", "wifi", "connect", &ssid, "password", &password]).output().await
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ pub fn read_nvidia_offer() -> Option<NvidiaOffer> {
|
|||
.collect::<Vec<_>>()
|
||||
})
|
||||
.filter(|p| !p.is_empty())
|
||||
.unwrap_or_else(|| default_packages());
|
||||
.unwrap_or_else(default_packages);
|
||||
return Some(NvidiaOffer {
|
||||
gpu,
|
||||
reason,
|
||||
|
|
|
|||
|
|
@ -154,7 +154,8 @@ pub async fn set_brightness(percent: i64) -> Result<(), String> {
|
|||
let Some(device) = brightness_device().await else {
|
||||
return Err("No controllable backlight found".into());
|
||||
};
|
||||
let pct = format!("{percent}%");
|
||||
// Clamp before handing the value to brightnessctl.
|
||||
let pct = format!("{}%", percent.clamp(0, 100));
|
||||
Command::new("brightnessctl")
|
||||
.args(["--device", &device, "set", &pct])
|
||||
.status()
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
use serde::Serialize;
|
||||
use tokio::process::Command;
|
||||
|
||||
use super::util;
|
||||
|
||||
#[derive(Serialize, Clone)]
|
||||
pub struct SnapshotRow {
|
||||
number: String,
|
||||
|
|
@ -44,6 +46,9 @@ pub async fn get_snapshots() -> Result<Vec<SnapshotRow>, String> {
|
|||
|
||||
#[tauri::command]
|
||||
pub async fn delete_snapshot(number: String) -> Result<(), String> {
|
||||
if !util::valid_number_id(&number) {
|
||||
return Err("invalid snapshot number".into());
|
||||
}
|
||||
let output = Command::new("snapper").args(["delete", &number]).status().await.map_err(|e| e.to_string())?;
|
||||
if output.success() {
|
||||
Ok(())
|
||||
|
|
|
|||
|
|
@ -51,6 +51,12 @@ pub(crate) async fn run_hardcoded_env(
|
|||
) -> bool {
|
||||
let mut cmd = Command::new(program);
|
||||
cmd.args(args)
|
||||
// Null stdin, never inherit: a child reading the app's inherited
|
||||
// stdin (pkexec falling back to a tty password prompt, pacman's
|
||||
// interactive confirm) would block forever and hang the install
|
||||
// command. These commands are all non-interactive (--noconfirm/-y);
|
||||
// authenticating goes through the polkit agent as a GUI dialog.
|
||||
.stdin(Stdio::null())
|
||||
.stdout(Stdio::piped())
|
||||
.stderr(Stdio::piped())
|
||||
.kill_on_drop(true);
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ fn css_custom_properties(p: &bread_theme::Palette) -> String {
|
|||
("fg", p.foreground.as_str()),
|
||||
("surface", p.color0.as_str()),
|
||||
("overlay", p.color7.as_str()),
|
||||
("accent", p.color4.as_str()),
|
||||
("accent", p.color1.as_str()),
|
||||
("red", p.color1.as_str()),
|
||||
("green", p.color2.as_str()),
|
||||
("yellow", p.color3.as_str()),
|
||||
|
|
@ -48,7 +48,7 @@ fn css_custom_properties(p: &bread_theme::Palette) -> String {
|
|||
("teal", p.color6.as_str()),
|
||||
("on-bg", bread_theme::ink_on(&p.background)),
|
||||
("on-surface", bread_theme::ink_on(&p.color0)),
|
||||
("on-accent", bread_theme::ink_on(&p.color4)),
|
||||
("on-accent", bread_theme::ink_on(&p.color1)),
|
||||
("on-red", bread_theme::ink_on(&p.color1)),
|
||||
("on-overlay", bread_theme::ink_on(&p.color7)),
|
||||
];
|
||||
|
|
|
|||
|
|
@ -110,6 +110,8 @@ fn may_delete_user(username: &str, current: &str) -> Result<(), String> {
|
|||
|
||||
#[tauri::command]
|
||||
pub async fn change_password(username: String, password: String) -> Result<(), String> {
|
||||
// chpasswd_input validates the username *and* the password (rejects the
|
||||
// newline / `:` that would let one entry smuggle another).
|
||||
let input = chpasswd_input(&username, &password)?;
|
||||
if util::run_with_stdin(&["pkexec", "chpasswd"], &input).await {
|
||||
Ok(())
|
||||
|
|
@ -121,9 +123,11 @@ pub async fn change_password(username: String, password: String) -> Result<(), S
|
|||
#[tauri::command]
|
||||
pub async fn remove_user(username: String) -> Result<(), String> {
|
||||
let current = std::env::var("USER").unwrap_or_default();
|
||||
// Validates the username and refuses `root` / the current user.
|
||||
may_delete_user(&username, ¤t)?;
|
||||
// `--` so a username can never be read as a userdel option.
|
||||
let output = Command::new("pkexec")
|
||||
.args(["userdel", "-r", &username])
|
||||
.args(["userdel", "-r", "--", &username])
|
||||
.output()
|
||||
.await
|
||||
.map_err(|e| e.to_string())?;
|
||||
|
|
@ -137,7 +141,14 @@ pub async fn remove_user(username: String) -> Result<(), String> {
|
|||
#[tauri::command]
|
||||
pub async fn add_user(username: String, full_name: String, password: String) -> Result<(), String> {
|
||||
let username = username.trim();
|
||||
// Validates the username and the password (newline / `:` injection).
|
||||
let input = chpasswd_input(username, &password)?;
|
||||
// GECOS field is otherwise free text; strip control chars and the field
|
||||
// separators so `-c` can't smuggle extra passwd fields or arguments.
|
||||
let gecos: String = full_name
|
||||
.chars()
|
||||
.filter(|c| !matches!(c, '\n' | '\r' | '\0' | ',' | ':'))
|
||||
.collect();
|
||||
let mut useradd_args = vec![
|
||||
"pkexec".to_string(),
|
||||
"useradd".to_string(),
|
||||
|
|
@ -145,10 +156,12 @@ pub async fn add_user(username: String, full_name: String, password: String) ->
|
|||
"-s".to_string(),
|
||||
"/bin/bash".to_string(),
|
||||
];
|
||||
if !full_name.trim().is_empty() {
|
||||
if !gecos.trim().is_empty() {
|
||||
useradd_args.push("-c".to_string());
|
||||
useradd_args.push(full_name.trim().to_string());
|
||||
useradd_args.push(gecos.trim().to_string());
|
||||
}
|
||||
// `--` so the username can never be read as a useradd option.
|
||||
useradd_args.push("--".to_string());
|
||||
useradd_args.push(username.to_string());
|
||||
let args_ref: Vec<&str> = useradd_args.iter().map(String::as_str).collect();
|
||||
let output = Command::new(args_ref[0])
|
||||
|
|
|
|||
|
|
@ -226,6 +226,11 @@ pub fn valid_nm_id(name: &str) -> bool {
|
|||
&& !t.contains(';')
|
||||
}
|
||||
|
||||
/// Reload Hyprland so settings.json / binds.json / monitors.json take effect now.
|
||||
pub fn hypr_reload() {
|
||||
let _ = std::process::Command::new("hyprctl").arg("reload").status();
|
||||
}
|
||||
|
||||
pub fn valid_printer_name(name: &str) -> bool {
|
||||
let bytes = name.as_bytes();
|
||||
!bytes.is_empty()
|
||||
|
|
@ -236,6 +241,11 @@ pub fn valid_printer_name(name: &str) -> bool {
|
|||
.all(|b| b.is_ascii_alphanumeric() || matches!(*b, b'-' | b'_' | b'.'))
|
||||
}
|
||||
|
||||
/// ufw / snapper numeric id — digits only.
|
||||
pub fn valid_number_id(num: &str) -> bool {
|
||||
!num.is_empty() && num.len() <= 12 && num.bytes().all(|b| b.is_ascii_digit())
|
||||
}
|
||||
|
||||
#[cfg(test)]
|
||||
mod tests {
|
||||
use super::*;
|
||||
|
|
@ -279,4 +289,13 @@ mod tests {
|
|||
assert!(!valid_printer_name("foo bar"));
|
||||
assert!(!valid_printer_name("-d"));
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn number_id_is_digits_only() {
|
||||
assert!(valid_number_id("42"));
|
||||
assert!(!valid_number_id(""));
|
||||
assert!(!valid_number_id("-1"));
|
||||
assert!(!valid_number_id("12a"));
|
||||
assert!(!valid_number_id("1 2"));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@ pub fn run() {
|
|||
commands::hyprland::get_live_monitors,
|
||||
commands::hyprland::get_monitor_rules,
|
||||
commands::hyprland::save_monitor_rules,
|
||||
commands::hyprland::apply_monitor_layout,
|
||||
commands::hyprland::open_hyprland_conf,
|
||||
commands::hyprland::open_keybinds_viewer,
|
||||
commands::keybinds::get_keybinds,
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ const INITIAL_SETTLE_DELAY: Duration = Duration::from_millis(2000);
|
|||
const VIEW_SETTLE_DELAY: Duration = Duration::from_millis(2000);
|
||||
|
||||
const KNOWN_VIEWS: &[&str] = &[
|
||||
"home",
|
||||
"network",
|
||||
"breadcrumbs",
|
||||
"bluetooth",
|
||||
|
|
@ -45,7 +46,9 @@ const KNOWN_VIEWS: &[&str] = &[
|
|||
"power",
|
||||
"datetime",
|
||||
"hyprland",
|
||||
"displays",
|
||||
"keybinds",
|
||||
"input",
|
||||
"autostart",
|
||||
"users",
|
||||
"appearance",
|
||||
|
|
@ -56,17 +59,20 @@ const KNOWN_VIEWS: &[&str] = &[
|
|||
"breadpad",
|
||||
"breadsearch",
|
||||
"bread",
|
||||
"desktop",
|
||||
"packages",
|
||||
"aur",
|
||||
"firmware",
|
||||
"snapshots",
|
||||
"updates",
|
||||
"system",
|
||||
"printing",
|
||||
"vpn",
|
||||
"nightlight",
|
||||
"ime",
|
||||
"accessibility",
|
||||
"defaults",
|
||||
"apps",
|
||||
"channel",
|
||||
"backup",
|
||||
"optional",
|
||||
|
|
@ -74,6 +80,7 @@ const KNOWN_VIEWS: &[&str] = &[
|
|||
"breadshot",
|
||||
"breadmon",
|
||||
"breadhelp",
|
||||
"privacy",
|
||||
"about",
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"$schema": "https://schema.tauri.app/config/2",
|
||||
"productName": "BOS Settings",
|
||||
"version": "0.8.0",
|
||||
"version": "0.8.2",
|
||||
"identifier": "dev.breadway.bos-settings",
|
||||
"build": {
|
||||
"beforeDevCommand": "npm --prefix frontend run dev",
|
||||
|
|
@ -13,10 +13,12 @@
|
|||
"windows": [
|
||||
{
|
||||
"title": "BOS Settings",
|
||||
"width": 960,
|
||||
"height": 640,
|
||||
"width": 1280,
|
||||
"height": 840,
|
||||
"minWidth": 960,
|
||||
"minHeight": 640,
|
||||
"decorations": false,
|
||||
"backgroundColor": "#0c0c0c"
|
||||
"backgroundColor": "#12161c"
|
||||
}
|
||||
],
|
||||
"security": {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue