From f89ba50a602dbb93013de4a9d594bc257adf9ee7 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Wed, 19 Aug 2026 12:44:26 +0100
Subject: [PATCH] web/components: add notifications preview to timeline

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../NotificationsPreview.stories.svelte       | 16 ++++++++
 .../timeline/NotificationsPreview.svelte      | 37 +++++++++++++++++++
 .../components/timeline/PreviewEmpty.svelte   | 16 ++++++++
 web/src/routes/timeline/+page.svelte          | 14 +++++--
 4 files changed, 80 insertions(+), 3 deletions(-)
 create mode 100644 web/src/lib/components/timeline/NotificationsPreview.stories.svelte
 create mode 100644 web/src/lib/components/timeline/NotificationsPreview.svelte
 create mode 100644 web/src/lib/components/timeline/PreviewEmpty.svelte

diff --git a/web/src/lib/components/timeline/NotificationsPreview.stories.svelte b/web/src/lib/components/timeline/NotificationsPreview.stories.svelte
new file mode 100644
index 00000000..047e321a
--- /dev/null
+++ b/web/src/lib/components/timeline/NotificationsPreview.stories.svelte
@@ -0,0 +1,16 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import NotificationsPreview from "./NotificationsPreview.svelte";
+
+	const { Story } = defineMeta({
+		title: "Timeline/NotificationsPreview",
+		component: NotificationsPreview,
+		tags: ["autodocs"],
+		args: { signedIn: true }
+	});
+</script>
+
+<!-- there is no notification item yet, so both stories are empty states -->
+<Story name="Empty" />
+
+<Story name="LoggedOut" args={{ signedIn: false }} />
diff --git a/web/src/lib/components/timeline/NotificationsPreview.svelte b/web/src/lib/components/timeline/NotificationsPreview.svelte
new file mode 100644
index 00000000..866cb352
--- /dev/null
+++ b/web/src/lib/components/timeline/NotificationsPreview.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import ArrowRight from "$icon/arrow-right";
+	import Bell from "$icon/bell";
+	import BellOff from "$icon/bell-off";
+	import Inbox from "$icon/inbox";
+	import PreviewCard from "./PreviewCard.svelte";
+	import PreviewEmpty from "./PreviewEmpty.svelte";
+
+	// there is no notification item component yet, so this renders the two empty
+	// states only. items land under the header once that exists.
+	let { signedIn = false }: { signedIn?: boolean } = $props();
+
+	const path = "/notifications";
+</script>
+
+<PreviewCard title="Notifications" icon={Bell} href={path}>
+	{#snippet action()}
+		<a
+			href={resolve(path as "/")}
+			class="flex items-center gap-1 pr-4 typography-paragraph-small text-foreground-subtle no-underline hover:no-underline"
+		>
+			View all
+			<ArrowRight class="size-3.5" aria-hidden="true" />
+		</a>
+	{/snippet}
+
+	{#if signedIn}
+		<PreviewEmpty icon={Inbox}>
+			<p>All caught up!</p>
+		</PreviewEmpty>
+	{:else}
+		<PreviewEmpty icon={BellOff}>
+			<a href={resolve("/login" as "/")}>Log in</a> to view your inbox
+		</PreviewEmpty>
+	{/if}
+</PreviewCard>
diff --git a/web/src/lib/components/timeline/PreviewEmpty.svelte b/web/src/lib/components/timeline/PreviewEmpty.svelte
new file mode 100644
index 00000000..10e6a433
--- /dev/null
+++ b/web/src/lib/components/timeline/PreviewEmpty.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { Component, Snippet } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
+
+	let { icon, children }: { icon: Component<SvelteHTMLElements["svg"]>; children: Snippet } =
+		$props();
+
+	const Icon = $derived(icon);
+</script>
+
+<div
+	class="rounded-b bg-background-canvas px-4 py-8 text-center typography-paragraph-small text-foreground-placeholder"
+>
+	<Icon class="mx-auto mb-3 size-10 text-foreground-disabled" aria-hidden="true" />
+	{@render children()}
+</div>
diff --git a/web/src/routes/timeline/+page.svelte b/web/src/routes/timeline/+page.svelte
index 0b978193..4600cb4a 100644
--- a/web/src/routes/timeline/+page.svelte
+++ b/web/src/routes/timeline/+page.svelte
@@ -3,6 +3,7 @@
 	import GalleryVertical from "$icon/gallery-vertical";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
+	import NotificationsPreview from "$lib/components/timeline/NotificationsPreview.svelte";
 	import Timeline from "$lib/components/timeline/Timeline.svelte";
 	import TrendingRepos from "$lib/components/timeline/TrendingRepos.svelte";
 	import type { PageData } from "./$types";
@@ -15,9 +16,16 @@
 </svelte:head>
 
 <div
-	class="mx-auto flex w-full max-w-[1920px] flex-col md:grid md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)] md:items-start"
+	class="mx-auto flex w-full max-w-[1920px] flex-col md:grid md:grid-cols-[minmax(0,25rem)_minmax(0,37.5rem)_minmax(0,25rem)] md:items-start md:justify-center"
 >
-	<div class="order-2 md:order-0 md:col-start-1 md:row-start-1 md:mx-auto md:w-full md:max-w-150">
+	<!-- left rail: desktop only, scrolls independently of the feed -->
+	<div
+		class="hidden md:sticky md:top-0 md:flex md:h-screen md:w-full md:max-w-100 md:flex-col md:gap-4 md:overflow-y-auto md:p-4"
+	>
+		<NotificationsPreview signedIn={data.signedIn} />
+	</div>
+
+	<div class="order-2 md:order-0 md:col-start-2 md:row-start-1 md:mx-auto md:w-full md:max-w-150">
 		<div class="flex flex-col gap-4 px-2 py-8 md:px-0">
 			<div class="flex items-center justify-between">
 				<h1 class="flex items-center gap-2 pl-2 text-2xl font-semibold">
@@ -49,7 +57,7 @@
 
 	<!-- right rail: leads on mobile, scrolls independently of the feed on desktop -->
 	<div
-		class="order-1 flex flex-col gap-4 px-2 pt-4 md:sticky md:top-0 md:order-0 md:col-start-2 md:row-start-1 md:ml-auto md:h-screen md:w-full md:max-w-100 md:overflow-y-auto md:p-4"
+		class="order-1 flex flex-col gap-4 px-2 pt-4 md:sticky md:top-0 md:order-0 md:col-start-3 md:row-start-1 md:ml-auto md:h-screen md:w-full md:max-w-100 md:overflow-y-auto md:p-4"
 	>
 		<TrendingRepos repos={data.trending ?? []} />
 	</div>
-- 
2.51.2