Mega push vol2

2026-02-05 01:36:06 +02:00
parent 1534e1f0af
commit 9af0ef5307
17 changed files with 1056 additions and 189 deletions
--- a/src/lib/components/calendar/Calendar.svelte
+++ b/src/lib/components/calendar/Calendar.svelte
@@ -1,28 +1,47 @@
 <script lang="ts">
-	import type { CalendarEvent } from '$lib/supabase/types';
-	import { getMonthDays, isSameDay } from '$lib/api/calendar';
+	import type { CalendarEvent } from "$lib/supabase/types";
+	import { getMonthDays, isSameDay } from "$lib/api/calendar";
+
+	type ViewType = "month" | "week" | "day";

 	interface Props {
 		events: CalendarEvent[];
 		onDateClick?: (date: Date) => void;
 		onEventClick?: (event: CalendarEvent) => void;
+		initialView?: ViewType;
 	}

-	let { events, onDateClick, onEventClick }: Props = $props();
+	let {
+		events,
+		onDateClick,
+		onEventClick,
+		initialView = "month",
+	}: Props = $props();

 	let currentDate = $state(new Date());
+	let currentView = $state<ViewType>(initialView);
 	const today = new Date();

-	const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+	const weekDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

-	const days = $derived(getMonthDays(currentDate.getFullYear(), currentDate.getMonth()));
+	const days = $derived(
+		getMonthDays(currentDate.getFullYear(), currentDate.getMonth()),
+	);

 	function prevMonth() {
-		currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1);
+		currentDate = new Date(
+			currentDate.getFullYear(),
+			currentDate.getMonth() - 1,
+			1,
+		);
 	}

 	function nextMonth() {
-		currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
+		currentDate = new Date(
+			currentDate.getFullYear(),
+			currentDate.getMonth() + 1,
+			1,
+		);
 	}

 	function goToToday() {
@@ -41,14 +60,109 @@
 	}

 	const monthYear = $derived(
-		currentDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+		currentDate.toLocaleDateString("en-US", {
+			month: "long",
+			year: "numeric",
+		}),
 	);
+
+	// Get week days for week view
+	function getWeekDays(date: Date): Date[] {
+		const startOfWeek = new Date(date);
+		startOfWeek.setDate(date.getDate() - date.getDay());
+		return Array.from({ length: 7 }, (_, i) => {
+			const d = new Date(startOfWeek);
+			d.setDate(startOfWeek.getDate() + i);
+			return d;
+		});
+	}
+
+	const weekDates = $derived(getWeekDays(currentDate));
+
+	// Navigation functions for different views
+	function prev() {
+		if (currentView === "month") {
+			currentDate = new Date(
+				currentDate.getFullYear(),
+				currentDate.getMonth() - 1,
+				1,
+			);
+		} else if (currentView === "week") {
+			currentDate = new Date(
+				currentDate.getTime() - 7 * 24 * 60 * 60 * 1000,
+			);
+		} else {
+			currentDate = new Date(currentDate.getTime() - 24 * 60 * 60 * 1000);
+		}
+	}
+
+	function next() {
+		if (currentView === "month") {
+			currentDate = new Date(
+				currentDate.getFullYear(),
+				currentDate.getMonth() + 1,
+				1,
+			);
+		} else if (currentView === "week") {
+			currentDate = new Date(
+				currentDate.getTime() + 7 * 24 * 60 * 60 * 1000,
+			);
+		} else {
+			currentDate = new Date(currentDate.getTime() + 24 * 60 * 60 * 1000);
+		}
+	}
+
+	const headerTitle = $derived(() => {
+		if (currentView === "day") {
+			return currentDate.toLocaleDateString("en-US", {
+				weekday: "long",
+				month: "long",
+				day: "numeric",
+				year: "numeric",
+			});
+		} else if (currentView === "week") {
+			const start = weekDates[0];
+			const end = weekDates[6];
+			return `${start.toLocaleDateString("en-US", { month: "short", day: "numeric" })} - ${end.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}`;
+		}
+		return monthYear;
+	});
 </script>

 <div class="bg-surface rounded-xl p-4">
 	<div class="flex items-center justify-between mb-4">
-		<h2 class="text-xl font-semibold text-light">{monthYear}</h2>
+		<h2 class="text-xl font-semibold text-light">{headerTitle()}</h2>
 		<div class="flex items-center gap-2">
+			<!-- View Switcher -->
+			<div class="flex bg-dark rounded-lg p-0.5">
+				<button
+					class="px-3 py-1 text-sm rounded-md transition-colors {currentView ===
+					'day'
+						? 'bg-primary text-white'
+						: 'text-light/60 hover:text-light'}"
+					onclick={() => (currentView = "day")}
+				>
+					Day
+				</button>
+				<button
+					class="px-3 py-1 text-sm rounded-md transition-colors {currentView ===
+					'week'
+						? 'bg-primary text-white'
+						: 'text-light/60 hover:text-light'}"
+					onclick={() => (currentView = "week")}
+				>
+					Week
+				</button>
+				<button
+					class="px-3 py-1 text-sm rounded-md transition-colors {currentView ===
+					'month'
+						? 'bg-primary text-white'
+						: 'text-light/60 hover:text-light'}"
+					onclick={() => (currentView = "month")}
+				>
+					Month
+				</button>
+			</div>
 			<button
 				class="px-3 py-1.5 text-sm text-light/60 hover:text-light hover:bg-light/10 rounded-lg transition-colors"
 				onclick={goToToday}
@@ -57,68 +171,183 @@
 			</button>
 			<button
 				class="p-2 text-light/60 hover:text-light hover:bg-light/10 rounded-lg transition-colors"
-				onclick={prevMonth}
-				aria-label="Previous month"
+				onclick={prev}
+				aria-label="Previous"
 			>
