problem: view of problems is not intuitive

Author: gsovereignty

package-lock.json

@@ -38,17 +38,17 @@
 		"@scure/base": "^1.1.9",
 		"@sveltejs/adapter-static": "^3.0.4",
 		"bitcoin-address-validation": "^2.2.3",
-		"bits-ui": "^0.21.13",
+		"bits-ui": "^0.21.15",
 		"clsx": "^2.1.1",
 		"cmdk-sv": "^0.0.18",
-		"embla-carousel-svelte": "^8.2.1",
+		"embla-carousel-svelte": "^8.3.0",
 		"formsnap": "^1.0.1",
 		"js-sha256": "^0.11.0",
 		"mode-watcher": "^0.4.1",
 		"paneforge": "^0.0.5",
 		"svelte-radix": "^1.1.1",
-		"svelte-sonner": "^0.3.27",
-		"sveltekit-superforms": "^2.17.0",
+		"svelte-sonner": "^0.3.28",
+		"sveltekit-superforms": "^2.19.0",
 		"tailwind-merge": "^2.5.2",
 		"tailwind-variants": "^0.2.1",
 		"vaul-svelte": "^0.3.2",

package.json

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import * as Resizable from '$lib/components/ui/resizable';
+</script>
+
+<Resizable.PaneGroup direction="horizontal" class="h-full max-h-[800px] items-stretch">
+	<Resizable.Pane collapsible minSize={15} maxSize={30}><slot name="list"></slot></Resizable.Pane>
+
+	<Resizable.Handle withHandle />
+	<Resizable.Pane minSize={40} maxSize={85}><slot name="problem"></slot></Resizable.Pane>
+	<Resizable.Handle withHandle />
+	<Resizable.Pane minSize={15} maxSize={30}><slot name="meta"></slot></Resizable.Pane>
+</Resizable.PaneGroup>

src/layouts/MailLayout.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { NDKEvent } from '@nostr-dev-kit/ndk';
+
+	import ScrollArea from '@/components/ui/scroll-area/scroll-area.svelte';
+	import { formatTimeAgo } from '@/helpers';
+	import type { Problem } from '@/event_helpers/problems';
+	export let items: Problem[];
+	export let bloom: false; //todo
+</script>
+
+<ScrollArea class="h-screen">
+	<div class="flex flex-col gap-2 p-2 pt-0">
+		{#each items as item}
+			<button
+				class="flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent"
+			>
+				<div class="flex w-full flex-col gap-1">
+					<div class="flex items-center">
+						<div class="flex items-center gap-2">
+							<div class="font-semibold">{item.tldr}</div>
+							{#if !bloom}
+								<span class="flex h-2 w-2 rounded-full bg-blue-600" />
+							{/if}
+						</div>
+						<div class="ml-auto text-xs text-foreground">
+							{formatTimeAgo(new Date(item.event.created_at))}
+						</div>
+					</div>
+					<div class="text-xs font-medium">{item.para}</div>
+				</div>
+				<div class="line-clamp-2 text-xs text-muted-foreground">
+					{'todo: add full page description of problem'.substring(0, 300)}
+				</div>
+				<!-- {#if item.labels.length}
+					<div class="flex items-center gap-2">
+						{#each item.labels as label}
+							<Badge variant={get_badge_variant_from_label(label)}>
+								{label}
+							</Badge>
+						{/each}
+					</div>
+				{/if} -->
+			</button>
+		{/each}
+	</div>
+</ScrollArea>

src/layouts/MailList.svelte

@@ -103,7 +103,7 @@
 				<Login />
 			</div>
 		</header>
-		<div class="flex flex-1 flex-col gap-4 overflow-auto p-4 lg:gap-6 lg:p-6">
+		<div class="flex flex-1 flex-col overflow-auto p-4">
 			<slot name="content"></slot>
 		</div>
 	</div>