feat: initialize warpbox.dev project structure and backend

Initialize the repository with the core Go backend architecture and a frontend mockup for warpbox.dev, a self-hosted file-sharing application.

- Set up Go backend modules for configuration, HTTP server, middleware, handlers, and templates.
- Add local development scripts, environment templates, and basic project configuration.
- Include a React-based frontend mockup under the docs directory.

docs/Mock-Up/Mockup Magic/src/components/layout/AppShell.tsx

@@ -0,0 +1,121 @@
+import { Link, useRouterState } from "@tanstack/react-router";
+import {
+  LayoutDashboard,
+  FolderOpen,
+  Share2,
+  Settings,
+  Shield,
+  Files,
+  Users,
+  HardDrive,
+  ScrollText,
+  Gauge,
+  Box,
+} from "lucide-react";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+  SidebarHeader,
+} from "@/components/ui/sidebar";
+import { MockupNav } from "./MockupNav";
+
+const userItems = [
+  { to: "/app/dashboard", label: "Dashboard", icon: LayoutDashboard },
+  { to: "/app/files", label: "My files", icon: FolderOpen },
+  { to: "/app/shared", label: "Shared links", icon: Share2 },
+  { to: "/app/settings", label: "Settings", icon: Settings },
+];
+const adminItems = [
+  { to: "/admin/overview", label: "Overview", icon: Gauge },
+  { to: "/admin/files", label: "Files", icon: Files },
+  { to: "/admin/users", label: "Users", icon: Users },
+  { to: "/admin/storage", label: "Storage", icon: HardDrive },
+  { to: "/admin/logs", label: "Logs", icon: ScrollText },
+  { to: "/admin/settings", label: "Settings", icon: Settings },
+];
+
+export function AppShell({
+  variant,
+  title,
+  children,
+}: {
+  variant: "user" | "admin";
+  title: string;
+  children: React.ReactNode;
+}) {
+  const pathname = useRouterState({ select: (s) => s.location.pathname });
+  const items = variant === "admin" ? adminItems : userItems;
+
+  return (
+    <SidebarProvider>
+      <div className="flex min-h-screen w-full">
+        <Sidebar collapsible="icon">
+          <SidebarHeader>
+            <Link to="/" className="flex items-center gap-2 px-2 py-1.5 font-semibold">
+              <Box className="h-5 w-5 text-primary" />
+              <span>warpbox.dev</span>
+            </Link>
+          </SidebarHeader>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>{variant === "admin" ? "Admin" : "Workspace"}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {items.map((it) => (
+                    <SidebarMenuItem key={it.to}>
+                      <SidebarMenuButton asChild isActive={pathname === it.to}>
+                        <Link to={it.to} className="flex items-center gap-2">
+                          <it.icon className="h-4 w-4" />
+                          <span>{it.label}</span>
+                        </Link>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+            {variant === "user" && (
+              <SidebarGroup>
+                <SidebarGroupLabel>Other</SidebarGroupLabel>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton asChild>
+                        <Link to="/admin/overview" className="flex items-center gap-2">
+                          <Shield className="h-4 w-4" />
+                          <span>Admin</span>
+                        </Link>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </SidebarGroup>
+            )}
+          </SidebarContent>
+        </Sidebar>
+
+        <div className="flex flex-1 flex-col">
+          <header className="flex h-14 items-center gap-3 border-b bg-background px-4">
+            <SidebarTrigger />
+            <h1 className="text-sm font-medium text-foreground">{title}</h1>
+            <div className="ml-auto flex items-center gap-2">
+              <MockupNav />
+              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">
+                A
+              </div>
+            </div>
+          </header>
+          <main className="flex-1 bg-muted/30 p-4 md:p-6">{children}</main>
+        </div>
+      </div>
+    </SidebarProvider>
+  );
+}