feat: web app

- added the header on the web app with support for dark mode using the right primitives for nextjs: next-themes for the theme-provider instead of the default provider coming for react+vite
- installed `turbopack-inline-svg-loader` to properly import and render the logo as an svg instead of an image in the web app header, similarly to vite
- installed the `prettier-plugin-tailwindcss` in the web app

Author: Friedrich482

apps/dashboard/src/App.tsx

@@ -10,14 +10,14 @@ import { ScrollToTopButton } from "@repo/ui/components/scroll-to-top-button";
 import { SidebarProvider } from "@repo/ui/components/ui/sidebar";
 import { Toaster } from "@repo/ui/components/ui/sonner";
 import { TooltipProvider } from "@repo/ui/components/ui/tooltip";
-import { ThemeProvider } from "@repo/ui/providers/theme-provider";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { createTRPCClient, httpBatchLink } from "@trpc/client";
 
 import { FallBackRender } from "./components/errors/error-boundary";
 import { Wrapper } from "./components/layout/navigation-reset-wrapper";
 import { useExtensionWebsocket } from "./hooks/use-extension-websocket";
+import { ThemeProvider } from "./providers/theme-provider";
 import { TRPCProvider } from "./utils/trpc";
 
 function makeQueryClient() {

apps/dashboard/src/components/layout/header/navbar-dropdowns.tsx

@@ -1,11 +1,18 @@
+import { useTheme } from "@/providers/theme-provider";
 import { ToggleThemeDropDown } from "@repo/ui/components/toggle-theme-dropdown";
 
 import { AuthDropDown } from "./auth-dropdown";
 
 export const NavbarDropDowns = () => {
+  const { theme: providedTheme, setTheme, resolvedTheme } = useTheme();
+
   return (
     <div className="flex gap-4 self-end">
-      <ToggleThemeDropDown />
+      <ToggleThemeDropDown
+        providedTheme={providedTheme}
+        resolvedTheme={resolvedTheme}
+        setTheme={setTheme}
+      />
       <AuthDropDown />
     </div>
   );

apps/dashboard/src/providers/theme-provider.tsx

@@ -0,0 +1,78 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+import { ResolvedTheme, Theme } from "@repo/ui/types-schemas";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  resolvedTheme: ResolvedTheme;
+};
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+  resolvedTheme: "light",
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export const ThemeProvider = ({
+  children,
+  defaultTheme = "system",
+  storageKey = "vite-ui-theme",
+  ...props
+}: ThemeProviderProps) => {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
+  );
+  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>("light");
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove("light", "dark");
+
+    let newTheme: ResolvedTheme;
+
+    if (theme === "system") {
+      newTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
+    } else {
+      newTheme = theme;
+    }
+
+    root.classList.add(newTheme);
+    setResolvedTheme(newTheme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    resolvedTheme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+};
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
+};

apps/web/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

apps/web/next.config.ts

@@ -2,6 +2,17 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   output: "standalone",
+  turbopack: {
+    rules: {
+      "*.svg": {
+        loaders: ["turbopack-inline-svg-loader"],
+        condition: {
+          content: /^[\s\S]{0,4000}$/, // <-- Inline SVGs smaller than ~4Kb
+        },
+        as: "*.js",
+      },
+    },
+  },
 };
 
 export default nextConfig;

apps/web/package.json

@@ -9,6 +9,7 @@
     "lint": "eslint . --fix"
   },
   "dependencies": {
+    "@icons-pack/react-simple-icons": "^13.11.1",
     "@repo/common": "*",
     "@repo/trpc": "*",
     "@repo/ui": "*",
@@ -18,14 +19,18 @@
     "react-dom": "^19.2.0"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@types/node": "^20.19.32",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "autoprefixer": "^10.4.24",
     "eslint": "^9.39.2",
     "eslint-config-next": "^16.0.3",
     "postcss": "^8.5.6",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.6.14",
     "tailwindcss": "^4.1.17",
+    "turbopack-inline-svg-loader": "^1.0.3",
     "typescript": "^5.9.3"
   },
   "overrides": {

apps/web/src/app/layout.tsx

@@ -1,7 +1,10 @@
 import type { Metadata } from "next";
-import { ThemeProvider } from "next-themes";
 import { Inter } from "next/font/google";
 
+import { Footer } from "@/components/layout/footer";
+import { Header } from "@/components/layout/header/header";
+import { ThemeProvider } from "@/providers/theme-provider";
+
 import "@repo/ui/globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -18,9 +21,17 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={`${inter.className} antialiased`}>
-        <ThemeProvider enableSystem attribute="class" defaultTheme="system">
+      <head />
+      <body className={`${inter.className} flex flex-col antialiased`}>
+        <ThemeProvider
+          enableSystem
+          attribute="class"
+          defaultTheme="system"
+          disableTransitionOnChange
+        >
+          <Header />
           {children}
+          <Footer />
         </ThemeProvider>
       </body>
     </html>

apps/web/src/app/page.tsx

@@ -1,5 +1,5 @@
 const Home = () => {
-  return <div>MoonCode</div>;
+  return <main className="flex-1 pt-20"></main>;
 };
 
 export default Home;

apps/web/src/assets/moon.svg

@@ -0,0 +1,3 @@
+export const Footer = () => {
+  return <footer className="mt-auto">footer</footer>;
+};