refactor: move settings to ui package

apps/social/src/app/components/navbar.tsx

@@ -4,20 +4,21 @@ import { logout } from "@/actions";
 import logo from "/public/logo.svg";
 import { getSession } from "@/lib/auth";
 import { SignOutButton } from "./sign-out-btn";
+
 import {
   ArrowLeft,
+  ScanFace,
   LinkIcon,
   LogIn,
-  MessagesSquare,
-  ScanFace,
-  ScrollText,
   UserCog,
+  ScrollText,
+  MessagesSquare,
 } from "lucide-react";
 
 import {
   Avatar,
-  AvatarFallback,
   AvatarImage,
+  AvatarFallback,
 } from "@umamin/ui/components/avatar";
 
 import {
@@ -66,6 +67,10 @@ export async function Navbar() {
                 <Link href={`/user`}>Profile</Link>
               </DropdownMenuItem>
               <DropdownMenuSeparator />
+              <DropdownMenuItem asChild>
+                <Link href={`/settings`}>Settings</Link>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
               <DropdownMenuItem asChild>
                 {session ? (
                   <form action={logout} className="place-self-end">

apps/social/src/app/settings/page.tsx

@@ -0,0 +1,15 @@
+import { getSession } from "@/lib/auth";
+import Settings from "@umamin/ui/app/settings/page";
+import { CurrentUserResult, getCurrentUser } from "./queries";
+import { redirect } from "next/navigation";
+
+export default async function Page() {
+  const { user, session } = await getSession();
+  const userData = await getCurrentUser(session?.id);
+
+  if (!user) {
+    redirect("/login");
+  }
+
+  return <Settings user={user} userData={userData as CurrentUserResult} />;
+}

apps/social/src/app/settings/queries.ts

@@ -0,0 +1,39 @@
+import { cache } from "react";
+import getClient from "@/lib/gql/rsc";
+import { graphql, ResultOf } from "gql.tada";
+
+export const CURRENT_USER_QUERY = graphql(`
+  query CurrentUser {
+    user {
+      __typename
+      id
+      bio
+      username
+      displayName
+      question
+      quietMode
+      imageUrl
+      createdAt
+      accounts {
+        __typename
+        id
+        email
+        picture
+        createdAt
+      }
+    }
+  }
+`);
+
+const currentUserPersisted = graphql.persisted(
+  "3f2320bbe96bd7895f618b6cdedfdee5d2f40e3e0c1d75095ea0844a0ff107b4",
+  CURRENT_USER_QUERY
+);
+
+export const getCurrentUser = cache(async (sessionId?: string) => {
+  const result = await getClient(sessionId).query(currentUserPersisted, {});
+
+  return result?.data?.user;
+});
+
+export type CurrentUserResult = ResultOf<typeof CURRENT_USER_QUERY>["user"];

packages/ui/components.json

@@ -11,7 +11,7 @@
     "prefix": ""
   },
   "aliases": {
-    "components": "@/components",
+    "components": "../../../components",
     "utils": "@/lib/utils"
   }
 }

packages/ui/package.json

@@ -8,28 +8,47 @@
     "./tailwind.config": "./tailwind.config.ts",
     "./lib/*": "./src/lib/*.ts",
     "./components/*": "./src/components/ui/*.tsx",
-    "./ad": "./src/components/ad-container.tsx"
+    "./ad": "./src/components/ad-container.tsx",
+    "./app/*": "./src/components/*.tsx"
   },
   "scripts": {
     "ui:add": "pnpm dlx shadcn-ui@latest add",
     "clean": "rm -rf ./node_modules .turbo",
     "lint": "eslint . --max-warnings 0",
-    "check-types": "tsc --noEmit"
+    "check-types": "tsc --noEmit",
+    "gql:generate-persisted": "gql.tada generate-persisted",
+    "gql:generate-schema": "gql.tada generate-schema http://localhost:3000/api/graphql"
   },
   "devDependencies": {
+    "@0no-co/graphqlsp": "^1.12.12",
+    "@lucia-auth/adapter-drizzle": "^1.0.7",
+    "@node-rs/argon2": "^1.8.3",
     "@tailwindcss/typography": "^0.5.13",
     "@types/eslint": "^8.56.5",
     "@types/node": "^20.11.24",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
+    "@umamin/aes": "workspace:*",
+    "@umamin/db": "workspace:*",
     "@umamin/eslint-config": "workspace:*",
+    "@umamin/gql": "workspace:*",
     "@umamin/tsconfig": "workspace:*",
+    "@urql/core": "^5.0.5",
+    "@urql/exchange-persisted": "^4.3.0",
+    "@urql/next": "^1.1.1",
+    "arctic": "^1.9.2",
     "autoprefixer": "^10.4.19",
+    "date-fns": "^3.6.0",
     "eslint": "^8.57.0",
+    "firebase": "^10.12.4",
+    "gql.tada": "^1.8.5",
+    "lucia": "^3.2.0",
+    "nanoid": "^5.0.7",
+    "next": "14.2.5",
     "postcss": "^8.4.40",
     "react": "^18.3.1",
-    "typescript": "^5.5.4",
-    "tailwindcss": "^3.4.7"
+    "tailwindcss": "^3.4.7",
+    "typescript": "^5.5.4"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",