feat(columns): add default column

apps/desktop/src/routes/home/index.tsx

@@ -1,10 +1,17 @@
 import { Antenas } from "@columns/antenas";
+import { Default } from "@columns/default";
 import { Group } from "@columns/group";
 import { Hashtag } from "@columns/hashtag";
 import { Thread } from "@columns/thread";
 import { Timeline } from "@columns/timeline";
 import { User } from "@columns/user";
 import { useColumnContext } from "@lume/ark";
+import {
+	ArrowLeftIcon,
+	ArrowRightIcon,
+	HelpIcon,
+	PlusSquareIcon,
+} from "@lume/icons";
 import { IColumn } from "@lume/types";
 import { COL_TYPES } from "@lume/utils";
 import { useRef, useState } from "react";
@@ -12,11 +19,13 @@ import { VList, VListHandle } from "virtua";
 
 export function HomeScreen() {
 	const ref = useRef<VListHandle>(null);
-	const { columns } = useColumnContext();
+	const { addColumn, columns } = useColumnContext();
 	const [selectedIndex, setSelectedIndex] = useState(-1);
 
 	const renderItem = (column: IColumn) => {
 		switch (column.kind) {
+			case COL_TYPES.default:
+				return <Default key={column.id} column={column} />;
 			case COL_TYPES.newsfeed:
 				return <Timeline key={column.id} column={column} />;
 			case COL_TYPES.thread:
@@ -30,12 +39,12 @@ export function HomeScreen() {
 			case COL_TYPES.antenas:
 				return <Antenas key={column.id} column={column} />;
 			default:
-				return <Timeline key={column.id} column={column} />;
+				return <Default key={column.id} column={column} />;
 		}
 	};
 
 	return (
-		<div className="w-full h-full">
+		<div className="relative w-full h-full">
 			<VList
 				ref={ref}
 				className="h-full w-full flex-nowrap overflow-x-auto !overflow-y-hidden scrollbar-none focus:outline-none"
@@ -74,6 +83,58 @@ export function HomeScreen() {
 			>
 				{columns.map((column) => renderItem(column))}
 			</VList>
+			<div className="absolute bottom-3 right-3">
+				<div className="flex items-center gap-1 p-1 bg-black/50 backdrop-blur-xl rounded-xl">
+					<button
+						type="button"
+						onClick={() => {
+							const prevIndex = Math.max(selectedIndex - 1, 0);
+							setSelectedIndex(prevIndex);
+							ref.current.scrollToIndex(prevIndex, {
+								align: "center",
+								smooth: true,
+							});
+						}}
+						className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/50 size-10"
+					>
+						<ArrowLeftIcon className="size-5" />
+					</button>
+					<button
+						type="button"
+						onClick={() => {
+							const nextIndex = Math.min(selectedIndex + 1, columns.length - 1);
+							setSelectedIndex(nextIndex);
+							ref.current.scrollToIndex(nextIndex, {
+								align: "center",
+								smooth: true,
+							});
+						}}
+						className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/50 size-10"
+					>
+						<ArrowRightIcon className="size-5" />
+					</button>
+					<button
+						type="button"
+						onClick={async () =>
+							await addColumn({
+								kind: COL_TYPES.default,
+								title: "",
+								content: "",
+							})
+						}
+						className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/50 size-10"
+					>
+						<PlusSquareIcon className="size-5" />
+					</button>
+					<div className="w-px h-6 bg-white/10" />
+					<button
+						type="button"
+						className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/50 size-10"
+					>
+						<HelpIcon className="size-5" />
+					</button>
+				</div>
+			</div>
 		</div>
 	);
 }