From 8eb01c8bbf9c6759d5ef822869f622e262fd5d2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E5=AE=AE=E8=93=AE?=
 <123083837+reyamir@users.noreply.github.com>
Date: Tue, 2 Jul 2024 12:51:50 +0700
Subject: [PATCH] Improve column management (#221)

* wip: redesign store

* feat: update trending column

* feat: add more functions
---
 apps/desktop2/src/components/column.tsx      |  78 ++++++++++--
 apps/desktop2/src/routes/$account.home.tsx   |  23 +++-
 apps/desktop2/src/routes/$account.tsx        |   4 +-
 apps/desktop2/src/routes/global.tsx          |   4 +-
 apps/desktop2/src/routes/group.tsx           |   4 +-
 apps/desktop2/src/routes/newsfeed.tsx        |   2 +-
 apps/desktop2/src/routes/store.community.tsx |  21 ----
 apps/desktop2/src/routes/store.official.tsx  |  69 ----------
 apps/desktop2/src/routes/store.tsx           | 126 +++++++++++++------
 apps/desktop2/src/routes/topic.tsx           |   4 +-
 apps/desktop2/src/routes/trending.notes.tsx  |  34 +++--
 apps/desktop2/src/routes/trending.tsx        |  14 +--
 packages/system/src/commands.ts              |   8 ++
 packages/types/index.d.ts                    |   3 +-
 src-tauri/resources/official_columns.json    |  85 ++++++-------
 src-tauri/src/commands/window.rs             |  15 +++
 src-tauri/src/main.rs                        |   1 +
 17 files changed, 281 insertions(+), 214 deletions(-)
 delete mode 100644 apps/desktop2/src/routes/store.community.tsx
 delete mode 100644 apps/desktop2/src/routes/store.official.tsx

diff --git a/apps/desktop2/src/components/column.tsx b/apps/desktop2/src/components/column.tsx
index 17c63de0..3af62a1d 100644
--- a/apps/desktop2/src/components/column.tsx
+++ b/apps/desktop2/src/components/column.tsx
@@ -1,8 +1,8 @@
-import { CancelIcon, CheckIcon } from "@lume/icons";
+import { CheckIcon, HorizontalDotsIcon } from "@lume/icons";
 import type { LumeColumn } from "@lume/types";
-import { cn } from "@lume/utils";
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
+import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
 import { getCurrent } from "@tauri-apps/api/webviewWindow";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 
@@ -86,14 +86,22 @@ export const Column = memo(function Column({
 	return (
 		<div className="h-full w-[480px] shrink-0 p-2">
 			<div className="flex flex-col w-full h-full rounded-xl bg-black/5 dark:bg-white/10">
-				<Header label={column.label} name={column.name} />
+				<Header
+					label={column.label}
+					webview={webviewLabel}
+					name={column.name}
+				/>
 				<div ref={container} className="flex-1 w-full h-full" />
 			</div>
 		</div>
 	);
 });
 
-function Header({ label, name }: { label: string; name: string }) {
+function Header({
+	label,
+	webview,
+	name,
+}: { label: string; webview: string; name: string }) {
 	const [title, setTitle] = useState(name);
 	const [isChanged, setIsChanged] = useState(false);
 
@@ -109,10 +117,56 @@ function Header({ label, name }: { label: string; name: string }) {
 		setIsChanged(false);
 	};
 
-	const close = async () => {
-		const mainWindow = getCurrent();
-		await mainWindow.emit("columns", { type: "remove", label });
-	};
+	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
+		e.preventDefault();
+
+		const menuItems = await Promise.all([
+			MenuItem.new({
+				text: "Reload",
+				action: async () => {
+					await invoke("reload_column", { label: webview });
+				},
+			}),
+			MenuItem.new({
+				text: "Open in new window",
+				action: () => console.log("not implemented."),
+			}),
+			PredefinedMenuItem.new({ item: "Separator" }),
+			MenuItem.new({
+				text: "Move left",
+				action: async () => {
+					await getCurrent().emit("columns", {
+						type: "move",
+						label,
+						direction: "left",
+					});
+				},
+			}),
+			MenuItem.new({
+				text: "Move right",
+				action: async () => {
+					await getCurrent().emit("columns", {
+						type: "move",
+						label,
+						direction: "right",
+					});
+				},
+			}),
+			PredefinedMenuItem.new({ item: "Separator" }),
+			MenuItem.new({
+				text: "Close",
+				action: async () => {
+					await getCurrent().emit("columns", { type: "remove", label });
+				},
+			}),
+		]);
+
+		const menu = await Menu.new({
+			items: menuItems,
+		});
+
+		await menu.popup().catch((e) => console.error(e));
+	}, []);
 
 	useEffect(() => {
 		if (title.length !== name.length) setIsChanged(true);
@@ -121,7 +175,7 @@ function Header({ label, name }: { label: string; name: string }) {
 	return (
 		<div className="flex items-center justify-between w-full px-1 h-9 shrink-0">
 			<div className="size-7" />
-			<div className="flex items-center justify-center shrink-0 h-9">
+			<div className="flex items-center justify-center shrink-0 h-7">
 				<div className="relative flex items-center gap-2">
 					<div
 						contentEditable
@@ -144,10 +198,10 @@ function Header({ label, name }: { label: string; name: string }) {
 			</div>
 			<button
 				type="button"
-				onClick={() => close()}
-				className="inline-flex items-center justify-center rounded-lg size-7 hover:bg-black/10 dark:hover:bg-white/10 text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"
+				onClick={(e) => showContextMenu(e)}
+				className="inline-flex items-center justify-center rounded-lg size-7 hover:bg-black/10 dark:hover:bg-white/10"
 			>
-				<CancelIcon className="size-4" />
+				<HorizontalDotsIcon className="size-5" />
 			</button>
 		</div>
 	);
diff --git a/apps/desktop2/src/routes/$account.home.tsx b/apps/desktop2/src/routes/$account.home.tsx
index 0cb8a17b..e5dd516c 100644
--- a/apps/desktop2/src/routes/$account.home.tsx
+++ b/apps/desktop2/src/routes/$account.home.tsx
@@ -50,8 +50,8 @@ function Screen() {
 			type: "add",
 			column: {
 				label: "store",
-				name: "Store",
-				content: "/store/official",
+				name: "Column Gallery",
+				content: "/store",
 			},
 		});
 	}, []);
@@ -65,6 +65,23 @@ function Screen() {
 		setColumns((prev) => prev.filter((t) => t.label !== label));
 	}, 150);
 
+	const move = useDebouncedCallback(
+		(label: string, direction: "left" | "right") => {
+			const newCols = [...columns];
+
+			const col = newCols.find((el) => el.label === label);
+			const colIndex = newCols.findIndex((el) => el.label === label);
+
+			newCols.splice(colIndex, 1);
+
+			if (direction === "left") newCols.splice(colIndex - 1, 0, col);
+			if (direction === "right") newCols.splice(colIndex + 1, 0, col);
+
+			setColumns(newCols);
+		},
+		150,
+	);
+
 	const updateName = useDebouncedCallback((label: string, title: string) => {
 		const currentColIndex = columns.findIndex((col) => col.label === label);
 
@@ -135,6 +152,8 @@ function Screen() {
 			if (data.payload.type === "reset") reset();
 			if (data.payload.type === "add") add(data.payload.column);
 			if (data.payload.type === "remove") remove(data.payload.label);
+			if (data.payload.type === "move")
+				move(data.payload.label, data.payload.direction);
 			if (data.payload.type === "set_title")
 				updateName(data.payload.label, data.payload.title);
 		});
diff --git a/apps/desktop2/src/routes/$account.tsx b/apps/desktop2/src/routes/$account.tsx
index 57e266e9..084b19fa 100644
--- a/apps/desktop2/src/routes/$account.tsx
+++ b/apps/desktop2/src/routes/$account.tsx
@@ -34,8 +34,8 @@ function Screen() {
 			type: "add",
 			column: {
 				label: "store",
-				name: "Store",
-				content: "/store/official",
+				name: "Column Gallery",
+				content: "/store",
 			},
 		});
 	};
diff --git a/apps/desktop2/src/routes/global.tsx b/apps/desktop2/src/routes/global.tsx
index 8882da17..8496d9e4 100644
--- a/apps/desktop2/src/routes/global.tsx
+++ b/apps/desktop2/src/routes/global.tsx
@@ -81,11 +81,11 @@ export function Screen() {
 			<ScrollArea.Viewport ref={ref} className="h-full px-3 pb-3">
 				<Virtualizer scrollRef={ref}>
 					{isFetching && !isLoading && !isFetchingNextPage ? (
-						<div className="flex items-center justify-center w-full mb-3 h-11 bg-black/10 dark:bg-white/10 rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
+						<div className="flex items-center justify-center w-full mb-3 h-12 bg-black/5 dark:bg-white/5 rounded-xl">
 							<div className="flex items-center justify-center gap-2">
 								<Spinner className="size-5" />
 								<span className="text-sm font-medium">
-									Fetching new notes...
+									Getting new notes...
 								</span>
 							</div>
 						</div>
diff --git a/apps/desktop2/src/routes/group.tsx b/apps/desktop2/src/routes/group.tsx
index 7334ea3d..40f95f67 100644
--- a/apps/desktop2/src/routes/group.tsx
+++ b/apps/desktop2/src/routes/group.tsx
@@ -95,11 +95,11 @@ export function Screen() {
 			<ScrollArea.Viewport ref={ref} className="h-full px-3 pb-3">
 				<Virtualizer scrollRef={ref}>
 					{isFetching && !isLoading && !isFetchingNextPage ? (
-						<div className="flex items-center justify-center w-full mb-3 h-11 bg-black/10 dark:bg-white/10 rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
+						<div className="flex items-center justify-center w-full mb-3 h-12 bg-black/5 dark:bg-white/5 rounded-xl">
 							<div className="flex items-center justify-center gap-2">
 								<Spinner className="size-5" />
 								<span className="text-sm font-medium">
-									Fetching new notes...
+									Getting new notes...
 								</span>
 							</div>
 						</div>
diff --git a/apps/desktop2/src/routes/newsfeed.tsx b/apps/desktop2/src/routes/newsfeed.tsx
index 65d15aae..0676077d 100644
--- a/apps/desktop2/src/routes/newsfeed.tsx
+++ b/apps/desktop2/src/routes/newsfeed.tsx
@@ -111,7 +111,7 @@ export function Screen() {
 				<Listerner />
 				<Virtualizer scrollRef={ref}>
 					{isFetching && !isLoading && !isFetchingNextPage ? (
-						<div className="flex items-center justify-center w-full mb-3 h-12 bg-black/10 dark:bg-white/10 rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
+						<div className="flex items-center justify-center w-full mb-3 h-12 bg-black/5 dark:bg-white/5 rounded-xl">
 							<div className="flex items-center justify-center gap-2">
 								<Spinner className="size-5" />
 								<span className="text-sm font-medium">
diff --git a/apps/desktop2/src/routes/store.community.tsx b/apps/desktop2/src/routes/store.community.tsx
deleted file mode 100644
index 50cc6fa1..00000000
--- a/apps/desktop2/src/routes/store.community.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/store/community")({
-	component: Screen,
-});
-
-function Screen() {
-	return (
-		<div className="flex h-full flex-col items-center justify-center gap-3 p-3">
-			<div className="size-24 bg-blue-100 flex flex-col items-center justify-end overflow-hidden dark:bg-blue-900 rounded-full">
-				<div className="w-12 h-16 bg-gradient-to-b from-blue-500 dark:from-blue-200 to-blue-50 dark:to-blue-900 rounded-t-lg" />
-			</div>
-			<div className="text-center">
-				<h1 className="font-semibold text-lg">Coming Soon</h1>
-				<p className="text-sm text-neutral-700 dark:text-neutral-300 leading-tight">
-					Enhance your experience <br /> by adding column shared by community.
-				</p>
-			</div>
-		</div>
-	);
-}
diff --git a/apps/desktop2/src/routes/store.official.tsx b/apps/desktop2/src/routes/store.official.tsx
deleted file mode 100644
index 647b7325..00000000
--- a/apps/desktop2/src/routes/store.official.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import type { LumeColumn } from "@lume/types";
-import { createFileRoute } from "@tanstack/react-router";
-import { resolveResource } from "@tauri-apps/api/path";
-import { getCurrent } from "@tauri-apps/api/window";
-import { readTextFile } from "@tauri-apps/plugin-fs";
-
-export const Route = createFileRoute("/store/official")({
-	beforeLoad: async () => {
-		const resourcePath = await resolveResource(
-			"resources/official_columns.json",
-		);
-		const officialColumns: LumeColumn[] = JSON.parse(
-			await readTextFile(resourcePath),
-		);
-
-		return {
-			officialColumns,
-		};
-	},
-	component: Screen,
-});
-
-function Screen() {
-	const { officialColumns } = Route.useRouteContext();
-
-	const install = async (column: LumeColumn) => {
-		const mainWindow = getCurrent();
-		await mainWindow.emit("columns", { type: "add", column });
-	};
-
-	return (
-		<div className="flex flex-col gap-3 p-3">
-			{officialColumns.map((column) => (
-				<div
-					key={column.label}
-					className="relative h-[200px] w-full overflow-hidden rounded-xl bg-gradient-to-tr from-orange-100 to-blue-200 px-3 pt-3"
-				>
-					{column.cover ? (
-						<img
-							src={column.cover}
-							srcSet={column.coverRetina}
-							alt={column.name}
-							loading="lazy"
-							decoding="async"
-							className="absolute left-0 top-0 z-10 h-full w-full object-cover"
-						/>
-					) : null}
-					<div className="absolute bottom-0 left-0 z-20 h-16 w-full bg-black/40 px-3">
-						<div className="flex h-full items-center justify-between">
-							<div>
-								<h1 className="font-semibold text-white">{column.name}</h1>
-								<p className="max-w-[24rem] truncate text-sm text-white/80">
-									{column.description}
-								</p>
-							</div>
-							<button
-								type="button"
-								onClick={() => install(column)}
-								className="inline-flex h-8 w-16 shrink-0 items-center justify-center rounded-full bg-white/20 text-sm font-medium text-white hover:bg-white hover:text-blue-500"
-							>
-								Add
-							</button>
-						</div>
-					</div>
-				</div>
-			))}
-		</div>
-	);
-}
diff --git a/apps/desktop2/src/routes/store.tsx b/apps/desktop2/src/routes/store.tsx
index 8c42716e..aab6235a 100644
--- a/apps/desktop2/src/routes/store.tsx
+++ b/apps/desktop2/src/routes/store.tsx
@@ -1,48 +1,104 @@
-import { GlobalIcon, LaurelIcon } from "@lume/icons";
-import { cn } from "@lume/utils";
-import { Link } from "@tanstack/react-router";
-import { Outlet, createFileRoute } from "@tanstack/react-router";
+import { CommunityIcon, LaurelIcon } from "@lume/icons";
+import type { LumeColumn } from "@lume/types";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { createFileRoute } from "@tanstack/react-router";
+import { resolveResource } from "@tauri-apps/api/path";
+import { getCurrent } from "@tauri-apps/api/window";
+import { readTextFile } from "@tauri-apps/plugin-fs";
 
 export const Route = createFileRoute("/store")({
+	beforeLoad: async () => {
+		const path = "resources/official_columns.json";
+		const resourcePath = await resolveResource(path);
+		const fileContent = await readTextFile(resourcePath);
+		const officialColumns: LumeColumn[] = JSON.parse(fileContent);
+
+		return {
+			officialColumns,
+		};
+	},
 	component: Screen,
 });
 
 function Screen() {
+	const { officialColumns } = Route.useRouteContext();
+
+	const install = async (column: LumeColumn) => {
+		const mainWindow = getCurrent();
+		await mainWindow.emit("columns", { type: "add", column });
+	};
+
 	return (
-		<div className="flex flex-col h-full">
-			<div className="px-3 mt-2 mb-1">
-				<div className="inline-flex items-center w-full gap-1 p-1 rounded-lg shrink-0 bg-black/5 dark:bg-white/5">
-					<Link to="/store/official" className="flex-1">
-						{({ isActive }) => (
-							<div
-								className={cn(
-									"inline-flex h-8 w-full items-center justify-center gap-1.5 rounded-md text-sm font-medium leading-tight",
-									isActive ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
-								)}
-							>
+		<div className="size-full">
+			<ScrollArea.Root
+				type={"scroll"}
+				scrollHideDelay={300}
+				className="flex-1 overflow-hidden size-full"
+			>
+				<ScrollArea.Viewport className="h-full px-3 ">
+					<div className="flex flex-col gap-3 mb-10">
+						<div className="inline-flex items-center gap-1.5 font-semibold leading-tight">
+							<div className="size-7 rounded-md inline-flex items-center justify-center bg-black/10 dark:bg-white/10">
 								<LaurelIcon className="size-4" />
-								Official
 							</div>
-						)}
-					</Link>
-					<Link to="/store/community" className="flex-1">
-						{({ isActive }) => (
-							<div
-								className={cn(
-									"inline-flex h-8 w-full items-center justify-center gap-1.5 rounded-md text-sm font-medium leading-tight",
-									isActive ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
-								)}
-							>
-								<GlobalIcon className="size-4" />
-								Community
+							Official
+						</div>
+						<div className="grid grid-cols-3 gap-4">
+							{officialColumns.map((column) => (
+								<div
+									key={column.label}
+									className="relative group flex flex-col w-full aspect-square overflow-hidden bg-white dark:bg-black/20 rounded-xl shadow-primary dark:ring-1 dark:ring-white/5"
+								>
+									<div className="hidden group-hover:flex items-center justify-center absolute inset-0 size-full rounded-xl bg-white/20 dark:bg-black/20 backdrop-blur-md">
+										<button
+											type="button"
+											onClick={() => install(column)}
+											className="w-16 h-8 inline-flex items-center justify-center rounded-full bg-black dark:bg-white text-white dark:text-black text-sm font-semibold"
+										>
+											Add
+										</button>
+									</div>
+									<div className="flex-1">
+										{column.cover ? (
+											<img
+												src={column.cover}
+												srcSet={column.coverRetina}
+												alt={column.name}
+												loading="lazy"
+												decoding="async"
+												className="size-full object-cover"
+											/>
+										) : null}
+									</div>
+									<div className="shrink-0 h-9 px-3 flex items-center">
+										<h3 className="text-sm font-semibold truncate w-full">
+											{column.name}
+										</h3>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+					<div className="flex flex-col gap-3">
+						<div className="inline-flex items-center gap-1.5 font-semibold leading-tight">
+							<div className="size-7 rounded-md inline-flex items-center justify-center bg-black/10 dark:bg-white/10">
+								<CommunityIcon className="size-4" />
 							</div>
-						)}
-					</Link>
-				</div>
-			</div>
-			<div className="flex-1 overflow-y-auto scrollbar-none">
-				<Outlet />
-			</div>
+							Community
+						</div>
+						<div className="w-full h-20 rounded-xl flex items-center justify-center text-sm font-medium bg-black/5 dark:bg-white/5">
+							Coming Soon.
+						</div>
+					</div>
+				</ScrollArea.Viewport>
+				<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>
 		</div>
 	);
 }
diff --git a/apps/desktop2/src/routes/topic.tsx b/apps/desktop2/src/routes/topic.tsx
index 1eaeb044..fb7efaa4 100644
--- a/apps/desktop2/src/routes/topic.tsx
+++ b/apps/desktop2/src/routes/topic.tsx
@@ -105,11 +105,11 @@ export function Screen() {
 			<ScrollArea.Viewport ref={ref} className="h-full px-3 pb-3">
 				<Virtualizer scrollRef={ref}>
 					{isFetching && !isLoading && !isFetchingNextPage ? (
-						<div className="flex items-center justify-center w-full mb-3 h-11 bg-black/10 dark:bg-white/10 rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
+						<div className="flex items-center justify-center w-full mb-3 h-12 bg-black/5 dark:bg-white/5 rounded-xl">
 							<div className="flex items-center justify-center gap-2">
 								<Spinner className="size-5" />
 								<span className="text-sm font-medium">
-									Fetching new notes...
+									Getting new notes...
 								</span>
 							</div>
 						</div>
diff --git a/apps/desktop2/src/routes/trending.notes.tsx b/apps/desktop2/src/routes/trending.notes.tsx
index e340937d..955faf06 100644
--- a/apps/desktop2/src/routes/trending.notes.tsx
+++ b/apps/desktop2/src/routes/trending.notes.tsx
@@ -1,11 +1,14 @@
+import { Conversation } from "@/components/conversation";
+import { Quote } from "@/components/quote";
+import { RepostNote } from "@/components/repost";
 import { TextNote } from "@/components/text";
 import { LumeEvent } from "@lume/system";
-import type { NostrEvent } from "@lume/types";
+import { Kind, type NostrEvent } from "@lume/types";
 import { Spinner } from "@lume/ui";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { Await, createFileRoute } from "@tanstack/react-router";
 import { defer } from "@tanstack/react-router";
-import { Suspense, useRef } from "react";
+import { Suspense, useCallback, useRef } from "react";
 import { Virtualizer } from "virtua";
 
 export const Route = createFileRoute("/trending/notes")({
@@ -21,7 +24,9 @@ export const Route = createFileRoute("/trending/notes")({
 							const events: NostrEvent[] = res.notes.map(
 								(item: { event: NostrEvent }) => item.event,
 							);
-							const lumeEvents = events.map((ev) => new LumeEvent(ev));
+							const lumeEvents = Promise.all(
+								events.map(async (ev) => await LumeEvent.build(ev)),
+							);
 							return lumeEvents;
 						}),
 				),
@@ -35,7 +40,24 @@ export const Route = createFileRoute("/trending/notes")({
 
 export function Screen() {
 	const { data } = Route.useLoaderData();
+
 	const ref = useRef<HTMLDivElement>(null);
+	const renderItem = useCallback((event: LumeEvent) => {
+		if (!event) return;
+		switch (event.kind) {
+			case Kind.Repost:
+				return <RepostNote key={event.id} event={event} className="mb-3" />;
+			default: {
+				if (event.isConversation) {
+					return <Conversation key={event.id} className="mb-3" event={event} />;
+				}
+				if (event.isQuote) {
+					return <Quote key={event.id} event={event} className="mb-3" />;
+				}
+				return <TextNote key={event.id} event={event} className="mb-3" />;
+			}
+		}
+	}, []);
 
 	return (
 		<ScrollArea.Root
@@ -60,11 +82,7 @@ export function Screen() {
 						}
 					>
 						<Await promise={data}>
-							{(notes) =>
-								notes.map((event) => (
-									<TextNote key={event.id} event={event} className="mb-3" />
-								))
-							}
+							{(notes) => notes.map((event) => renderItem(event))}
 						</Await>
 					</Suspense>
 				</Virtualizer>
diff --git a/apps/desktop2/src/routes/trending.tsx b/apps/desktop2/src/routes/trending.tsx
index 1631d8c1..0dcf738e 100644
--- a/apps/desktop2/src/routes/trending.tsx
+++ b/apps/desktop2/src/routes/trending.tsx
@@ -25,14 +25,14 @@ function Screen() {
 
 	return (
 		<div className="flex flex-col h-full">
-			<div className="inline-flex items-center w-full gap-1 px-3 h-11 shrink-0">
-				<div className="inline-flex items-center w-full h-full gap-1">
+			<div className="shrink-0 h-11 flex items-center w-full gap-1 px-3">
+				<div className="flex w-full h-full gap-1">
 					<Link to="/trending/notes" search={search}>
 						{({ isActive }) => (
 							<div
 								className={cn(
-									"inline-flex h-7 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
-									isActive ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
+									"inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
+									isActive ? "bg-black/10 dark:bg-white/10" : "opacity-50",
 								)}
 							>
 								<ArticleIcon className="size-4" />
@@ -44,8 +44,8 @@ function Screen() {
 						{({ isActive }) => (
 							<div
 								className={cn(
-									"inline-flex h-7 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
-									isActive ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
+									"inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
+									isActive ? "bg-black/10 dark:bg-white/10" : "opacity-50",
 								)}
 							>
 								<GroupFeedsIcon className="size-4" />
@@ -55,7 +55,7 @@ function Screen() {
 					</Link>
 				</div>
 			</div>
-			<div className="flex-1 w-full h-full p-2 overflow-y-auto scrollbar-none">
+			<div className="flex-1 w-full h-full overflow-y-auto scrollbar-none">
 				<Outlet />
 			</div>
 		</div>
diff --git a/packages/system/src/commands.ts b/packages/system/src/commands.ts
index 86cc0faa..cf522b9f 100644
--- a/packages/system/src/commands.ts
+++ b/packages/system/src/commands.ts
@@ -428,6 +428,14 @@ try {
     else return { status: "error", error: e  as any };
 }
 },
+async reloadColumn(label: string) : Promise<Result<null, string>> {
+try {
+    return { status: "ok", data: await TAURI_INVOKE("reload_column", { label }) };
+} catch (e) {
+    if(e instanceof Error) throw e;
+    else return { status: "error", error: e  as any };
+}
+},
 async openWindow(window: Window) : Promise<Result<null, string>> {
 try {
     return { status: "ok", data: await TAURI_INVOKE("open_window", { window }) };
diff --git a/packages/types/index.d.ts b/packages/types/index.d.ts
index 2d4da9e7..46987f62 100644
--- a/packages/types/index.d.ts
+++ b/packages/types/index.d.ts
@@ -78,10 +78,11 @@ export interface LumeColumn {
 }
 
 export interface ColumnEvent {
-	type: "reset" | "add" | "remove" | "update" | "left" | "right" | "set_title";
+	type: "reset" | "add" | "remove" | "update" | "move" | "set_title";
 	label?: string;
 	title?: string;
 	column?: LumeColumn;
+	direction?: "left" | "right";
 }
 
 export interface Relays {
diff --git a/src-tauri/resources/official_columns.json b/src-tauri/resources/official_columns.json
index 9ed0b5f9..316c4f2a 100644
--- a/src-tauri/resources/official_columns.json
+++ b/src-tauri/resources/official_columns.json
@@ -1,52 +1,37 @@
 [
-	{
-		"label": "lZfXLFgPPR4NNrgjlWDxn",
-		"name": "Newsfeed",
-		"content": "/newsfeed",
-		"logo": "",
-		"cover": "/newsfeed.png",
-		"coverRetina": "/newsfeed@2x.png",
-		"author": "Lume",
-		"description": "Keep up to date with the people you're following."
-	},
-	{
-		"label": "rRtguZwIpd5G8Wt54OTb7",
-		"name": "Topic",
-		"content": "/topic",
-		"logo": "",
-		"cover": "/foryou.png",
-		"coverRetina": "/foryou@2x.png",
-		"author": "Lume",
-		"description": "Keep up to date with content based on your interests."
-	},
-	{
-		"label": "fve9fk2fVyFWORPBkjd79",
-		"name": "Group",
-		"content": "/group",
-		"logo": "",
-		"cover": "/group.png",
-		"coverRetina": "/group@2x.png",
-		"author": "Lume",
-		"description": "Focus feeds for people you like."
-	},
-	{
-		"label": "gxtcIbgD8YNPbeI5o92I8",
-		"name": "Trending",
-		"content": "/trending/notes",
-		"logo": "",
-		"cover": "/trending.png",
-		"coverRetina": "/trending@2x.png",
-		"author": "Lume",
-		"description": "What is trending on Nostr?."
-	},
-	{
-		"label": "GLFm44za8rhJDP04LMr3M",
-		"name": "Global",
-		"content": "/global",
-		"logo": "",
-		"cover": "/global.png",
-		"coverRetina": "/global@2x.png",
-		"author": "Lume",
-		"description": "All events from connected relays."
-	}
+  {
+    "label": "lZfXLFgPPR4NNrgjlWDxn",
+    "name": "Local Feeds",
+    "content": "/newsfeed",
+    "cover": "/newsfeed.png",
+    "coverRetina": "/newsfeed@2x.png"
+  },
+  {
+    "label": "GLFm44za8rhJDP04LMr3M",
+    "name": "Global Feeds",
+    "content": "/global",
+    "cover": "/global.png",
+    "coverRetina": "/global@2x.png"
+  },
+  {
+    "label": "fve9fk2fVyFWORPBkjd79",
+    "name": "Group Feeds",
+    "content": "/group",
+    "cover": "/group.png",
+    "coverRetina": "/group@2x.png"
+  },
+  {
+    "label": "rRtguZwIpd5G8Wt54OTb7",
+    "name": "Topic",
+    "content": "/topic",
+    "cover": "/foryou.png",
+    "coverRetina": "/foryou@2x.png"
+  },
+  {
+    "label": "gxtcIbgD8YNPbeI5o92I8",
+    "name": "Trending",
+    "content": "/trending/notes",
+    "cover": "/trending.png",
+    "coverRetina": "/trending@2x.png"
+  }
 ]
diff --git a/src-tauri/src/commands/window.rs b/src-tauri/src/commands/window.rs
index f41a85bf..bad1fc44 100644
--- a/src-tauri/src/commands/window.rs
+++ b/src-tauri/src/commands/window.rs
@@ -138,6 +138,21 @@ pub fn resize_column(
   }
 }
 
+#[tauri::command]
+#[specta::specta]
+pub fn reload_column(label: &str, app_handle: tauri::AppHandle) -> Result<(), String> {
+  match app_handle.get_webview(label) {
+    Some(webview) => {
+      if webview.eval("window.location.reload()").is_ok() {
+        Ok(())
+      } else {
+        Err("Reload column failed".into())
+      }
+    }
+    None => Err("Webview not found".into()),
+  }
+}
+
 #[tauri::command]
 #[specta::specta]
 pub fn open_window(window: Window, app_handle: tauri::AppHandle) -> Result<(), String> {
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index a5010ca4..c2348f01 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -124,6 +124,7 @@ fn main() {
       commands::window::close_column,
       commands::window::reposition_column,
       commands::window::resize_column,
+      commands::window::reload_column,
       commands::window::open_window,
       commands::window::open_main_window,
       commands::window::set_badge