Breadway/bos-settings
1
0
Fork 0
Code Issues Pull requests 2 Projects Releases Packages Wiki Activity Actions

Settings redesign: hub-based navigation, plus hardening and bug fixes

Browse source 
Rework the settings app around hub pages (home, network, displays, input,
apps, privacy, system) with a redesigned sidebar, shared nav state, and new
hub view components. Alongside the redesign: validate webview inputs into
root commands (users, firewall, snapshots, wifi), fix set_charge_threshold
writing the percentage via tee stdin, prevent streaming installs from
hanging on inherited stdin, add frontend type fixes, sync versions to
0.8.2, and clean up clippy/svelte-check warnings.
This commit is contained in:
Breadway 2026-08-30 18:37:21 +08:00
parent f7b114f778
commit dce2031743
97 changed files with 2723 additions and 1142 deletions
Download patch file Download diff file Expand all files Collapse all files

144
frontend/src/lib/components/Sidebar.svelte
View file

@ -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>