-				<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+				<svg
+					class="w-5 h-5"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+				>
 					<path d="m15 18-6-6 6-6" />
 				</svg>
 			</button>
 			<button
 				class="p-2 text-light/60 hover:text-light hover:bg-light/10 rounded-lg transition-colors"
-				onclick={nextMonth}
-				aria-label="Next month"
+				onclick={next}
+				aria-label="Next"
 			>
-				<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+				<svg
+					class="w-5 h-5"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+				>
 					<path d="m9 18 6-6-6-6" />
 				</svg>
 			</button>
 		</div>
 	</div>

-	<div class="grid grid-cols-7 gap-px bg-light/10 rounded-lg overflow-hidden">
-		{#each weekDays as day}
-			<div class="bg-dark px-2 py-2 text-center text-sm font-medium text-light/50">
-				{day}
-			</div>
-		{/each}
-
-		{#each days as day}
-			{@const dayEvents = getEventsForDay(day)}
-			{@const isToday = isSameDay(day, today)}
-			{@const inMonth = isCurrentMonth(day)}
-			<button
-				class="bg-dark min-h-[80px] p-1 text-left transition-colors hover:bg-light/5"
-				class:opacity-40={!inMonth}
-				onclick={() => onDateClick?.(day)}
-			>
-				<div class="flex items-center justify-center w-7 h-7 mb-1">
-					<span
-						class="text-sm {isToday
-							? 'bg-primary text-white rounded-full w-7 h-7 flex items-center justify-center'
-							: 'text-light/80'}"
-					>
-						{day.getDate()}
-					</span>
+	<!-- Month View -->
+	{#if currentView === "month"}
+		<div
+			class="grid grid-cols-7 gap-px bg-light/10 rounded-lg overflow-hidden"
+		>
+			{#each weekDays as day}
+				<div
+					class="bg-dark px-2 py-2 text-center text-sm font-medium text-light/50"
+				>
+					{day}
 				</div>
-				<div class="space-y-0.5">
-					{#each dayEvents.slice(0, 3) as event}
-						<button
-							class="w-full text-xs px-1 py-0.5 rounded truncate text-left"
-							style="background-color: {event.color ?? '#6366f1'}20; color: {event.color ?? '#6366f1'}"
-							onclick={(e) => {
-								e.stopPropagation();
-								onEventClick?.(event);
-							}}
+			{/each}
+
+			{#each days as day}
+				{@const dayEvents = getEventsForDay(day)}
+				{@const isToday = isSameDay(day, today)}
+				{@const inMonth = isCurrentMonth(day)}
+				<button
+					class="bg-dark min-h-[80px] p-1 text-left transition-colors hover:bg-light/5"
+					class:opacity-40={!inMonth}
+					onclick={() => onDateClick?.(day)}
+				>
+					<div class="flex items-center justify-center w-7 h-7 mb-1">
+						<span
+							class="text-sm {isToday
+								? 'bg-primary text-white rounded-full w-7 h-7 flex items-center justify-center'
+								: 'text-light/80'}"
 						>
-							{event.title}
+							{day.getDate()}
+						</span>
+					</div>
+					<div class="space-y-0.5">
+						{#each dayEvents.slice(0, 3) as event}
+							<button
+								class="w-full text-xs px-1 py-0.5 rounded truncate text-left"
+								style="background-color: {event.color ??
+									'#6366f1'}20; color: {event.color ??
+									'#6366f1'}"
+								onclick={(e) => {
+									e.stopPropagation();
+									onEventClick?.(event);
+								}}
+							>
+								{event.title}
+							</button>
+						{/each}
+						{#if dayEvents.length > 3}
+							<p class="text-xs text-light/40 px-1">
+								+{dayEvents.length - 3} more
+							</p>
+						{/if}
+					</div>
+				</button>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Week View -->
+	{#if currentView === "week"}
+		<div
+			class="grid grid-cols-7 gap-px bg-light/10 rounded-lg overflow-hidden"
+		>
+			{#each weekDates as day}
+				{@const dayEvents = getEventsForDay(day)}
+				{@const isToday = isSameDay(day, today)}
+				<div class="bg-dark">
+					<div class="px-2 py-2 text-center border-b border-light/10">
+						<div class="text-xs text-light/50">
+							{weekDays[day.getDay()]}
+						</div>
+						<div
+							class="text-lg font-medium {isToday
+								? 'text-primary'
+								: 'text-light'}"
+						>
+							{day.getDate()}
+						</div>
+					</div>
+					<div class="min-h-[300px] p-1 space-y-1">
+						{#each dayEvents as event}
+							<button
+								class="w-full text-xs px-2 py-1.5 rounded text-left"
+								style="background-color: {event.color ??
+									'#6366f1'}20; color: {event.color ??
+									'#6366f1'}"
+								onclick={() => onEventClick?.(event)}
+							>
+								<div class="font-medium truncate">
+									{event.title}
+								</div>
+								<div class="text-[10px] opacity-70">
+									{new Date(
+										event.start_time,
+									).toLocaleTimeString("en-US", {
+										hour: "numeric",
+										minute: "2-digit",
+									})}
+								</div>
+							</button>
+						{/each}
+					</div>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Day View -->
+	{#if currentView === "day"}
+		{@const dayEvents = getEventsForDay(currentDate)}
+		<div class="bg-dark rounded-lg p-4 min-h-[400px]">
+			{#if dayEvents.length === 0}
+				<div class="text-center text-light/40 py-12">
+					<p>No events for this day</p>
+				</div>
+			{:else}
+				<div class="space-y-2">
+					{#each dayEvents as event}
+						<button
+							class="w-full text-left p-3 rounded-lg transition-colors hover:opacity-80"
+							style="background-color: {event.color ??
+								'#6366f1'}20; border-left: 3px solid {event.color ??
+								'#6366f1'}"
+							onclick={() => onEventClick?.(event)}
+						>
+							<div class="font-medium text-light">
+								{event.title}
+							</div>
+							<div class="text-sm text-light/60 mt-1">
+								{new Date(event.start_time).toLocaleTimeString(
+									"en-US",
+									{ hour: "numeric", minute: "2-digit" },
+								)}
+								- {new Date(event.end_time).toLocaleTimeString(
+									"en-US",
+									{ hour: "numeric", minute: "2-digit" },
+								)}
+							</div>
+							{#if event.description}
+								<div class="text-sm text-light/50 mt-2">
+									{event.description}
+								</div>
+							{/if}
 						</button>
 					{/each}
-					{#if dayEvents.length > 3}
-						<p class="text-xs text-light/40 px-1">+{dayEvents.length - 3} more</p>
-					{/if}
 				</div>
-			</button>
-		{/each}
-	</div>
+			{/if}
+		</div>
+	{/if}
 </div>
--- a/src/lib/components/documents/Editor.svelte
+++ b/src/lib/components/documents/Editor.svelte
@@ -28,18 +28,36 @@

 	let element: HTMLDivElement;
 	let editor: Editor | null = $state(null);
+	let saveStatus = $state<"idle" | "saving" | "saved" | "error">("idle");

 	let saveTimeout: ReturnType<typeof setTimeout> | null = null;
+	let statusTimeout: ReturnType<typeof setTimeout> | null = null;

 	function triggerAutoSave() {
 		if (saveTimeout) clearTimeout(saveTimeout);
-		saveTimeout = setTimeout(() => {
-			if (editor && onSave) {
-				onSave(editor.getJSON());
-			}
+		saveStatus = "idle";
+		saveTimeout = setTimeout(async () => {
+			await saveNow();
 		}, 1000); // Auto-save after 1 second of inactivity
 	}

+	async function saveNow() {
+		if (editor && onSave) {
+			saveStatus = "saving";
+			try {
+				await onSave(editor.getJSON());
+				saveStatus = "saved";
+				// Reset status after 2 seconds
+				if (statusTimeout) clearTimeout(statusTimeout);
+				statusTimeout = setTimeout(() => {
+					saveStatus = "idle";
+				}, 2000);
+			} catch {
+				saveStatus = "error";
+			}
+		}
+	}
+
 	onMount(() => {
 		editor = new Editor({
 			element,
@@ -69,6 +87,7 @@

 	onDestroy(() => {
 		if (saveTimeout) clearTimeout(saveTimeout);
+		if (statusTimeout) clearTimeout(statusTimeout);
 		editor?.destroy();
 	});

@@ -110,6 +129,67 @@
 		<div
 			class="flex items-center gap-1 px-2 py-1.5 border-b border-light/10 bg-dark/50"
 		>
+			<!-- Save Button -->
+			<button
+				class="flex items-center gap-1.5 px-2 py-1 mr-2 text-xs rounded hover:bg-light/10 transition-colors {saveStatus ===
+				'saving'
+					? 'text-warning'
+					: saveStatus === 'saved'
+						? 'text-success'
+						: saveStatus === 'error'
+							? 'text-error'
+							: 'text-light/60 hover:text-light'}"
+				onclick={() => saveNow()}
+				disabled={saveStatus === "saving"}
+				title="Save (Ctrl+S)"
+			>
+				{#if saveStatus === "saving"}
+					<div
+						class="w-2 h-2 rounded-full bg-warning animate-pulse"
+					></div>
+					<span>Saving...</span>
+				{:else if saveStatus === "saved"}
+					<svg
+						class="w-3.5 h-3.5"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<polyline points="20,6 9,17 4,12" />
+					</svg>
+					<span>Saved</span>
+				{:else if saveStatus === "error"}
+					<svg
+						class="w-3.5 h-3.5"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<circle cx="12" cy="12" r="10" />
+						<line x1="15" y1="9" x2="9" y2="15" />
+						<line x1="9" y1="9" x2="15" y2="15" />
+					</svg>
+					<span>Error</span>
+				{:else}
+					<svg
+						class="w-3.5 h-3.5"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<path
+							d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"
+						/>
+						<polyline points="17,21 17,13 7,13 7,21" />
+						<polyline points="7,3 7,8 15,8" />
+					</svg>
+					<span>Save</span>
+				{/if}
+			</button>
+			<div class="w-px h-5 bg-light/20 mr-1"></div>
 			<button
 				class="p-1.5 rounded hover:bg-light/10 text-light/60 hover:text-light transition-colors"
 				onclick={() => editor?.chain().focus().toggleBold().run()}
--- a/src/lib/components/documents/FileTree.svelte
+++ b/src/lib/components/documents/FileTree.svelte
@@ -5,6 +5,7 @@
 		items: DocumentWithChildren[];
 		selectedId?: string | null;
 		onSelect: (doc: DocumentWithChildren) => void;
+		onDoubleClick?: (doc: DocumentWithChildren) => void;
 		onAdd?: (parentId: string | null) => void;
 		onMove?: (docId: string, newParentId: string | null) => void;
 		onEdit?: (doc: DocumentWithChildren) => void;
@@ -16,6 +17,7 @@
 		items,
 		selectedId = null,
 		onSelect,
+		onDoubleClick,
 		onAdd,
 		onMove,
 		onEdit,
@@ -92,6 +94,7 @@
 					: 'text-light/80 hover:bg-light/5'}
 					{dragOverId === item.id ? 'ring-2 ring-primary bg-primary/10' : ''}"
 				onclick={() => handleSelect(item)}
+				ondblclick={() => onDoubleClick?.(item)}
 				draggable="true"
 				ondragstart={(e) => handleDragStart(e, item)}
 				ondragover={(e) =>
--- a/src/lib/components/kanban/KanbanBoard.svelte
+++ b/src/lib/components/kanban/KanbanBoard.svelte
@@ -1,14 +1,19 @@
 <script lang="ts">
-	import type { ColumnWithCards } from '$lib/api/kanban';
-	import type { KanbanCard } from '$lib/supabase/types';
-	import { Button, Card, Badge } from '$lib/components/ui';
+	import type { ColumnWithCards } from "$lib/api/kanban";
+	import type { KanbanCard } from "$lib/supabase/types";
+	import { Button, Card, Badge } from "$lib/components/ui";

 	interface Props {
 		columns: ColumnWithCards[];
 		onCardClick?: (card: KanbanCard) => void;
-		onCardMove?: (cardId: string, toColumnId: string, toPosition: number) => void;
+		onCardMove?: (
+			cardId: string,
+			toColumnId: string,
+			toPosition: number,
+		) => void;
 		onAddCard?: (columnId: string) => void;
 		onAddColumn?: () => void;
+		onDeleteCard?: (cardId: string) => void;
 		canEdit?: boolean;
 	}

@@ -18,17 +23,25 @@
 		onCardMove,
 		onAddCard,
 		onAddColumn,
-		canEdit = true
+		onDeleteCard,
+		canEdit = true,
 	}: Props = $props();

+	function handleDeleteCard(e: MouseEvent, cardId: string) {
+		e.stopPropagation();
+		if (confirm("Are you sure you want to delete this task?")) {
+			onDeleteCard?.(cardId);
+		}
+	}
+
 	let draggedCard = $state<KanbanCard | null>(null);
 	let dragOverColumn = $state<string | null>(null);

 	function handleDragStart(e: DragEvent, card: KanbanCard) {
 		draggedCard = card;
 		if (e.dataTransfer) {
-			e.dataTransfer.effectAllowed = 'move';
-			e.dataTransfer.setData('text/plain', card.id);
+			e.dataTransfer.effectAllowed = "move";
+			e.dataTransfer.setData("text/plain", card.id);
 		}
 	}

@@ -54,37 +67,40 @@
 	}

 	function formatDueDate(dateStr: string | null): string {
-		if (!dateStr) return '';
+		if (!dateStr) return "";
 		const date = new Date(dateStr);
 		const now = new Date();
 		const diff = date.getTime() - now.getTime();
 		const days = Math.ceil(diff / (1000 * 60 * 60 * 24));

-		if (days < 0) return 'Overdue';
-		if (days === 0) return 'Today';
-		if (days === 1) return 'Tomorrow';
+		if (days < 0) return "Overdue";
+		if (days === 0) return "Today";
+		if (days === 1) return "Tomorrow";
 		return date.toLocaleDateString();
 	}

-	function getDueDateColor(dateStr: string | null): 'error' | 'warning' | 'default' {
-		if (!dateStr) return 'default';
+	function getDueDateColor(
+		dateStr: string | null,
+	): "error" | "warning" | "default" {
+		if (!dateStr) return "default";
 		const date = new Date(dateStr);
 		const now = new Date();
 		const diff = date.getTime() - now.getTime();
 		const days = Math.ceil(diff / (1000 * 60 * 60 * 24));

-		if (days < 0) return 'error';
-		if (days <= 2) return 'warning';
-		return 'default';
+		if (days < 0) return "error";
+		if (days <= 2) return "warning";
+		return "default";
 	}
 </script>

-<div class="flex gap-4 overflow-x-auto pb-4 min-h-[500px]">
+<div class="flex gap-4 overflow-x-auto pb-4 min-h-[500px] scrollbar-visible">
 	{#each columns as column}
 		<div
-			class="flex-shrink-0 w-72 bg-surface rounded-xl p-3 flex flex-col max-h-[calc(100vh-200px)]"
-			class:ring-2={dragOverColumn === column.id}
-			class:ring-primary={dragOverColumn === column.id}
+			class="flex-shrink-0 w-72 bg-surface/80 backdrop-blur-sm rounded-xl p-3 flex flex-col max-h-[calc(100vh-200px)] border border-light/10 shadow-lg {dragOverColumn ===
+			column.id
+				? 'ring-2 ring-primary bg-primary/5'
+				: ''}"
 			ondragover={(e) => handleDragOver(e, column.id)}
 			ondragleave={handleDragLeave}
 			ondrop={(e) => handleDrop(e, column.id)}
@@ -93,37 +109,71 @@
 			<div class="flex items-center justify-between mb-3 px-1">
 				<h3 class="font-medium text-light flex items-center gap-2">
 					{column.name}
-					<span class="text-xs text-light/50 bg-light/10 px-1.5 py-0.5 rounded">
+					<span
+						class="text-xs text-light/50 bg-light/10 px-1.5 py-0.5 rounded"
+					>
 						{column.cards.length}
 					</span>
 				</h3>
 				{#if column.color}
-					<div class="w-3 h-3 rounded-full" style="background-color: {column.color}"></div>
+					<div
+						class="w-3 h-3 rounded-full"
+						style="background-color: {column.color}"
+					></div>
 				{/if}
 			</div>

 			<div class="flex-1 overflow-y-auto space-y-2">
 				{#each column.cards as card}
 					<div
-						class="bg-dark rounded-lg p-3 cursor-pointer hover:ring-1 hover:ring-light/20 transition-all"
+						class="group bg-dark rounded-lg p-3 cursor-pointer hover:ring-1 hover:ring-light/20 transition-all relative"
 						class:opacity-50={draggedCard?.id === card.id}
 						draggable={canEdit}
 						ondragstart={(e) => handleDragStart(e, card)}
 						onclick={() => onCardClick?.(card)}
-						onkeydown={(e) => e.key === 'Enter' && onCardClick?.(card)}
+						onkeydown={(e) =>
+							e.key === "Enter" && onCardClick?.(card)}
 						role="listitem"
 						tabindex="0"
 					>
-						{#if card.color}
-							<div class="w-full h-1 rounded-full mb-2" style="background-color: {card.color}"></div>
+						{#if canEdit}
+							<button
+								class="absolute top-2 right-2 p-1 rounded opacity-0 group-hover:opacity-100 hover:bg-error/20 text-light/40 hover:text-error transition-all"
+								onclick={(e) => handleDeleteCard(e, card.id)}
+								title="Delete task"
+							>
+								<svg
+									class="w-3.5 h-3.5"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+								>
+									<polyline points="3,6 5,6 21,6" />
+									<path
+										d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+									/>
+								</svg>
+							</button>
 						{/if}
-						<p class="text-sm text-light">{card.title}</p>
+						{#if card.color}
+							<div
+								class="w-full h-1 rounded-full mb-2"
+								style="background-color: {card.color}"
+							></div>
+						{/if}
+						<p class="text-sm text-light pr-6">{card.title}</p>
 						{#if card.description}
-							<p class="text-xs text-light/50 mt-1 line-clamp-2">{card.description}</p>
+							<p class="text-xs text-light/50 mt-1 line-clamp-2">
+								{card.description}
+							</p>
 						{/if}
 						{#if card.due_date}
 							<div class="mt-2">
-								<Badge size="sm" variant={getDueDateColor(card.due_date)}>
+								<Badge
+									size="sm"
+									variant={getDueDateColor(card.due_date)}
+								>
 									{formatDueDate(card.due_date)}
 								</Badge>
 							</div>
@@ -137,7 +187,13 @@
 					class="mt-2 w-full py-2 text-sm text-light/50 hover:text-light hover:bg-light/5 rounded-lg transition-colors flex items-center justify-center gap-1"
 					onclick={() => onAddCard?.(column.id)}
 				>
-					<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+					<svg
+						class="w-4 h-4"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+					>
 						<line x1="12" y1="5" x2="12" y2="19" />
 						<line x1="5" y1="12" x2="19" y2="12" />
 					</svg>
@@ -152,7 +208,13 @@
 			class="flex-shrink-0 w-72 h-12 bg-light/5 hover:bg-light/10 rounded-xl flex items-center justify-center gap-2 text-light/50 hover:text-light transition-colors"
 			onclick={() => onAddColumn?.()}
 		>
-			<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+			<svg
+				class="w-5 h-5"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+			>
 				<line x1="12" y1="5" x2="12" y2="19" />
 				<line x1="5" y1="12" x2="19" y2="12" />
 			</svg>
@@ -160,3 +222,24 @@
 		</button>
 	{/if}
 </div>
+
+<style>
+	.scrollbar-visible {
+		scrollbar-width: thin;
+		scrollbar-color: rgba(229, 230, 240, 0.3) transparent;
+	}
+	.scrollbar-visible::-webkit-scrollbar {
+		height: 8px;
+	}
+	.scrollbar-visible::-webkit-scrollbar-track {
+		background: rgba(229, 230, 240, 0.1);
+		border-radius: 4px;
+	}
+	.scrollbar-visible::-webkit-scrollbar-thumb {
+		background: rgba(229, 230, 240, 0.3);
+		border-radius: 4px;
+	}
+	.scrollbar-visible::-webkit-scrollbar-thumb:hover {
+		background: rgba(229, 230, 240, 0.5);
+	}
+</style>
--- a/src/lib/components/ui/ToastContainer.svelte
+++ b/src/lib/components/ui/ToastContainer.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { toasts } from '$lib/stores/toast';
+	import Toast from './Toast.svelte';
+</script>
+
+<div class="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm">
+	{#each $toasts as toast (toast.id)}
+		<Toast
+			variant={toast.variant}
+			message={toast.message}
+			onClose={() => toasts.remove(toast.id)}
+		/>
+	{/each}
+</div>
--- a/src/lib/components/ui/index.ts
+++ b/src/lib/components/ui/index.ts
@@ -9,3 +9,4 @@ export { default as Modal } from './Modal.svelte';
 export { default as Spinner } from './Spinner.svelte';
 export { default as Toggle } from './Toggle.svelte';
 export { default as Toast } from './Toast.svelte';
+export { default as ToastContainer } from './ToastContainer.svelte';
--- a/src/lib/stores/toast.ts
+++ b/src/lib/stores/toast.ts
@@ -0,0 +1,48 @@
+import { writable } from 'svelte/store';
+
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+
+export interface Toast {
+	id: string;
+	message: string;
+	variant: ToastVariant;
+	duration?: number;
+}
+
+function createToastStore() {
+	const { subscribe, update } = writable<Toast[]>([]);
+
+	function add(message: string, variant: ToastVariant = 'info', duration = 5000) {
+		const id = crypto.randomUUID();
+		const toast: Toast = { id, message, variant, duration };
+
+		update((toasts) => [...toasts, toast]);
+
+		if (duration > 0) {
+			setTimeout(() => remove(id), duration);
+		}
+
+		return id;
+	}
+
+	function remove(id: string) {
+		update((toasts) => toasts.filter((t) => t.id !== id));
+	}
+
+	function clear() {
+		update(() => []);
+	}
+
+	return {
+		subscribe,
+		add,
+		remove,
+		clear,
+		success: (message: string, duration?: number) => add(message, 'success', duration),
+		error: (message: string, duration?: number) => add(message, 'error', duration),
+		warning: (message: string, duration?: number) => add(message, 'warning', duration),
+		info: (message: string, duration?: number) => add(message, 'info', duration)
+	};
+}
+
+export const toasts = createToastStore();
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,6 +3,7 @@
 	import favicon from "$lib/assets/favicon.svg";
 	import { createClient } from "$lib/supabase";
 	import { setContext } from "svelte";
+	import { ToastContainer } from "$lib/components/ui";

 	let { children, data } = $props();

@@ -12,3 +13,4 @@

 <svelte:head><link rel="icon" href={favicon} /></svelte:head>
 {@render children()}
+<ToastContainer />
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -48,6 +48,10 @@
    }
 </script>

+<svelte:head>
+    <title>Organizations | Root</title>
+</svelte:head>
+
 <div class="min-h-screen bg-dark">
    <header class="border-b border-light/10 bg-surface">
        <div
--- a/src/routes/[orgSlug]/+layout.server.ts
+++ b/src/routes/[orgSlug]/+layout.server.ts
@@ -46,10 +46,30 @@ export const load: LayoutServerLoad = async ({ params, locals }) => {
 		.eq('org_id', org.id)
 		.limit(10);

+	// Fetch recent activity
+	const { data: recentActivity } = await locals.supabase
+		.from('activity_log')
+		.select(`
+			id,
+			action,
+			entity_type,
+			entity_id,
+			entity_name,
+			created_at,
+			profiles:user_id (
+				full_name,
+				email
+			)
+		`)
+		.eq('org_id', org.id)
+		.order('created_at', { ascending: false })
+		.limit(10);
+
 	return {
 		org,
 		role: membership.role,
 		userRole: membership.role,
-		members: members ?? []
+		members: members ?? [],
+		recentActivity: recentActivity ?? []
 	};
 };
--- a/src/routes/[orgSlug]/+page.svelte
+++ b/src/routes/[orgSlug]/+page.svelte
@@ -1,6 +1,15 @@
 <script lang="ts">
 	import { Card } from "$lib/components/ui";

+	interface ActivityItem {
+		id: string;
+		action: string;
+		entity_type: string;
+		entity_name: string | null;
+		created_at: string;
+		profiles: { full_name: string | null; email: string } | null;
+	}
+
 	interface Props {
 		data: {
 			org: { id: string; name: string; slug: string };
@@ -11,6 +20,7 @@
 				role: string;
 				profiles: { full_name: string | null; email: string };
 			}>;
+			recentActivity?: ActivityItem[];
 		};
 	}

@@ -37,30 +47,51 @@
 		},
 	];

-	// Mock recent activity - will be replaced with real data from activity_log table
-	const recentActivity = [
-		{
-			id: "1",
-			action: "Created document",
-			entity: "Project Brief",
-			time: "2 hours ago",
-			icon: "file",
-		},
-		{
-			id: "2",
-			action: "Updated kanban card",
-			entity: "Design Review",
-			time: "4 hours ago",
-			icon: "kanban",
-		},
-		{
-			id: "3",
-			action: "Added team member",
-			entity: "New Developer",
-			time: "1 day ago",
-			icon: "user",
-		},
-	];
+	// Get icon based on entity type
+	function getActivityIcon(entityType: string): string {
+		switch (entityType) {
+			case "document":
+				return "file";
+			case "kanban_card":
+			case "kanban_board":
+				return "kanban";
+			case "calendar_event":
+				return "calendar";
+			case "member":
+				return "user";
+			default:
+				return "activity";
+		}
+	}
+
+	// Format relative time
+	function formatRelativeTime(dateStr: string): string {
+		const date = new Date(dateStr);
+		const now = new Date();
+		const diff = now.getTime() - date.getTime();
+		const minutes = Math.floor(diff / 60000);
+		const hours = Math.floor(diff / 3600000);
+		const days = Math.floor(diff / 86400000);
+
+		if (minutes < 1) return "Just now";
+		if (minutes < 60) return `${minutes}m ago`;
+		if (hours < 24) return `${hours}h ago`;
+		if (days < 7) return `${days}d ago`;
+		return date.toLocaleDateString();
+	}
+
+	// Format action text
+	function formatAction(action: string, entityType: string): string {
+		const typeMap: Record<string, string> = {
+			document: "document",
+			kanban_card: "task",
+			kanban_board: "board",
+			calendar_event: "event",
+			member: "member",
+		};
+		const type = typeMap[entityType] || entityType;
+		return `${action.charAt(0).toUpperCase() + action.slice(1)} ${type}`;
+	}
 </script>

 <svelte:head>
@@ -148,74 +179,114 @@
 	<section>
 		<h2 class="text-xl font-heading text-light mb-4">Recent Activity</h2>
 		<Card>
-			<div class="divide-y divide-light/10">
-				{#each recentActivity as activity}
-					<div
-						class="flex items-center gap-4 p-4 hover:bg-light/5 transition-colors"
-					>
+			{#if data.recentActivity && data.recentActivity.length > 0}
+				<div class="divide-y divide-light/10">
+					{#each data.recentActivity as activity}
+						{@const icon = getActivityIcon(activity.entity_type)}
 						<div
-							class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center shrink-0"
+							class="flex items-center gap-4 p-4 hover:bg-light/5 transition-colors"
 						>
-							{#if activity.icon === "file"}
-								<svg
-									class="w-5 h-5 text-primary"
-									viewBox="0 0 24 24"
-									fill="none"
-									stroke="currentColor"
-									stroke-width="2"
-								>
-									<path
-										d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
-									/>
-									<polyline points="14,2 14,8 20,8" />
-								</svg>
-							{:else if activity.icon === "kanban"}
-								<svg
-									class="w-5 h-5 text-primary"
-									viewBox="0 0 24 24"
-									fill="none"
-									stroke="currentColor"
-									stroke-width="2"
-								>
-									<rect
-										x="3"
-										y="3"
-										width="18"
-										height="18"
-										rx="2"
-									/>
-									<line x1="9" y1="3" x2="9" y2="21" />
-									<line x1="15" y1="3" x2="15" y2="21" />
-								</svg>
-							{:else if activity.icon === "user"}
-								<svg
-									class="w-5 h-5 text-primary"
-									viewBox="0 0 24 24"
-									fill="none"
-									stroke="currentColor"
-									stroke-width="2"
-								>
-									<path
-										d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
-									/>
-									<circle cx="12" cy="7" r="4" />
-								</svg>
-							{/if}
+							<div
+								class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center shrink-0"
+							>
+								{#if icon === "file"}
+									<svg
+										class="w-5 h-5 text-primary"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+									>
+										<path
+											d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+										/>
+										<polyline points="14,2 14,8 20,8" />
+									</svg>
+								{:else if icon === "kanban"}
+									<svg
+										class="w-5 h-5 text-primary"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+									>
+										<rect
+											x="3"
+											y="3"
+											width="18"
+											height="18"
+											rx="2"
+										/>
+										<line x1="9" y1="3" x2="9" y2="21" />
+										<line x1="15" y1="3" x2="15" y2="21" />
+									</svg>
+								{:else if icon === "calendar"}
+									<svg
+										class="w-5 h-5 text-primary"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+									>
+										<rect
+											x="3"
+											y="4"
+											width="18"
+											height="18"
+											rx="2"
+										/>
+										<line x1="16" y1="2" x2="16" y2="6" />
+										<line x1="8" y1="2" x2="8" y2="6" />
+										<line x1="3" y1="10" x2="21" y2="10" />
+									</svg>
+								{:else if icon === "user"}
+									<svg
+										class="w-5 h-5 text-primary"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+									>
+										<path
+											d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
+										/>
+										<circle cx="12" cy="7" r="4" />
+									</svg>
+								{:else}
+									<svg
+										class="w-5 h-5 text-primary"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+									>
+										<circle cx="12" cy="12" r="10" />
+										<polyline points="12,6 12,12 16,14" />
+									</svg>
+								{/if}
+							</div>
+							<div class="flex-1 min-w-0">
+								<p class="text-light font-medium">
+									{formatAction(
+										activity.action,
+										activity.entity_type,
+									)}
+								</p>
+								<p class="text-sm text-light/50 truncate">
+									{activity.entity_name || "Unknown"}
+								</p>
+							</div>
+							<span class="text-xs text-light/40 shrink-0"
+								>{formatRelativeTime(activity.created_at)}</span
+							>
 						</div>
-						<div class="flex-1 min-w-0">
-							<p class="text-light font-medium">
-								{activity.action}
-							</p>
-							<p class="text-sm text-light/50 truncate">
-								{activity.entity}
-							</p>
-						</div>
-						<span class="text-xs text-light/40 shrink-0"
-							>{activity.time}</span
-						>
-					</div>
-				{/each}
-			</div>
+					{/each}
+				</div>
+			{:else}
+				<div class="p-6 text-center text-light/50">
+					<p>No recent activity</p>
+				</div>
+			{/if}
 		</Card>
 	</section>

--- a/src/routes/[orgSlug]/calendar/+page.svelte
+++ b/src/routes/[orgSlug]/calendar/+page.svelte
@@ -129,6 +129,10 @@
 	}
 </script>

+<svelte:head>
+	<title>Calendar - {data.org.name} | Root</title>
+</svelte:head>
+
 <div class="p-6 h-full overflow-auto">
 	<header class="flex items-center justify-between mb-6">
 		<div class="flex items-center gap-4">
--- a/src/routes/[orgSlug]/documents/+page.svelte
+++ b/src/routes/[orgSlug]/documents/+page.svelte
@@ -37,6 +37,14 @@
 		}
 	}

+	function handleDoubleClick(doc: Document) {
+		if (doc.type === "document") {
+			// Open document in new window
+			const url = `/${data.org.slug}/documents/${doc.id}`;
+			window.open(url, "_blank", "width=900,height=700");
+		}
+	}
+
 	function handleAdd(folderId: string | null) {
 		parentFolderId = folderId;
 		showCreateModal = true;
@@ -199,6 +207,7 @@
 					items={documentTree}
 					selectedId={selectedDoc?.id ?? null}
 					onSelect={handleSelect}
+					onDoubleClick={handleDoubleClick}
 					onAdd={handleAdd}
 					onMove={handleMove}
 					onEdit={handleEdit}
--- a/src/routes/[orgSlug]/kanban/+page.svelte
+++ b/src/routes/[orgSlug]/kanban/+page.svelte
@@ -54,6 +54,9 @@
 	}

 	let editingBoardId = $state<string | null>(null);
+	let showAddColumnModal = $state(false);
+	let newColumnName = $state("");
+	let sidebarCollapsed = $state(false);

 	function openEditBoardModal(board: KanbanBoardType) {
 		editingBoardId = board.id;
@@ -105,6 +108,38 @@
 		showCardDetailModal = true;
 	}

+	function handleAddColumn() {
+		newColumnName = "";
+		showAddColumnModal = true;
+	}
+
+	async function handleCreateColumn() {
+		if (!selectedBoard || !newColumnName.trim()) return;
+
+		const position = selectedBoard.columns.length;
+		const { data: newColumn, error } = await supabase
+			.from("kanban_columns")
+			.insert({
+				board_id: selectedBoard.id,
+				name: newColumnName.trim(),
+				position,
+			})
+			.select()
+			.single();
+
+		if (!error && newColumn && selectedBoard) {
+			selectedBoard = {
+				...selectedBoard,
+				columns: [
+					...selectedBoard.columns,
+					{ ...newColumn, cards: [] as KanbanCard[] },
+				],
+			};
+		}
+		showAddColumnModal = false;
+		newColumnName = "";
+	}
+
 	function handleCardCreated(newCard: KanbanCard) {
 		if (!selectedBoard) return;
 		selectedBoard = {
@@ -173,7 +208,23 @@

 	async function handleCardDelete(cardId: string) {
 		if (!selectedBoard) return;
-		await loadBoard(selectedBoard.id);
+
+		// Delete from database
+		const { error } = await supabase
+			.from("kanban_cards")
+			.delete()
+			.eq("id", cardId);
+
+		if (!error) {
+			// Update local state
+			selectedBoard = {
+				...selectedBoard,
+				columns: selectedBoard.columns.map((col) => ({
+					...col,
+					cards: col.cards.filter((c) => c.id !== cardId),
+				})),
+			};
+		}
 	}
 </script>

@@ -185,23 +236,48 @@
 </svelte:head>

 <div class="flex h-full">
-	<aside class="w-64 border-r border-light/10 flex flex-col">
+	<aside
+		class="{sidebarCollapsed
+			? 'w-12'
+			: 'w-64'} border-r border-light/10 flex flex-col transition-all duration-200"
+	>
 		<div
-			class="p-4 border-b border-light/10 flex items-center justify-between"
+			class="p-2 border-b border-light/10 flex items-center {sidebarCollapsed
+				? 'justify-center'
+				: 'justify-between gap-2'}"
 		>
-			<h2 class="font-semibold text-light">Boards</h2>
-			<Button size="sm" onclick={() => (showCreateBoardModal = true)}>
+			{#if !sidebarCollapsed}
+				<h2 class="font-semibold text-light px-2">Boards</h2>
+				<Button size="sm" onclick={() => (showCreateBoardModal = true)}>
+					<svg
+						class="w-4 h-4"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<line x1="12" y1="5" x2="12" y2="19" />
+						<line x1="5" y1="12" x2="19" y2="12" />
+					</svg>
+				</Button>
+			{/if}
+			<button
+				class="p-1.5 rounded-lg hover:bg-light/10 text-light/50 hover:text-light transition-colors"
+				onclick={() => (sidebarCollapsed = !sidebarCollapsed)}
+				title={sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+			>
 				<svg
-					class="w-4 h-4"
+					class="w-4 h-4 transition-transform {sidebarCollapsed
+						? 'rotate-180'
+						: ''}"
 					viewBox="0 0 24 24"
 					fill="none"
 					stroke="currentColor"
 					stroke-width="2"
 				>
-					<line x1="12" y1="5" x2="12" y2="19" />
-					<line x1="5" y1="12" x2="19" y2="12" />
+					<path d="m11 17-5-5 5-5M17 17l-5-5 5-5" />
 				</svg>
-			</Button>
+			</button>
 		</div>

 		<div class="flex-1 overflow-y-auto p-2 space-y-1">
@@ -285,6 +361,8 @@
 				onCardClick={handleCardClick}
 				onCardMove={handleCardMove}
 				onAddCard={handleAddCard}
+				onAddColumn={handleAddColumn}
+				onDeleteCard={handleCardDelete}
 			/>
 		{:else}
 			<div class="h-full flex items-center justify-center text-light/40">
@@ -352,6 +430,29 @@
 	</div>
 </Modal>

+<Modal
+	isOpen={showAddColumnModal}
+	onClose={() => (showAddColumnModal = false)}
+	title="Add Column"
+>
+	<div class="space-y-4">
+		<Input
+			label="Column Name"
+			bind:value={newColumnName}
+			placeholder="e.g. To Do, In Progress, Done"
+		/>
+		<div class="flex justify-end gap-2">
+			<Button variant="ghost" onclick={() => (showAddColumnModal = false)}
+				>Cancel</Button
+			>
+			<Button
+				onclick={handleCreateColumn}
+				disabled={!newColumnName.trim()}>Create</Button
+			>
+		</div>
+	</div>
+</Modal>
+
 <CardDetailModal
 	card={selectedCard}
 	isOpen={showCardDetailModal}
--- a/src/routes/[orgSlug]/settings/+page.svelte
+++ b/src/routes/[orgSlug]/settings/+page.svelte
@@ -417,8 +417,33 @@
 		await supabase.from("organizations").delete().eq("id", data.org.id);
 		window.location.href = "/";
 	}
+
+	async function leaveOrganization() {
+		if (isOwner) {
+			alert(
+				"Owners cannot leave. Transfer ownership first or delete the organization.",
+			);
+			return;
+		}
+		if (!confirm(`Are you sure you want to leave ${data.org.name}?`))
+			return;
+
+		const { error } = await supabase
+			.from("org_members")
+			.delete()
+			.eq("org_id", data.org.id)
+			.eq("user_id", data.user?.id);
+
+		if (!error) {
+			window.location.href = "/";
+		}
+	}
 </script>

+<svelte:head>
+	<title>Settings - {data.org.name} | Root</title>
+</svelte:head>
+
 <div class="p-6 h-full overflow-auto">
 	<header class="mb-6">
 		<h1 class="text-2xl font-bold text-light">Settings</h1>
@@ -512,6 +537,27 @@
 				</div>
 			</Card>

+			{#if !isOwner}
+				<Card>
+					<div class="p-6 border-l-4 border-warning">
+						<h2 class="text-lg font-semibold text-warning">
+							Leave Organization
+						</h2>
+						<p class="text-sm text-light/50 mt-1">
+							Leave this organization. You will need to be
+							re-invited to rejoin.
+						</p>
+						<div class="mt-4">
+							<Button
+								variant="secondary"
+								onclick={leaveOrganization}
+								>Leave {data.org.name}</Button
+							>
+						</div>
+					</div>
+				</Card>
+			{/if}
+
 			{#if isOwner}
 				<Card>
 					<div class="p-6 border-l-4 border-error">