feat(app-structure): transform application from single dashboard to comprehensive multi-page architecture

.gitignore

@@ -18,6 +18,10 @@ node_modules/
 .github/instructions/
 .github/prompts/
 .github/chatmodes/
+.github/implementation_processings/
+
+# Playwright MCP folder
+.playwright-mcp/
 
 # Logs
 npm-debug.log*

frontend/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

frontend/package.json

@@ -28,6 +28,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.540.0",
     "next-themes": "^0.4.6",

frontend/src/App.tsx

@@ -1,5 +1,9 @@
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 import Dashboard from "@/pages/Dashboard";
+import Library from "@/pages/Library";
+import Collections from "@/pages/Collections";
+import CollectionDetail from "@/pages/CollectionDetail";
+import Settings from "@/pages/Settings";
 import ResourceDetail from "@/pages/ResourceDetail";
 import SignUp from "@/pages/SignUp";
 import SignIn from "@/pages/SignIn";
@@ -43,6 +47,46 @@ export default function App() {
                 </ProtectedRoute>
               }
             />
+            <Route
+              path="/library"
+              element={
+                <ProtectedRoute>
+                  <Library />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/collections"
+              element={
+                <ProtectedRoute>
+                  <Collections />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/collection/:id"
+              element={
+                <ProtectedRoute>
+                  <CollectionDetail />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/settings"
+              element={
+                <ProtectedRoute>
+                  <Settings />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/settings/account"
+              element={
+                <ProtectedRoute>
+                  <Settings />
+                </ProtectedRoute>
+              }
+            />
             <Route
               path="/resource/:id"
               element={

frontend/src/components/add-resource-form.tsx

@@ -57,76 +57,80 @@ export function AddResourceForm({
   const canSubmit = url.trim() && isValidUrl(url) && !isLoading;
 
   return (
-    <Card className="w-full">
-      <CardHeader className="pb-4">
-        <CardTitle className="flex items-center space-x-2 text-lg">
-          <Plus className="h-4 w-4" />
-          <span>Add New Resource</span>
-        </CardTitle>
-        <CardDescription className="text-sm">
-          Paste a YouTube video or article link to add it to your collection
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="pt-0">
-        <form
-          onSubmit={handleSubmit}
-          className="flex flex-col md:flex-row gap-3"
-        >
-          <div className="flex-1">
-            <div className="relative">
-              <LinkIcon className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-              <Input
-                id="url"
-                type="url"
-                value={url}
-                onChange={(e) => setUrl(e.target.value)}
-                placeholder="Resource Link"
-                className="pl-10 bg-background focus:bg-background placeholder:text-card-foreground/70"
-                disabled={isLoading}
-              />
+    <div className="space-y-4 mb-2">
+      <Card className="w-full">
+        <CardHeader className="pb-4">
+          <CardTitle className="flex items-center space-x-2 text-lg">
+            <Plus className="h-4 w-4" />
+            <span>Add New Resource</span>
+          </CardTitle>
+          <CardDescription className="text-sm">
+            Paste a YouTube video or article link to add it to your collection
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="pt-0">
+          <form
+            onSubmit={handleSubmit}
+            className="flex flex-col md:flex-row gap-3"
+          >
+            <div className="flex-1">
+              <div className="relative">
+                <LinkIcon className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  id="url"
+                  type="url"
+                  value={url}
+                  onChange={(e) => setUrl(e.target.value)}
+                  placeholder="Resource Link"
+                  className="pl-10 bg-background focus:bg-background placeholder:text-card-foreground/70"
+                  disabled={isLoading}
+                />
+              </div>
+              {url && !isValidUrl(url) && (
+                <p className="text-xs text-destructive mt-1">
+                  Please enter a valid URL
+                </p>
+              )}
             </div>
-            {url && !isValidUrl(url) && (
-              <p className="text-xs text-destructive mt-1">
-                Please enter a valid URL
-              </p>
-            )}
-          </div>
 
-          <div className="flex gap-2 md:w-auto w-full ">
-            <Select
-              value={language}
-              onValueChange={(value) => setLanguage(value as any)}
-            >
-              <SelectTrigger className="w-32 bg-background focus:bg-background">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="original">Original</SelectItem>
-                <SelectItem value="italian">Italian</SelectItem>
-                <SelectItem value="english">English</SelectItem>
-              </SelectContent>
-            </Select>
+            <div className="flex gap-2 md:w-auto w-full ">
+              <Select
+                value={language}
+                onValueChange={(value) =>
+                  setLanguage(value as "original" | "italian" | "english")
+                }
+              >
+                <SelectTrigger className="w-32 bg-background focus:bg-background">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="original">Original</SelectItem>
+                  <SelectItem value="italian">Italian</SelectItem>
+                  <SelectItem value="english">English</SelectItem>
+                </SelectContent>
+              </Select>
 
-            <Button
-              type="submit"
-              disabled={!canSubmit}
-              className="whitespace-nowrap"
-            >
-              {isLoading ? (
-                <>
-                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-current mr-2" />
-                  Processing...
-                </>
-              ) : (
-                <>
-                  <Plus className="h-4 w-4 mr-2" />
-                  Add Resource
-                </>
-              )}
-            </Button>
-          </div>
-        </form>
-      </CardContent>
-    </Card>
+              <Button
+                type="submit"
+                disabled={!canSubmit}
+                className="whitespace-nowrap"
+              >
+                {isLoading ? (
+                  <>
+                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-current mr-2" />
+                    Processing...
+                  </>
+                ) : (
+                  <>
+                    <Plus className="h-4 w-4" />
+                    Add Resource
+                  </>
+                )}
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
   );
 }

frontend/src/components/app-sidebar.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { LayoutDashboard } from "lucide-react";
+import { LayoutDashboard, Library, FolderOpen } from "lucide-react";
 
 import { NavMain } from "@/components/nav-main";
 import { NavUser } from "@/components/nav-user";
@@ -22,32 +22,33 @@ const data = {
       items: [
         {
           title: "Overview",
-          url: "#",
+          url: "/dashboard",
         },
+      ],
+    },
+    {
+      title: "Library",
+      url: "#",
+      icon: Library,
+      items: [
+        {
+          title: "My Resources",
+          url: "/library",
+        },
+      ],
+    },
+    {
+      title: "Collections",
+      url: "#",
+      icon: FolderOpen,
+      items: [
         {
-          title: "Add Resource",
-          url: "#",
+          title: "My Collections",
+          url: "/collections",
         },
       ],
     },
   ],
-  // projects: [
-  //   {
-  //     name: "Knowledge Base",
-  //     url: "#",
-  //     icon: Frame,
-  //   },
-  //   {
-  //     name: "Analytics",
-  //     url: "#",
-  //     icon: PieChart,
-  //   },
-  //   {
-  //     name: "Resources",
-  //     url: "#",
-  //     icon: Map,
-  //   },
-  // ],
 };
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {

frontend/src/components/collection-color-dot.tsx

@@ -0,0 +1,64 @@
+import { cn } from "@/lib/utils";
+
+interface CollectionColorDotProps {
+  color: string;
+  size?: "sm" | "md" | "lg";
+  selected?: boolean;
+  className?: string;
+  onClick?: () => void;
+  title?: string;
+}
+
+const colorOptions = [
+  { value: "#3B82F6", name: "Blue", border: "#2563EB" },
+  { value: "#10B981", name: "Green", border: "#059669" },
+  { value: "#8B5CF6", name: "Purple", border: "#7C3AED" },
+  { value: "#F59E0B", name: "Orange", border: "#D97706" },
+  { value: "#EF4444", name: "Red", border: "#DC2626" },
+  { value: "#6B7280", name: "Gray", border: "#4B5563" },
+];
+
+const getBorderColor = (mainColor: string): string => {
+  const colorOption = colorOptions.find((option) => option.value === mainColor);
+  return colorOption ? colorOption.border : mainColor;
+};
+
+const sizeClasses = {
+  sm: "w-4 h-4",
+  md: "w-6 h-6",
+  lg: "w-8 h-8",
+};
+
+export function CollectionColorDot({
+  color,
+  size = "md",
+  selected = false,
+  className,
+  onClick,
+  title,
+}: CollectionColorDotProps) {
+  const baseClasses =
+    "rounded-full border-2 max-md:border-[1px] transition-all duration-200";
+  const sizeClass = sizeClasses[size];
+  const selectedClasses = selected ? "border-foreground shadow-md" : "";
+
+  return (
+    <div
+      className={cn(
+        baseClasses,
+        sizeClass,
+        selectedClasses,
+        onClick && "cursor-pointer hover:scale-105",
+        className
+      )}
+      style={{
+        backgroundColor: color,
+        borderColor: selected ? undefined : getBorderColor(color),
+      }}
+      onClick={onClick}
+      title={title}
+    />
+  );
+}
+
+export { colorOptions, getBorderColor };