jakob48/crumbs
1
0
Fork 0
forked from mirror/crumbs-original
Code Pull Requests Activity

feat: add About settings page with version and project info

Browse Source 
Add /settings/about page showing version, project description,
Bretzel ecosystem info, open source details, and tech stack.
Move version display from sidebar to About page and align
Settings nav item styling with other sidebar items.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Frederic Cabassut
2026-03-10 15:54:40 +01:00
co-authored by Claude Opus 4.6
parent fa60c65337
commit 871d17e55f
4 changed files with 95 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Layout/Sidebar.svelte
+3 -9
View File
@@ -6,10 +6,9 @@
interface Props {
open: boolean;
onClose?: () => void;
appVersion?: string;
}
let { open, onClose, appVersion }: Props = $props();
let { open, onClose }: Props = $props();
function closeMobile() {
if (window.matchMedia('(max-width: 1023px)').matches) {
@@ -75,17 +74,12 @@
<div class="absolute bottom-0 left-0 w-full border-t border-[var(--border-subtle)]">
<a
href="/settings"
class="flex w-full items-center gap-3 px-6 py-3 text-sm text-[var(--text-muted)] transition-colors hover:text-[var(--primary)]"
class="flex w-full items-center gap-3 rounded-sm px-6 py-3 text-left text-sm transition-colors {$page.url.pathname.startsWith('/settings') ? 'bg-[var(--primary)]/15 text-[var(--primary)]' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
onclick={closeMobile}
data-testid="settings-link"
>
<Settings size={16} />
<Settings size={20} />
Settings
</a>
{#if appVersion}
<div class="border-t border-[var(--border-subtle)] px-6 py-2 text-right text-xs text-[var(--text-muted)]">
v{appVersion}
</div>
{/if}
</div>
</aside>
src/routes/(app)/+layout.svelte
+1 -1
View File
@@ -34,7 +34,7 @@
<div class="flex min-h-screen flex-col bg-[var(--bg-base)] text-[var(--text)]">
<Header onMenuToggle={() => (sidebarOpen = !sidebarOpen)} />
<Sidebar open={sidebarOpen} onClose={() => (sidebarOpen = false)} appVersion={data.appVersion} />
<Sidebar open={sidebarOpen} onClose={() => (sidebarOpen = false)} />
<main class="flex-1 pt-4 transition-all {sidebarOpen ? 'lg:ml-64' : ''}">
<div class="mx-auto max-w-7xl px-4">
src/routes/(app)/settings/+layout.svelte
+10 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { page } from '$app/state';
import { User, Cpu, ShieldCheck, SlidersHorizontal } from 'lucide-svelte';
import { User, Cpu, ShieldCheck, SlidersHorizontal, Info } from 'lucide-svelte';
let { data, children } = $props();
let pathname = $derived(page.url.pathname);
@@ -56,6 +56,15 @@
</a>
</li>
{/if}
<li>
<a
href="/settings/about"
class="flex items-center gap-2 rounded-sm px-3 py-2 text-sm whitespace-nowrap transition-colors {pathname === '/settings/about' ? 'bg-[var(--primary)]/15 text-[var(--primary)] font-medium' : 'text-[var(--text)] hover:bg-[var(--bg-base)]'}"
>
<Info size={16} />
About
</a>
</li>
</ul>
</nav>
src/routes/(app)/settings/about/+page.svelte
+81
View File
@@ -0,0 +1,81 @@
<script lang="ts">
import { page } from '$app/stores';
let appVersion = $derived($page.data.appVersion);
</script>
<div class="space-y-8">
<div class="flex items-center gap-3">
<h2 class="text-xl font-bold text-[var(--text)]">About Crumbs</h2>
<span
class="rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-base)] px-2 py-0.5 text-xs font-medium text-[var(--text-muted)]"
>
v{appVersion}
</span>
</div>
<section
class="space-y-2 rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-4 shadow-[var(--card-shadow)]"
>
<h3 class="text-sm font-bold text-[var(--text)]">What is Crumbs?</h3>
<p class="text-sm leading-relaxed text-[var(--text-muted)]">
Crumbs is a self-hostable note-taking app. Like breadcrumbs left along a trail, Crumbs
captures the small scattered thoughts, ideas, and notes you leave behind as you go — so you
can always find your way back to them.
</p>
</section>
<section
class="space-y-2 rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-4 shadow-[var(--card-shadow)]"
>
<h3 class="text-sm font-bold text-[var(--text)]">Bretzel App Universe</h3>
<p class="text-sm leading-relaxed text-[var(--text-muted)]">
Crumbs is part of the
<a
href="https://bretzel.app"
target="_blank"
rel="noopener noreferrer"
class="text-[var(--primary)] underline hover:text-[var(--primary-hover)]">Bretzel</a
> family of apps.
</p>
</section>
<section
class="space-y-2 rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-4 shadow-[var(--card-shadow)]"
>
<h3 class="text-sm font-bold text-[var(--text)]">Open Source</h3>
<p class="text-sm leading-relaxed text-[var(--text-muted)]">
Crumbs is licensed under the MIT License. Source code is available on
<a
href="https://github.com/bretzel-app/crumbs/"
target="_blank"
rel="noopener noreferrer"
class="text-[var(--primary)] underline hover:text-[var(--primary-hover)]">GitHub</a
>.
</p>
</section>
<section
class="space-y-2 rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-4 shadow-[var(--card-shadow)]"
>
<h3 class="text-sm font-bold text-[var(--text)]">Feedback</h3>
<p class="text-sm leading-relaxed text-[var(--text-muted)]">
Feedback is welcome! Please open an issue on
<a
href="https://github.com/bretzel-app/crumbs/issues"
target="_blank"
rel="noopener noreferrer"
class="text-[var(--primary)] underline hover:text-[var(--primary-hover)]">GitHub Issues</a
>.
</p>
</section>
<section
class="space-y-2 rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-4 shadow-[var(--card-shadow)]"
>
<h3 class="text-sm font-bold text-[var(--text)]">Tech Stack</h3>
<p class="text-sm leading-relaxed text-[var(--text-muted)]">
Built with SvelteKit, SQLite, and Drizzle ORM. Offline-first PWA with CRDT-based sync.
</p>
</section>
</div>