From 12e98652a6201e98066497568107d3ba2f74a73d Mon Sep 17 00:00:00 2001
From: Jan Jaap <jan.jaap@digimondo.de>
Date: Sat, 19 Oct 2024 18:04:04 +0200
Subject: [PATCH] fix(next): layout bullshit

---
 src/app/error/animated-error-content.tsx |  2 +-
 src/app/layout.tsx                       |  5 +++
 src/components/nav-menu/nav-desktop.tsx  | 20 +++++++++--
 src/components/nav-menu/nav-mobile.tsx   | 44 ++++++++++++++++--------
 src/lib/file-upload.action.ts            |  3 +-
 5 files changed, 54 insertions(+), 20 deletions(-)
 create mode 100644 src/app/layout.tsx

diff --git a/src/app/error/animated-error-content.tsx b/src/app/error/animated-error-content.tsx
index 98c5073..e9276a4 100644
--- a/src/app/error/animated-error-content.tsx
+++ b/src/app/error/animated-error-content.tsx
@@ -85,7 +85,7 @@ export default function AnimatedErrorContent({
           animate={{ opacity: 1 }}
           transition={{ delay: 0.6, duration: 0.5 }}
         >
-          Don't worry, our team of highly caffeinated developers is on it!
+          Don&apos;t worry, our team of highly caffeinated developers is on it!
         </motion.p>
         {stackTrace && (
           <motion.div
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..1046e02
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function RootLayout(props: React.PropsWithChildren) {
+  return props.children;
+}
diff --git a/src/components/nav-menu/nav-desktop.tsx b/src/components/nav-menu/nav-desktop.tsx
index 937db4e..4bb2bd4 100644
--- a/src/components/nav-menu/nav-desktop.tsx
+++ b/src/components/nav-menu/nav-desktop.tsx
@@ -11,6 +11,11 @@ export function NavDesktop(props: NavProps) {
   const linkClassName =
     "text-sm font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50 px-3 py-2 rounded-md";
 
+  const activeClassname =
+    "text-gray-900 dark:text-gray-50 bg-gray-100 dark:bg-gray-800/30";
+  const inActiveClassname =
+    "text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50";
+
   return (
     <nav className="hidden lg:flex gap-4 sm:gap-6">
       {props.isAuthenticated &&
@@ -20,15 +25,24 @@ export function NavDesktop(props: NavProps) {
             href={tab.pathname}
             className={cn(
               linkClassName,
-              tab.isActive
-                ? "text-gray-900 dark:text-gray-50 bg-gray-100 dark:bg-gray-800/30"
-                : "text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50"
+              tab.isActive ? activeClassname : inActiveClassname
             )}
             prefetch={false}
           >
             {tab.label}
           </Link>
         ))}
+
+      <Link
+        className={cn(
+          linkClassName,
+          props.isAuthenticated ? inActiveClassname : activeClassname
+        )}
+        href={props.isAuthenticated ? "/auth/logout" : "/auth/login"}
+      >
+        {props.isAuthenticated && "Log out"}
+        {!props.isAuthenticated && "Log in"}
+      </Link>
     </nav>
   );
 }
diff --git a/src/components/nav-menu/nav-mobile.tsx b/src/components/nav-menu/nav-mobile.tsx
index 77e7da3..1d2dbbd 100644
--- a/src/components/nav-menu/nav-mobile.tsx
+++ b/src/components/nav-menu/nav-mobile.tsx
@@ -5,10 +5,17 @@ import { useNavTabs } from "../../hooks/use-nav-tabs";
 import { cn } from "@/lib/utils";
 import { NavProps } from "./nav-props";
 import { Button } from "../ui/button.extended";
-import { LogInIcon } from "lucide-react";
+import { LogInIcon, LogOutIcon } from "lucide-react";
 
 export function NavMobile(props: NavProps) {
-  const { tabs } = useNavTabs();
+  const { tabs } = useNavTabs(props.isAuthenticated);
+
+  const linkClassName =
+    "flex-1 flex flex-col items-center gap-1 text-sm font-medium transition-colors bg-gray-100 dark:bg-gray-800 py-2";
+  const activeClassName =
+    "bg-gray-200 text-gray-900 dark:bg-gray-800 dark:text-gray-50";
+  const inActiveClassname =
+    "text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50";
 
   return (
     <nav className="bg-white border-t dark:bg-gray-950 dark:border-gray-800 lg:hidden sticky bottom-0 z-10">
@@ -19,10 +26,8 @@ export function NavMobile(props: NavProps) {
               key={tab.pathname}
               href={tab.pathname}
               className={cn(
-                "flex-1 flex flex-col items-center gap-1 text-sm font-medium transition-colors bg-gray-100 dark:bg-gray-800 py-2",
-                tab.isActive
-                  ? "bg-gray-200 text-gray-900 dark:bg-gray-800 dark:text-gray-50"
-                  : "text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50"
+                linkClassName,
+                tab.isActive ? activeClassName : inActiveClassname
               )}
               prefetch={false}
             >
@@ -30,15 +35,24 @@ export function NavMobile(props: NavProps) {
               {tab.label}
             </Link>
           ))}
-        {!props.isAuthenticated && (
-          <Link
-            className="flex-1 flex flex-col items-center gap-1 text-sm font-medium transition-colors bg-gray-200 text-gray-900 dark:bg-gray-800 dark:text-gray-50 py-2"
-            href="/auth/login"
-          >
-            <LogInIcon className="w-5 h-5" />
-            Log in
-          </Link>
-        )}
+        <Link
+          className={cn(
+            linkClassName,
+            props.isAuthenticated ? inActiveClassname : activeClassName
+          )}
+          href={props.isAuthenticated ? "/auth/logout" : "/auth/login"}
+        >
+          {props.isAuthenticated && (
+            <>
+              <LogOutIcon className="w-5 h-5" /> Log out
+            </>
+          )}
+          {!props.isAuthenticated && (
+            <>
+              <LogInIcon className="w-5 h-5" /> Log in
+            </>
+          )}
+        </Link>
       </div>
     </nav>
   );
diff --git a/src/lib/file-upload.action.ts b/src/lib/file-upload.action.ts
index 674c33c..ed7f763 100644
--- a/src/lib/file-upload.action.ts
+++ b/src/lib/file-upload.action.ts
@@ -1,6 +1,7 @@
 "use server";
 
 import { getSupabaseServerClient } from "@/lib/supabase.server";
+import { AuthSessionMissingError } from "@supabase/supabase-js";
 import { nanoid } from "nanoid";
 
 interface UploadImageProps {
@@ -24,7 +25,7 @@ export async function uploadFileAction({
 
   if (!user) {
     return {
-      error: "NOT_AUTHENTICATED",
+      error: new AuthSessionMissingError(),
     };
   }