From 446721729b7a691a4316163e636b9c771c3cacba Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Sat, 20 Jan 2024 20:14:26 +0700
Subject: [PATCH] feat: polish

---
 apps/desktop/src/routes/home/index.tsx        | 135 ++++++++++++------
 packages/ark/src/components/column/header.tsx |   5 +-
 .../src/components/column/interestModal.tsx   |   2 +-
 packages/icons/index.ts                       |   1 +
 packages/icons/src/newColumn.tsx              |  21 +++
 packages/lume-column-foryou/src/home.tsx      |   2 +-
 packages/lume-column-timeline/src/home.tsx    |   2 +-
 7 files changed, 124 insertions(+), 44 deletions(-)
 create mode 100644 packages/icons/src/newColumn.tsx

diff --git a/apps/desktop/src/routes/home/index.tsx b/apps/desktop/src/routes/home/index.tsx
index 5d6b04ad..c9f54bd8 100644
--- a/apps/desktop/src/routes/home/index.tsx
+++ b/apps/desktop/src/routes/home/index.tsx
@@ -7,17 +7,24 @@ import { Thread } from "@columns/thread";
 import { Timeline } from "@columns/timeline";
 import { User } from "@columns/user";
 import { useColumnContext } from "@lume/ark";
-import { ArrowLeftIcon, ArrowRightIcon, PlusSquareIcon } from "@lume/icons";
+import {
+	ArrowLeftIcon,
+	ArrowRightIcon,
+	NewColumnIcon,
+	PlusIcon,
+	PlusSquareIcon,
+} from "@lume/icons";
 import { IColumn } from "@lume/types";
 import { TutorialModal } from "@lume/ui/src/tutorial/modal";
 import { COL_TYPES } from "@lume/utils";
