chore: home page ui

Author: hitarth-gg

web/package-lock.json

@@ -25,10 +25,12 @@
     "ag-grid-react": "^35.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.34.3",
     "lucide-react": "^0.560.0",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-router": "^7.13.0",
+    "react-use-measure": "^2.1.7",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {

web/package.json

@@ -0,0 +1,15 @@
+export default function GithubSvg() {
+  return (
+    <div>
+      <svg
+        role="img"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        fill={"currentColor"}
+      >
+        <title>GitHub</title>
+        <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+      </svg>
+    </div>
+  );
+}

web/src/assets/GithubSvg.tsx

@@ -18,6 +18,8 @@ import type { Session } from "@supabase/supabase-js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 import { Spinner } from "./ui/spinner";
 import SearchCompany from "./SearchCompany";
+import okeyFrieren from "~/assets/okey-frieren.png";
+import GithubSvg from "~/assets/githubSvg";
 
 export default function Navbar() {
   return (
@@ -27,7 +29,6 @@ export default function Navbar() {
           <NavigationMenu>
             <NavigationMenuList>
               <NavigateLink title="" icon={<House size={20} />} path="/" />
-              <NavigateDropdown />
               <NavigateLink title="All Problems" path="/all-problems" />
             </NavigationMenuList>
           </NavigationMenu>
@@ -36,6 +37,18 @@ export default function Navbar() {
         <MobileNav />
 
         <div className="flex h-full items-center justify-between gap-4">
+          <Link
+            to="https://github.com/hitarth-gg/visor-leetcode"
+            target="_blank"
+          >
+            <Button
+              variant={"ghost"}
+              size={"icon"}
+              className="h-8 cursor-pointer"
+            >
+             <GithubSvg />
+            </Button>
+          </Link>
           <ToggleTheme />
           <SearchCompany />
           <AuthButton />
@@ -80,7 +93,29 @@ function MobileNav() {
           document.body.style.overflow = "";
         }}
       >
-        <div>Mobile Navigation goes here</div>
+        <nav className="flex flex-col gap-2 p-4">
+          <Link
+            to="/"
+            className="flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-accent"
+            onClick={() => {
+              setMenuOpen(false);
+              document.body.style.overflow = "";
+            }}
+          >
+            <House size={18} />
+            Home
+          </Link>
+          <Link
+            to="/all-problems"
+            className="flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-accent"
+            onClick={() => {
+              setMenuOpen(false);
+              document.body.style.overflow = "";
+            }}
+          >
+            All Problems
+          </Link>
+        </nav>
       </div>
     </>
   );
@@ -196,7 +231,7 @@ function ToggleTheme() {
     <Button
       variant={"ghost"}
       size={"icon"}
-      className="h-8 w-8 p-0"
+      className="h-8 w-8 cursor-pointer p-0"
       onClick={() => {
         setTheme(theme === "light" ? "dark" : "light");
       }}

web/src/assets/huh.gif

@@ -5,8 +5,8 @@ import type { Theme } from "~/types/shared";
 export function ContextProvider({ children }: { children: React.ReactNode }) {
   const [theme, setThemeState] = useState<Theme>(() => {
     const storedTheme = localStorage.getItem("theme") as Theme | null;
-    document.body.classList.toggle("dark", storedTheme === "dark");
-    return storedTheme ?? "light";
+    document.body.classList.toggle("dark", (storedTheme ?? "dark") === "dark");
+    return storedTheme ?? "dark";
   });
   const [otherState, setOtherState] = useState<number>(0);
 

web/src/assets/okey-frieren.png

@@ -34,9 +34,6 @@ export default function AuthCallback() {
         }
       }
 
-      // Check what kind of callback this is via the hash fragment (implicit flow)
-      // Supabase handles the hash automatically on getSession, so we just need
-      // to check the current session.
       const {
         data: { session },
       } = await supabase.auth.getSession();
@@ -46,19 +43,6 @@ export default function AuthCallback() {
         return;
       }
 
-    //   // Detect password recovery flow — redirect to reset-password page
-    //   if (session.user?.recovery_sent_at) {
-    //     const isRecovery =
-    //       new Date().getTime() -
-    //         new Date(session.user.recovery_sent_at).getTime() <
-    //       1000 * 60 * 60; // within the last hour
-
-    //     if (isRecovery) {
-    //       navigate("/reset-password");
-    //       return;
-    //     }
-    //   }
-
       navigate(next);
     }
 

web/src/components/Navbar.tsx

@@ -1,6 +1,7 @@
-import { TriangleAlert, TriangleAlertIcon } from "lucide-react";
+import { TriangleAlert } from "lucide-react";
 import { useRouteError } from "react-router";
 import CountBtn from "~/components/count-btn";
+import huhGif from "~/assets/huh.gif";
 
 export default function ErrorPage() {
   const routerError = useRouteError();
@@ -18,6 +19,7 @@ export default function ErrorPage() {
     <div className="absolute inset-0 flex items-center justify-center dark:bg-neutral-950">
       <div className="bg-card ring-foreground/10 text-card-foreground m-4 rounded-md px-8 py-4 ring-1">
         <div className="font-geist flex flex-col items-center gap-2 text-center">
+          <img src={huhGif} alt="huh" className="mb-2 h-16 rounded-md object-cover" />
           <TriangleAlert className="text-foreground" />
           <span>Something went wrong!</span>
           {status && statusText && (