feat(ui): components, routes and styles

Sidebar (lazy tree, keyboard navigation, saved searches), page view with
typed properties, tasks, tags, calendar and clip dialogs, settings with
shortcut rebinding, canvas, database and board views.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/lib/components/ClipDialog.svelte

@@ -0,0 +1,35 @@
+<script>
+  import Icon from './Icon.svelte';
+  import { store } from '$lib/state.svelte.js';
+
+  let closing = $state(false);
+  let url = $state('');
+  let busy = $state(false);
+
+  async function go() {
+    if (!url.trim() || busy) return;
+    busy = true;
+    await store.clipWeb(url);
+    busy = false;
+    close();
+  }
+  function close() {
+    closing = true;
+    setTimeout(() => { store.clipOpen = false; closing = false; }, 150);
+  }
+  const focusOnMount = (el) => el.focus();
+</script>
+
+<svelte:window onkeydown={(e) => e.key === 'Escape' && close()} />
+
+<div class="overlay" class:closing role="presentation" onmousedown={(e) => e.target === e.currentTarget && close()}>
+  <div class="panel" role="dialog" aria-label="Clip a web page">
+    <div class="pal-top">
+      <Icon name="globe" />
+      <input bind:value={url} placeholder="Paste a web address to save as a note" autocomplete="off" spellcheck="false" use:focusOnMount
+        onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); go(); } }} />
+      <button class="btn primary" disabled={busy || !url.trim()} onclick={go}>{busy ? 'Clipping…' : 'Clip'}</button>
+    </div>
+    <div class="pal-foot"><span>Saves the page’s main text as Markdown, with its address in the page’s front matter. Public web pages only.</span></div>
+  </div>
+</div>