problem: layout isn't great

nostrocket · Sep 24, 2024 · 4a6f466 · 4a6f466
1 parent 50236bd
commit 4a6f466
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/src/components/ProblemView.svelte b/src/components/ProblemView.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+	import * as Card from '@/components/ui/card';
 	import type { Problem } from '@/event_helpers/problems';
+	import { ArrowBigLeft } from 'lucide-svelte';
 
 	export let problem: Problem;
 </script>
@@ -11,4 +13,11 @@
 			{problem.para}
 		</p>
 	</div>
+{:else}
+	<Card.Root class="m-4 mt-32 p-4"
+		><Card.CardTitle class="flex items-center"
+			><ArrowBigLeft size={34} />
+			<h1 class="text-2xl font-semibold tracking-tight">Please select a problem</h1></Card.CardTitle
+		></Card.Root
+	>
 {/if}
diff --git a/src/layouts/MailLayout.svelte b/src/layouts/MailLayout.svelte
@@ -1,11 +1,28 @@
 <script lang="ts">
 	import * as Resizable from '$lib/components/ui/resizable';
+	import Badge from '@/components/ui/badge/badge.svelte';
+	import { Input } from '@/components/ui/input';
 	import { ScrollArea } from '@/components/ui/scroll-area';
+	import { Search } from 'lucide-svelte';
 </script>
 
 <Resizable.PaneGroup direction="horizontal" class="h-full max-h-[800px] items-stretch">
-	<Resizable.Pane defaultSize={40} minSize={10} maxSize={50}
-		><ScrollArea class="h-screen"><slot name="list" /></ScrollArea></Resizable.Pane
+	<Resizable.Pane defaultSize={40} minSize={10} maxSize={50}>
+		<div
+			class="bg-background/95 p-2 pt-1 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+		>
+			<div class="p-2 pt-1"><slot name="filters" /></div>
+			<form>
+				<div class="relative">
+					<Search
+						class="absolute left-2 top-[50%] h-4 w-4 translate-y-[-50%] text-muted-foreground"
+					/>
+					<Input placeholder="Search" class="pl-8" />
+				</div>
+			</form>
+		</div>
+
+		<ScrollArea class="h-screen"><slot name="list" /></ScrollArea></Resizable.Pane
 	>
 
 	<Resizable.Handle withHandle />

diff --git a/src/views/Problems.svelte b/src/views/Problems.svelte
@@ -8,6 +8,7 @@
 	import MailLayout from '../layouts/MailLayout.svelte';
 	import MailList from '../layouts/MailList.svelte';
 	import ProblemView from '../components/ProblemView.svelte';
+	import { Badge } from '@/components/ui/badge';
 
 	let problems: NDKEventStore<NDKEvent> | undefined;
 	onDestroy(() => {
@@ -24,6 +25,7 @@
 </script>
 
 <MailLayout>
+	<div slot="filters"><Badge variant="outline">sdf</Badge></div>
 	<div slot="list">
 		<MailList items={$validProblems} bloom={false} bind:selected />
 	</div>