feat(fuji): UI polish, workspace actions, state architecture, and date fields

apps/fuji/package.json

@@ -5,7 +5,8 @@
 	"version": "0.0.1",
 	"type": "module",
 	"exports": {
-		"./workspace": "./src/lib/workspace/index.ts"
+		"./workspace": "./src/lib/workspace/workspace.ts",
+		"./materializer": "./src/lib/materializer.ts"
 	},
 	"scripts": {
 		"dev": "bun run dev:local",
@@ -36,20 +37,23 @@
 		"@epicenter/constants": "workspace:*",
 		"@epicenter/svelte": "workspace:*",
 		"@epicenter/workspace": "workspace:*",
+		"@sindresorhus/slugify": "catalog:",
 		"@tanstack/svelte-table": "catalog:",
 		"@tanstack/table-core": "9.0.0-alpha.10",
-		"prosemirror-commands": "^1.6.0",
-		"prosemirror-inputrules": "^1.4.0",
-		"prosemirror-keymap": "^1.2.0",
-		"prosemirror-schema-basic": "^1.2.0",
-		"prosemirror-schema-list": "^1.4.0",
 		"arktype": "catalog:",
 		"bits-ui": "catalog:",
 		"date-fns": "catalog:",
+		"filenamify": "^7.0.1",
 		"nanoid": "catalog:",
+		"prosemirror-commands": "^1.6.0",
+		"prosemirror-inputrules": "^1.4.0",
+		"prosemirror-keymap": "^1.2.0",
 		"prosemirror-model": "^1.25.0",
+		"prosemirror-schema-basic": "^1.2.0",
+		"prosemirror-schema-list": "^1.4.0",
 		"prosemirror-state": "^1.4.0",
 		"prosemirror-view": "^1.41.0",
+		"typebox": "catalog:",
 		"wellcrafted": "catalog:",
 		"y-prosemirror": "^1.3.7",
 		"yjs": "catalog:"

apps/fuji/src/lib/client.ts

@@ -8,17 +8,22 @@
  */
 
 import { APP_URLS } from '@epicenter/constants/vite';
-import { createAuth } from '@epicenter/svelte/auth';
-import { createWorkspace } from '@epicenter/workspace';
+import { createPersistedState } from '@epicenter/svelte';
+import { AuthSession, createAuth } from '@epicenter/svelte/auth';
 import { indexeddbPersistence } from '@epicenter/workspace/extensions/persistence/indexeddb';
 import {
 	createSyncExtension,
 	toWsUrl,
 } from '@epicenter/workspace/extensions/sync/websocket';
-import { session } from '$lib/auth';
-import { fujiWorkspace } from './workspace/definition';
+import { createFujiWorkspace } from '$lib/workspace';
 
-export const workspace = createWorkspace(fujiWorkspace)
+const session = createPersistedState({
+	key: 'fuji:authSession',
+	schema: AuthSession.or('null'),
+	defaultValue: null,
+});
+
+export const workspace = createFujiWorkspace()
 	.withExtension('persistence', indexeddbPersistence)
 	.withExtension(
 		'sync',

apps/fuji/src/lib/components/AppHeader.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { Button } from '@epicenter/ui/button';
+	import { getStars, GitHubButton } from '@epicenter/ui/github-button';
+	import { Kbd } from '@epicenter/ui/kbd';
+	import { LightSwitch } from '@epicenter/ui/light-switch';
+	import * as Tooltip from '@epicenter/ui/tooltip';
+	import PlusIcon from '@lucide/svelte/icons/plus';
+	import SearchIcon from '@lucide/svelte/icons/search';
+	import SyncStatusIndicator from './SyncStatusIndicator.svelte';
+	import { entriesState } from '$lib/entries.svelte';
+
+	let { onOpenSearch }: { onOpenSearch: () => void } = $props();
+</script>
+
+<div class="flex h-8 shrink-0 items-center justify-between border-b px-2">
+	<!-- Left: branding + actions -->
+	<div class="flex items-center gap-1.5">
+		<span class="text-xs font-semibold tracking-tight">Fuji</span>
+		<Tooltip.Root>
+			<Tooltip.Trigger>
+				{#snippet child({ props })}
+					<Button {...props} variant="ghost" size="icon-xs" onclick={onOpenSearch}>
+						<SearchIcon class="size-3.5" />
+					</Button>
+				{/snippet}
+			</Tooltip.Trigger>
+			<Tooltip.Content>
+				Search entries <Kbd>⌘K</Kbd>
+			</Tooltip.Content>
+		</Tooltip.Root>
+		<Tooltip.Root>
+			<Tooltip.Trigger>
+				{#snippet child({ props })}
+					<Button {...props} variant="ghost" size="icon-xs" onclick={entriesState.createEntry}>
+						<PlusIcon class="size-3.5" />
+					</Button>
+				{/snippet}
+			</Tooltip.Trigger>
+			<Tooltip.Content>
+				New entry <Kbd>⌘N</Kbd>
+			</Tooltip.Content>
+		</Tooltip.Root>
+	</div>
+	<!-- Right: external links + theme -->
+	<div class="flex items-center gap-0.5">
+		<SyncStatusIndicator />
+		<GitHubButton
+			repo={{ owner: 'EpicenterHQ', repo: 'epicenter' }}
+			path="/tree/main/apps/fuji"
+			stars={getStars({ owner: 'EpicenterHQ', repo: 'epicenter', fallback: 500 })}
+			variant="ghost"
+			size="sm"
+		/>
+		<LightSwitch variant="ghost" />
+	</div>
+</div>

apps/fuji/src/lib/components/EntriesSidebar.svelte

@@ -0,0 +1,214 @@
+<script lang="ts">
+	import * as Sidebar from '@epicenter/ui/sidebar';
+	import FileTextIcon from '@lucide/svelte/icons/file-text';
+	import HashIcon from '@lucide/svelte/icons/hash';
+	import TagIcon from '@lucide/svelte/icons/tag';
+	import { format, isToday, isYesterday } from 'date-fns';
+	import type { Entry } from '$lib/workspace';
+	import { viewState } from '$lib/view.svelte';
+	import { DateTimeString } from '@epicenter/workspace';
+	import { matchesEntrySearch } from '$lib/entries.svelte';
+
+	let { entries }: { entries: Entry[] } = $props();
+
+	const isSearching = $derived(viewState.searchQuery.trim().length > 0);
+
+	/** Entries matching the search query across title, subtitle, tags, and type. */
+	const searchResults = $derived.by(() => {
+		if (!isSearching) return [];
+		return entries.filter((entry) => matchesEntrySearch(entry, viewState.searchQuery));
+	});
+
+	/** Unique types with entry counts, sorted by count descending. */
+	const typeGroups = $derived.by(() => {
+		const counts = new Map<string, number>();
+		for (const entry of entries) {
+			for (const t of entry.type) {
+				counts.set(t, (counts.get(t) ?? 0) + 1);
+			}
+		}
+		return [...counts.entries()]
+			.sort((a, b) => b[1] - a[1])
+			.map(([name, count]) => ({ name, count }));
+	});
+
+	/** Unique tags with entry counts, sorted by count descending. */
+	const tagGroups = $derived.by(() => {
+		const counts = new Map<string, number>();
+		for (const entry of entries) {
+			for (const tag of entry.tags) {
+				counts.set(tag, (counts.get(tag) ?? 0) + 1);
+			}
+		}
+		return [...counts.entries()]
+			.sort((a, b) => b[1] - a[1])
+			.map(([name, count]) => ({ name, count }));
+	});
+
+	/** Recent entries sorted by updatedAt, limited to 10. */
+	const recentEntries = $derived(
+		[...entries]
+			.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))
+			.slice(0, 10),
+	);
+
+	function getDateLabel(dts: string): string {
+		const date = DateTimeString.toDate(dts);
+		if (isToday(date)) return 'Today';
+		if (isYesterday(date)) return 'Yesterday';
+		return format(date, 'MMM d');
+	}
+</script>
+
+<Sidebar.Root collapsible="none" class="h-full w-full">
+	<Sidebar.Header>
+		<div class="px-2 pb-1">
+			<Sidebar.Input
+				placeholder="Search entries…"
+				value={viewState.searchQuery}
+				oninput={(e) => viewState.setSearchQuery(e.currentTarget.value)}
+			/>
+		</div>
+	</Sidebar.Header>
+
+	<Sidebar.Content>
+		<!-- All Entries -->
+		<Sidebar.Group>
+			<Sidebar.GroupContent>
+				<Sidebar.Menu>
+					<Sidebar.MenuItem>
+						<Sidebar.MenuButton
+						isActive={viewState.activeTypeFilter === null && viewState.activeTagFilter === null && !isSearching}
+					onclick={() => viewState.clearFilters()}
+						>
+							<FileTextIcon class="size-4" />
+							<span>All Entries</span>
+							<span class="ml-auto text-xs text-muted-foreground">
+								{entries.length}
+							</span>
+						</Sidebar.MenuButton>
+					</Sidebar.MenuItem>
+				</Sidebar.Menu>
+			</Sidebar.GroupContent>
+		</Sidebar.Group>
+
+		{#if isSearching}
+			<!-- Search Results -->
+			<Sidebar.Group>
+				<Sidebar.GroupLabel>
+					Search Results ({searchResults.length})
+				</Sidebar.GroupLabel>
+				<Sidebar.GroupContent>
+					<Sidebar.Menu>
+						{#if searchResults.length > 0}
+							{#each searchResults as entry (entry.id)}
+								<Sidebar.MenuItem>
+								<Sidebar.MenuButton onclick={() => viewState.selectEntry(entry.id)}>
+										<div class="flex w-full flex-col gap-0.5 overflow-hidden">
+											<span class="truncate text-sm font-medium">
+												{entry.title || 'Untitled'}
+											</span>
+											{#if entry.subtitle}
+												<span class="truncate text-xs text-muted-foreground">
+													{entry.subtitle}
+												</span>
+											{/if}
+										</div>
+									</Sidebar.MenuButton>
+								</Sidebar.MenuItem>
+							{/each}
+						{:else}
+							<Sidebar.MenuItem>
+								<span class="px-2 py-1 text-xs text-muted-foreground">
+								No entries match "{viewState.searchQuery}"
+								</span>
+							</Sidebar.MenuItem>
+						{/if}
+					</Sidebar.Menu>
+				</Sidebar.GroupContent>
+			</Sidebar.Group>
+		{:else}
+			<!-- Type Groups -->
+			{#if typeGroups.length > 0}
+				<Sidebar.Group>
+					<Sidebar.GroupLabel>Type</Sidebar.GroupLabel>
+					<Sidebar.GroupContent>
+						<Sidebar.Menu>
+							{#each typeGroups as group (group.name)}
+								<Sidebar.MenuItem>
+									<Sidebar.MenuButton
+									isActive={viewState.activeTypeFilter === group.name}
+									onclick={() =>
+										viewState.setTypeFilter(
+											viewState.activeTypeFilter === group.name ? null : group.name,
+										)}
+									>
+										<HashIcon class="size-4" />
+										<span>{group.name}</span>
+										<span class="ml-auto text-xs text-muted-foreground">
+											{group.count}
+										</span>
+									</Sidebar.MenuButton>
+								</Sidebar.MenuItem>
+							{/each}
+						</Sidebar.Menu>
+					</Sidebar.GroupContent>
+				</Sidebar.Group>
+			{/if}
+
+			<!-- Tag Groups -->
+			{#if tagGroups.length > 0}
+				<Sidebar.Group>
+					<Sidebar.GroupLabel>Tags</Sidebar.GroupLabel>
+					<Sidebar.GroupContent>
+						<Sidebar.Menu>
+							{#each tagGroups as group (group.name)}
+								<Sidebar.MenuItem>
+									<Sidebar.MenuButton
+									isActive={viewState.activeTagFilter === group.name}
+									onclick={() =>
+										viewState.setTagFilter(
+											viewState.activeTagFilter === group.name ? null : group.name,
+										)}
+									>
+										<TagIcon class="size-4" />
+										<span>{group.name}</span>
+										<span class="ml-auto text-xs text-muted-foreground">
+											{group.count}
+										</span>
+									</Sidebar.MenuButton>
+								</Sidebar.MenuItem>
+							{/each}
+						</Sidebar.Menu>
+					</Sidebar.GroupContent>
+				</Sidebar.Group>
+			{/if}
+
+			<!-- Recent Entries -->
+			{#if recentEntries.length > 0}
+				<Sidebar.Group>
+					<Sidebar.GroupLabel>Recent</Sidebar.GroupLabel>
+					<Sidebar.GroupContent>
+						<Sidebar.Menu>
+							{#each recentEntries as entry (entry.id)}
+								<Sidebar.MenuItem>
+								<Sidebar.MenuButton onclick={() => viewState.selectEntry(entry.id)}>
+										<div class="flex w-full flex-col gap-0.5 overflow-hidden">
+											<span class="truncate text-sm font-medium">
+												{entry.title || 'Untitled'}
+											</span>
+											<span class="truncate text-xs text-muted-foreground">
+												{getDateLabel(entry.updatedAt)}
+											</span>
+										</div>
+									</Sidebar.MenuButton>
+								</Sidebar.MenuItem>
+							{/each}
+						</Sidebar.Menu>
+					</Sidebar.GroupContent>
+				</Sidebar.Group>
+			{/if}
+		{/if}
+	</Sidebar.Content>
+
+</Sidebar.Root>