update design

src/app/channel/layout.tsx

@@ -13,17 +13,11 @@ export function LayoutChannel({ children }: { children: React.ReactNode }) {
 					<AppHeader />
 				</div>
 				<div className="relative flex min-h-0 w-full flex-1">
-					<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
+					<div className="relative flex flex-row flex-wrap shrink-0">
 						<MultiAccounts />
-					</div>
-					<div className="grid w-full grid-cols-4 xl:grid-cols-5">
-						<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
 						<Navigation />
 					</div>
-						<div className="col-span-3 m-3 overflow-hidden xl:col-span-4">
+					<div className="w-full h-full">{children}</div>
-							{children}
-						</div>
-					</div>
 				</div>
 			</div>
 		</div>

src/app/chat/layout.tsx

@@ -13,17 +13,11 @@ export function LayoutChat({ children }: { children: React.ReactNode }) {
 					<AppHeader />
 				</div>
 				<div className="relative flex min-h-0 w-full flex-1">
-					<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
+					<div className="relative flex flex-row flex-wrap shrink-0">
 						<MultiAccounts />
-					</div>
-					<div className="grid w-full grid-cols-4 xl:grid-cols-5">
-						<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
 						<Navigation />
 					</div>
-						<div className="col-span-3 m-3 overflow-hidden xl:col-span-4">
+					<div className="w-full h-full">{children}</div>
-							{children}
-						</div>
-					</div>
 				</div>
 			</div>
 		</div>

src/app/inital-data/pages/index.page.tsx

@@ -191,7 +191,7 @@ export function Page() {
 				() => {
 					updateLastLogin(dateToUnix(now.current));
 					timeout = setTimeout(() => {
-						navigate("/app/today", { overwriteLastHistoryEntry: true });
+						navigate("/app/space", { overwriteLastHistoryEntry: true });
 					}, 5000);
 				},
 			);

src/app/note/components/metadata.tsx

@@ -14,7 +14,10 @@ import useSWRSubscription from "swr/subscription";
 export default function NoteMetadata({
 	id,
 	eventPubkey,
-}: { id: string; eventPubkey: string }) {
+}: {
+	id: string;
+	eventPubkey: string;
+}) {
 	const pool: any = useContext(RelayContext);
 
 	const [replies, setReplies] = useState(0);
@@ -63,20 +66,10 @@ export default function NoteMetadata({
 	});
 
 	return (
-		<div className="mt-4 flex h-12 items-center justify-between border-t border-zinc-800/50">
+		<div className="mt-4 flex h-12 items-center gap-4 border-t border-zinc-800/50">
-			<div className="flex items-center gap-16">
 			<NoteReply id={id} replies={replies} />
 			<NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />
 			<NoteZap zaps={zaps} />
 		</div>
-			<Tooltip message="Save to Space">
-				<button
-					type="button"
-					className="inline-flex w-4 h-4 rounded justify-center items-center gap-1 hover:bg-zinc-800"
-				>
-					<PlusIcon className="w-3 h-3 text-zinc-400" />
-				</button>
-			</Tooltip>
-		</div>
 	);
 }

src/app/note/layout.tsx

@@ -13,17 +13,11 @@ export function LayoutNewsfeed({ children }: { children: React.ReactNode }) {
 					<AppHeader />
 				</div>
 				<div className="relative flex min-h-0 w-full flex-1">
-					<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
+					<div className="relative flex flex-row flex-wrap shrink-0">
 						<MultiAccounts />
-					</div>
-					<div className="grid w-full grid-cols-4 xl:grid-cols-5">
-						<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
 						<Navigation />
 					</div>
-						<div className="col-span-3 overflow-hidden xl:col-span-4">
+					<div className="w-full h-full">{children}</div>
-							{children}
-						</div>
-					</div>
 				</div>
 			</div>
 		</div>

src/app/space/components/header.tsx

@@ -1,4 +1,4 @@
-import { CreateViewModal } from "@app/today/components/views/createModal";
+import { CreateViewModal } from "@app/space/components/views/createModal";
 
 export function Header() {
 	return (

src/app/space/layout.tsx

@@ -13,17 +13,11 @@ export function LayoutNewsfeed({ children }: { children: React.ReactNode }) {
 					<AppHeader />
 				</div>
 				<div className="relative flex min-h-0 w-full flex-1">
-					<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
+					<div className="relative flex flex-row flex-wrap shrink-0">
 						<MultiAccounts />
-					</div>
-					<div className="grid w-full grid-cols-4 xl:grid-cols-5">
-						<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
 						<Navigation />
 					</div>
-						<div className="col-span-3 overflow-hidden xl:col-span-4">
+					<div className="w-full h-full">{children}</div>
-							{children}
-						</div>
-					</div>
 				</div>
 			</div>
 		</div>

src/app/space/pages/index.page.tsx

@@ -1,7 +1,132 @@
+import { NoteBase } from "@app/note/components/base";
+import { NoteQuoteRepost } from "@app/note/components/quoteRepost";
+import { NoteSkeleton } from "@app/note/components/skeleton";
+import { Header } from "@app/space/components/header";
+
+import { getNotes } from "@utils/storage";
+
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useEffect, useRef } from "react";
+
+const ITEM_PER_PAGE = 10;
+const TIME = Math.floor(Date.now() / 1000);
+
 export function Page() {
+	const {
+		status,
+		error,
+		data,
+		fetchNextPage,
+		hasNextPage,
+		isFetching,
+		isFetchingNextPage,
+	}: any = useInfiniteQuery({
+		queryKey: ["following"],
+		queryFn: async ({ pageParam = 0 }) => {
+			return await getNotes(TIME, ITEM_PER_PAGE, pageParam);
+		},
+		getNextPageParam: (lastPage) => lastPage.nextCursor,
+	});
+
+	const allRows = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
+	const parentRef = useRef();
+
+	const rowVirtualizer = useVirtualizer({
+		count: hasNextPage ? allRows.length + 1 : allRows.length,
+		getScrollElement: () => parentRef.current,
+		estimateSize: () => 400,
+		overscan: 2,
+	});
+
+	const itemsVirtualizer = rowVirtualizer.getVirtualItems();
+
+	useEffect(() => {
+		const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
+
+		if (!lastItem) {
+			return;
+		}
+
+		if (
+			lastItem.index >= allRows.length - 1 &&
+			hasNextPage &&
+			!isFetchingNextPage
+		) {
+			fetchNextPage();
+		}
+	}, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]);
+
 	return (
+		<div
+			ref={parentRef}
+			className="scrollbar-hide flex h-full flex-col justify-between gap-1.5 overflow-y-auto"
+			style={{ contain: "strict" }}
+		>
+			<div className="pt-1.5">
+				{status === "loading" ? (
+					<div className="px-3 py-1.5">
+						<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
+							<NoteSkeleton />
+						</div>
+					</div>
+				) : status === "error" ? (
+					<div>{error.message}</div>
+				) : (
+					<div
+						className="relative w-full"
+						style={{
+							height: `${rowVirtualizer.getTotalSize()}px`,
+						}}
+					>
+						<div
+							className="absolute left-0 top-0 w-full"
+							style={{
+								transform: `translateY(${
+									itemsVirtualizer[0].start -
+									rowVirtualizer.options.scrollMargin
+								}px)`,
+							}}
+						>
+							{rowVirtualizer.getVirtualItems().map((virtualRow) => {
+								const note = allRows[virtualRow.index];
+								if (note) {
+									if (note.kind === 1) {
+										return (
+											<div
+												key={virtualRow.index}
+												data-index={virtualRow.index}
+												ref={rowVirtualizer.measureElement}
+											>
+												<NoteBase key={note.event_id} event={note} />
+											</div>
+										);
+									} else {
+										return (
+											<div
+												key={virtualRow.index}
+												data-index={virtualRow.index}
+												ref={rowVirtualizer.measureElement}
+											>
+												<NoteQuoteRepost key={note.event_id} event={note} />
+											</div>
+										);
+									}
+								}
+							})}
+						</div>
+					</div>
+				)}
 				<div>
-			<p>Space</p>
+					{isFetching && !isFetchingNextPage ? (
+						<div className="px-3 py-1.5">
+							<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
+								<NoteSkeleton />
+							</div>
+						</div>
+					) : null}
+				</div>
+			</div>
 		</div>
 	);
 }

src/app/threads/layout.tsx

@@ -13,17 +13,11 @@ export function LayoutNewsfeed({ children }: { children: React.ReactNode }) {
 					<AppHeader />
 				</div>
 				<div className="relative flex min-h-0 w-full flex-1">
-					<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
+					<div className="relative flex flex-row flex-wrap shrink-0">
 						<MultiAccounts />
-					</div>
-					<div className="grid w-full grid-cols-4 xl:grid-cols-5">
-						<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
 						<Navigation />
 					</div>
-						<div className="col-span-3 overflow-hidden xl:col-span-4">
+					<div className="w-full h-full">{children}</div>
-							{children}
-						</div>
-					</div>
 				</div>
 			</div>
 		</div>

src/app/today/pages/index.page.tsx

@@ -1,135 +0,0 @@
-import { NoteBase } from "@app/note/components/base";
-import { NoteQuoteRepost } from "@app/note/components/quoteRepost";
-import { NoteSkeleton } from "@app/note/components/skeleton";
-import { Header } from "@app/today/components/header";
-
-import { getNotes } from "@utils/storage";
-
-import { useInfiniteQuery } from "@tanstack/react-query";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { useEffect, useRef } from "react";
-
-const ITEM_PER_PAGE = 10;
-const TIME = Math.floor(Date.now() / 1000);
-
-export function Page() {
-	const {
-		status,
-		error,
-		data,
-		fetchNextPage,
-		hasNextPage,
-		isFetching,
-		isFetchingNextPage,
-	}: any = useInfiniteQuery({
-		queryKey: ["following"],
-		queryFn: async ({ pageParam = 0 }) => {
-			return await getNotes(TIME, ITEM_PER_PAGE, pageParam);
-		},
-		getNextPageParam: (lastPage) => lastPage.nextCursor,
-	});
-
-	const allRows = data ? data.pages.flatMap((d: { data: any }) => d.data) : [];
-	const parentRef = useRef();
-
-	const rowVirtualizer = useVirtualizer({
-		count: hasNextPage ? allRows.length + 1 : allRows.length,
-		getScrollElement: () => parentRef.current,
-		estimateSize: () => 400,
-		overscan: 2,
-	});
-
-	const itemsVirtualizer = rowVirtualizer.getVirtualItems();
-
-	useEffect(() => {
-		const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse();
-
-		if (!lastItem) {
-			return;
-		}
-
-		if (
-			lastItem.index >= allRows.length - 1 &&
-			hasNextPage &&
-			!isFetchingNextPage
-		) {
-			fetchNextPage();
-		}
-	}, [fetchNextPage, allRows.length, rowVirtualizer.getVirtualItems()]);
-
-	return (
-		<div
-			ref={parentRef}
-			className="scrollbar-hide flex h-full flex-col justify-between gap-1.5 overflow-y-auto"
-			style={{ contain: "strict" }}
-		>
-			<div className="flex h-11 w-full shrink-0 items-center justify-between border-b border-zinc-900 px-3">
-				<Header />
-			</div>
-			<div className="flex-1">
-				{status === "loading" ? (
-					<div className="px-3 py-1.5">
-						<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
-							<NoteSkeleton />
-						</div>
-					</div>
-				) : status === "error" ? (
-					<div>{error.message}</div>
-				) : (
-					<div
-						className="relative w-full"
-						style={{
-							height: `${rowVirtualizer.getTotalSize()}px`,
-						}}
-					>
-						<div
-							className="absolute left-0 top-0 w-full"
-							style={{
-								transform: `translateY(${
-									itemsVirtualizer[0].start -
-									rowVirtualizer.options.scrollMargin
-								}px)`,
-							}}
-						>
-							{rowVirtualizer.getVirtualItems().map((virtualRow) => {
-								const note = allRows[virtualRow.index];
-								if (note) {
-									if (note.kind === 1) {
-										return (
-											<div
-												key={virtualRow.index}
-												data-index={virtualRow.index}
-												ref={rowVirtualizer.measureElement}
-											>
-												<NoteBase key={note.event_id} event={note} />
-											</div>
-										);
-									} else {
-										return (
-											<div
-												key={virtualRow.index}
-												data-index={virtualRow.index}
-												ref={rowVirtualizer.measureElement}
-											>
-												<NoteQuoteRepost key={note.event_id} event={note} />
-											</div>
-										);
-									}
-								}
-							})}
-						</div>
-					</div>
-				)}
-				<div>
-					{isFetching && !isFetchingNextPage ? (
-						<div className="px-3 py-1.5">
-							<div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
-								<NoteSkeleton />
-							</div>
-						</div>
-					) : null}
-				</div>
-			</div>
-		</div>
-	);
-}

src/shared/appHeader.tsx

@@ -2,7 +2,16 @@ import ArrowLeftIcon from "@icons/arrowLeft";
 import ArrowRightIcon from "@icons/arrowRight";
 import RefreshIcon from "@icons/refresh";
 
+import useSWR from "swr";
+
+const fetcher = async () => {
+	const { platform } = await import("@tauri-apps/api/os");
+	return await platform();
+};
+
 export default function AppHeader() {
+	const { data: platform } = useSWR("platform", fetcher);
+
 	const goBack = () => {
 		window.history.back();
 	};
@@ -21,10 +30,10 @@ export default function AppHeader() {
 			className="flex h-full w-full flex-1 items-center px-2"
 		>
 			<div
-				data-tauri-drag-region
+				className={`flex h-full items-center gap-2 ${
-				className="flex w-full items-center justify-center gap-2"
+					platform === "darwin" ? "pl-[68px]" : ""
+				}`}
 			>
-				<div className="flex h-full items-center gap-2">
 				<button
 					type="button"
 					onClick={() => goBack()}
@@ -47,16 +56,6 @@ export default function AppHeader() {
 						className="text-zinc-500 group-hover:text-zinc-300"
 					/>
 				</button>
-				</div>
-				<div>
-					<input
-						autoCapitalize="none"
-						autoCorrect="off"
-						placeholder="Search..."
-						className="h-6 w-[453px] rounded border border-zinc-800 bg-zinc-900 px-2.5 text-center text-[11px] text-sm leading-5 text-zinc-500 placeholder:leading-5 placeholder:text-zinc-600 focus:outline-none"
-					/>
-				</div>
-				<div className="flex h-full items-center gap-2">
 				<button
 					type="button"
 					onClick={() => reload()}
@@ -70,6 +69,5 @@ export default function AppHeader() {
 				</button>
 			</div>
 		</div>
-		</div>
 	);
 }

src/shared/multiAccounts.tsx

@@ -18,7 +18,7 @@ export default function MultiAccounts() {
 	const { data: activeAccount }: any = useSWR("activeAccount", fetcher);
 
 	return (
-		<div className="flex h-full flex-col items-center justify-between pb-4 pt-3">
+		<div className="flex shrink-0 w-[68px] h-full flex-col items-center justify-between border-r border-zinc-900 pb-4 pt-3">
 			<div className="flex flex-col items-center">
 				<div className="flex flex-col gap-2">
 					<>

src/shared/navigation.tsx

@@ -14,7 +14,7 @@ import { Disclosure } from "@headlessui/react";
 
 export default function Navigation() {
 	return (
-		<div className="relative flex h-full flex-col gap-3 pt-1.5">
+		<div className="flex w-[232px] h-full flex-col gap-3 pt-1.5">
 			<div className="flex h-11 items-center justify-between px-3.5">
 				<ComposerModal />
 				<EventCollector />
@@ -28,14 +28,14 @@ export default function Navigation() {
 				</div>
 				<div className="flex flex-col text-zinc-400">
 					<ActiveLink
-						href="/app/today"
+						href="/app/space"
 						className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-[13px] font-semibold hover:text-zinc-200"
 						activeClassName="bg-zinc-900/50 hover:bg-zinc-900"
 					>
 						<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
 							<WorldIcon width={12} height={12} className="text-zinc-200" />
 						</span>
-						<span>Today</span>
+						<span>Space</span>
 					</ActiveLink>
 					<ActiveLink
 						href="/app/threads"
@@ -47,16 +47,6 @@ export default function Navigation() {
 						</span>
 						<span>Threads</span>
 					</ActiveLink>
-					<ActiveLink
-						href="/app/space"
-						className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-[13px] font-semibold hover:text-zinc-200"
-						activeClassName=""
-					>
-						<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
-							<MyspaceIcon width={12} height={12} className="text-zinc-200" />
-						</span>
-						<span>Space</span>
-					</ActiveLink>
 				</div>
 			</div>
 			{/* Channels */}