feat(kon): scaffold hybrid modular workspace
- Cargo workspace with 6 domain crates: core, audio, transcription, ai-formatting, storage, cloud-providers - Minimal Tauri shell (lib.rs + main.rs) with plugin registration - Svelte 5 frontend copied from Ramble v0.2 - All crates compile as empty stubs - App identifier: uk.co.corbel.kon Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
jake
107
src/lib/Sidebar.svelte
Normal file
107
src/lib/Sidebar.svelte
Normal file
@@ -0,0 +1,107 @@
|
||||
<script>
|
||||
import { page, settings, profiles, tasks } from "$lib/stores/page.svelte.js";
|
||||
|
||||
let taskCount = $derived(tasks.filter((t) => !t.done).length);
|
||||
|
||||
const navItems = [
|
||||
{ id: "dictation", label: "Dictation", icon: "mic" },
|
||||
{ id: "files", label: "Files", icon: "file" },
|
||||
{ id: "tasks", label: "Tasks", icon: "tasks" },
|
||||
{ id: "history", label: "History", icon: "clock" },
|
||||
{ id: "settings", label: "Settings", icon: "settings" },
|
||||
];
|
||||
|
||||
const icons = {
|
||||
mic: "M12 1a4 4 0 0 0-4 4v7a4 4 0 0 0 8 0V5a4 4 0 0 0-4-4ZM8 17.95A7 7 0 0 1 5 12h2a5 5 0 0 0 10 0h2a7 7 0 0 1-3 5.95V21h3v2H5v-2h3v-3.05Z",
|
||||
file: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Zm4 18H6V4h7v5h5v11Z",
|
||||
tasks: "M9 11l3 3L22 4M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11",
|
||||
clock: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7Z",
|
||||
user: "M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5.33 0-8 2.67-8 4v2h16v-2c0-1.33-2.67-4-8-4Z",
|
||||
settings: "M19.14 12.94a7.07 7.07 0 0 0 .06-.94 7.07 7.07 0 0 0-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96a7.04 7.04 0 0 0-1.62-.94l-.36-2.54a.48.48 0 0 0-.48-.41h-3.84a.48.48 0 0 0-.48.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.74 8.87a.48.48 0 0 0 .12.61l2.03 1.58a7.07 7.07 0 0 0 0 1.88l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.49.37 1.03.7 1.62.94l.36 2.54c.05.24.26.41.48.41h3.84c.24 0 .44-.17.48-.41l.36-2.54c.59-.24 1.13-.57 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 0 0-.12-.61l-2.03-1.58ZM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2Z",
|
||||
};
|
||||
|
||||
function navigate(id) {
|
||||
page.current = id;
|
||||
if (id !== "dictation") {
|
||||
page.taskSidebarOpen = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<aside class="flex flex-col w-[210px] min-w-[210px] bg-sidebar border-r border-border-subtle h-full">
|
||||
<!-- Logo -->
|
||||
<div class="px-5 pt-4 pb-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<h1 class="font-display text-[26px] text-text tracking-tight leading-none italic">Ramble</h1>
|
||||
<span
|
||||
class="text-[18px] text-accent inline-block {page.recording ? 'animate-sinhala-spin' : ''}"
|
||||
title="Ramble"
|
||||
>෧</span>
|
||||
</div>
|
||||
<p class="text-[10px] text-text-tertiary mt-1.5 tracking-[0.12em] uppercase">Think out loud</p>
|
||||
</div>
|
||||
|
||||
<!-- Separator -->
|
||||
<div class="mx-5 my-5 h-px bg-border-subtle"></div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="flex flex-col gap-0.5 px-3">
|
||||
{#each navItems as item}
|
||||
<button
|
||||
class="group flex items-center gap-2.5 px-3 py-2 rounded-lg text-[13px] text-left w-full
|
||||
{page.current === item.id
|
||||
? 'bg-nav-active text-text font-medium'
|
||||
: 'text-text-secondary hover:bg-hover hover:text-text'}"
|
||||
onclick={() => navigate(item.id)}
|
||||
>
|
||||
<svg
|
||||
class="w-[16px] h-[16px] flex-shrink-0
|
||||
{page.current === item.id ? 'text-accent' : 'text-text-tertiary group-hover:text-text-secondary'}"
|
||||
viewBox="0 0 24 24" fill="currentColor"
|
||||
>
|
||||
<path d={icons[item.icon]} />
|
||||
</svg>
|
||||
{item.label}
|
||||
{#if item.id === "tasks" && taskCount > 0}
|
||||
<span class="ml-auto text-[10px] px-1.5 py-0.5 rounded-full bg-accent/15 text-accent font-medium">
|
||||
{taskCount}
|
||||
</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<!-- Spacer -->
|
||||
<div class="flex-1"></div>
|
||||
|
||||
<!-- Profile selector -->
|
||||
<div class="px-4 pb-3">
|
||||
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-1.5 px-1">Profile</p>
|
||||
<select
|
||||
class="w-full bg-bg-input border border-border rounded-lg px-3 py-1.5 text-[12px] text-text-secondary
|
||||
focus:outline-none focus:border-accent appearance-none cursor-pointer"
|
||||
bind:value={page.activeProfile}
|
||||
>
|
||||
<option>None</option>
|
||||
{#each profiles as profile}
|
||||
<option>{profile.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Separator -->
|
||||
<div class="mx-5 mb-3 h-px bg-border-subtle"></div>
|
||||
|
||||
<!-- Status -->
|
||||
<div class="px-5 pb-5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="w-[7px] h-[7px] rounded-full"
|
||||
class:animate-pulse-soft={page.recording}
|
||||
style="background: {page.statusColor}"
|
||||
></span>
|
||||
<span class="text-[11px] text-text-secondary">{page.status}</span>
|
||||
</div>
|
||||
<p class="text-[10px] text-text-tertiary mt-1.5">{settings.formatMode} · v0.2</p>
|
||||
</div>
|
||||
</aside>
|
||||
Reference in New Issue
Block a user