polished UI a lot

Author: bmdavis419

apps/web/src/convex/resources.ts

@@ -19,17 +19,34 @@ export const listGlobal = query({
 });
 
 /**
- * List user resources for the authenticated user's instance
+ * List user resources for the authenticated user's instance, optionally filtered by project
  */
 export const listUserResources = query({
-	args: {},
-	handler: async (ctx) => {
+	args: {
+		projectId: v.optional(v.id('projects'))
+	},
+	handler: async (ctx, args) => {
 		const instance = await getAuthenticatedInstance(ctx);
 
-		return await ctx.db
+		if (args.projectId) {
+			const resources = await ctx.db
+				.query('userResources')
+				.withIndex('by_project', (q) => q.eq('projectId', args.projectId))
+				.collect();
+			return resources.filter((r) => r.instanceId === instance._id);
+		}
+
+		const allResources = await ctx.db
 			.query('userResources')
 			.withIndex('by_instance', (q) => q.eq('instanceId', instance._id))
 			.collect();
+
+		const seen = new Set<string>();
+		return allResources.filter((r) => {
+			if (seen.has(r.name)) return false;
+			seen.add(r.name);
+			return true;
+		});
 	}
 });
 
@@ -119,13 +136,15 @@ export const addCustomResource = mutation({
 		url: v.string(),
 		branch: v.string(),
 		searchPath: v.optional(v.string()),
-		specialNotes: v.optional(v.string())
+		specialNotes: v.optional(v.string()),
+		projectId: v.optional(v.id('projects'))
 	},
 	handler: async (ctx, args) => {
 		const instance = await getAuthenticatedInstance(ctx);
 
 		const resourceId = await ctx.db.insert('userResources', {
 			instanceId: instance._id,
+			projectId: args.projectId,
 			name: args.name,
 			type: 'git',
 			url: args.url,

apps/web/src/convex/threads.ts

@@ -6,17 +6,28 @@ import { AnalyticsEvents } from './analyticsEvents';
 import { getAuthenticatedInstance, requireThreadOwnership } from './authHelpers';
 
 /**
- * List threads for the authenticated user's instance
+ * List threads for the authenticated user's instance, optionally filtered by project
  */
 export const list = query({
-	args: {},
-	handler: async (ctx) => {
+	args: {
+		projectId: v.optional(v.id('projects'))
+	},
+	handler: async (ctx, args) => {
 		const instance = await getAuthenticatedInstance(ctx);
 
-		const threads = await ctx.db
-			.query('threads')
-			.withIndex('by_instance', (q) => q.eq('instanceId', instance._id))
-			.collect();
+		let threads;
+		if (args.projectId) {
+			threads = await ctx.db
+				.query('threads')
+				.withIndex('by_project', (q) => q.eq('projectId', args.projectId))
+				.collect();
+			threads = threads.filter((t) => t.instanceId === instance._id);
+		} else {
+			threads = await ctx.db
+				.query('threads')
+				.withIndex('by_instance', (q) => q.eq('instanceId', instance._id))
+				.collect();
+		}
 
 		const activeStreamSessions = await ctx.db
 			.query('streamSessions')
@@ -79,13 +90,15 @@ export const getWithMessages = query({
  */
 export const create = mutation({
 	args: {
-		title: v.optional(v.string())
+		title: v.optional(v.string()),
+		projectId: v.optional(v.id('projects'))
 	},
 	handler: async (ctx, args) => {
 		const instance = await getAuthenticatedInstance(ctx);
 
 		const threadId = await ctx.db.insert('threads', {
 			instanceId: instance._id,
+			projectId: args.projectId,
 			title: args.title,
 			createdAt: Date.now(),
 			lastActivityAt: Date.now()

apps/web/src/lib/components/CreateProjectModal.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { Loader2 } from '@lucide/svelte';
+	import { getProjectStore } from '$lib/stores/project.svelte';
+
+	const projectStore = getProjectStore();
+
+	let newProjectName = $state('');
+	let isCreating = $state(false);
+
+	function closeModal() {
+		projectStore.showCreateModal = false;
+		newProjectName = '';
+	}
+
+	async function createProject() {
+		if (!newProjectName.trim()) return;
+		isCreating = true;
+		const projectId = await projectStore.createProject(newProjectName.trim());
+		isCreating = false;
+		if (projectId) {
+			await projectStore.selectProjectWithNavigation(projectId);
+			closeModal();
+		}
+	}
+</script>
+
+{#if projectStore.showCreateModal}
+	<div
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+		role="dialog"
+		aria-modal="true"
+		tabindex="-1"
+		onclick={closeModal}
+		onkeydown={(e) => e.key === 'Escape' && closeModal()}
+	>
+		<div
+			class="bc-card w-full max-w-md p-6"
+			role="document"
+			onclick={(e) => e.stopPropagation()}
+			onkeydown={(e) => e.stopPropagation()}
+		>
+			<h2 class="mb-4 text-lg font-semibold">Create New Project</h2>
+
+			<form
+				onsubmit={(e) => {
+					e.preventDefault();
+					createProject();
+				}}
+			>
+				<div class="mb-4">
+					<label for="project-name" class="mb-1 block text-sm font-medium">Project Name</label>
+					<input
+						id="project-name"
+						type="text"
+						class="bc-input w-full"
+						placeholder="my-project"
+						bind:value={newProjectName}
+						disabled={isCreating}
+					/>
+				</div>
+
+				{#if projectStore.error}
+					<div class="mb-4 text-sm text-red-500">
+						{projectStore.error}
+					</div>
+				{/if}
+
+				<div class="flex justify-end gap-2">
+					<button type="button" class="bc-btn text-xs" onclick={closeModal} disabled={isCreating}>
+						Cancel
+					</button>
+					<button
+						type="submit"
+						class="bc-btn bc-btn-primary text-xs"
+						disabled={!newProjectName.trim() || isCreating}
+					>
+						{#if isCreating}
+							<Loader2 size={14} class="animate-spin" />
+							Creating...
+						{:else}
+							Create
+						{/if}
+					</button>
+				</div>
+			</form>
+		</div>
+	</div>
+{/if}

apps/web/src/lib/components/ProjectSelector.svelte

@@ -20,8 +20,8 @@
 		}
 	}
 
-	function selectProject(projectId: string | null) {
-		projectStore.selectProject(projectId as any);
+	async function selectProject(projectId: string | null) {
+		await projectStore.selectProjectWithNavigation(projectId as any);
 		isOpen = false;
 	}
 
@@ -33,7 +33,7 @@
 		isCreating = false;
 
 		if (projectId) {
-			selectProject(projectId);
+			await selectProject(projectId);
 			showCreateModal = false;
 			newProjectName = '';
 		}