feat: add local and global newsfeeds

2024-03-07 15:39:43 +07:00
parent 25d07303a3
commit a4fdcfdf0b
8 changed files with 298 additions and 134 deletions
--- a/apps/desktop2/src/routes/$account/home.tsx
+++ b/apps/desktop2/src/routes/$account/home.tsx
@@ -0,0 +1,68 @@
+import { GlobalIcon, LocalIcon, RefreshIcon } from "@lume/icons";
+import { cn } from "@lume/utils";
+import { useQueryClient } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import { Outlet, createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/$account/home")({
+  component: Screen,
+});
+
+function Screen() {
+  const queryClient = useQueryClient();
+  const { account } = Route.useParams();
+
+  const refresh = async () => {
+    const queryKey = `${window.location.pathname.split("/").at(-1)}_newsfeed`;
+    await queryClient.refetchQueries({ queryKey: [queryKey, account] });
+  };
+
+  return (
+    <div>
+      <div className="mx-auto mb-4 flex h-16 w-full max-w-xl shrink-0 items-center justify-between border-b border-neutral-100 dark:border-neutral-900">
+        <div className="flex items-center gap-2">
+          <Link to="/$account/home/local">
+            {({ isActive }) => (
+              <div
+                className={cn(
+                  "inline-flex items-center justify-center gap-2 rounded-full px-4 py-2 text-sm leading-tight hover:bg-neutral-100 dark:hover:bg-neutral-900",
+                  isActive
+                    ? "bg-neutral-100 font-semibold text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800"
+                    : "text-neutral-600 dark:text-neutral-400",
+                )}
+              >
+                <LocalIcon className="size-4" />
+                Local
+              </div>
+            )}
+          </Link>
+          <Link to="/$account/home/global">
+            {({ isActive }) => (
+              <div
+                className={cn(
+                  "inline-flex items-center justify-center gap-2 rounded-full px-4 py-2 text-sm leading-tight hover:bg-neutral-100 dark:hover:bg-neutral-900",
+                  isActive
+                    ? "bg-neutral-100 font-semibold text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800"
+                    : "text-neutral-600 dark:text-neutral-400",
+                )}
+              >
+                <GlobalIcon className="size-4" />
+                Global
+              </div>
+            )}
+          </Link>
+        </div>
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            onClick={refresh}
+            className="text-neutral-700 hover:text-blue-500 dark:text-neutral-300"
+          >
+            <RefreshIcon className="size-4" />
+          </button>
+        </div>
+      </div>
+      <Outlet />
+    </div>
+  );
+}