final design (#184)

* feat: redesign * feat: update other columns to new design * chore: small fixes * fix: better manage external webview * feat: redesign note * feat: update ui * chore: update * chore: update * chore: polish ui * chore: update auth ui * feat: finalize note design * chore: small fixes * feat: add window management in rust * chore: format * feat: update ui for event screen * feat: update event screen * feat: final
2024-05-03 15:15:48 +07:00
parent 61d1f095d4
commit a4aef25adb
250 changed files with 9359 additions and 9234 deletions
@@ -1,62 +1,113 @@
 import { ComposeFilledIcon, PlusIcon, SearchIcon } from "@lume/icons";
-import { Outlet, createFileRoute, useNavigate } from "@tanstack/react-router";
+import type { Account } from "@lume/types";
+import { User } from "@lume/ui";
 import { cn } from "@lume/utils";
-import { Accounts } from "@/components/accounts";
-import { platform } from "@tauri-apps/plugin-os";
+import { Outlet, createFileRoute } from "@tanstack/react-router";
+import { useEffect, useState } from "react";

 export const Route = createFileRoute("/$account")({
-  component: App,
-  beforeLoad: async () => {
-    const platformName = await platform();
-    return { platform: platformName };
-  },
+	component: Screen,
 });

-function App() {
-  const navigate = useNavigate();
-  const { ark, platform } = Route.useRouteContext();
+function Screen() {
+	const navigate = Route.useNavigate();
+	const { ark, platform } = Route.useRouteContext();

-  return (
-    <div className="flex h-screen w-screen flex-col">
-      <div
-        data-tauri-drag-region
-        className={cn(
-          "flex h-11 shrink-0 items-center justify-between pr-2",
-          platform === "macos" ? "ml-2 pl-20" : "pl-4",
-        )}
-      >
-        <div className="flex items-center gap-3">
-          <Accounts />
-          <button
-            type="button"
-            onClick={() => navigate({ to: "/landing" })}
-            className="inline-flex size-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-800 hover:bg-neutral-400 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-600"
-          >
-            <PlusIcon className="size-5" />
-          </button>
-          <button
-            type="button"
-            onClick={() => ark.open_search()}
-            className="inline-flex size-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-800 hover:bg-neutral-400 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-600"
-          >
-            <SearchIcon className="size-5" />
-          </button>
-        </div>
-        <div className="flex items-center gap-3">
-          <button
-            type="button"
-            onClick={() => ark.open_editor()}
-            className="inline-flex h-8 w-max items-center justify-center gap-1 rounded-full bg-blue-500 px-3 text-sm font-medium text-white hover:bg-blue-600"
-          >
-            <ComposeFilledIcon className="size-4" />
-            New Post
-          </button>
-          <div id="toolbar" />
-        </div>
-      </div>
-      <div className="flex-1">
-        <Outlet />
-      </div>
-    </div>
-  );
+	return (
+		<div className="flex h-screen w-screen flex-col">
+			<div
+				data-tauri-drag-region
+				className={cn(
+					"flex h-11 shrink-0 items-center justify-between pr-2",
+					platform === "macos" ? "ml-2 pl-20" : "pl-4",
+				)}
+			>
+				<div className="flex items-center gap-3">
+					<Accounts />
+					<button
+						type="button"
+						onClick={() => navigate({ to: "/landing" })}
+						className="inline-flex size-8 items-center justify-center rounded-full bg-black/10 text-neutral-800 hover:bg-black/20 dark:bg-white/10 dark:text-neutral-200 dark:hover:bg-white/20"
+					>
+						<PlusIcon className="size-5" />
+					</button>
+					<button
+						type="button"
+						onClick={() => ark.open_search()}
+						className="inline-flex size-8 items-center justify-center rounded-full bg-black/10 text-neutral-800 hover:bg-black/20 dark:bg-white/10 dark:text-neutral-200 dark:hover:bg-white/20"
+					>
+						<SearchIcon className="size-4" />
+					</button>
+				</div>
+				<div className="flex items-center gap-3">
+					<button
+						type="button"
+						onClick={() => ark.open_editor()}
+						className="inline-flex h-8 w-max items-center justify-center gap-1 rounded-full bg-blue-500 px-3 text-sm font-medium text-white hover:bg-blue-600"
+					>
+						<ComposeFilledIcon className="size-4" />
+						New Post
+					</button>
+					<div id="toolbar" />
+				</div>
+			</div>
+			<div className="flex-1">
+				<Outlet />
+			</div>
+		</div>
+	);
+}
+
+export function Accounts() {
+	const navigate = Route.useNavigate();
+	const { ark } = Route.useRouteContext();
+	const { account } = Route.useParams();
+
+	const [accounts, setAccounts] = useState<Account[]>([]);
+
+	const changeAccount = async (npub: string) => {
+		if (npub === account) return;
+		const select = await ark.load_selected_account(npub);
+		if (select)
+			return navigate({ to: "/$account/home", params: { account: npub } });
+	};
+
+	useEffect(() => {
+		async function getAllAccounts() {
+			const data = await ark.get_all_accounts();
+			if (data) setAccounts(data);
+		}
+
+		getAllAccounts();
+	}, []);
+
+	return (
+		<div data-tauri-drag-region className="flex items-center gap-3">
+			{accounts.map((user) => (
+				<button
+					key={user.npub}
+					type="button"
+					onClick={() => changeAccount(user.npub)}
+				>
+					<User.Provider pubkey={user.npub}>
+						<User.Root
+							className={cn(
+								"rounded-full",
+								user.npub === account
+									? "ring-1 ring-teal-500 ring-offset-2 ring-offset-neutral-200 dark:ring-offset-neutral-950"
+									: "",
+							)}
+						>
+							<User.Avatar
+								className={cn(
+									"aspect-square h-auto rounded-full object-cover",
+									user.npub === account ? "w-7" : "w-8",
+								)}
+							/>
+						</User.Root>
+					</User.Provider>
+				</button>
+			))}
+		</div>
+	);
 }