From 16abf1162d8148b3a27739fa48730f797c4f8bed Mon Sep 17 00:00:00 2001
From: AugustinSorel <sorelaugustin@gmail.com>
Date: Mon, 1 Jul 2024 19:23:57 +0100
Subject: [PATCH 01/14] FEAT/delete account

---
 src/app/_components/header.tsx                | 59 --------------
 src/app/account/_components/card.tsx          | 33 ++++++--
 .../_components/deleteUserAccountCard.tsx     | 77 +++++++++++++++++++
 src/app/account/_components/userTeams.tsx     | 20 ++---
 src/app/account/layout.tsx                    |  2 +-
 src/app/account/page.tsx                      | 10 ++-
 6 files changed, 121 insertions(+), 80 deletions(-)
 create mode 100644 src/app/account/_components/deleteUserAccountCard.tsx

diff --git a/src/app/_components/header.tsx b/src/app/_components/header.tsx
index 5cc78db5..5307b5d2 100644
--- a/src/app/_components/header.tsx
+++ b/src/app/_components/header.tsx
@@ -9,7 +9,6 @@ import {
   Palette,
   Github,
   User,
-  Trash,
   LogOut,
   ChevronsUpDown,
   Check,
@@ -43,17 +42,6 @@ import {
 import { signOut, useSession } from "next-auth/react";
 import { Loader } from "@/components/ui/loader";
 import { useParams, usePathname } from "next/navigation";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
 import { useWeightUnit } from "@/context/weightUnit";
 import type { Exercise } from "@/server/db/types";
 import { type RouterOutputs, api } from "@/trpc/react";
@@ -113,8 +101,6 @@ const DropDownMenu = () => {
             </DropdownMenuLabel>
 
             <SignOutDropDownItem />
-
-            <DeleteAccountDropDownItem />
           </DropdownMenuGroup>
         )}
       </DropdownMenuContent>
@@ -258,51 +244,6 @@ const SignOutDropDownItem = () => {
   );
 };
 