+import * as Tooltip from "@radix-ui/react-tooltip";
 import { useRef, useState } from "react";
 import { VList, VListHandle } from "virtua";
 
 export function HomeScreen() {
 	const ref = useRef<VListHandle>(null);
-	const { addColumn, columns } = useColumnContext();
 	const [selectedIndex, setSelectedIndex] = useState(-1);
+	const { columns, addColumn } = useColumnContext();
 
 	const renderItem = (column: IColumn) => {
 		switch (column.kind) {
@@ -45,7 +52,6 @@ export function HomeScreen() {
 	return (
 		<div className="relative w-full h-full">
 			<VList
-				id="timeline"
 				ref={ref}
 				className="h-full w-full flex-nowrap overflow-x-auto !overflow-y-hidden scrollbar-none focus:outline-none"
 				itemSize={420}
@@ -82,38 +88,7 @@ export function HomeScreen() {
 				}}
 			>
 				{columns.map((column) => renderItem(column))}
-				<div className="w-[420px]" />
-			</VList>
-			<div className="absolute bottom-3 right-3">
-				<div className="flex items-center gap-1 p-1 bg-black/30 dark:bg-white/30 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/30 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/30 size-10"
-					>
-						<ArrowRightIcon className="size-5" />
-					</button>
+				<div className="w-[420px] h-full flex items-center justify-center">
 					<button
 						type="button"
 						onClick={async () =>
@@ -123,14 +98,94 @@ export function HomeScreen() {
 								content: "",
 							})
 						}
-						className="inline-flex items-center justify-center rounded-lg text-white/70 hover:text-white hover:bg-black/30 size-10"
+						className="size-16 inline-flex items-center justify-center rounded-full bg-blue-500 hover:bg-blue-600 text-white"
 					>
-						<PlusSquareIcon className="size-5" />
+						<NewColumnIcon className="size-7" />
 					</button>
-					<div className="w-px h-6 bg-white/10" />
-					<TutorialModal />
 				</div>
-			</div>
+			</VList>
+			<Tooltip.Provider>
+				<div className="absolute bottom-3 right-3">
+					<div className="flex items-center gap-1 p-1 bg-black/30 dark:bg-white/30 backdrop-blur-xl rounded-xl">
+						<Tooltip.Root delayDuration={150}>
+							<Tooltip.Trigger asChild>
+								<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/30 size-10"
+								>
+									<ArrowLeftIcon className="size-5" />
+								</button>
+							</Tooltip.Trigger>
+							<Tooltip.Portal>
+								<Tooltip.Content className="inline-flex h-7 select-none text-neutral-50 dark:text-neutral-950 items-center justify-center rounded-md bg-neutral-950 dark:bg-neutral-50 px-3.5 text-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
+									Move Left
+									<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+								</Tooltip.Content>
+							</Tooltip.Portal>
+						</Tooltip.Root>
+						<Tooltip.Root delayDuration={150}>
+							<Tooltip.Trigger asChild>
+								<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/30 size-10"
+								>
+									<ArrowRightIcon className="size-5" />
+								</button>
+							</Tooltip.Trigger>
+							<Tooltip.Portal>
+								<Tooltip.Content className="inline-flex h-7 select-none text-neutral-50 dark:text-neutral-950 items-center justify-center rounded-md bg-neutral-950 dark:bg-neutral-50 px-3.5 text-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
+									Move Right
+									<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+								</Tooltip.Content>
+							</Tooltip.Portal>
+						</Tooltip.Root>
+						<Tooltip.Root delayDuration={150}>
+							<Tooltip.Trigger asChild>
+								<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/30 size-10"
+								>
+									<PlusSquareIcon className="size-5" />
+								</button>
+							</Tooltip.Trigger>
+							<Tooltip.Portal>
+								<Tooltip.Content className="inline-flex h-7 select-none text-neutral-50 dark:text-neutral-950 items-center justify-center rounded-md bg-neutral-950 dark:bg-neutral-50 px-3.5 text-sm will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade">
+									New Column
+									<Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+								</Tooltip.Content>
+							</Tooltip.Portal>
+						</Tooltip.Root>
+						<div className="w-px h-6 bg-white/10" />
+						<TutorialModal />
+					</div>
+				</div>
+			</Tooltip.Provider>
 		</div>
 	);
 }
diff --git a/packages/ark/src/components/column/header.tsx b/packages/ark/src/components/column/header.tsx
index ccc8971c..961033bb 100644
--- a/packages/ark/src/components/column/header.tsx
+++ b/packages/ark/src/components/column/header.tsx
@@ -74,7 +74,10 @@ export function ColumnHeader({
 							</DropdownMenu.Item>
 							{queryKey?.[0] === "foryou-9998" ? (
 								<DropdownMenu.Item asChild>
-									<InterestModal queryKey={queryKey} />
+									<InterestModal
+										queryKey={queryKey}
+										className="text-sm font-medium text-white/50 hover:bg-black/10 hover:text-white dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white"
+									/>
 								</DropdownMenu.Item>
 							) : null}
 							<DropdownMenu.Item asChild>
diff --git a/packages/ark/src/components/column/interestModal.tsx b/packages/ark/src/components/column/interestModal.tsx
index 55ebced7..b9f29441 100644
--- a/packages/ark/src/components/column/interestModal.tsx
+++ b/packages/ark/src/components/column/interestModal.tsx
@@ -56,7 +56,7 @@ export function InterestModal({
 		<Dialog.Root open={open} onOpenChange={setOpen}>
 			<Dialog.Trigger
 				className={cn(
-					"inline-flex items-center gap-2 px-3 text-sm font-medium rounded-lg h-9 text-white/50 hover:bg-black/10 hover:text-white focus:outline-none dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white",
+					"inline-flex items-center gap-2 px-3 rounded-lg h-9 focus:outline-none",
 					className,
 				)}
 			>
diff --git a/packages/icons/index.ts b/packages/icons/index.ts
index aa9a30be..2a3b4572 100644
--- a/packages/icons/index.ts
+++ b/packages/icons/index.ts
@@ -109,3 +109,4 @@ export * from "./src/settingsFilled";
 export * from "./src/bellFilled";
 export * from "./src/foryou";
 export * from "./src/editInterest";
+export * from "./src/newColumn";
diff --git a/packages/icons/src/newColumn.tsx b/packages/icons/src/newColumn.tsx
new file mode 100644
index 00000000..7f6e8eb6
--- /dev/null
+++ b/packages/icons/src/newColumn.tsx
@@ -0,0 +1,21 @@
+import { SVGProps } from "react";
+
+export function NewColumnIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			viewBox="0 0 24 24"
+			{...props}
+		>
+			<path
+				fill="currentColor"
+				d="M12 19v1a1 1 0 001-1h-1zm8-9a1 1 0 102 0h-2zm0 4a1 1 0 10-2 0h2zm-2 6a1 1 0 102 0h-2zm-2-4a1 1 0 100 2v-2zm6 2a1 1 0 100-2v2zM4 17V7H2v10h2zm8 1H5v2h7v-2zm8-11v3h2V7h-2zM5 6h7V4H5v2zm7 0h7V4h-7v2zm1 13V5h-2v14h2zm5-5v3h2v-3h-2zm0 3v3h2v-3h-2zm-2 1h3v-2h-3v2zm3 0h3v-2h-3v2zm3-11a3 3 0 00-3-3v2a1 1 0 011 1h2zM4 7a1 1 0 011-1V4a3 3 0 00-3 3h2zM2 17a3 3 0 003 3v-2a1 1 0 01-1-1H2z"
+			/>
+		</svg>
+	);
+}
diff --git a/packages/lume-column-foryou/src/home.tsx b/packages/lume-column-foryou/src/home.tsx
index a87c2632..0533e319 100644
--- a/packages/lume-column-foryou/src/home.tsx
+++ b/packages/lume-column-foryou/src/home.tsx
@@ -93,7 +93,7 @@ export function HomeRoute({ colKey }: { colKey: string }) {
 				<EmptyFeed subtext="You can more interests to build up your timeline" />
 				<InterestModal
 					queryKey={[colKey]}
-					className="mt-3 w-full inline-flex items-center justify-center rounded-lg h-9 bg-blue-500 hover:bg-blue-600 text-white"
+					className="mt-3 w-full text-sm font-medium inline-flex items-center justify-center rounded-lg h-9 bg-blue-500 hover:bg-blue-600 text-white"
 				>
 					<ForyouIcon className="size-5" />
 					Add interest
diff --git a/packages/lume-column-timeline/src/home.tsx b/packages/lume-column-timeline/src/home.tsx
index b62c60ad..41274a9b 100644
--- a/packages/lume-column-timeline/src/home.tsx
+++ b/packages/lume-column-timeline/src/home.tsx
@@ -99,7 +99,7 @@ export function HomeRoute({ colKey }: { colKey: string }) {
 				<EmptyFeed />
 				<Link
 					to="/suggest"
-					className="mt-3 w-full inline-flex items-center justify-center rounded-lg h-9 bg-blue-500 hover:bg-blue-600 text-white"
+					className="mt-3 w-full gap-2 inline-flex items-center justify-center text-sm font-medium rounded-lg h-9 bg-blue-500 hover:bg-blue-600 text-white"
 				>
 					<SearchIcon className="size-5" />
 					Find accounts to follow