update

src-tauri/resources/columns.json

@@ -8,7 +8,7 @@
 	},
 	{
 		"default": true,
-		"label": "Launchpad",
+		"label": "launchpad",
 		"name": "Launchpad",
 		"description": "Expand your experiences.",
 		"url": "/columns/launchpad"

src-tauri/src/commands/metadata.rs

@@ -104,16 +104,35 @@ pub async fn set_contact_list(
 
 #[tauri::command]
 #[specta::specta]
-pub fn get_contact_list(id: String, state: State<'_, Nostr>) -> Result<Vec<String>, String> {
-    let contact_state = state.contact_list.lock().unwrap().clone();
+pub async fn get_contact_list(id: String, state: State<'_, Nostr>) -> Result<Vec<String>, String> {
+    let client = &state.client;
     let public_key = PublicKey::parse(&id).map_err(|e| e.to_string())?;
 
-    match contact_state.get(&public_key) {
-        Some(contact_list) => {
-            let vec: Vec<String> = contact_list.iter().map(|f| f.public_key.to_hex()).collect();
-            Ok(vec)
+    let filter = Filter::new()
+        .author(public_key)
+        .kind(Kind::ContactList)
+        .limit(1);
+
+    let mut contact_list: Vec<String> = Vec::new();
+
+    match client.database().query(vec![filter]).await {
+        Ok(events) => {
+            if let Some(event) = events.into_iter().next() {
+                for tag in event.tags.into_iter() {
+                    if let Some(TagStandard::PublicKey {
+                        public_key,
+                        uppercase: false,
+                        ..
+                    }) = tag.to_standardized()
+                    {
+                        contact_list.push(public_key.to_hex())
+                    }
+                }
+            }
+
+            Ok(contact_list)
         }
-        None => Err("Contact list is empty.".into()),
+        Err(e) => Err(e.to_string()),
     }
 }
 

src/components/column.tsx

@@ -1,12 +1,11 @@
 import { commands } from "@/commands.gen";
-import { appColumns } from "@/commons";
 import { useRect } from "@/system";
 import type { LumeColumn } from "@/types";
 import { CaretDown, Check } from "@phosphor-icons/react";
-import { useStore } from "@tanstack/react-store";
 import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { User } from "./user";
 
 export function Column({ column }: { column: LumeColumn }) {
 	const webviewLabel = useMemo(() => `column-${column.label}`, [column.label]);
@@ -73,34 +72,30 @@ export function Column({ column }: { column: LumeColumn }) {
 	return (
 		<div className="h-full w-[440px] shrink-0 border-r border-black/5 dark:border-white/5">
 			<div className="flex flex-col gap-px size-full">
-				<Header label={column.label} />
+				<Header
+					label={column.label}
+					name={column.name}
+					account={column.account}
+				/>
 				<div ref={ref} className="flex-1 size-full" />
 			</div>
 		</div>
 	);
 }
 
-function Header({ label }: { label: string }) {
+function Header({
+	label,
+	name,
+	account,
+}: { label: string; name: string; account?: string }) {
 	const [title, setTitle] = useState("");
 	const [isChanged, setIsChanged] = useState(false);
 
-	const column = useStore(appColumns, (state) =>
-		state.find((col) => col.label === label),
-	);
-
-	const saveNewTitle = async () => {
-		await getCurrentWindow().emit("columns", {
-			type: "set_title",
-			label,
-			title,
-		});
-		setIsChanged(false);
-	};
-
 	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
 		e.preventDefault();
 
 		const window = getCurrentWindow();
+
 		const menuItems = await Promise.all([
 			MenuItem.new({
 				text: "Reload",
@@ -108,10 +103,6 @@ function Header({ label }: { label: string }) {
 					await commands.reloadColumn(label);
 				},
 			}),
-			MenuItem.new({
-				text: "Open in new window",
-				action: () => console.log("not implemented."),
-			}),
 			PredefinedMenuItem.new({ item: "Separator" }),
 			MenuItem.new({
 				text: "Move left",
@@ -152,6 +143,15 @@ function Header({ label }: { label: string }) {
 		await menu.popup().catch((e) => console.error(e));
 	}, []);
 
+	const saveNewTitle = async () => {
+		await getCurrentWindow().emit("columns", {
+			type: "set_title",
+			label,
+			title,
+		});
+		setIsChanged(false);
+	};
+
 	useEffect(() => {
 		if (title.length > 0) setIsChanged(true);
 	}, [title.length]);
@@ -160,13 +160,20 @@ function Header({ label }: { label: string }) {
 		<div className="group flex items-center justify-center gap-2 w-full h-9 shrink-0">
 			<div className="flex items-center justify-center shrink-0 h-7">
 				<div className="relative flex items-center gap-2">
+					{account?.length ? (
+						<User.Provider pubkey={account}>
+							<User.Root>
+								<User.Avatar className="size-6 rounded-full" />
+							</User.Root>
+						</User.Provider>
+					) : null}
 					<div
 						contentEditable
 						suppressContentEditableWarning={true}
 						onBlur={(e) => setTitle(e.currentTarget.textContent)}
 						className="text-[12px] font-semibold focus:outline-none"
 					>
-						{column.name}
+						{name}
 					</div>
 					{isChanged ? (
 						<button

src/routes/_layout.lazy.tsx

@@ -2,9 +2,9 @@ import { type NegentropyEvent, commands } from "@/commands.gen";
 import { cn } from "@/commons";
 import { User } from "@/components/user";
 import { LumeWindow } from "@/system";
-import { Feather, MagnifyingGlass } from "@phosphor-icons/react";
+import { Feather, MagnifyingGlass, Plus } from "@phosphor-icons/react";
 import { useQuery } from "@tanstack/react-query";
-import { Outlet, createLazyFileRoute } from "@tanstack/react-router";
+import { Link, Outlet, createLazyFileRoute } from "@tanstack/react-router";
 import { Channel } from "@tauri-apps/api/core";
 import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
@@ -44,19 +44,25 @@ function Topbar() {
 		>
 			<div
 				data-tauri-drag-region
-				className="relative z-[200] flex-1 flex items-center gap-4"
+				className="relative z-[200] flex-1 flex items-center gap-2"
 			>
 				<NegentropyBadge />
 				{accounts?.map((account) => (
 					<Account key={account} pubkey={account} />
 				))}
+				<Link
+					to="/new"
+					className="inline-flex items-center justify-center size-7 bg-black/5 dark:bg-white/5 rounded-full hover:bg-blue-500 hover:text-white"
+				>
+					<Plus className="size-4" weight="bold" />
+				</Link>
 			</div>
 			<div
 				data-tauri-drag-region
-				className="relative z-[200] flex-1 flex items-center justify-end gap-1"
+				className="relative z-[200] flex-1 flex items-center justify-end gap-4"
 			>
 				{accounts?.length ? (
-					<>
+					<div className="inline-flex items-center gap-2">
 						<button
 							type="button"
 							onClick={() => LumeWindow.openEditor()}
@@ -72,9 +78,9 @@ function Topbar() {
 						>
 							<MagnifyingGlass className="size-4" />
 						</button>
-					</>
+					</div>
 				) : null}
-				<div id="toolbar" className="inline-flex items-center gap-1" />
+				<div id="toolbar" className="inline-flex items-center gap-2" />
 			</div>
 		</div>
 	);

src/routes/columns/_layout/notification.$id.lazy.tsx

@@ -1,331 +1,336 @@
-import { commands } from '@/commands.gen'
-import { decodeZapInvoice, formatCreatedAt } from '@/commons'
-import { Note, RepostIcon, Spinner, User } from '@/components'
-import { LumeEvent, LumeWindow, useEvent } from '@/system'
-import { Kind, type NostrEvent } from '@/types'
-import { Info } from '@phosphor-icons/react'
-import * as ScrollArea from '@radix-ui/react-scroll-area'
-import * as Tabs from '@radix-ui/react-tabs'
-import { useQuery } from '@tanstack/react-query'
-import { createLazyFileRoute } from '@tanstack/react-router'
-import { getCurrentWindow } from '@tauri-apps/api/window'
-import { type ReactNode, useEffect, useMemo, useRef } from 'react'
-import { Virtualizer } from 'virtua'
+import { commands } from "@/commands.gen";
+import { decodeZapInvoice, formatCreatedAt } from "@/commons";
+import { Note, RepostIcon, Spinner, User } from "@/components";
+import { LumeEvent, LumeWindow, useEvent } from "@/system";
+import { Kind, type NostrEvent } from "@/types";
+import { Info } from "@phosphor-icons/react";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import * as Tabs from "@radix-ui/react-tabs";
+import { useQuery } from "@tanstack/react-query";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { nip19 } from "nostr-tools";
+import { type ReactNode, useEffect, useMemo, useRef } from "react";
+import { Virtualizer } from "virtua";
 
-export const Route = createLazyFileRoute('/columns/_layout/notification/$id')({
-  component: Screen,
-})
+export const Route = createLazyFileRoute("/columns/_layout/notification/$id")({
+	component: Screen,
+});
 
 function Screen() {
-  const { queryClient } = Route.useRouteContext()
-  const { isLoading, data } = useQuery({
-    queryKey: ['notification'],
-    queryFn: async () => {
-      const res = await commands.getNotifications()
+	const { id } = Route.useParams();
+	const { queryClient } = Route.useRouteContext();
+	const { isLoading, data } = useQuery({
+		queryKey: ["notification", id],
+		queryFn: async () => {
+			const res = await commands.getNotifications();
 
-      if (res.status === 'error') {
-        throw new Error(res.error)
-      }
+			if (res.status === "error") {
+				throw new Error(res.error);
+			}
 
-      const data: NostrEvent[] = res.data.map((item) => JSON.parse(item))
-      const events = data.map((ev) => new LumeEvent(ev))
+			const data: NostrEvent[] = res.data.map((item) => JSON.parse(item));
+			const events = data.map((ev) => new LumeEvent(ev));
 
-      return events
-    },
-    select: (events) => {
-      const zaps = new Map<string, LumeEvent[]>()
-      const reactions = new Map<string, LumeEvent[]>()
+			return events;
+		},
+		select: (events) => {
+			const zaps = new Map<string, LumeEvent[]>();
+			const reactions = new Map<string, LumeEvent[]>();
+			const hex = nip19.decode(id).data;
 
-      const texts = events.filter((ev) => ev.kind === Kind.Text)
-      const zapEvents = events.filter((ev) => ev.kind === Kind.ZapReceipt)
-      const reactEvents = events.filter(
-        (ev) => ev.kind === Kind.Repost || ev.kind === Kind.Reaction,
-      )
+			const texts = events.filter(
+				(ev) => ev.kind === Kind.Text && ev.pubkey !== hex,
+			);
+			const zapEvents = events.filter((ev) => ev.kind === Kind.ZapReceipt);
+			const reactEvents = events.filter(
+				(ev) => ev.kind === Kind.Repost || ev.kind === Kind.Reaction,
+			);
 
-      for (const event of reactEvents) {
-        const rootId = event.tags.filter((tag) => tag[0] === 'e')[0]?.[1]
+			for (const event of reactEvents) {
+				const rootId = event.tags.filter((tag) => tag[0] === "e")[0]?.[1];
 
-        if (rootId) {
-          if (reactions.has(rootId)) {
-            reactions.get(rootId).push(event)
-          } else {
-            reactions.set(rootId, [event])
-          }
-        }
-      }
+				if (rootId) {
+					if (reactions.has(rootId)) {
+						reactions.get(rootId).push(event);
+					} else {
+						reactions.set(rootId, [event]);
+					}
+				}
+			}
 
-      for (const event of zapEvents) {
-        const rootId = event.tags.filter((tag) => tag[0] === 'e')[0]?.[1]
+			for (const event of zapEvents) {
+				const rootId = event.tags.filter((tag) => tag[0] === "e")[0]?.[1];
 
-        if (rootId) {
-          if (zaps.has(rootId)) {
-            zaps.get(rootId).push(event)
-          } else {
-            zaps.set(rootId, [event])
-          }
-        }
-      }
+				if (rootId) {
+					if (zaps.has(rootId)) {
+						zaps.get(rootId).push(event);
+					} else {
+						zaps.set(rootId, [event]);
+					}
+				}
+			}
 
-      return { texts, zaps, reactions }
-    },
-    refetchOnWindowFocus: false,
-  })
+			return { texts, zaps, reactions };
+		},
+		refetchOnWindowFocus: false,
+	});
 
-  useEffect(() => {
-    const unlisten = getCurrentWindow().listen('event', async (data) => {
-      const event: LumeEvent = JSON.parse(data.payload as string)
-      await queryClient.setQueryData(['notification'], (data: LumeEvent[]) => [
-        event,
-        ...data,
-      ])
-    })
+	useEffect(() => {
+		const unlisten = getCurrentWindow().listen("event", async (data) => {
+			const event: LumeEvent = JSON.parse(data.payload as string);
+			await queryClient.setQueryData(
+				["notification", id],
+				(data: LumeEvent[]) => [event, ...data],
+			);
+		});
 
-    return () => {
-      unlisten.then((f) => f())
-    }
-  }, [])
+		return () => {
+			unlisten.then((f) => f());
+		};
+	}, [id]);
 
-  if (isLoading) {
-    return (
-      <div className="size-full flex items-center justify-center">
-        <Spinner />
-      </div>
-    )
-  }
+	if (isLoading) {
+		return (
+			<div className="size-full flex items-center justify-center">
+				<Spinner />
+			</div>
+		);
+	}
 
-  return (
-    <div className="px-3 h-full overflow-y-auto">
-      <Tabs.Root
-        defaultValue="replies"
-        className="flex flex-col h-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
-      >
-        <Tabs.List className="h-11 shrink-0 flex items-center">
-          <Tabs.Trigger
-            className="flex-1 inline-flex h-11 items-center justify-center gap-2 px-3 text-sm font-medium border-b border-neutral-100 dark:border-neutral-900 data-[state=active]:border-neutral-200 dark:data-[state=active]:border-neutral-800 data-[state=inactive]:opacity-50"
-            value="replies"
-          >
-            Replies
-          </Tabs.Trigger>
-          <Tabs.Trigger
-            className="flex-1 inline-flex h-11 items-center justify-center gap-2 px-3 text-sm font-medium border-b border-neutral-100 dark:border-neutral-900 data-[state=active]:border-neutral-200 dark:data-[state=active]:border-neutral-800 data-[state=inactive]:opacity-50"
-            value="reactions"
-          >
-            Reactions
-          </Tabs.Trigger>
-          <Tabs.Trigger
-            className="flex-1 inline-flex h-11 items-center justify-center gap-2 px-3 text-sm font-medium border-b border-neutral-100 dark:border-neutral-900 data-[state=active]:border-neutral-200 dark:data-[state=active]:border-neutral-800 data-[state=inactive]:opacity-50"
-            value="zaps"
-          >
-            Zaps
-          </Tabs.Trigger>
-        </Tabs.List>
-        <ScrollArea.Root
-          type={'scroll'}
-          scrollHideDelay={300}
-          className="min-h-0 flex-1 overflow-x-hidden"
-        >
-          <Tab value="replies">
-            {data.texts.map((event) => (
-              <TextNote key={event.id} event={event} />
-            ))}
-          </Tab>
-          <Tab value="reactions">
-            {[...data.reactions.entries()].map(([root, events]) => (
-              <div
-                key={root}
-                className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
-              >
-                <div className="flex flex-col flex-1 min-w-0 gap-2">
-                  <div className="flex items-center gap-2 pb-2">
-                    <RootNote id={root} />
-                  </div>
-                  <div className="flex flex-wrap items-center gap-3">
-                    {events.map((event) => (
-                      <User.Provider key={event.id} pubkey={event.pubkey}>
-                        <User.Root className="shrink-0 flex rounded-full h-7 bg-neutral-100 dark:bg-neutral-900 p-[2px]">
-                          <User.Avatar className="flex-1 rounded-full size-6" />
-                          <div className="inline-flex items-center justify-center flex-1 text-xs truncate rounded-full size-6">
-                            {event.kind === Kind.Reaction ? (
-                              event.content === '+' ? (
-                                '👍'
-                              ) : (
-                                event.content
-                              )
-                            ) : (
-                              <RepostIcon className="text-teal-400 size-4 dark:text-teal-600" />
-                            )}
-                          </div>
-                        </User.Root>
-                      </User.Provider>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </Tab>
-          <Tab value="zaps">
-            {[...data.zaps.entries()].map(([root, events]) => (
-              <div
-                key={root}
-                className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
-              >
-                <div className="flex flex-col flex-1 min-w-0 gap-2">
-                  <div className="flex items-center gap-2 pb-2">
-                    <RootNote id={root} />
-                  </div>
-                  <div className="flex flex-wrap items-center gap-3">
-                    {events.map((event) => (
-                      <ZapReceipt key={event.id} event={event} />
-                    ))}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </Tab>
-          <ScrollArea.Scrollbar
-            className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
-            orientation="vertical"
-          >
-            <ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
-          </ScrollArea.Scrollbar>
-          <ScrollArea.Corner className="bg-transparent" />
-        </ScrollArea.Root>
-      </Tabs.Root>
-    </div>
-  )
+	return (
+		<div className="px-3 h-full overflow-y-auto">
+			<Tabs.Root
+				defaultValue="replies"
+				className="flex flex-col h-full bg-white dark:bg-black rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
+			>
+				<Tabs.List className="h-11 shrink-0 flex items-center">
+					<Tabs.Trigger
+						className="flex-1 inline-flex h-11 items-center justify-center gap-2 px-3 text-sm font-medium border-b border-neutral-100 dark:border-neutral-900 data-[state=active]:border-neutral-200 dark:data-[state=active]:border-neutral-800 data-[state=inactive]:opacity-50"
+						value="replies"
+					>
+						Replies
+					</Tabs.Trigger>
+					<Tabs.Trigger
+						className="flex-1 inline-flex h-11 items-center justify-center gap-2 px-3 text-sm font-medium border-b border-neutral-100 dark:border-neutral-900 data-[state=active]:border-neutral-200 dark:data-[state=active]:border-neutral-800 data-[state=inactive]:opacity-50"
+						value="reactions"
+					>
+						Reactions
+					</Tabs.Trigger>
+					<Tabs.Trigger
+						className="flex-1 inline-flex h-11 items-center justify-center gap-2 px-3 text-sm font-medium border-b border-neutral-100 dark:border-neutral-900 data-[state=active]:border-neutral-200 dark:data-[state=active]:border-neutral-800 data-[state=inactive]:opacity-50"
+						value="zaps"
+					>
+						Zaps
+					</Tabs.Trigger>
+				</Tabs.List>
+				<ScrollArea.Root
+					type={"scroll"}
+					scrollHideDelay={300}
+					className="min-h-0 flex-1 overflow-x-hidden"
+				>
+					<Tab value="replies">
+						{data.texts.map((event) => (
+							<TextNote key={event.id} event={event} />
+						))}
+					</Tab>
+					<Tab value="reactions">
+						{[...data.reactions.entries()].map(([root, events]) => (
+							<div
+								key={root}
+								className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
+							>
+								<div className="flex flex-col flex-1 min-w-0 gap-2">
+									<div className="flex items-center gap-2 pb-2">
+										<RootNote id={root} />
+									</div>
+									<div className="flex flex-wrap items-center gap-3">
+										{events.map((event) => (
+											<User.Provider key={event.id} pubkey={event.pubkey}>
+												<User.Root className="shrink-0 flex rounded-full h-7 bg-neutral-100 dark:bg-neutral-900 p-[2px]">
+													<User.Avatar className="flex-1 rounded-full size-6" />
+													<div className="inline-flex items-center justify-center flex-1 text-xs truncate rounded-full size-6">
+														{event.kind === Kind.Reaction ? (
+															event.content === "+" ? (
+																"👍"
+															) : (
+																event.content
+															)
+														) : (
+															<RepostIcon className="text-teal-400 size-4 dark:text-teal-600" />
+														)}
+													</div>
+												</User.Root>
+											</User.Provider>
+										))}
+									</div>
+								</div>
+							</div>
+						))}
+					</Tab>
+					<Tab value="zaps">
+						{[...data.zaps.entries()].map(([root, events]) => (
+							<div
+								key={root}
+								className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
+							>
+								<div className="flex flex-col flex-1 min-w-0 gap-2">
+									<div className="flex items-center gap-2 pb-2">
+										<RootNote id={root} />
+									</div>
+									<div className="flex flex-wrap items-center gap-3">
+										{events.map((event) => (
+											<ZapReceipt key={event.id} event={event} />
+										))}
+									</div>
+								</div>
+							</div>
+						))}
+					</Tab>
+					<ScrollArea.Scrollbar
+						className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
+						orientation="vertical"
+					>
+						<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+					</ScrollArea.Scrollbar>
+					<ScrollArea.Corner className="bg-transparent" />
+				</ScrollArea.Root>
+			</Tabs.Root>
+		</div>
+	);
 }
 
 function Tab({ value, children }: { value: string; children: ReactNode[] }) {
-  const ref = useRef<HTMLDivElement>(null)
+	const ref = useRef<HTMLDivElement>(null);
 
-  return (
-    <Tabs.Content value={value} className="size-full">
-      <ScrollArea.Viewport ref={ref} className="h-full">
-        <Virtualizer scrollRef={ref}>{children}</Virtualizer>
-      </ScrollArea.Viewport>
-    </Tabs.Content>
-  )
+	return (
+		<Tabs.Content value={value} className="size-full">
+			<ScrollArea.Viewport ref={ref} className="h-full">
+				<Virtualizer scrollRef={ref}>{children}</Virtualizer>
+			</ScrollArea.Viewport>
+		</Tabs.Content>
+	);
 }
 
 function RootNote({ id }: { id: string }) {
-  const { isLoading, isError, data } = useEvent(id)
+	const { isLoading, isError, data } = useEvent(id);
 
-  if (isLoading) {
-    return (
-      <div className="flex items-center pb-2 mb-2">
-        <div className="rounded-full size-8 shrink-0 bg-black/20 dark:bg-white/20 animate-pulse" />
-        <div className="w-2/3 h-4 rounded-md animate-pulse bg-black/20 dark:bg-white/20" />
-      </div>
-    )
-  }
+	if (isLoading) {
+		return (
+			<div className="flex items-center pb-2 mb-2">
+				<div className="rounded-full size-8 shrink-0 bg-black/20 dark:bg-white/20 animate-pulse" />
+				<div className="w-2/3 h-4 rounded-md animate-pulse bg-black/20 dark:bg-white/20" />
+			</div>
+		);
+	}
 
-  if (isError || !data) {
-    return (
-      <div className="flex items-center gap-2">
-        <div className="inline-flex items-center justify-center text-white bg-red-500 rounded-full size-8 shrink-0">
-          <Info className="size-5" />
-        </div>
-        <p className="text-sm text-red-500">
-          Event not found with your current relay set
-        </p>
-      </div>
-    )
-  }
+	if (isError || !data) {
+		return (
+			<div className="flex items-center gap-2">
+				<div className="inline-flex items-center justify-center text-white bg-red-500 rounded-full size-8 shrink-0">
+					<Info className="size-5" />
+				</div>
+				<p className="text-sm text-red-500">
+					Event not found with your current relay set
+				</p>
+			</div>
+		);
+	}
 
-  return (
-    <Note.Provider event={data}>
-      <Note.Root className="flex items-center gap-2">
-        <User.Provider pubkey={data.pubkey}>
-          <User.Root className="shrink-0">
-            <User.Avatar className="rounded-full size-8" />
-          </User.Root>
-        </User.Provider>
-        <div className="line-clamp-1">{data.content}</div>
-      </Note.Root>
-    </Note.Provider>
-  )
+	return (
+		<Note.Provider event={data}>
+			<Note.Root className="flex items-center gap-2">
+				<User.Provider pubkey={data.pubkey}>
+					<User.Root className="shrink-0">
+						<User.Avatar className="rounded-full size-8" />
+					</User.Root>
+				</User.Provider>
+				<div className="line-clamp-1">{data.content}</div>
+			</Note.Root>
+		</Note.Provider>
+	);
 }
 
 function TextNote({ event }: { event: LumeEvent }) {
-  const pTags = event.tags
-    .filter((tag) => tag[0] === 'p')
-    .map((tag) => tag[1])
-    .slice(0, 3)
+	const pTags = event.tags
+		.filter((tag) => tag[0] === "p")
+		.map((tag) => tag[1])
+		.slice(0, 3);
 
-  return (
-    <button
-      type="button"
-      onClick={() => LumeWindow.openEvent(event)}
-      className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
-    >
-      <Note.Provider event={event}>
-        <Note.Root className="flex flex-col">
-          <User.Provider pubkey={event.pubkey}>
-            <User.Root className="inline-flex items-center gap-2">
-              <User.Avatar className="rounded-full size-9" />
-              <div className="flex flex-col flex-1">
-                <div className="flex items-baseline justify-between w-full">
-                  <User.Name className="text-sm font-semibold leading-tight" />
-                  <span className="text-sm leading-tight text-black/50 dark:text-white/50">
-                    {formatCreatedAt(event.created_at)}
-                  </span>
-                </div>
-                <div className="inline-flex items-baseline gap-1 text-xs">
-                  <span className="leading-tight text-black/50 dark:text-white/50">
-                    Reply to:
-                  </span>
-                  <div className="inline-flex items-baseline gap-1">
-                    {[...new Set(pTags)].map((replyTo) => (
-                      <User.Provider key={replyTo} pubkey={replyTo}>
-                        <User.Root>
-                          <User.Name className="font-medium leading-tight" />
-                        </User.Root>
-                      </User.Provider>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            </User.Root>
-          </User.Provider>
-          <div className="flex gap-2">
-            <div className="w-9 shrink-0" />
-            <div className="line-clamp-1 text-start">{event.content}</div>
-          </div>
-        </Note.Root>
-      </Note.Provider>
-    </button>
-  )
+	return (
+		<button
+			type="button"
+			onClick={() => LumeWindow.openEvent(event)}
+			className="p-3 w-full border-b-[.5px] border-neutral-300 dark:border-neutral-700 hover:border-blue-500"
+		>
+			<Note.Provider event={event}>
+				<Note.Root className="flex flex-col">
+					<User.Provider pubkey={event.pubkey}>
+						<User.Root className="inline-flex items-center gap-2">
+							<User.Avatar className="rounded-full size-9" />
+							<div className="flex flex-col flex-1">
+								<div className="flex items-baseline justify-between w-full">
+									<User.Name className="text-sm font-semibold leading-tight" />
+									<span className="text-sm leading-tight text-black/50 dark:text-white/50">
+										{formatCreatedAt(event.created_at)}
+									</span>
+								</div>
+								<div className="inline-flex items-baseline gap-1 text-xs">
+									<span className="leading-tight text-black/50 dark:text-white/50">
+										Reply to:
+									</span>
+									<div className="inline-flex items-baseline gap-1">
+										{[...new Set(pTags)].map((replyTo) => (
+											<User.Provider key={replyTo} pubkey={replyTo}>
+												<User.Root>
+													<User.Name className="font-medium leading-tight" />
+												</User.Root>
+											</User.Provider>
+										))}
+									</div>
+								</div>
+							</div>
+						</User.Root>
+					</User.Provider>
+					<div className="flex gap-2">
+						<div className="w-9 shrink-0" />
+						<div className="line-clamp-1 text-start">{event.content}</div>
+					</div>
+				</Note.Root>
+			</Note.Provider>
+		</button>
+	);
 }
 
 function ZapReceipt({ event }: { event: LumeEvent }) {
-  const amount = useMemo(
-    () => decodeZapInvoice(event.tags).bitcoinFormatted ?? '0',
-    [event.id],
-  )
-  const sender = useMemo(
-    () => event.tags.find((tag) => tag[0] === 'P')?.[1],
-    [event.id],
-  )
+	const amount = useMemo(
+		() => decodeZapInvoice(event.tags).bitcoinFormatted ?? "0",
+		[event.id],
+	);
+	const sender = useMemo(
+		() => event.tags.find((tag) => tag[0] === "P")?.[1],
+		[event.id],
+	);
 
-  if (!sender) {
-    return (
-      <div className="shrink-0 flex gap-1.5 rounded-full h-7 bg-black/10 dark:bg-white/10 p-[2px]">
-        <div className="rounded-full size-6 bg-blue-500" />
-        <div className="flex-1 h-6 w-max pr-1.5 rounded-full inline-flex items-center justify-center text-xs font-semibold truncate">
-          ₿ {amount}
-        </div>
-      </div>
-    )
-  }
+	if (!sender) {
+		return (
+			<div className="shrink-0 flex gap-1.5 rounded-full h-7 bg-black/10 dark:bg-white/10 p-[2px]">
+				<div className="rounded-full size-6 bg-blue-500" />
+				<div className="flex-1 h-6 w-max pr-1.5 rounded-full inline-flex items-center justify-center text-xs font-semibold truncate">
+					₿ {amount}
+				</div>
+			</div>
+		);
+	}
 
-  return (
-    <User.Provider pubkey={sender}>
-      <User.Root className="shrink-0 flex gap-1.5 rounded-full h-7 bg-black/10 dark:bg-white/10 p-[2px]">
-        <User.Avatar className="rounded-full size-6" />
-        <div className="flex-1 h-6 w-max pr-1.5 rounded-full inline-flex items-center justify-center text-xs font-semibold truncate">
-          ₿ {amount}
-        </div>
-      </User.Root>
-    </User.Provider>
-  )
+	return (
+		<User.Provider pubkey={sender}>
+			<User.Root className="shrink-0 flex gap-1.5 rounded-full h-7 bg-black/10 dark:bg-white/10 p-[2px]">
+				<User.Avatar className="rounded-full size-6" />
+				<div className="flex-1 h-6 w-max pr-1.5 rounded-full inline-flex items-center justify-center text-xs font-semibold truncate">
+					₿ {amount}
+				</div>
+			</User.Root>
+		</User.Provider>
+	);
 }

src/system/window.ts

@@ -28,6 +28,7 @@ export const LumeWindow = {
 				label: "newsfeed",
 				name: "Newsfeed",
 				url: `/columns/newsfeed/${account}`,
+				account,
 			},
 		});
 	},
@@ -35,9 +36,10 @@ export const LumeWindow = {
 		await getCurrentWindow().emit("columns", {
 			type: "add",
 			column: {
-				label: "newsfeed",
-				name: "Newsfeed",
+				label: "stories",
+				name: "Stories",
 				url: `/columns/stories/${account}`,
+				account,
 			},
 		});
 	},
@@ -48,6 +50,7 @@ export const LumeWindow = {
 				label: "notification",
 				name: "Notification",
 				url: `/columns/notification/${account}`,
+				account,
 			},
 		});
 	},

src/types.ts

@@ -53,11 +53,10 @@ export interface Metadata {
 export interface LumeColumn {
 	label: string;
 	name: string;
-	description?: string;
 	url: string;
-	picture?: string;
+	description?: string;
 	default?: boolean;
-	official?: boolean;
+	account?: string;
 }
 
 export interface ColumnEvent {