refactor: unify backend and frontend servers (#3)

* refactor: unify backend and frontend servers

* refactor: correct paths for openapi & drizzle

* refactor: move api-client to client

* fix: drizzle paths

* chore: fix linting issues

* fix: form reset issue

app/client/components/app-sidebar.tsx

@@ -0,0 +1,90 @@
+import { CalendarClock, Database, HardDrive, Mountain, Settings } from "lucide-react";
+import { Link, NavLink } from "react-router";
+import {
+	Sidebar,
+	SidebarContent,
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarHeader,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	useSidebar,
+} from "~/client/components/ui/sidebar";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/client/components/ui/tooltip";
+import { cn } from "~/client/lib/utils";
+
+const items = [
+	{
+		title: "Volumes",
+		url: "/volumes",
+		icon: HardDrive,
+	},
+	{
+		title: "Repositories",
+		url: "/repositories",
+		icon: Database,
+	},
+	{
+		title: "Backups",
+		url: "/backups",
+		icon: CalendarClock,
+	},
+	{
+		title: "Settings",
+		url: "/settings",
+		icon: Settings,
+	},
+];
+
+export function AppSidebar() {
+	const { state } = useSidebar();
+
+	return (
+		<Sidebar variant="inset" collapsible="icon" className="p-0">
+			<SidebarHeader className="bg-card-header border-b border-border/50 hidden md:flex h-[65px] flex-row items-center p-4">
+				<Link to="/volumes" className="flex items-center gap-3 font-semibold pl-2">
+					<Mountain className="size-5 text-strong-accent" />
+					<span
+						className={cn("text-base transition-all duration-200", {
+							"opacity-0 w-0 overflow-hidden ": state === "collapsed",
+						})}
+					>
+						Ironmount
+					</span>
+				</Link>
+			</SidebarHeader>
+			<SidebarContent className="p-2 border-r">
+				<SidebarGroup>
+					<SidebarGroupContent>
+						<SidebarMenu>
+							{items.map((item) => (
+								<SidebarMenuItem key={item.title}>
+									<TooltipProvider>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<SidebarMenuButton asChild>
+													<NavLink to={item.url}>
+														{({ isActive }) => (
+															<>
+																<item.icon className={cn({ "text-strong-accent": isActive })} />
+																<span className={cn({ "text-strong-accent": isActive })}>{item.title}</span>
+															</>
+														)}
+													</NavLink>
+												</SidebarMenuButton>
+											</TooltipTrigger>
+											<TooltipContent side="right" className={cn({ hidden: state !== "collapsed" })}>
+												<p>{item.title}</p>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+								</SidebarMenuItem>
+							))}
+						</SidebarMenu>
+					</SidebarGroupContent>
+				</SidebarGroup>
+			</SidebarContent>
+		</Sidebar>
+	);
+}