omnidotdev · Twonarly1 · May 29, 2025 · May 29, 2025 · May 29, 2025 · May 29, 2025
diff --git a/app/.gitignore b/app/.gitignore
@@ -12,6 +12,9 @@
 /.next/
 /out/
 
+# editor
+.vscode
+
 # production
 /build
 

diff --git a/app/.vscode/settings.json b/app/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "editor.defaultFormatter": "biomejs.biome",
+  "editor.formatOnSave": true
+}
diff --git a/app/components.json b/app/components.json
@@ -11,10 +11,10 @@
     "prefix": ""
   },
   "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/util",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
+    "components": "components",
+    "utils": "lib/util",
+    "ui": "components/ui",
+    "lib": "lib",
+    "hooks": "hooks"
   }
 }
diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx
@@ -1,9 +1,7 @@
 import { Assistant } from "next/font/google";
-import Link from "next/link";
-import { NuqsAdapter } from "nuqs/adapters/next/app";
 
-import Header from "@/components/Header";
-import ThemeProvider from "@/components/ThemeProvider";
+import { Footer, Header } from "components/layout";
+import { NuqsProvider, ThemeProvider } from "providers";
 
 import type { Metadata } from "next";
 import type { PropsWithChildren } from "react";
@@ -20,45 +18,18 @@ export const metadata: Metadata = {
 const RootLayout = ({ children }: PropsWithChildren) => (
   <html lang="en" suppressHydrationWarning>
     <body className={assistant.className}>
-      <ThemeProvider
-        enableSystem
-        attribute="class"
-        defaultTheme="system"
-        disableTransitionOnChange
-      >
-        <NuqsAdapter>
-          <Header />
-
-          <div className="relative flex h-[100dvh] w-full flex-col">
-            <main className="mt-[72px] w-full flex-1">{children}</main>
-
-            <footer className="flex w-full shrink-0 flex-col items-center gap-2 border-t bg-muted/10 px-4 py-6 sm:flex-row md:px-6">
-              <p className="text-muted-foreground text-xs">
-                © {new Date().getFullYear()} Omni
-              </p>
-
-              <nav className="flex gap-4 sm:ml-auto sm:gap-6">
-                <Link
-                  className="text-muted-foreground text-xs transition-colors hover:text-primary"
-                  href="https://omni.dev/terms-of-service"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  Terms of Service
-                </Link>
-
-                <Link
-                  className="text-muted-foreground text-xs transition-colors hover:text-primary"
-                  href="https://omni.dev/privacy-policy"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  Privacy
-                </Link>
-              </nav>
-            </footer>
-          </div>
-        </NuqsAdapter>
+      <ThemeProvider>
+        <NuqsProvider>
+          <main className="grid h-dvh w-screen grid-rows-layout">
+            <div className="flex h-screen w-full flex-col">
+              <Header />
+
+              {children}
+
+              <Footer />
+            </div>
+          </main>
+        </NuqsProvider>
       </ThemeProvider>
     </body>
   </html>

diff --git a/app/src/app/not-found.tsx b/app/src/app/not-found.tsx
@@ -0,0 +1,17 @@
+import Link from "next/link";
+
+import { buttonVariants } from "components/ui";
+
+const NotFound = () => {
+  return (
+    <section className="flex h-full flex-col items-center justify-center gap-4">
+      <h1 className="">This page doesn't exist.</h1>
+
+      <Link href="/" className={`w-fit ${buttonVariants()}`}>
+        Go home
+      </Link>
+    </section>
+  );
+};
+
+export default NotFound;
diff --git a/app/src/app/page.tsx b/app/src/app/page.tsx
@@ -1,23 +1,23 @@
-import { ArrowRight, Code, Share2, Sparkles, Zap } from "lucide-react";
 import Link from "next/link";
 
-import { Button } from "@/components/ui/button";
-import cn from "@/lib/util/cn";
+import { Icons } from "components/core";
+import { Button } from "components/ui";
+import cn from "lib/util/cn";
 
 const features = [
   {
-    icon: <Code className="h-6 w-6" />,
+    icon: <Icons.Code className="h-6 w-6" />,
     title: "Easy Modeling",
     description:
       "Define your ecosystem structure using an intuitive JSON schema",
   },
   {
-    icon: <Share2 className="h-6 w-6" />,
+    icon: <Icons.Share2 className="h-6 w-6" />,
     title: "Interactive Maps",
     description: "Transform complex relationships into clear, visual insights",
   },
   {
-    icon: <Zap className="h-6 w-6" />,
+    icon: <Icons.Zap className="h-6 w-6" />,
     title: "Dynamic Updates",
     description:
       "Watch your ecosystem map evolve in real-time as you make changes",
@@ -74,7 +74,7 @@ const HomePage = () => (
                 Visualize Your Ecosystem{" "}
               </h1>
 
-              <Sparkles className="hidden h-10 w-10 md:flex" />
+              <Icons.Sparkles className="hidden h-10 w-10 md:flex" />
             </div>
 
             <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
@@ -89,23 +89,23 @@ const HomePage = () => (
                 className="gap-2 bg-primary hover:bg-primary/90"
               >
                 Start Modeling
-                <ArrowRight className="h-4 w-4" />
+                <Icons.ArrowRight className="h-4 w-4" />
               </Button>
             </Link>
           </div>
         </div>
       </div>
     </section>
 
-    <section className="flex w-full h-full flex-col items-center justify-center py-12 bg-muted/50">
+    <section className="flex h-full w-full flex-col items-center justify-center bg-muted/50 py-12">
       <div className="container px-4 md:px-6">
         <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-3">
           {features.map((feature) => (
             <div
               key={feature.title}
               className={cn(
                 "group relative flex flex-col items-center space-y-4 text-center",
-                "rounded-lg border bg-background p-6 shadow-lg transition-shadow hover:shadow-xl"
+                "rounded-lg border bg-background p-6 shadow-lg transition-shadow hover:shadow-xl",
               )}
             >
               <div className="rounded-full bg-primary/10 p-4 text-primary">
@@ -126,7 +126,7 @@ const HomePage = () => (
         <Link href="/visualizer">
           <Button size="lg" className="gap-2 bg-primary hover:bg-primary/90">
             Start Modeling
-            <ArrowRight className="h-4 w-4" />
+            <Icons.ArrowRight className="h-4 w-4" />
           </Button>
         </Link>
       </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,9 @@ @@
     /.next/
     /out/
+    # editor
+    .vscode
     # production
     /build
@@ Expand Down @@