refactor: top level dir + moved route

create a root directory entry in table for each user and move file browser under /directories/$id

packages/web/src/directories/directory-page/skeleton-demo.tsx

@@ -0,0 +1,42 @@
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { DirectoryContentTableSkeleton } from "./directory-content-table-skeleton"
+import { DirectoryPageSkeleton } from "./directory-page-skeleton"
+
+export function SkeletonDemo() {
+	const [showPageSkeleton, setShowPageSkeleton] = useState(false)
+	const [showTableSkeleton, setShowTableSkeleton] = useState(false)
+
+	return (
+		<div className="p-4 space-y-4">
+			<div className="flex gap-2">
+				<Button 
+					onClick={() => setShowPageSkeleton(!showPageSkeleton)}
+					variant={showPageSkeleton ? "default" : "outline"}
+				>
+					{showPageSkeleton ? "Hide" : "Show"} Page Skeleton
+				</Button>
+				<Button 
+					onClick={() => setShowTableSkeleton(!showTableSkeleton)}
+					variant={showTableSkeleton ? "default" : "outline"}
+				>
+					{showTableSkeleton ? "Hide" : "Show"} Table Skeleton
+				</Button>
+			</div>
+			
+			{showPageSkeleton && (
+				<div className="border rounded-lg p-4">
+					<h3 className="text-lg font-semibold mb-4">Directory Page Skeleton</h3>
+					<DirectoryPageSkeleton />
+				</div>
+			)}
+			
+			{showTableSkeleton && (
+				<div className="border rounded-lg p-4">
+					<h3 className="text-lg font-semibold mb-4">Directory Content Table Skeleton</h3>
+					<DirectoryContentTableSkeleton rows={5} />
+				</div>
+			)}
+		</div>
+	)
+}