feat: add activity screen

packages/ark/src/components/note/mentions/note.tsx

@@ -34,7 +34,7 @@ export const MentionNote = memo(function MentionNote({
 
 	return (
 		<Note.Provider event={data}>
-			<Note.Root className="flex flex-col w-full gap-1 my-1 rounded-lg cursor-default bg-neutral-100 dark:bg-neutral-900">
+			<Note.Root className="flex flex-col w-full gap-1 my-1 rounded-lg cursor-default bg-neutral-100 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
 				<User.Provider pubkey={data.pubkey}>
 					<User.Root className="px-3 mt-3 flex h-6 items-center gap-2">
 						<User.Avatar className="size-6 shrink-0 rounded-md object-cover" />

packages/lume-column-activity/package.json

@@ -0,0 +1,26 @@
+{
+	"name": "@columns/activity",
+	"version": "0.0.0",
+	"private": true,
+	"main": "./src/index.tsx",
+	"dependencies": {
+		"@lume/ark": "workspace:^",
+		"@lume/icons": "workspace:^",
+		"@lume/ui": "workspace:^",
+		"@lume/utils": "workspace:^",
+		"@nostr-dev-kit/ndk": "^2.3.2",
+		"@tanstack/react-query": "^5.17.9",
+		"react": "^18.2.0",
+		"react-router-dom": "^6.21.2",
+		"sonner": "^1.3.1",
+		"virtua": "^0.20.4"
+	},
+	"devDependencies": {
+		"@lume/tailwindcss": "workspace:^",
+		"@lume/tsconfig": "workspace:^",
+		"@lume/types": "workspace:^",
+		"@types/react": "^18.2.47",
+		"tailwind": "^4.0.0",
+		"typescript": "^5.3.3"
+	}
+}

packages/lume-column-activity/tailwind.config.js

@@ -0,0 +1,8 @@
+import sharedConfig from "@lume/tailwindcss";
+
+const config = {
+	content: ["./src/**/*.{js,ts,jsx,tsx}"],
+	presets: [sharedConfig],
+};
+
+export default config;

packages/lume-column-activity/tsconfig.json

@@ -0,0 +1,8 @@
+{
+	"extends": "@lume/tsconfig/base.json",
+	"compilerOptions": {
+		"outDir": "dist"
+	},
+	"include": ["src"],
+	"exclude": ["node_modules", "dist"]
+}

packages/lume-column-timeline/src/home.tsx

@@ -59,6 +59,7 @@ export function HomeRoute({ colKey }: { colKey: string }) {
 			},
 			staleTime: 120 * 1000,
 			refetchOnWindowFocus: false,
+			refetchOnMount: false,
 		});
 
 	const allEvents = useMemo(

packages/ui/src/layouts/app.tsx

@@ -1,7 +1,6 @@
 import { type Platform } from "@tauri-apps/plugin-os";
 import { Outlet } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
-import { Activity } from "../activity/column";
 import { Editor } from "../editor/column";
 import { Navigation } from "../navigation";
 import { WindowTitleBar } from "../titlebar";
@@ -22,7 +21,6 @@ export function AppLayout({ platform }: { platform: Platform }) {
 			<div className="flex w-full h-full min-h-0">
 				<Navigation />
 				<Editor />
-				<Activity />
 				<div className="flex-1 h-full px-1 pb-1">
 					<Outlet />
 				</div>

packages/ui/src/navigation.tsx

@@ -3,17 +3,13 @@ import {
 	BellIcon,
 	ComposeFilledIcon,
 	ComposeIcon,
-	DepotFilledIcon,
-	DepotIcon,
 	HomeFilledIcon,
 	HomeIcon,
 	NwcIcon,
-	RelayFilledIcon,
-	RelayIcon,
 	SettingsFilledIcon,
 	SettingsIcon,
 } from "@lume/icons";
-import { activityAtom, cn, editorAtom } from "@lume/utils";
+import { cn, editorAtom } from "@lume/utils";
 import { useAtom } from "jotai";
 import { useHotkeys } from "react-hotkeys-hook";
 import { NavLink } from "react-router-dom";
@@ -21,8 +17,6 @@ import { ActiveAccount } from "./account/active";
 
 export function Navigation() {
 	const [isEditorOpen, setIsEditorOpen] = useAtom(editorAtom);
-	const [isActvityOpen, setIsActvityOpen] = useAtom(activityAtom);
-
 	useHotkeys("meta+n", () => setIsEditorOpen((state) => !state), []);
 
 	return (
@@ -32,10 +26,7 @@ export function Navigation() {
 					<ActiveAccount />
 					<button
 						type="button"
-						onClick={() => {
-							setIsEditorOpen((state) => !state);
-							setIsActvityOpen(false);
-						}}
+						onClick={() => setIsEditorOpen((state) => !state)}
 						className="flex items-center justify-center h-auto w-full text-black aspect-square rounded-xl bg-black/5 hover:bg-blue-500 hover:text-white dark:bg-white/5 dark:text-white dark:hover:bg-blue-500"
 					>
 						{isEditorOpen ? (
@@ -69,30 +60,28 @@ export function Navigation() {
 							</div>
 						)}
 					</NavLink>
-					<button
-						type="button"
-						onClick={() => {
-							setIsActvityOpen((state) => !state);
-							setIsEditorOpen(false);
-						}}
+					<NavLink
+						to="/activity"
+						preventScrollReset={true}
 						className="inline-flex flex-col items-center justify-center"
 					>
-						<div
-							className={cn(
-								"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
-								isActvityOpen
-									? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
-									: "text-black/50 dark:text-neutral-400",
-							)}
-						>
-							{isActvityOpen ? (
-								<BellFilledIcon className="size-6" />
-							) : (
-								<BellIcon className="size-6" />
-							)}
-						</div>
-					</button>
-
+						{({ isActive }) => (
+							<div
+								className={cn(
+									"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
+									isActive
+										? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
+										: "text-black/50 dark:text-neutral-400",
+								)}
+							>
+								{isActive ? (
+									<BellFilledIcon className="size-6" />
+								) : (
+									<BellIcon className="size-6" />
+								)}
+							</div>
+						)}
+					</NavLink>
 					<NavLink
 						to="/nwc"
 						preventScrollReset={true}