Fix theme issues in dev and added footer

Author: max-programming

src/components/footer.tsx

@@ -0,0 +1,41 @@
+import { Github, ExternalLink, Heart } from "lucide-react";
+
+export function Footer() {
+  return (
+    <footer className="mt-auto border-t border-slate-200/60 dark:border-slate-700/60 bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm">
+      <div className="container mx-auto px-4 py-6 max-w-6xl">
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-slate-600 dark:text-slate-400">
+          {/* Left side - Author info */}
+          <div className="flex items-center gap-2">
+            <span>Built with</span>
+            <Heart className="h-4 w-4 text-red-500 fill-current animate-pulse" />
+            <span>by</span>
+            <a
+              href="https://usmans.me"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-slate-900 dark:text-slate-100 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center gap-1"
+            >
+              Usman S.
+              <ExternalLink className="h-3 w-3" />
+            </a>
+          </div>
+
+          {/* Right side - Open source info */}
+          <div className="flex items-center gap-4">
+            <span className="text-xs">Open Source</span>
+            <a
+              href="https://github.com/max-programming/whim"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-100/80 dark:bg-slate-700/80 hover:bg-slate-200/80 dark:hover:bg-slate-600/80 transition-all duration-200 text-slate-700 dark:text-slate-300"
+            >
+              <Github className="h-4 w-4" />
+              <span className="text-xs font-medium">View on GitHub</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

src/components/theme-provider.tsx

@@ -1,9 +1,18 @@
-import { useTheme } from "~/components/theme-provider";
+import { type Theme } from "~/server/theme";
 import { Button } from "./ui/button";
 import { Moon, Sun } from "lucide-react";
+import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import { themeQuery } from "~/lib/queries";
+import { setThemeServerFn } from "~/server/theme";
 
 export function ThemeToggle() {
-  const { theme, setTheme } = useTheme();
+  const queryClient = useQueryClient();
+  const { data: theme } = useSuspenseQuery(themeQuery);
+
+  function setTheme(val: Theme) {
+    queryClient.setQueryData(themeQuery.queryKey, val);
+    setThemeServerFn({ data: val });
+  }
 
   return (
     <Button

src/components/theme-toggle.tsx

@@ -77,7 +77,7 @@ function OtpEntry({ whimId, otp, onOtpChange, onSubmit }: OtpEntryProps) {
   const isComplete = otp.length === 4;
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-indigo-50 dark:from-slate-900 dark:to-indigo-950 flex items-center justify-center p-4">
+    <div className="flex-1 bg-gradient-to-br from-slate-50 to-indigo-50 dark:from-slate-900 dark:to-indigo-950 flex items-center justify-center p-4">
       <div className="w-full max-w-md">
         {/* Header */}
         <div className="text-center mb-8">
@@ -185,7 +185,7 @@ function WhimDisplay({ whimId, otp }: WhimDisplayProps) {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-indigo-50 dark:from-slate-900 dark:to-indigo-950 flex items-center justify-center">
+      <div className="flex-1 bg-gradient-to-br from-slate-50 to-indigo-50 dark:from-slate-900 dark:to-indigo-950 flex items-center justify-center">
         <div className="text-center">
           <div className="animate-spin w-8 h-8 border-4 border-indigo-600 dark:border-indigo-400 border-t-transparent rounded-full mx-auto mb-4"></div>
           <p className="text-slate-600 dark:text-slate-300">
@@ -198,7 +198,7 @@ function WhimDisplay({ whimId, otp }: WhimDisplayProps) {
 
   if (error) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-red-50 to-pink-50 dark:from-red-950 dark:to-pink-950 flex items-center justify-center p-4">
+      <div className="flex-1 bg-gradient-to-br from-red-50 to-pink-50 dark:from-red-950 dark:to-pink-950 flex items-center justify-center p-4">
         <Card className="w-full max-w-md border-2 border-red-200 dark:border-red-800">
           <CardContent className="text-center p-8">
             <div className="w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
@@ -224,7 +224,7 @@ function WhimDisplay({ whimId, otp }: WhimDisplayProps) {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-950 dark:to-emerald-950 p-4">
+    <div className="flex-1 bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-950 dark:to-emerald-950 p-4">
       <div className="max-w-4xl mx-auto">
         {/* Success Header */}
         <div className="text-center mb-8 pt-8">

src/routes/$whimId.tsx

@@ -1,5 +1,5 @@
 /// <reference types="vite/client" />
-import type { QueryClient } from "@tanstack/react-query";
+import { useSuspenseQuery, type QueryClient } from "@tanstack/react-query";
 import {
   Outlet,
   HeadContent,
@@ -10,8 +10,8 @@ import {
 import { wrapCreateRootRouteWithSentry } from "@sentry/tanstackstart-react";
 import appCss from "~/styles/app.css?url";
 import { seo } from "~/lib/seo";
-import { ThemeProvider, useTheme } from "~/components/theme-provider";
 import { ThemeToggle } from "~/components/theme-toggle";
+import { Footer } from "~/components/footer";
 import { themeQuery } from "~/lib/queries";
 
 export const Route = wrapCreateRootRouteWithSentry(
@@ -52,16 +52,14 @@ export const Route = wrapCreateRootRouteWithSentry(
 
 function RootComponent() {
   return (
-    <ThemeProvider>
-      <RootDocument>
-        <Outlet />
-      </RootDocument>
-    </ThemeProvider>
+    <RootDocument>
+      <Outlet />
+    </RootDocument>
   );
 }
 
 function RootDocument({ children }: Readonly<{ children: React.ReactNode }>) {
-  const { theme } = useTheme();
+  const { data: theme } = useSuspenseQuery(themeQuery);
 
   return (
     <html className={theme} suppressHydrationWarning>
@@ -76,8 +74,10 @@ function RootDocument({ children }: Readonly<{ children: React.ReactNode }>) {
             ></script>
           )}
       </head>
-      <body>
-        {children}
+      <body className="min-h-screen flex flex-col">
+        <main className="flex-1 flex flex-col">{children}</main>
+
+        <Footer />
 
         {/* Theme Toggle - Fixed position in top-right corner */}
         <div className="fixed top-4 right-4 z-50">

src/routes/__root.tsx

@@ -16,7 +16,7 @@ export const Route = createFileRoute("/")({
 
 function LandingPage() {
   return (
-    <div className="min-h-screen content-center bg-gradient-to-br from-slate-50 via-white to-slate-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900">
+    <div className="flex-1 flex items-center bg-gradient-to-br from-slate-50 via-white to-slate-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900">
       <div className="container mx-auto px-4 py-6 max-w-6xl">
         <div className="bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm rounded-2xl border border-slate-200/60 dark:border-slate-700/60 shadow-lg p-6 lg:p-8">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8 items-center">

src/routes/index.tsx

@@ -1,7 +1,8 @@
-import { type Theme } from "~/components/theme-provider";
 import { createServerFn } from "@tanstack/react-start";
 import { getCookie, setCookie } from "@tanstack/react-start/server";
 
+export type Theme = "light" | "dark";
+
 const storageKey = "ui-theme";
 
 export const getThemeServerFn = createServerFn().handler(async () => {