-const DeleteAccountDropDownItem = () => {
-  const deleteAccount = api.user.delete.useMutation({
-    onSuccess: async () => {
-      await signOut({ callbackUrl: "/" });
-    },
-  });
-
-  return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <DropdownMenuItem
-          className="text-destructive/80 focus:bg-destructive/20 focus:text-destructive"
-          onSelect={(e) => e.preventDefault()}
-        >
-          <Trash className="mr-2 h-4 w-4" />
-          <span className="capitalize">delete account</span>
-        </DropdownMenuItem>
-      </AlertDialogTrigger>
-
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete your
-            account and remove your data from our servers.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel className="capitalize">cancel</AlertDialogCancel>
-          <AlertDialogAction
-            className="space-x-2 bg-destructive text-destructive-foreground hover:bg-destructive/80"
-            onClick={(e) => {
-              e.preventDefault();
-              void deleteAccount.mutate();
-            }}
-          >
-            {deleteAccount.isPending && <Loader />}
-            <span className="capitalize">delete</span>
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-};
-
 const HomeIcon = ({ children }: PropsWithChildren) => {
   const { data: session } = useSession();
 
diff --git a/src/app/account/_components/card.tsx b/src/app/account/_components/card.tsx
index a704515a..d77579c1 100644
--- a/src/app/account/_components/card.tsx
+++ b/src/app/account/_components/card.tsx
@@ -8,7 +8,7 @@ const Root = (props: ComponentPropsWithoutRef<"section">) => {
     <section
       {...props}
       className={cn(
-        "w-full space-y-3 border border-border bg-primary p-5 sm:rounded-md",
+        "w-full border border-border bg-primary sm:rounded-md",
         props.className,
       )}
     />
@@ -23,13 +23,15 @@ const ErrorFallback = (props: FallbackProps) => {
 
   return (
     <Card.Root className="border-destructive bg-destructive/5 hover:bg-destructive/10">
-      <Card.Title>Something else wrong</Card.Title>
-      <code className="flex max-h-full overflow-auto">
-        Error: {errorMessage}
-      </code>
-      <Button onClick={props.resetErrorBoundary} variant="destructive">
-        try again
-      </Button>
+      <Card.Body>
+        <Card.Title>Something else wrong</Card.Title>
+        <code className="flex max-h-full overflow-auto">
+          Error: {errorMessage}
+        </code>
+        <Button onClick={props.resetErrorBoundary} variant="destructive">
+          try again
+        </Button>
+      </Card.Body>
     </Card.Root>
   );
 };
@@ -47,9 +49,24 @@ const Description = (props: ComponentPropsWithoutRef<"p">) => {
   return <p className="text-sm" {...props} />;
 };
 
+const Body = (props: ComponentPropsWithoutRef<"div">) => {
+  return <div {...props} className="space-y-3 p-5" />;
+};
+
+const Footer = (props: ComponentPropsWithoutRef<"footer">) => {
+  return (
+    <footer
+      {...props}
+      className={cn("border-t border-border px-5 py-2", props.className)}
+    />
+  );
+};
+
 export const Card = {
   Root,
+  Body,
   ErrorFallback,
   Title,
   Description,
+  Footer,
 };
diff --git a/src/app/account/_components/deleteUserAccountCard.tsx b/src/app/account/_components/deleteUserAccountCard.tsx
new file mode 100644
index 00000000..2b77346b
--- /dev/null
+++ b/src/app/account/_components/deleteUserAccountCard.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card } from "./card";
+import { ErrorBoundary } from "react-error-boundary";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { api } from "@/trpc/react";
+import { signOut } from "next-auth/react";
+import { Loader } from "@/components/ui/loader";
+
+export const DeleteUserAccountCard = () => {
+  const deleteAccount = api.user.delete.useMutation({
+    onSuccess: async () => {
+      await signOut({ callbackUrl: "/" });
+    },
+  });
+
+  return (
+    <ErrorBoundary FallbackComponent={Card.ErrorFallback}>
+      <Card.Root className="border-destructive">
+        <Card.Body>
+          <Card.Title>delete account</Card.Title>
+          <Card.Description>
+            Permanently remove your Personal Account and all of its contents
+            from our servers. This action is not reversible, so please continue
+            with caution.
+          </Card.Description>
+        </Card.Body>
+
+        <Card.Footer className="flex border-destructive bg-destructive/10">
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button variant="destructive" className="ml-auto">
+                delete account
+              </Button>
+            </AlertDialogTrigger>
+
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This action cannot be undone. This will permanently delete
+                  your account and remove your data from our servers.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel className="capitalize">
+                  cancel
+                </AlertDialogCancel>
+                <AlertDialogAction
+                  className="space-x-2 bg-destructive text-destructive-foreground hover:bg-destructive/80"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    void deleteAccount.mutate();
+                  }}
+                >
+                  {deleteAccount.isPending && <Loader />}
+                  <span className="capitalize">delete</span>
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </Card.Footer>
+      </Card.Root>
+    </ErrorBoundary>
+  );
+};
diff --git a/src/app/account/_components/userTeams.tsx b/src/app/account/_components/userTeams.tsx
index d6efe613..b3dee8cb 100644
--- a/src/app/account/_components/userTeams.tsx
+++ b/src/app/account/_components/userTeams.tsx
@@ -58,15 +58,17 @@ export const UserTeamsCard = () => {
       {({ reset }) => (
         <ErrorBoundary FallbackComponent={Card.ErrorFallback} onReset={reset}>
           <Card.Root>
-            <Card.Title>teams</Card.Title>
-            <Card.Description>
-              Manage the Teams that you&apos;re a part of, join suggested ones,
-              or create a new one.
-            </Card.Description>
-
-            <List>
-              <Content />
-            </List>
+            <Card.Body>
+              <Card.Title>teams</Card.Title>
+              <Card.Description>
+                Manage the Teams that you&apos;re a part of, join suggested
+                ones, or create a new one.
+              </Card.Description>
+
+              <List>
+                <Content />
+              </List>
+            </Card.Body>
           </Card.Root>
         </ErrorBoundary>
       )}
diff --git a/src/app/account/layout.tsx b/src/app/account/layout.tsx
index 5f0fcd59..4af6eccc 100644
--- a/src/app/account/layout.tsx
+++ b/src/app/account/layout.tsx
@@ -7,7 +7,7 @@ const Layout = (props: PropsWithChildren) => {
         account settings
       </h1>
 
-      <div className="flex flex-col items-center justify-center sm:px-[max(calc((100vw-50rem)/2),1rem)]">
+      <div className="flex flex-col items-center justify-center gap-5 sm:px-[max(calc((100vw-50rem)/2),1rem)]">
         {props.children}
       </div>
     </main>
diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
index 33819282..29c34e2e 100644
--- a/src/app/account/page.tsx
+++ b/src/app/account/page.tsx
@@ -3,6 +3,7 @@ import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
 import { createSSRHelper } from "@/trpc/server";
 import { getServerAuthSession } from "@/server/auth";
 import { redirect } from "next/navigation";
+import { DeleteUserAccountCard } from "./_components/deleteUserAccountCard";
 
 const Page = async () => {
   const session = await getServerAuthSession();
@@ -15,9 +16,12 @@ const Page = async () => {
   await helpers.team.all.prefetch();
 
   return (
-    <HydrationBoundary state={dehydrate(helpers.queryClient)}>
-      <UserTeamsCard />
-    </HydrationBoundary>
+    <>
+      <HydrationBoundary state={dehydrate(helpers.queryClient)}>
+        <UserTeamsCard />
+      </HydrationBoundary>
+      <DeleteUserAccountCard />
+    </>
   );
 };
 

From ec06937f243c3164af0ad6282043d26941b12fa4 Mon Sep 17 00:00:00 2001
From: AugustinSorel <sorelaugustin@gmail.com>
Date: Mon, 1 Jul 2024 20:45:33 +0100
Subject: [PATCH 02/14] FEAT/userAccount card added

---
 src/app/account/_components/card.tsx          |  2 +-
 .../account/_components/userAccountTeam.tsx   | 38 +++++++++++++++++++
 src/app/account/_components/userTeams.tsx     |  3 ++
 src/app/account/page.tsx                      |  4 ++
 4 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 src/app/account/_components/userAccountTeam.tsx

diff --git a/src/app/account/_components/card.tsx b/src/app/account/_components/card.tsx
index d77579c1..769f6345 100644
--- a/src/app/account/_components/card.tsx
+++ b/src/app/account/_components/card.tsx
@@ -50,7 +50,7 @@ const Description = (props: ComponentPropsWithoutRef<"p">) => {
 };
 
 const Body = (props: ComponentPropsWithoutRef<"div">) => {
-  return <div {...props} className="space-y-3 p-5" />;
+  return <div {...props} className={cn("space-y-3 p-5", props.className)} />;
 };
 
 const Footer = (props: ComponentPropsWithoutRef<"footer">) => {
diff --git a/src/app/account/_components/userAccountTeam.tsx b/src/app/account/_components/userAccountTeam.tsx
new file mode 100644
index 00000000..0216547b
--- /dev/null
+++ b/src/app/account/_components/userAccountTeam.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { signOut } from "next-auth/react";
+import { Card } from "./card";
+import { Button } from "@/components/ui/button";
+import { useMutation } from "@tanstack/react-query";
+import { Loader } from "@/components/ui/loader";
+
+export const UserAccountCard = () => {
+  const signOutMutation = useMutation({
+    mutationFn: async () => {
+      return signOut({ callbackUrl: "/" });
+    },
+  });
+
+  return (
+    <Card.Root>
+      <Card.Body className="relative">
+        <Card.Title>account</Card.Title>
+        <Card.Description>
+          Email: <strong>sorelaugstin@gmail.com</strong>
+        </Card.Description>
+      </Card.Body>
+      <Card.Footer className="flex">
+        <Button
+          className="ml-auto space-x-2"
+          disabled={signOutMutation.isPending}
+          onClick={() => {
+            signOutMutation.mutate();
+          }}
+        >
+          {signOutMutation.isPending && <Loader />}
+          <span className="capitalize">sign out</span>
+        </Button>
+      </Card.Footer>
+    </Card.Root>
+  );
+};
diff --git a/src/app/account/_components/userTeams.tsx b/src/app/account/_components/userTeams.tsx
index b3dee8cb..8a0b7634 100644
--- a/src/app/account/_components/userTeams.tsx
+++ b/src/app/account/_components/userTeams.tsx
@@ -69,6 +69,9 @@ export const UserTeamsCard = () => {
                 <Content />
               </List>
             </Card.Body>
+            <Card.Footer className="flex">
+              <Button className="ml-auto">new team</Button>
+            </Card.Footer>
           </Card.Root>
         </ErrorBoundary>
       )}
diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
index 29c34e2e..1aa328d1 100644
--- a/src/app/account/page.tsx
+++ b/src/app/account/page.tsx
@@ -4,6 +4,7 @@ import { createSSRHelper } from "@/trpc/server";
 import { getServerAuthSession } from "@/server/auth";
 import { redirect } from "next/navigation";
 import { DeleteUserAccountCard } from "./_components/deleteUserAccountCard";
+import { UserAccountCard } from "./_components/userAccountTeam";
 
 const Page = async () => {
   const session = await getServerAuthSession();
@@ -17,9 +18,12 @@ const Page = async () => {
 
   return (
     <>
+      <UserAccountCard />
+
       <HydrationBoundary state={dehydrate(helpers.queryClient)}>
         <UserTeamsCard />
       </HydrationBoundary>
+
       <DeleteUserAccountCard />
     </>
   );

From 5f61d528deb672f76303226bf388c13ad08bf10b Mon Sep 17 00:00:00 2001
From: AugustinSorel <sorelaugustin@gmail.com>
Date: Mon, 1 Jul 2024 20:54:01 +0100
Subject: [PATCH 03/14] FEAT/github card added

---
 src/app/_components/header.tsx                | 17 ----------
 src/app/account/_components/card.tsx          |  5 ++-
 .../_components/deleteUserAccountCard.tsx     |  6 ++--
 src/app/account/_components/githubCard.tsx    | 31 +++++++++++++++++++
 .../account/_components/userAccountTeam.tsx   |  4 +--
 src/app/account/_components/userTeams.tsx     |  4 +--
 src/app/account/page.tsx                      |  3 ++
 7 files changed, 44 insertions(+), 26 deletions(-)
 create mode 100644 src/app/account/_components/githubCard.tsx

diff --git a/src/app/_components/header.tsx b/src/app/_components/header.tsx
index 5307b5d2..65ca40b9 100644
--- a/src/app/_components/header.tsx
+++ b/src/app/_components/header.tsx
@@ -87,8 +87,6 @@ const DropDownMenu = () => {
 
         <ThemeDropDownItem />
 
-        <GitHubDropDownitem />
-
         <AccountSettingsDropDownItem />
 
         {!session && <SignInDropDownItem />}
@@ -185,21 +183,6 @@ const ThemeDropDownItem = () => {
   );
 };
 
-const GitHubDropDownitem = () => {
-  return (
-    <DropdownMenuItem asChild>
-      <Link
-        href="https://github.com/augustinsorel/gym-graphs"
-        target="_blank"
-        className="flex w-full items-center"
-      >
-        <Github className="mr-2 h-4 w-4" />
-        <span className="capitalize">gitHub</span>
-      </Link>
-    </DropdownMenuItem>
-  );
-};
-
 const AccountSettingsDropDownItem = () => {
   return (
     <DropdownMenuItem asChild>
diff --git a/src/app/account/_components/card.tsx b/src/app/account/_components/card.tsx
index 769f6345..dcc736fb 100644
--- a/src/app/account/_components/card.tsx
+++ b/src/app/account/_components/card.tsx
@@ -57,7 +57,10 @@ const Footer = (props: ComponentPropsWithoutRef<"footer">) => {
   return (
     <footer
       {...props}
-      className={cn("border-t border-border px-5 py-2", props.className)}
+      className={cn(
+        "flex justify-end border-t border-border px-5 py-2",
+        props.className,
+      )}
     />
   );
 };
diff --git a/src/app/account/_components/deleteUserAccountCard.tsx b/src/app/account/_components/deleteUserAccountCard.tsx
index 2b77346b..d6416b6e 100644
--- a/src/app/account/_components/deleteUserAccountCard.tsx
+++ b/src/app/account/_components/deleteUserAccountCard.tsx
@@ -37,12 +37,10 @@ export const DeleteUserAccountCard = () => {
           </Card.Description>
         </Card.Body>
 
-        <Card.Footer className="flex border-destructive bg-destructive/10">
+        <Card.Footer className="border-destructive bg-destructive/10">
           <AlertDialog>
             <AlertDialogTrigger asChild>
-              <Button variant="destructive" className="ml-auto">
-                delete account
-              </Button>
+              <Button variant="destructive">delete account</Button>
             </AlertDialogTrigger>
 
             <AlertDialogContent>
diff --git a/src/app/account/_components/githubCard.tsx b/src/app/account/_components/githubCard.tsx
new file mode 100644
index 00000000..8cdf193e
--- /dev/null
+++ b/src/app/account/_components/githubCard.tsx
@@ -0,0 +1,31 @@
+import { Button } from "@/components/ui/button";
+import { Card } from "./card";
+import Link from "next/link";
+import { Github } from "lucide-react";
+
+export const GithubCard = () => {
+  return (
+    <Card.Root>
+      <Card.Body>
+        <Card.Title>github</Card.Title>
+        <Card.Description>
+          If you&apos;re interested in the behind-the-scenes development of our
+          platform, we invite you to explore the code on our Github! We highly
+          value feedback and contributions from our community.
+        </Card.Description>
+      </Card.Body>
+      <Card.Footer>
+        <Button asChild>
+          <Link
+            href="https://github.com/augustinsorel/gym-graphs"
+            target="_blank"
+            className="space-x-1"
+          >
+            <Github className="h-4 w-4" />
+            <span className="capitalize">view</span>
+          </Link>
+        </Button>
+      </Card.Footer>
+    </Card.Root>
+  );
+};
diff --git a/src/app/account/_components/userAccountTeam.tsx b/src/app/account/_components/userAccountTeam.tsx
index 0216547b..2c7e4fee 100644
--- a/src/app/account/_components/userAccountTeam.tsx
+++ b/src/app/account/_components/userAccountTeam.tsx
@@ -21,9 +21,9 @@ export const UserAccountCard = () => {
           Email: <strong>sorelaugstin@gmail.com</strong>
         </Card.Description>
       </Card.Body>
-      <Card.Footer className="flex">
+      <Card.Footer>
         <Button
-          className="ml-auto space-x-2"
+          className="space-x-2"
           disabled={signOutMutation.isPending}
           onClick={() => {
             signOutMutation.mutate();
diff --git a/src/app/account/_components/userTeams.tsx b/src/app/account/_components/userTeams.tsx
index 8a0b7634..94241faa 100644
--- a/src/app/account/_components/userTeams.tsx
+++ b/src/app/account/_components/userTeams.tsx
@@ -69,8 +69,8 @@ export const UserTeamsCard = () => {
                 <Content />
               </List>
             </Card.Body>
-            <Card.Footer className="flex">
-              <Button className="ml-auto">new team</Button>
+            <Card.Footer>
+              <Button>new team</Button>
             </Card.Footer>
           </Card.Root>
         </ErrorBoundary>
diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
index 1aa328d1..dde79406 100644
--- a/src/app/account/page.tsx
+++ b/src/app/account/page.tsx
@@ -5,6 +5,7 @@ import { getServerAuthSession } from "@/server/auth";
 import { redirect } from "next/navigation";
 import { DeleteUserAccountCard } from "./_components/deleteUserAccountCard";
 import { UserAccountCard } from "./_components/userAccountTeam";
+import { GithubCard } from "./_components/githubCard";
 
 const Page = async () => {
   const session = await getServerAuthSession();
@@ -24,6 +25,8 @@ const Page = async () => {
         <UserTeamsCard />
       </HydrationBoundary>
 
+      <GithubCard />
+
       <DeleteUserAccountCard />
     </>
   );

From 4d7b8add9c92c8b6181c820ca4684b170a39e4ca Mon Sep 17 00:00:00 2001
From: AugustinSorel <sorelaugustin@gmail.com>
Date: Mon, 1 Jul 2024 21:38:23 +0100
Subject: [PATCH 04/14] FEAT/theme added

---
 package.json                                  |   2 +
 pnpm-lock.yaml                                | 165 ++++++++++++++++++
 src/app/_components/header.tsx                |  70 +-------
 .../_components/themePreferenceCard.tsx       |  45 +++++
 src/app/account/layout.tsx                    |   2 +-
 src/app/account/page.tsx                      |   3 +
 src/components/ui/toggle-group.tsx            |  61 +++++++
 src/components/ui/toggle.tsx                  |  45 +++++
 8 files changed, 323 insertions(+), 70 deletions(-)
 create mode 100644 src/app/account/_components/themePreferenceCard.tsx
 create mode 100644 src/components/ui/toggle-group.tsx
 create mode 100644 src/components/ui/toggle.tsx

diff --git a/package.json b/package.json
index 126909c6..d6802333 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,8 @@
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tanstack/react-query": "^5.37.1",
     "@tanstack/react-query-devtools": "^5.37.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 16c81dd0..1942cfd0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,12 @@ importers:
       '@radix-ui/react-toast':
         specifier: ^1.1.5
         version: 1.1.5(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-toggle':
+        specifier: ^1.1.0
+        version: 1.1.0(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-toggle-group':
+        specifier: ^1.1.0
+        version: 1.1.0(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-tooltip':
         specifier: ^1.0.7
         version: 1.0.7(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -1230,6 +1236,9 @@ packages:
   '@radix-ui/primitive@1.0.1':
     resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
 
+  '@radix-ui/primitive@1.1.0':
+    resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==}
+
   '@radix-ui/react-alert-dialog@1.0.5':
     resolution: {integrity: sha512-OrVIOcZL0tl6xibeuGt5/+UxoT2N27KCFOPjFyfXMnchxSHZ/OW7cCX2nGlIYJrbHK/fczPcFzAwvNBB6XBNMA==}
     peerDependencies:
@@ -1282,6 +1291,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-collection@1.1.0':
+    resolution: {integrity: sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-compose-refs@1.0.1':
     resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
     peerDependencies:
@@ -1340,6 +1362,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-direction@1.1.0':
+    resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-dismissable-layer@1.0.5':
     resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==}
     peerDependencies:
@@ -1397,6 +1428,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-id@1.1.0':
+    resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-label@2.0.2':
     resolution: {integrity: sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==}
     peerDependencies:
@@ -1514,6 +1554,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-roving-focus@1.1.0':
+    resolution: {integrity: sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slot@1.0.2':
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
@@ -1545,6 +1598,32 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-toggle-group@1.1.0':
+    resolution: {integrity: sha512-PpTJV68dZU2oqqgq75Uzto5o/XfOVgkrJ9rulVmfTKxWp3HfUjHE6CP/WLRR4AzPX9HWxw7vFow2me85Yu+Naw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle@1.1.0':
+    resolution: {integrity: sha512-gwoxaKZ0oJ4vIgzsfESBuSgJNdc0rv12VhHgcqN0TEJmmZixXG/2XpsLK8kzNWYcnaoRIEEQc0bEi3dIvdUpjw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-tooltip@1.0.7':
     resolution: {integrity: sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==}
     peerDependencies:
@@ -1585,6 +1664,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-controllable-state@1.1.0':
+    resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-escape-keydown@1.0.3':
     resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==}
     peerDependencies:
@@ -5458,6 +5546,8 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.23.1
 
+  '@radix-ui/primitive@1.1.0': {}
+
   '@radix-ui/react-alert-dialog@1.0.5(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.23.1
@@ -5508,6 +5598,18 @@ snapshots:
       '@types/react': 18.2.6
       '@types/react-dom': 18.2.4
 
+  '@radix-ui/react-collection@1.1.0(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.2.6)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.6
+      '@types/react-dom': 18.2.4
+
   '@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.6)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.23.1
@@ -5564,6 +5666,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.6
 
+  '@radix-ui/react-direction@1.1.0(@types/react@18.2.6)(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.6
+
   '@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.23.1
@@ -5621,6 +5729,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.6
 
+  '@radix-ui/react-id@1.1.0(@types/react@18.2.6)(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.6)(react@18.2.0)
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.6
+
   '@radix-ui/react-label@2.0.2(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.23.1
@@ -5759,6 +5874,23 @@ snapshots:
       '@types/react': 18.2.6
       '@types/react-dom': 18.2.4
 
+  '@radix-ui/react-roving-focus@1.1.0(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.6)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.6
+      '@types/react-dom': 18.2.4
+
   '@radix-ui/react-slot@1.0.2(@types/react@18.2.6)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.23.1
@@ -5795,6 +5927,32 @@ snapshots:
       '@types/react': 18.2.6
       '@types/react-dom': 18.2.4
 
+  '@radix-ui/react-toggle-group@1.1.0(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-context': 1.1.0(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.2.6)(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-toggle': 1.1.0(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.6)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.6
+      '@types/react-dom': 18.2.4
+
+  '@radix-ui/react-toggle@1.1.0(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.6)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.6
+      '@types/react-dom': 18.2.4
+
   '@radix-ui/react-tooltip@1.0.7(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.23.1
@@ -5837,6 +5995,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.6
 
+  '@radix-ui/react-use-controllable-state@1.1.0(@types/react@18.2.6)(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.6)(react@18.2.0)
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.6
+
   '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.6)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.23.1
diff --git a/src/app/_components/header.tsx b/src/app/_components/header.tsx
index 65ca40b9..095428d5 100644
--- a/src/app/_components/header.tsx
+++ b/src/app/_components/header.tsx
@@ -6,10 +6,8 @@ import { Button } from "@/components/ui/button";
 import {
   ArrowLeftRight,
   Menu,
-  Palette,
   Github,
   User,
-  LogOut,
   ChevronsUpDown,
   Check,
   Megaphone,
@@ -19,7 +17,6 @@ import {
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuPortal,
@@ -32,21 +29,19 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useState, type PropsWithChildren } from "react";
-import { useTheme } from "next-themes";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { signOut, useSession } from "next-auth/react";
+import { useSession } from "next-auth/react";
 import { Loader } from "@/components/ui/loader";
 import { useParams, usePathname } from "next/navigation";
 import { useWeightUnit } from "@/context/weightUnit";
 import type { Exercise } from "@/server/db/types";
 import { type RouterOutputs, api } from "@/trpc/react";
 import { Skeleton } from "@/components/ui/skeleton";
-import { useMutation } from "@tanstack/react-query";
 import {
   Dialog,
   DialogContent,
@@ -85,22 +80,9 @@ const DropDownMenu = () => {
 
         {session && <WeightDropDownItem />}
 
-        <ThemeDropDownItem />
-
         <AccountSettingsDropDownItem />
 
         {!session && <SignInDropDownItem />}
-
-        {session && (
-          <DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuLabel className="capitalize">
-              danger zone
-            </DropdownMenuLabel>
-
-            <SignOutDropDownItem />
-          </DropdownMenuGroup>
-        )}
       </DropdownMenuContent>
     </DropdownMenu>
   );
@@ -155,34 +137,6 @@ const WeightDropDownItem = () => {
   );
 };
 
-const ThemeDropDownItem = () => {
-  const { theme, setTheme } = useTheme();
-
-  return (
-    <DropdownMenuSub>
-      <DropdownMenuSubTrigger>
-        <Palette className="mr-2 h-4 w-4" />
-        <span className="capitalize">theme</span>
-      </DropdownMenuSubTrigger>
-      <DropdownMenuPortal>
-        <DropdownMenuSubContent>
-          <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
-            <DropdownMenuRadioItem value="light" className="capitalize">
-              light
-            </DropdownMenuRadioItem>
-            <DropdownMenuRadioItem value="dark" className="capitalize">
-              dark
-            </DropdownMenuRadioItem>
-            <DropdownMenuRadioItem value="system" className="capitalize">
-              system
-            </DropdownMenuRadioItem>
-          </DropdownMenuRadioGroup>
-        </DropdownMenuSubContent>
-      </DropdownMenuPortal>
-    </DropdownMenuSub>
-  );
-};
-
 const AccountSettingsDropDownItem = () => {
   return (
     <DropdownMenuItem asChild>
@@ -205,28 +159,6 @@ const SignInDropDownItem = () => {
   );
 };
 
-const SignOutDropDownItem = () => {
-  const signOutMutation = useMutation({
-    mutationFn: async () => {
-      return signOut({ callbackUrl: "/" });
-    },
-  });
-
-  return (
-    <DropdownMenuItem
-      className="space-x-2"
-      onClick={(e) => {
-        e.preventDefault();
-        signOutMutation.mutate();
-      }}
-    >
-      {signOutMutation.isPending && <Loader />}
-      <LogOut className="h-4 w-4" />
-      <span className="capitalize">sign out</span>
-    </DropdownMenuItem>
-  );
-};
-
 const HomeIcon = ({ children }: PropsWithChildren) => {
   const { data: session } = useSession();
 
diff --git a/src/app/account/_components/themePreferenceCard.tsx b/src/app/account/_components/themePreferenceCard.tsx
new file mode 100644
index 00000000..83909322
--- /dev/null
+++ b/src/app/account/_components/themePreferenceCard.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { Computer, Moon, Sun } from "lucide-react";
+import { Card } from "./card";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+export const ThemePreferenceCard = () => {
+  const [selectedTheme, setSelectedTheme] = useState<string>("");
+
+  const theme = useTheme();
+
+  useEffect(() => {
+    setSelectedTheme(theme.theme ?? "system");
+  }, [theme.theme]);
+
+  return (
+    <Card.Root>
+      <Card.Body>
+        <Card.Title>theme</Card.Title>
+        <Card.Description>change theme</Card.Description>
+      </Card.Body>
+      <Card.Footer>
+        <ToggleGroup
+          type="single"
+          disabled={!selectedTheme}
+          value={selectedTheme}
+          variant="outline"
+          onValueChange={theme.setTheme}
+        >
+          <ToggleGroupItem value="light" aria-label="Change theme to light">
+            <Sun className="h-4 w-4" />
+          </ToggleGroupItem>
+          <ToggleGroupItem value="dark" aria-label="Change theme to dark">
+            <Moon className="h-4 w-4" />
+          </ToggleGroupItem>
+          <ToggleGroupItem value="system" aria-label="Change theme to system">
+            <Computer className="h-4 w-4" />
+          </ToggleGroupItem>
+        </ToggleGroup>
+      </Card.Footer>
+    </Card.Root>
+  );
+};
diff --git a/src/app/account/layout.tsx b/src/app/account/layout.tsx
index 4af6eccc..726a2948 100644
--- a/src/app/account/layout.tsx
+++ b/src/app/account/layout.tsx
@@ -2,7 +2,7 @@ import type { PropsWithChildren } from "react";
 
 const Layout = (props: PropsWithChildren) => {
   return (
-    <main className="space-y-5">
+    <main className="space-y-5 pb-5">
       <h1 className="col-span-2 border-b border-border px-[max(calc((100vw-50rem)/2),1rem)] py-10 text-3xl font-medium capitalize">
         account settings
       </h1>
diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
index dde79406..392ee5ff 100644
--- a/src/app/account/page.tsx
+++ b/src/app/account/page.tsx
@@ -6,6 +6,7 @@ import { redirect } from "next/navigation";
 import { DeleteUserAccountCard } from "./_components/deleteUserAccountCard";
 import { UserAccountCard } from "./_components/userAccountTeam";
 import { GithubCard } from "./_components/githubCard";
+import { ThemePreferenceCard } from "./_components/themePreferenceCard";
 
 const Page = async () => {
   const session = await getServerAuthSession();
@@ -21,6 +22,8 @@ const Page = async () => {
     <>
       <UserAccountCard />
 
+      <ThemePreferenceCard />
+
       <HydrationBoundary state={dehydrate(helpers.queryClient)}>
         <UserTeamsCard />
       </HydrationBoundary>
diff --git a/src/components/ui/toggle-group.tsx b/src/components/ui/toggle-group.tsx
new file mode 100644
index 00000000..a7ab2708
--- /dev/null
+++ b/src/components/ui/toggle-group.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import type { VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { toggleVariants } from "@/components/ui/toggle";
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+});
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant ?? variant,
+          size: context.size ?? size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };
diff --git a/src/components/ui/toggle.tsx b/src/components/ui/toggle.tsx
new file mode 100644
index 00000000..bc72ad7e
--- /dev/null
+++ b/src/components/ui/toggle.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-primary data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-border bg-transparent hover:bg-primary hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

From 239a0de1b658117711e2c33213f213a916b2c0ed Mon Sep 17 00:00:00 2001
From: AugustinSorel <sorelaugustin@gmail.com>
Date: Mon, 1 Jul 2024 21:42:04 +0100
Subject: [PATCH 05/14] REFACTOR/card fallback better

---
 src/app/account/_components/card.tsx          |  4 +-
 .../_components/themePreferenceCard.tsx       | 55 ++++++++++---------
 2 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/src/app/account/_components/card.tsx b/src/app/account/_components/card.tsx
index dcc736fb..b3468505 100644
--- a/src/app/account/_components/card.tsx
+++ b/src/app/account/_components/card.tsx
@@ -28,10 +28,12 @@ const ErrorFallback = (props: FallbackProps) => {
         <code className="flex max-h-full overflow-auto">
           Error: {errorMessage}
         </code>
+      </Card.Body>
+      <Card.Footer className="border-destructive">
         <Button onClick={props.resetErrorBoundary} variant="destructive">
           try again
         </Button>
-      </Card.Body>
+      </Card.Footer>
     </Card.Root>
   );
 };
diff --git a/src/app/account/_components/themePreferenceCard.tsx b/src/app/account/_components/themePreferenceCard.tsx
index 83909322..386957d6 100644
--- a/src/app/account/_components/themePreferenceCard.tsx
+++ b/src/app/account/_components/themePreferenceCard.tsx
@@ -5,6 +5,7 @@ import { Card } from "./card";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
+import { ErrorBoundary } from "react-error-boundary";
 
 export const ThemePreferenceCard = () => {
   const [selectedTheme, setSelectedTheme] = useState<string>("");
@@ -16,30 +17,34 @@ export const ThemePreferenceCard = () => {
   }, [theme.theme]);
 
   return (
-    <Card.Root>
-      <Card.Body>
-        <Card.Title>theme</Card.Title>
-        <Card.Description>change theme</Card.Description>
-      </Card.Body>
-      <Card.Footer>
-        <ToggleGroup
-          type="single"
-          disabled={!selectedTheme}
-          value={selectedTheme}
-          variant="outline"
-          onValueChange={theme.setTheme}
-        >
-          <ToggleGroupItem value="light" aria-label="Change theme to light">
-            <Sun className="h-4 w-4" />
-          </ToggleGroupItem>
-          <ToggleGroupItem value="dark" aria-label="Change theme to dark">
-            <Moon className="h-4 w-4" />
-          </ToggleGroupItem>
-          <ToggleGroupItem value="system" aria-label="Change theme to system">
-            <Computer className="h-4 w-4" />
-          </ToggleGroupItem>
-        </ToggleGroup>
-      </Card.Footer>
-    </Card.Root>
+    <ErrorBoundary FallbackComponent={Card.ErrorFallback}>
+      <Card.Root>
+        <Card.Body>
+          <Card.Title>theme</Card.Title>
+          <Card.Description>
+            Make your workspace truly yours with our flexible theme options.
+          </Card.Description>
+        </Card.Body>
+        <Card.Footer>
+          <ToggleGroup
+            type="single"
+            disabled={!selectedTheme}
+            value={selectedTheme}
+            variant="outline"
+            onValueChange={theme.setTheme}
+          >
+            <ToggleGroupItem value="light" aria-label="Change theme to light">
+              <Sun className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="dark" aria-label="Change theme to dark">
+              <Moon className="h-4 w-4" />
+            </ToggleGroupItem>
+            <ToggleGroupItem value="system" aria-label="Change theme to system">
+              <Computer className="h-4 w-4" />
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </Card.Footer>
+      </Card.Root>
+    </ErrorBoundary>
   );
 };

From 0cbe3de055ca810f7d462e420d320a39a8ee6a43 Mon Sep 17 00:00:00 2001
From: AugustinSorel <sorelaugustin@gmail.com>
Date: Mon, 1 Jul 2024 21:59:56 +0100
Subject: [PATCH 06/14] FEAT/weight unit

---
 src/app/_components/header.tsx                | 32 ---------------
 .../_components/themePreferenceCard.tsx       |  4 +-
 .../_components/weightUnitPreference.tsx      | 40 +++++++++++++++++++
 src/app/account/page.tsx                      |  3 ++
 src/context/weightUnit.tsx                    | 12 ++----
 5 files changed, 49 insertions(+), 42 deletions(-)
 create mode 100644 src/app/account/_components/weightUnitPreference.tsx

diff --git a/src/app/_components/header.tsx b/src/app/_components/header.tsx
index 095428d5..23754d9e 100644
--- a/src/app/_components/header.tsx
+++ b/src/app/_components/header.tsx
@@ -78,8 +78,6 @@ const DropDownMenu = () => {
 
         <DropdownMenuSeparator />
 
-        {session && <WeightDropDownItem />}
-
         <AccountSettingsDropDownItem />
 
         {!session && <SignInDropDownItem />}
@@ -107,36 +105,6 @@ const MenuIcon = () => {
   );
 };
 
-const WeightDropDownItem = () => {
-  const weightUnit = useWeightUnit();
-
-  return (
-    <DropdownMenuSub>
-      <DropdownMenuSubTrigger>
-        <ArrowLeftRight className="mr-2 h-4 w-4" />
-        <span className="capitalize">unit - ({weightUnit.get})</span>
-      </DropdownMenuSubTrigger>
-      <DropdownMenuPortal>
-        <DropdownMenuSubContent>
-          <DropdownMenuRadioGroup
-            value={weightUnit.get}
-            onValueChange={(e) =>
-              weightUnit.set(e as Parameters<typeof weightUnit.set>[0])
-            }
-          >
-            <DropdownMenuRadioItem value="kg" className="capitalize">
-              kg
-            </DropdownMenuRadioItem>
-            <DropdownMenuRadioItem value="lb" className="capitalize">
-              lb
-            </DropdownMenuRadioItem>
-          </DropdownMenuRadioGroup>
-        </DropdownMenuSubContent>
-      </DropdownMenuPortal>
-    </DropdownMenuSub>
-  );
-};
-
 const AccountSettingsDropDownItem = () => {
   return (
     <DropdownMenuItem asChild>
diff --git a/src/app/account/_components/themePreferenceCard.tsx b/src/app/account/_components/themePreferenceCard.tsx
index 386957d6..9f399e07 100644
--- a/src/app/account/_components/themePreferenceCard.tsx
+++ b/src/app/account/_components/themePreferenceCard.tsx
@@ -8,7 +8,7 @@ import { useEffect, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
 export const ThemePreferenceCard = () => {
-  const [selectedTheme, setSelectedTheme] = useState<string>("");
+  const [selectedTheme, setSelectedTheme] = useState<string | null>(null);
 
   const theme = useTheme();
 
@@ -29,7 +29,7 @@ export const ThemePreferenceCard = () => {
           <ToggleGroup
             type="single"
             disabled={!selectedTheme}
-            value={selectedTheme}
+            value={selectedTheme ?? "no-choice"}
             variant="outline"
             onValueChange={theme.setTheme}
           >
diff --git a/src/app/account/_components/weightUnitPreference.tsx b/src/app/account/_components/weightUnitPreference.tsx
new file mode 100644
index 00000000..4c02dd82
--- /dev/null
+++ b/src/app/account/_components/weightUnitPreference.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { ErrorBoundary } from "react-error-boundary";
+import { Card } from "./card";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { useWeightUnit, weightUnitSchema } from "@/context/weightUnit";
+
+export const WeightUnitPreferenceCard = () => {
+  const weightUnit = useWeightUnit();
+
+  return (
+    <ErrorBoundary FallbackComponent={Card.ErrorFallback}>
+      <Card.Root>
+        <Card.Body>
+          <Card.Title>weight unit</Card.Title>
+          <Card.Description>
+            Tailor your experience by selecting your preferred weight unit.
+          </Card.Description>
+        </Card.Body>
+        <Card.Footer>
+          <ToggleGroup
+            type="single"
+            value={weightUnit.get}
+            variant="outline"
+            onValueChange={(d) => {
+              weightUnit.set(weightUnitSchema.parse(d));
+            }}
+          >
+            <ToggleGroupItem value="lb" aria-label="Change weight unit to lbs">
+              <span>lbs</span>
+            </ToggleGroupItem>
+            <ToggleGroupItem value="kg" aria-label="Change weight unit to kg">
+              <span>kg</span>
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </Card.Footer>
+      </Card.Root>
+    </ErrorBoundary>
+  );
+};
diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
index 392ee5ff..fb48502a 100644
--- a/src/app/account/page.tsx
+++ b/src/app/account/page.tsx
@@ -7,6 +7,7 @@ import { DeleteUserAccountCard } from "./_components/deleteUserAccountCard";
 import { UserAccountCard } from "./_components/userAccountTeam";
 import { GithubCard } from "./_components/githubCard";
 import { ThemePreferenceCard } from "./_components/themePreferenceCard";
+import { WeightUnitPreferenceCard } from "./_components/weightUnitPreference";
 
 const Page = async () => {
   const session = await getServerAuthSession();
@@ -24,6 +25,8 @@ const Page = async () => {
 
       <ThemePreferenceCard />
 
+      <WeightUnitPreferenceCard />
+
       <HydrationBoundary state={dehydrate(helpers.queryClient)}>
         <UserTeamsCard />
       </HydrationBoundary>
diff --git a/src/context/weightUnit.tsx b/src/context/weightUnit.tsx
index 198a2148..487e31cf 100644
--- a/src/context/weightUnit.tsx
+++ b/src/context/weightUnit.tsx
@@ -5,7 +5,7 @@ import { createContext, useContext } from "react";
 
 const WEIGHT_KEY = "weightUnit";
 
-const weightUnitSchema = z.enum(["kg", "lb"]);
+export const weightUnitSchema = z.enum(["kg", "lb"]).catch("kg");
 export type WeightUnit = z.infer<typeof weightUnitSchema>;
 
 type WeightUnitContext = {
@@ -19,11 +19,7 @@ export const WeightUnitProvider = ({ children }: PropsWithChildren) => {
   const [weightUnit, setWweightUnit] = useState<WeightUnit>("kg");
 
   useEffect(() => {
-    try {
-      setWweightUnit(weightUnitSchema.parse(localStorage.getItem(WEIGHT_KEY)));
-    } catch (error) {
-      setWweightUnit("kg");
-    }
+    setWweightUnit(weightUnitSchema.parse(localStorage.getItem(WEIGHT_KEY)));
   }, []);
 
   return (
@@ -31,7 +27,7 @@ export const WeightUnitProvider = ({ children }: PropsWithChildren) => {
       value={{
         get: weightUnit,
         set: (newWeightValue) => {
-          localStorage.setItem(WEIGHT_KEY, newWeightValue ?? "kg");
+          localStorage.setItem(WEIGHT_KEY, newWeightValue);
           setWweightUnit(newWeightValue);
         },
       }}
@@ -46,7 +42,7 @@ export const useWeightUnit = () => {
 
   if (!currentWeightUnitContext) {
     throw new Error(
-      "useWeightUnit has to be used within <WeightUnitProvider.Provider>"
+      "useWeightUnit has to be used within <WeightUnitProvider.Provider>",
     );
   }
 

From 0ced2c3f2e2cc005fc8e472c9f909ed51028a398 Mon Sep 17 00:00:00 2001
From: AugustinSorel <sorelaugustin@gmail.com>
Date: Mon, 1 Jul 2024 22:01:08 +0100
Subject: [PATCH 07/14] FIX/linter

---
 src/app/_components/header.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/app/_components/header.tsx b/src/app/_components/header.tsx
index 23754d9e..92657c67 100644
--- a/src/app/_components/header.tsx
+++ b/src/app/_components/header.tsx
@@ -4,7 +4,6 @@ import { Icon } from "@/components/ui/icon";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import {
-  ArrowLeftRight,
   Menu,
   Github,
   User,
@@ -19,13 +18,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
   DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useState, type PropsWithChildren } from "react";
@@ -38,7 +31,6 @@ import {
 import { useSession } from "next-auth/react";
 import { Loader } from "@/components/ui/loader";
 import { useParams, usePathname } from "next/navigation";
-import { useWeightUnit } from "@/context/weightUnit";
 import type { Exercise } from "@/server/db/types";
 import { type RouterOutputs, api } from "@/trpc/react";
 import { Skeleton } from "@/components/ui/skeleton";

From 0991d0510c7ef464baac7cb7d2fdd44bd5150cbc Mon Sep 17 00:00:00 2001
From: AugustinSorel <sorelaugustin@gmail.com>
Date: Mon, 1 Jul 2024 22:36:19 +0100
Subject: [PATCH 08/14] CHORE/todos added

---
 src/app/_components/header.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/_components/header.tsx b/src/app/_components/header.tsx
index 92657c67..1ab7ce2c 100644
--- a/src/app/_components/header.tsx
+++ b/src/app/_components/header.tsx
@@ -58,6 +58,7 @@ import { useRouter } from "next/navigation";
 import { useTeam } from "../teams/[id]/_components/useTeam";
 import { useTeams } from "../teams/_components/useTeams";
 
+//TODO: remove this
 const DropDownMenu = () => {
   const { data: session } = useSession();
 
@@ -355,6 +356,7 @@ const CurrentTeam = ({ id }: { id: string }) => {
   );
 };
 
+//TODO:error handling here
 export const Header = () => {
   const pathname = usePathname().split("/");
 

From 0ca9c53388e210bccb49965bf991fac86b5d699e Mon Sep 17 00:00:00 2001
From: AugustinSorel <sorelaugustin@gmail.com>
Date: Mon, 1 Jul 2024 22:36:29 +0100
Subject: [PATCH 09/14] FIX/unit not showing correctly

---
 .../_exerciseDataGraph/exerciseDataGraph.tsx     | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/app/exercises/[id]/_exerciseDataGraph/exerciseDataGraph.tsx b/src/app/exercises/[id]/_exerciseDataGraph/exerciseDataGraph.tsx
index 9cc93068..5979c423 100644
--- a/src/app/exercises/[id]/_exerciseDataGraph/exerciseDataGraph.tsx
+++ b/src/app/exercises/[id]/_exerciseDataGraph/exerciseDataGraph.tsx
@@ -120,16 +120,16 @@ const MainGraph = ({
 
       const { x } = localPoint(event) ?? { x: 0 };
       const x0 = dateScale.invert(x);
-      const index = exercise.data.findIndex(
+      const index = exercise.filteredData.findIndex(
         (d) => getDate(d).getTime() > x0.getTime(),
       );
-      const d0 = exercise.data[index - 1] ??
-        exercise.data.at(-1) ?? {
+      const d0 = exercise.filteredData[index - 1] ??
+        exercise.filteredData.at(-1) ?? {
           doneAt: new Date().toString(),
           numberOfRepetitions: 0,
           weightLifted: 0,
         };
-      const d1 = exercise.data[index];
+      const d1 = exercise.filteredData[index];
       let d = d0;
       if (d1 && getDate(d1)) {
         d =
@@ -144,13 +144,7 @@ const MainGraph = ({
         tooltipTop: oneRepMaxScale(getOneRepMax(d)),
       });
     },
-    [
-      dateScale,
-      tooltip,
-      oneRepMaxScale,
-      exercise.filteredData.length,
-      exercise.data,
-    ],
+    [dateScale, tooltip, oneRepMaxScale, exercise.filteredData],
   );
 
   if (exercise.filteredData.length < 1) {

From 22b07709c7a483bedcf92b3930251bbdd4cf51ca Mon Sep 17 00:00:00 2001
From: AugustinSorel <sorelaugustin@gmail.com>
Date: Mon, 1 Jul 2024 22:50:12 +0100
Subject: [PATCH 10/14] REFACTOR/better fn name

---
 .../[id]/_components/exercisePageContext.tsx        | 13 ++++++++-----
 src/lib/math.ts                                     |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/app/exercises/[id]/_components/exercisePageContext.tsx b/src/app/exercises/[id]/_components/exercisePageContext.tsx
index 1671f06f..beb37188 100644
--- a/src/app/exercises/[id]/_components/exercisePageContext.tsx
+++ b/src/app/exercises/[id]/_components/exercisePageContext.tsx
@@ -11,7 +11,7 @@ import {
 } from "react";
 import { useExercisePageSearchParams } from "./useExercisePageSearchParams";
 import type { ExerciseData, ExerciseWithData } from "@/server/db/types";
-import { convertWeightToLbs } from "@/lib/math";
+import { convertWeight } from "@/lib/math";
 import { useWeightUnit } from "@/context/weightUnit";
 
 const ExercisePageContext = createContext<
@@ -46,6 +46,12 @@ export const ExercisePageContextProvider = (
         filter: setDatesFilter,
         exercise: {
           ...props.exercise,
+          data: props.exercise.data.map((d) => {
+            return {
+              ...d,
+              weightLifted: convertWeight(d.weightLifted, weightUnit.get),
+            };
+          }),
           filteredData: props.exercise.data
             .filter((d) => {
               if (datesFilter.from && !datesFilter.to) {
@@ -76,10 +82,7 @@ export const ExercisePageContextProvider = (
             .map((d) => {
               return {
                 ...d,
-                weightLifted: convertWeightToLbs(
-                  d.weightLifted,
-                  weightUnit.get,
-                ),
+                weightLifted: convertWeight(d.weightLifted, weightUnit.get),
               };
             }),
         },
diff --git a/src/lib/math.ts b/src/lib/math.ts
index 35075427..adff416a 100644
--- a/src/lib/math.ts
+++ b/src/lib/math.ts
@@ -10,7 +10,7 @@ export const calculateOneRepMax = (
   return +(weightLifted * (1 + numberOfReps / 30)).toFixed(2);
 };
 
-export const convertWeightToLbs = (weight: number, unit: WeightUnit) => {
+export const convertWeight = (weight: number, unit: WeightUnit) => {
   if (unit === "lb") {
     return +(weight * LBS_CONVERTION).toFixed(2);
   }

From b5a88234a20899271f308f4e1084220ae16e4c4d Mon Sep 17 00:00:00 2001
From: AugustinSorel <sorelaugustin@gmail.com>
Date: Tue, 2 Jul 2024 18:04:15 +0100
Subject: [PATCH 11/14] REFACTOR/old menu dropdown removed

---
 src/app/_components/header.tsx | 93 ++++++++++------------------------
 1 file changed, 27 insertions(+), 66 deletions(-)

diff --git a/src/app/_components/header.tsx b/src/app/_components/header.tsx
index 1ab7ce2c..19f99891 100644
--- a/src/app/_components/header.tsx
+++ b/src/app/_components/header.tsx
@@ -4,9 +4,7 @@ import { Icon } from "@/components/ui/icon";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import {
-  Menu,
   Github,
-  User,
   ChevronsUpDown,
   Check,
   Megaphone,
@@ -58,68 +56,6 @@ import { useRouter } from "next/navigation";
 import { useTeam } from "../teams/[id]/_components/useTeam";
 import { useTeams } from "../teams/_components/useTeams";
 
-//TODO: remove this
-const DropDownMenu = () => {
-  const { data: session } = useSession();
-
-  return (
-    <DropdownMenu>
-      <MenuIcon />
-
-      <DropdownMenuContent className="mr-4 w-56">
-        <DropdownMenuLabel className="capitalize">settings</DropdownMenuLabel>
-
-        <DropdownMenuSeparator />
-
-        <AccountSettingsDropDownItem />
-
-        {!session && <SignInDropDownItem />}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};
-
-const MenuIcon = () => {
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <DropdownMenuTrigger asChild>
-            <Button size="icon" aria-label="menu">
-              <Menu className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p className="capitalize">menu</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-};
-
-const AccountSettingsDropDownItem = () => {
-  return (
-    <DropdownMenuItem asChild>
-      <Link href="/account" className="flex w-full items-center">
-        <Settings className="mr-2 h-4 w-4" />
-        <span className="capitalize">settings</span>
-      </Link>
-    </DropdownMenuItem>
-  );
-};
-
-const SignInDropDownItem = () => {
-  return (
-    <DropdownMenuItem asChild>
-      <Link href="/sign-in" className="flex w-full items-center">
-        <User className="mr-2 h-4 w-4" />
-        <span className="capitalize">sign in</span>
-      </Link>
-    </DropdownMenuItem>
-  );
-};
-
 const HomeIcon = ({ children }: PropsWithChildren) => {
   const { data: session } = useSession();
 
@@ -358,6 +294,7 @@ const CurrentTeam = ({ id }: { id: string }) => {
 
 //TODO:error handling here
 export const Header = () => {
+  const session = useSession();
   const pathname = usePathname().split("/");
 
   const showExecisesPath = pathname[1] === "exercises";
@@ -386,12 +323,36 @@ export const Header = () => {
 
         {showTeamPath && teamId && <CurrentTeam id={teamId} />}
       </nav>
-      <FeatureRequest />
-      <DropDownMenu />
+
+      {session.status === "authenticated" && (
+        <>
+          <FeatureRequest />
+          <SettingsLink />
+        </>
+      )}
     </header>
   );
 };
 
+const SettingsLink = () => {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button size="icon" aria-label="menu" variant="ghost" asChild>
+            <Link href="/account">
+              <Settings className="h-4 w-4" />
+            </Link>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p className="capitalize">settings</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
 const FeatureRequest = () => {
   return (
     <DropdownMenu>

From 46fa11f0e1348af06a402be3641a8fa4434d14c3 Mon Sep 17 00:00:00 2001
From: AugustinSorel <sorelaugustin@gmail.com>
Date: Tue, 2 Jul 2024 18:15:43 +0100
Subject: [PATCH 12/14] REFACTOR/create exercise dialog

---
 src/app/_components/header.tsx            | 161 ++--------------------
 src/app/account/_components/userTeams.tsx |   5 +-
 src/components/teams/createTeamDialog.tsx | 144 +++++++++++++++++++
 3 files changed, 158 insertions(+), 152 deletions(-)
 create mode 100644 src/components/teams/createTeamDialog.tsx

diff --git a/src/app/_components/header.tsx b/src/app/_components/header.tsx
index 19f99891..dd79ff37 100644
--- a/src/app/_components/header.tsx
+++ b/src/app/_components/header.tsx
@@ -8,8 +8,8 @@ import {
   ChevronsUpDown,
   Check,
   Megaphone,
-  Plus,
   Settings,
+  Plus,
 } from "lucide-react";
 import {
   DropdownMenu,
@@ -19,7 +19,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { useState, type PropsWithChildren } from "react";
+import { type PropsWithChildren } from "react";
 import {
   Tooltip,
   TooltipContent,
@@ -27,34 +27,13 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { useSession } from "next-auth/react";
-import { Loader } from "@/components/ui/loader";
 import { useParams, usePathname } from "next/navigation";
 import type { Exercise } from "@/server/db/types";
-import { type RouterOutputs, api } from "@/trpc/react";
+import { api } from "@/trpc/react";
 import { Skeleton } from "@/components/ui/skeleton";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { useForm } from "react-hook-form";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { teamSchema } from "@/schemas/team.schemas";
-import { zodResolver } from "@hookform/resolvers/zod";
-import type { z } from "zod";
-import { useRouter } from "next/navigation";
 import { useTeam } from "../teams/[id]/_components/useTeam";
 import { useTeams } from "../teams/_components/useTeams";
+import { CreateTeamDialog } from "@/components/teams/createTeamDialog";
 
 const HomeIcon = ({ children }: PropsWithChildren) => {
   const { data: session } = useSession();
@@ -177,7 +156,12 @@ const DashboardLink = () => {
 
           <DropdownMenuSeparator />
 
-          <CreateTeamDialog />
+          <CreateTeamDialog>
+            <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+              <Plus className="mr-2 h-4 w-4" />
+              <span className="first-letter:capitalize">create a team</span>
+            </DropdownMenuItem>
+          </CreateTeamDialog>
         </DropdownMenuContent>
       </DropdownMenu>
     </>
@@ -391,128 +375,3 @@ const FeatureRequest = () => {
     </DropdownMenu>
   );
 };
-
-const CreateTeamDialog = () => {
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const formSchema = useFormSchema();
-  const utils = api.useUtils();
-  const router = useRouter();
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: { name: "" },
-  });
-
-  const createTeam = api.team.create.useMutation({
-    onSuccess: (team) => {
-      setIsDialogOpen(false);
-      router.push(`/teams/${team.id}`);
-    },
-    onMutate: async (variables) => {
-      await utils.team.all.cancel();
-
-      const teams = utils.team.all.getData();
-
-      if (!teams) {
-        return;
-      }
-
-      const optimisticTeam: RouterOutputs["team"]["all"][number] = {
-        memberId: Math.random().toString(),
-        teamId: Math.random().toString(),
-        team: {
-          id: Math.random().toString(),
-          authorId: Math.random().toString(),
-          name: variables.name,
-          createdAt: new Date(),
-          updatedAt: new Date(),
-          author: {
-            email: "",
-            id: Math.random().toString(),
-            emailVerified: null,
-            image: null,
-            name: null,
-          },
-        },
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      };
-
-      utils.team.all.setData(undefined, [...teams, optimisticTeam]);
-    },
-    onSettled: () => {
-      void utils.team.all.invalidate();
-    },
-  });
-
-  const onSubmit = (values: z.infer<typeof formSchema>) => {
-    createTeam.mutate(values);
-  };
-
-  return (
-    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-          <Plus className="mr-2 h-4 w-4" />
-          <span className="first-letter:capitalize">create a team</span>
-        </DropdownMenuItem>
-      </DialogTrigger>
-
-      <DialogContent className="space-y-5 sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle className="first-letter:capitalize">
-            create a team
-          </DialogTitle>
-        </DialogHeader>
-        <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="flex flex-col gap-4"
-          >
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>team name</FormLabel>
-                  <FormControl>
-                    <Input placeholder="friends" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <Button
-              type="submit"
-              disabled={createTeam.isPending}
-              className="ml-auto"
-            >
-              {createTeam.isPending && <Loader className="mr-2" />}
-              <span className="capitalize">save</span>
-            </Button>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-const useFormSchema = () => {
-  const utils = api.useUtils();
-
-  return teamSchema.pick({ name: true }).refine(
-    (data) => {
-      const teams = utils.team.all.getData();
-
-      return !teams?.find(
-        (team) => team.team.name.toLowerCase() === data.name.toLowerCase(),
-      );
-    },
-    (data) => {
-      return {
-        message: `${data.name} is already used`,
-        path: ["name"],
-      };
-    },
-  );
-};
diff --git a/src/app/account/_components/userTeams.tsx b/src/app/account/_components/userTeams.tsx
index 94241faa..8692c4bc 100644
--- a/src/app/account/_components/userTeams.tsx
+++ b/src/app/account/_components/userTeams.tsx
@@ -51,6 +51,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { teamSchema } from "@/schemas/team.schemas";
 import type { z } from "zod";
+import { CreateTeamDialog } from "@/components/teams/createTeamDialog";
 
 export const UserTeamsCard = () => {
   return (
@@ -70,7 +71,9 @@ export const UserTeamsCard = () => {
               </List>
             </Card.Body>
             <Card.Footer>
-              <Button>new team</Button>
+              <CreateTeamDialog>
+                <Button>new team</Button>
+              </CreateTeamDialog>
             </Card.Footer>
           </Card.Root>
         </ErrorBoundary>
diff --git a/src/components/teams/createTeamDialog.tsx b/src/components/teams/createTeamDialog.tsx
new file mode 100644
index 00000000..2f1fa136
--- /dev/null
+++ b/src/components/teams/createTeamDialog.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { useForm } from "react-hook-form";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { teamSchema } from "@/schemas/team.schemas";
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { z } from "zod";
+import { useRouter } from "next/navigation";
+import { type PropsWithChildren, useState } from "react";
+import { type RouterOutputs, api } from "@/trpc/react";
+import { Button } from "../ui/button";
+import { Loader } from "../ui/loader";
+
+export const CreateTeamDialog = (props: PropsWithChildren) => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const formSchema = useFormSchema();
+  const utils = api.useUtils();
+  const router = useRouter();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: { name: "" },
+  });
+
+  const createTeam = api.team.create.useMutation({
+    onSuccess: (team) => {
+      setIsDialogOpen(false);
+      router.push(`/teams/${team.id}`);
+    },
+    onMutate: async (variables) => {
+      await utils.team.all.cancel();
+
+      const optimisticTeam: RouterOutputs["team"]["all"][number] = {
+        memberId: Math.random().toString(),
+        teamId: Math.random().toString(),
+        team: {
+          id: Math.random().toString(),
+          authorId: Math.random().toString(),
+          name: variables.name,
+          createdAt: new Date(),
+          updatedAt: new Date(),
+          author: {
+            email: "",
+            id: Math.random().toString(),
+            emailVerified: null,
+            image: null,
+            name: null,
+          },
+        },
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      };
+
+      utils.team.all.setData(undefined, (teams) => [
+        optimisticTeam,
+        ...(teams ?? []),
+      ]);
+    },
+    onSettled: () => {
+      void utils.team.all.invalidate();
+    },
+  });
+
+  const onSubmit = (values: z.infer<typeof formSchema>) => {
+    createTeam.mutate(values);
+  };
+
+  return (
+    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+      <DialogTrigger asChild>{props.children}</DialogTrigger>
+
+      <DialogContent className="space-y-5 sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle className="first-letter:capitalize">
+            create a team
+          </DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col gap-4"
+          >
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>team name:</FormLabel>
+                  <FormControl>
+                    <Input placeholder="friends" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button
+              type="submit"
+              disabled={createTeam.isPending}
+              className="ml-auto"
+            >
+              {createTeam.isPending && <Loader className="mr-2" />}
+              <span className="capitalize">save</span>
+            </Button>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const useFormSchema = () => {
+  const utils = api.useUtils();
+
+  return teamSchema.pick({ name: true }).refine(
+    (data) => {
+      const teams = utils.team.all.getData();
+
+      return !teams?.find(
+        (team) => team.team.name.toLowerCase() === data.name.toLowerCase(),
+      );
+    },
+    (data) => {
+      return {
+        message: `${data.name} is already used`,
+        path: ["name"],
+      };
+    },
+  );
+};

From b0128ea47c88472bbb3c0eff77ff67441d0d8e13 Mon Sep 17 00:00:00 2001
From: AugustinSorel <sorelaugustin@gmail.com>
Date: Tue, 2 Jul 2024 18:16:53 +0100
Subject: [PATCH 13/14] CHORE/todo removed

---
 src/app/page.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0abc3d3e..a8968b4f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -463,7 +463,6 @@ const FeaturesGridBackground = () => {
 };
 
 //TODO: add random facts to team page eg heavier lifter or most active in team
-//TODO: update header ui
 //TODO: add teams feat in main page
 //TODO: better sign in and join team email
 //TODO: install t3 env and change drizzle config

From 3823dbb5ee78acacd9facc36ebd95a09bfdee8fa Mon Sep 17 00:00:00 2001
From: AugustinSorel <sorelaugustin@gmail.com>
Date: Tue, 2 Jul 2024 18:17:31 +0100
Subject: [PATCH 14/14] CHORE/todo added

---
 src/app/page.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index a8968b4f..59c926a0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -365,6 +365,7 @@ const GridContainer = (props: ComponentProps<"ul">) => {
   );
 };
 
+//TODO: rename me
 const I = (props: ComponentProps<"li">) => {
   return (
     <li