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
@@ -4,67 +4,67 @@ import { createFileRoute } from "@tanstack/react-router";
 import { Suspense } from "react";

 export const Route = createFileRoute("/trending/users")({
-  loader: async ({ abortController }) => {
-    try {
-      return {
-        data: defer(
-          fetch("https://api.nostr.band/v0/trending/profiles", {
-            signal: abortController.signal,
-          }).then((res) => res.json()),
-        ),
-      };
-    } catch (e) {
-      throw new Error(String(e));
-    }
-  },
-  component: Screen,
+	loader: async ({ abortController }) => {
+		try {
+			return {
+				data: defer(
+					fetch("https://api.nostr.band/v0/trending/profiles", {
+						signal: abortController.signal,
+					}).then((res) => res.json()),
+				),
+			};
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	},
+	component: Screen,
 });

 export function Screen() {
-  const { data } = Route.useLoaderData();
+	const { data } = Route.useLoaderData();

-  return (
-    <div className="w-full h-full px-3">
-      <Suspense
-        fallback={
-          <div className="flex h-20 w-full flex-col items-center justify-center gap-1">
-            <button
-              type="button"
-              className="inline-flex items-center gap-2 text-sm font-medium"
-              disabled
-            >
-              <Spinner className="size-5" />
-              Loading...
-            </button>
-          </div>
-        }
-      >
-        <Await promise={data}>
-          {(users) =>
-            users.profiles.map((item) => (
-              <div
-                key={item.pubkey}
-                className="h-max w-full overflow-hidden py-5 border-b border-neutral-100 dark:border-neutral-900"
-              >
-                <User.Provider pubkey={item.pubkey}>
-                  <User.Root>
-                    <div className="flex h-full w-full flex-col gap-2">
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-2.5">
-                          <User.Avatar className="size-10 shrink-0 rounded-full object-cover" />
-                          <User.Name className="leadning-tight max-w-[15rem] truncate font-semibold" />
-                        </div>
-                        <User.Button className="inline-flex h-8 w-20 items-center justify-center rounded-lg bg-neutral-100 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800" />
-                      </div>
-                      <User.About className="mt-1 line-clamp-3 max-w-none select-text text-neutral-800 dark:text-neutral-400" />
-                    </div>
-                  </User.Root>
-                </User.Provider>
-              </div>
-            ))
-          }
-        </Await>
-      </Suspense>
-    </div>
-  );
+	return (
+		<div className="w-full h-full">
+			<Suspense
+				fallback={
+					<div className="flex h-20 w-full flex-col items-center justify-center gap-1">
+						<button
+							type="button"
+							className="inline-flex items-center gap-2 text-sm font-medium"
+							disabled
+						>
+							<Spinner className="size-5" />
+							Loading...
+						</button>
+					</div>
+				}
+			>
+				<Await promise={data}>
+					{(users) =>
+						users.profiles.map((item) => (
+							<div
+								key={item.pubkey}
+								className="h-max w-full overflow-hidden mb-3 p-2 bg-black/5 dark:bg-white/5 backdrop-blur-lg rounded-xl"
+							>
+								<User.Provider pubkey={item.pubkey}>
+									<User.Root>
+										<div className="flex h-full w-full flex-col gap-2">
+											<div className="flex items-center justify-between">
+												<div className="flex items-center gap-2.5">
+													<User.Avatar className="size-10 shrink-0 rounded-full object-cover" />
+													<User.Name className="leadning-tight max-w-[15rem] truncate font-semibold" />
+												</div>
+												<User.Button className="inline-flex h-8 w-20 items-center justify-center rounded-lg bg-black/10 text-sm font-medium hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20" />
+											</div>
+											<User.About className="mt-1 line-clamp-3 max-w-none select-text text-neutral-800 dark:text-neutral-400" />
+										</div>
+									</User.Root>
+								</User.Provider>
+							</div>
+						))
+					}
+				</Await>
+			</Suspense>
+		</div>
+	);
 }