feat: Implement content planning and post management with a new service and calendar view.

feat: Implement native file sharing with Web Share API, falling back to individual downloads.
feat: Implement multi-select and download functionality for gallery images and add npm install to the deployment script.
2026-02-17 15:54:36 +03:00 · 2026-02-16 17:46:35 +03:00 · 2026-02-16 17:37:41 +03:00 · 2026-02-16 13:57:23 +00:00 · 2026-02-16 16:35:29 +03:00 · 2026-02-16 00:25:41 +03:00
35 changed files with 5944 additions and 336 deletions
--- a/deploy.sh
+++ b/deploy.sh
@@ -2,6 +2,7 @@
 ssh root@31.59.58.220 "
  cd /root/ai/ai-service-front &&
  git pull &&
  npm install &&
  npm run build &&
  cp -r dist/* /var/www/ai.luminic.space/
 "
--- a/index.html
+++ b/index.html
@@ -2,7 +2,11 @@
 <html lang="en" class="dark">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,11 +11,13 @@
        "@primeuix/themes": "^2.0.3",
        "@primevue/themes": "^4.5.4",
        "axios": "^1.13.4",
        "jszip": "^3.10.1",
        "pinia": "^3.0.4",
        "primeicons": "^7.0.0",
        "primevue": "^4.5.4",
        "vue": "^3.5.27",
-        "vue-router": "^5.0.1"
+        "vue-router": "^5.0.1",
        "vuedraggable": "^4.1.0"
      },
      "devDependencies": {
        "@tailwindcss/postcss": "^4.1.18",
@@ -3895,6 +3897,12 @@
        "url": "https://opencollective.com/core-js"
      }
    },
    "node_modules/core-util-is": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
      "license": "MIT"
    },
    "node_modules/cross-spawn": {
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -4860,6 +4868,18 @@
      "dev": true,
      "license": "ISC"
    },
    "node_modules/immediate": {
      "version": "3.0.6",
      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
      "license": "MIT"
    },
    "node_modules/inherits": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
      "license": "ISC"
    },
    "node_modules/internal-slot": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -5473,6 +5493,18 @@
        "node": ">=0.10.0"
      }
    },
    "node_modules/jszip": {
      "version": "3.10.1",
      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
      "license": "(MIT OR GPL-3.0-or-later)",
      "dependencies": {
        "lie": "~3.3.0",
        "pako": "~1.0.2",
        "readable-stream": "~2.3.6",
        "setimmediate": "^1.0.5"
      }
    },
    "node_modules/kolorist": {
      "version": "1.8.0",
      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
@@ -5490,6 +5522,15 @@
        "node": ">=6"
      }
    },
    "node_modules/lie": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
      "license": "MIT",
      "dependencies": {
        "immediate": "~3.0.5"
      }
    },
    "node_modules/lightningcss": {
      "version": "1.30.2",
      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
@@ -6057,6 +6098,12 @@
      "dev": true,
      "license": "BlueOak-1.0.0"
    },
    "node_modules/pako": {
      "version": "1.0.11",
      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
      "license": "(MIT AND Zlib)"
    },
    "node_modules/path-key": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -6243,6 +6290,12 @@
        "node": ">=12.11.0"
      }
    },
    "node_modules/process-nextick-args": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
      "license": "MIT"
    },
    "node_modules/proxy-from-env": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -6285,6 +6338,33 @@
        "safe-buffer": "^5.1.0"
      }
    },
    "node_modules/readable-stream": {
      "version": "2.3.8",
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
      "license": "MIT",
      "dependencies": {
        "core-util-is": "~1.0.0",
        "inherits": "~2.0.3",
        "isarray": "~1.0.0",
        "process-nextick-args": "~2.0.0",
        "safe-buffer": "~5.1.1",
        "string_decoder": "~1.1.1",
        "util-deprecate": "~1.0.1"
      }
    },
    "node_modules/readable-stream/node_modules/isarray": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
      "license": "MIT"
    },
    "node_modules/readable-stream/node_modules/safe-buffer": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
      "license": "MIT"
    },
    "node_modules/readdirp": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
@@ -6646,6 +6726,12 @@
        "node": ">= 0.4"
      }
    },
    "node_modules/setimmediate": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
      "license": "MIT"
    },
    "node_modules/shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -6780,6 +6866,12 @@
      "dev": true,
      "license": "MIT"
    },
    "node_modules/sortablejs": {
      "version": "1.14.0",
      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==",
      "license": "MIT"
    },
    "node_modules/source-map": {
      "version": "0.8.0-beta.0",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
@@ -6855,6 +6947,21 @@
        "node": ">= 0.4"
      }
    },
    "node_modules/string_decoder": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
      "license": "MIT",
      "dependencies": {
        "safe-buffer": "~5.1.0"
      }
    },
    "node_modules/string_decoder/node_modules/safe-buffer": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
      "license": "MIT"
    },
    "node_modules/string-width": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -7457,6 +7564,12 @@
        "browserslist": ">= 4.21.0"
      }
    },
    "node_modules/util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
      "license": "MIT"
    },
    "node_modules/vite": {
      "version": "7.3.1",
      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
@@ -7812,6 +7925,18 @@
      "integrity": "sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==",
      "license": "MIT"
    },
    "node_modules/vuedraggable": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
      "license": "MIT",
      "dependencies": {
        "sortablejs": "1.14.0"
      },
      "peerDependencies": {
        "vue": "^3.0.1"
      }
    },
    "node_modules/webidl-conversions": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -12,11 +12,13 @@
    "@primeuix/themes": "^2.0.3",
    "@primevue/themes": "^4.5.4",
    "axios": "^1.13.4",
    "jszip": "^3.10.1",
    "pinia": "^3.0.4",
    "primeicons": "^7.0.0",
    "primevue": "^4.5.4",
    "vue": "^3.5.27",
-    "vue-router": "^5.0.1"
+    "vue-router": "^5.0.1",
    "vuedraggable": "^4.1.0"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.18",
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/favicon-96x96.png
+++ b/public/favicon-96x96.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon.svg
+++ b/public/favicon.svg
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@@ -0,0 +1,21 @@
 {
  "name": "MyWebSite",
  "short_name": "MySite",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
 }
--- a/public/web-app-manifest-192x192.png
+++ b/public/web-app-manifest-192x192.png
--- a/public/web-app-manifest-512x512.png
+++ b/public/web-app-manifest-512x512.png
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,17 @@
 <script setup>
 import { onMounted } from 'vue'
 import { RouterView, useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import AppSidebar from './components/AppSidebar.vue'
 const route = useRoute()
 const authStore = useAuthStore()
 onMounted(async () => {
  if (authStore.isAuthenticated) {
    await authStore.fetchCurrentUser()
  }
 })
 </script>
 <template>
@@ -12,10 +21,10 @@ const route = useRoute()
  </div>
  <!-- Main Layout (Sidebar + Content) -->
-  <div v-else class="flex h-screen bg-slate-900 text-slate-100 font-sans overflow-hidden">
+  <div v-else class="flex flex-col h-screen bg-slate-900 text-slate-100 font-sans overflow-hidden">
    <AppSidebar />
-    <div class="flex-1 h-full overflow-hidden relative">
+    <div class="flex-1 w-full overflow-hidden relative">
      <RouterView v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -1,12 +1,60 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
-import Button from 'primevue/button'
+import { useProjectsStore } from '@/stores/projectsStore'
 import { storeToRefs } from 'pinia'
 const router = useRouter()
 const route = useRoute()
 const authStore = useAuthStore()
 const projectsStore = useProjectsStore()
 const { projects, currentProject } = storeToRefs(projectsStore)
 const selectedProject = ref(null)
 onMounted(async () => {
    // Ensure we have projects
    if (projects.value.length === 0) {
        await projectsStore.fetchProjects()
    }
    // Sync local ref with store
    if (currentProject.value) {
        selectedProject.value = currentProject.value.id
    }
 })
 // Watch for external changes (like selecting from the list view)
 watch(currentProject, (newVal) => {
    selectedProject.value = newVal ? newVal.id : null
 })
 const projectOptions = computed(() => {
    return projects.value.map(p => ({ name: p.name, id: p.id }))
 })
 const getProjectName = (id) => {
    const p = projects.value.find(p => p.id === id)
    return p ? p.name : 'Unknown Project'
 }
 const isProjectMenuOpen = ref(false)
 const selectProject = (projectId) => {
    selectedProject.value = projectId
    isProjectMenuOpen.value = false
    if (projectId) {
        projectsStore.selectProject(projectId)
    } else {
        // Clear selection
        projectsStore.currentProject = null
        localStorage.removeItem('active_project_id')
    }
    // Reload page to ensure all data is refreshed with new context
    window.location.reload()
 }
 const handleLogout = () => {
    authStore.logout()
@@ -22,12 +70,13 @@ const isActive = (path) => {
 const navItems = computed(() => {
    const items = [
-        { path: '/', icon: '🏠', tooltip: 'Home' },
+        // { path: '/', icon: '🏠', tooltip: 'Home' },
-        { path: '/assets', icon: '📂', tooltip: 'Assets' },
+        { path: '/projects', icon: '📂', tooltip: 'Projects' },
-        // { path: '/generation', icon: '🎨', tooltip: 'Image Generation' },
+        { path: '/content-plan', icon: '📅', tooltip: 'Plan' },
-        { path: '/flexible', icon: '🖌️', tooltip: 'Flexible Generation' },
+        { path: '/ideas', icon: '💡', tooltip: 'Ideas' },
-        { path: '/characters', icon: '👥', tooltip: 'Characters' },
+        { path: '/flexible', icon: '🖌️', tooltip: 'Flexible' },
-        { path: '/image-to-prompt', icon: '✨', tooltip: 'Image to Prompt' }
+        // { path: '/albums', icon: '🖼️', tooltip: 'Library' },
        { path: '/characters', icon: '👥', tooltip: 'Characters' }
    ]
    if (authStore.isAdmin()) {
@@ -40,31 +89,80 @@ const navItems = computed(() => {
 <template>
    <div class="contents">
-        <!-- Sidebar (Desktop) -->
+        <!-- Sidebar (Desktop -> Top Bar) -->
        <nav
-            class="hidden md:flex glass-panel w-20 m-4 flex-col items-center py-6 rounded-3xl z-40 border border-white/5 bg-slate-900/50 backdrop-blur-md h-[calc(100vh-2rem)]">
+            class="hidden md:flex glass-panel w-[calc(100%-2rem)] mx-4 mt-4 mb-2 flex-row items-center px-8 py-3 rounded-2xl z-40 border border-white/5 bg-slate-900/50 backdrop-blur-md shrink-0 justify-between">
-            <div class="mb-12">
+
-                <div
+            <!-- Logo -->
-                    class="w-10 h-10 bg-gradient-to-br from-violet-600 to-cyan-500 rounded-xl flex items-center justify-center font-bold text-white text-xl shadow-lg shadow-violet-500/20">
+            <img src="/web-app-manifest-512x512.png" alt="Logo"
-                    AI
+                class="w-10 h-10 rounded-xl shadow-lg shadow-violet-500/20 shrink-0" />
            <!-- Project Switcher -->
            <div class="hidden lg:block ml-4 relative">
                <button @click="isProjectMenuOpen = !isProjectMenuOpen"
                    class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-white/5 transition-colors text-slate-400 hover:text-slate-200">
                    <i v-if="selectedProject" class="pi pi-folder text-violet-400"></i>
                    <i v-else class="pi pi-user"></i>
                    <span class="max-w-[150px] truncate font-medium">
                        {{ selectedProject ? getProjectName(selectedProject) : 'Personal Workspace' }}
                    </span>
                    <i class="pi pi-chevron-down text-xs ml-1 opacity-50"></i>
                </button>
                <!-- Custom Dropdown Menu -->
                <div v-if="isProjectMenuOpen"
                    class="absolute top-full left-0 mt-2 w-56 bg-slate-900 border border-white/10 shadow-xl rounded-xl overflow-hidden z-50 py-1">
                    <!-- Personal Workspace Option -->
                    <div @click="selectProject(null)"
                        class="flex items-center gap-3 px-4 py-3 hover:bg-white/5 cursor-pointer transition-colors"
                        :class="{ 'text-violet-400 bg-white/5': !selectedProject, 'text-slate-300': selectedProject }">
                        <i class="pi pi-user"></i>
                        <span class="font-medium">Personal Workspace</span>
                        <i v-if="!selectedProject" class="pi pi-check ml-auto text-sm"></i>
                    </div>
                    <div class="h-px bg-white/5 my-1"></div>
                    <!-- Project Options -->
                    <div v-for="project in projects" :key="project.id" @click="selectProject(project.id)"
                        class="flex items-center gap-3 px-4 py-3 hover:bg-white/5 cursor-pointer transition-colors"
                        :class="{ 'text-violet-400 bg-white/5': selectedProject === project.id, 'text-slate-300': selectedProject !== project.id }">
                        <i class="pi pi-folder"></i>
                        <span class="truncate">{{ project.name }}</span>
                        <i v-if="selectedProject === project.id" class="pi pi-check ml-auto text-sm"></i>
                    </div>
                    <div v-if="projects.length === 0" class="px-4 py-3 text-slate-500 text-sm font-italic">
                        No projects found
                    </div>
                </div>
-            <div class="flex-1 flex flex-col gap-6 w-full items-center">
+                <!-- Backdrop to close on click outside -->
                <div v-if="isProjectMenuOpen" @click="isProjectMenuOpen = false"
                    class="fixed inset-0 z-40 bg-transparent"></div>
            </div>
            <!-- Nav Items -->
            <div class="flex flex-row gap-2 items-center justify-center flex-1 mx-8">
                <div v-for="item in navItems" :key="item.path" :class="[
-                    'w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300',
+                    'px-4 py-2 flex items-center gap-2 rounded-xl cursor-pointer transition-all duration-300',
                    isActive(item.path)
                        ? 'bg-white/10 text-slate-50 shadow-inner'
-                        : 'text-slate-400 hover:bg-white/10 hover:text-slate-50'
+                        : 'text-slate-400 hover:bg-white/5 hover:text-slate-50'
-                ]" @click="router.push(item.path)" v-tooltip.right="item.tooltip">
+                ]" @click="router.push(item.path)" v-tooltip.bottom="item.tooltip">
-                    <span class="text-2xl">{{ item.icon }}</span>
+                    <span class="text-xl">{{ item.icon }}</span>
                    <span class="text-sm font-medium hidden lg:block">{{ item.tooltip }}</span>
                </div>
            </div>
-            <div class="mt-auto flex flex-col items-center gap-4">
+            <!-- Right Actions -->
            <div class="flex items-center gap-4 shrink-0">
                <div @click="handleLogout"
                    class="w-10 h-10 rounded-xl bg-red-500/10 text-red-400 flex items-center justify-center cursor-pointer hover:bg-red-500/20 transition-all font-bold"
-                    v-tooltip.right="'Logout'">
+                    v-tooltip.bottom="'Logout'">
                    <i class="pi pi-power-off"></i>
                </div>
                <!-- Profile Avatar Placeholder -->
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -56,6 +56,41 @@ const router = createRouter({
      path: '/flexible',
      name: 'flexible',
      component: () => import('../views/FlexibleGenerationView.vue')
    },
    {
      path: '/content-plan',
      name: 'content-plan',
      component: () => import('../views/ContentPlanView.vue')
    },
    {
      path: '/albums',
      name: 'albums',
      component: () => import('../views/AlbumsView.vue')
    },
    {
      path: '/ideas',
      name: 'ideas',
      component: () => import('../views/IdeasView.vue')
    },
    {
      path: '/ideas/:id',
      name: 'idea-detail',
      component: () => import('../views/IdeaDetailView.vue')
    },
    {
      path: '/projects',
      name: 'projects',
      component: () => import('../views/ProjectsView.vue')
    },
    {
      path: '/projects/:id',
      name: 'project-detail',
      component: () => import('../views/ProjectDetailView.vue')
    },
    {
      path: '/albums/:id',
      name: 'album-detail',
      component: () => import('../views/AlbumDetailView.vue')
    }
  ]
 })
--- a/src/services/albumService.js
+++ b/src/services/albumService.js
@@ -0,0 +1,12 @@
 import api from './api';
 export const albumService = {
  getAlbums: (limit = 10, offset = 0) => api.get('/albums', { params: { limit, offset } }),
  createAlbum: (data) => api.post('/albums', data),
  getAlbum: (id) => api.get(`/albums/${id}`),
  updateAlbum: (id, data) => api.put(`/albums/${id}`, data),
  deleteAlbum: (id) => api.delete(`/albums/${id}`),
  addGenerationToAlbum: (albumId, generationId) => api.post(`/albums/${albumId}/generations/${generationId}`),
  removeGenerationFromAlbum: (albumId, generationId) => api.delete(`/albums/${albumId}/generations/${generationId}`),
  getAlbumGenerations: (albumId, limit = 10, offset = 0) => api.get(`/albums/${albumId}/generations`, { params: { limit, offset } })
 };
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -13,8 +13,15 @@ const api = axios.create({
 api.interceptors.request.use(
  config => {
    const user = JSON.parse(localStorage.getItem('user'));
-    if (user && user.token) {
+    if (user && user.access_token) {
-      config.headers['Authorization'] = `${user.tokenType} ${user.token}`;
+       config.headers.Authorization = `Bearer ${user.access_token}`;
    } else if (user && user.token) {
       config.headers.Authorization = `${user.tokenType} ${user.token}`;
    }
    const projectId = localStorage.getItem('active_project_id');
    if (projectId) {
      config.headers['X-Project-ID'] = projectId;
    }
    return config;
  },
--- a/src/services/dataService.js
+++ b/src/services/dataService.js
@@ -25,6 +25,16 @@ export const dataService = {
        return response.data
    },
    createCharacter: async (characterData) => {
        const response = await api.post('/characters/', characterData)
        return response.data
    },
    deleteCharacter: async (id) => {
        const response = await api.delete(`/characters/${id}`)
        return response.data
    },
    getAssetsByCharacterId: async (charId, limit, offset) => {
        const response = await api.get(`/characters/${charId}/assets`, { params: { limit, offset } })
        return response.data
--- a/src/services/ideaService.js
+++ b/src/services/ideaService.js
@@ -0,0 +1,12 @@
 import api from './api';
 export const ideaService = {
  getIdeas: (limit = 10, offset = 0) => api.get('/ideas', { params: { limit, offset } }),
  createIdea: (data) => api.post('/ideas', data),
  getIdea: (id) => api.get(`/ideas/${id}`),
  updateIdea: (id, data) => api.put(`/ideas/${id}`, data),
  deleteIdea: (id) => api.delete(`/ideas/${id}`),
  addGenerationToIdea: (ideaId, generationId) => api.post(`/ideas/${ideaId}/generations/${generationId}`),
  removeGenerationFromIdea: (ideaId, generationId) => api.delete(`/ideas/${ideaId}/generations/${generationId}`),
  getIdeaGenerations: (ideaId, limit = 10, offset = 0) => api.get(`/ideas/${ideaId}/generations`, { params: { limit, offset } })
 };
--- a/src/services/postService.js
+++ b/src/services/postService.js
@@ -0,0 +1,24 @@
 import api from './api';
 export const postService = {
  getPosts: (dateFrom, dateTo) => {
    const params = {};
    if (dateFrom) params.date_from = dateFrom;
    if (dateTo) params.date_to = dateTo;
    return api.get('/posts', { params }).then(r => r.data);
  },
  createPost: (data) => api.post('/posts', data).then(r => r.data),
  getPost: (id) => api.get(`/posts/${id}`).then(r => r.data),
  updatePost: (id, data) => api.put(`/posts/${id}`, data).then(r => r.data),
  deletePost: (id) => api.delete(`/posts/${id}`).then(r => r.data),
  addGenerations: (postId, generationIds) =>
    api.post(`/posts/${postId}/generations`, { generation_ids: generationIds }).then(r => r.data),
  removeGeneration: (postId, generationId) =>
    api.delete(`/posts/${postId}/generations/${generationId}`).then(r => r.data),
 };
--- a/src/services/projectsService.js
+++ b/src/services/projectsService.js
@@ -0,0 +1,31 @@
 import api from './api';
 export default {
    async getProjects() {
        return api.get('/projects');
    },
    async createProject(projectData) {
        return api.post('/projects', projectData);
    },
    async getProject(id) {
        // Using getProjects for now as per previous plan, or could try specific endpoint if it exists
        // Validating with backend: project_router has GET /api/projects (list)
        // It does NOT have GET /api/projects/{id}.
        // So we must fetch all and find, or assume the store has them.
        return api.get('/projects');
    },
    async joinProject(projectId) {
        return api.post(`/projects/${projectId}/join`);
    },
    async addMember(projectId, username) {
        return api.post(`/projects/${projectId}/members`, { username });
    },
    async deleteProject(projectId) {
        return api.delete(`/projects/${projectId}`);
    }
 };
--- a/src/stores/albums.js
+++ b/src/stores/albums.js
@@ -0,0 +1,153 @@
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
 import { albumService } from '../services/albumService';
 export const useAlbumStore = defineStore('albums', () => {
  const albums = ref([]);
  const currentAlbum = ref(null);
  const loading = ref(false);
  const error = ref(null);
  const totalAlbums = ref(0);
  async function fetchAlbums(limit = 10, offset = 0) {
    loading.value = true;
    error.value = null;
    try {
      const response = await albumService.getAlbums(limit, offset);
      albums.value = response.data; // Assuming response.data is the list or { albums: [], total_count: ... }
      // Check if response has total_count structure
      if (response.data.albums) {
          albums.value = response.data.albums;
          totalAlbums.value = response.data.total_count;
      } else {
          // Fallback if structure is different
           albums.value = response.data;
      }
    } catch (err) {
      console.error('Error fetching albums:', err);
      error.value = err.response?.data?.detail || 'Failed to fetch albums';
    } finally {
      loading.value = false;
    }
  }
  async function createAlbum(data) {
    loading.value = true;
    error.value = null;
    try {
      await albumService.createAlbum(data);
      await fetchAlbums(); // Refresh list
      return true;
    } catch (err) {
      console.error('Error creating album:', err);
      error.value = err.response?.data?.detail || 'Failed to create album';
      return false;
    } finally {
      loading.value = false;
    }
  }
  async function fetchAlbum(id) {
    loading.value = true;
    error.value = null;
    currentAlbum.value = null;
    try {
      const response = await albumService.getAlbum(id);
      currentAlbum.value = response.data;
      return response.data;
    } catch (err) {
      console.error('Error fetching album:', err);
      error.value = err.response?.data?.detail || 'Failed to fetch album';
      return null;
    } finally {
      loading.value = false;
    }
  }
  async function updateAlbum(id, data) {
      loading.value = true;
      error.value = null;
      try {
          await albumService.updateAlbum(id, data);
          if (currentAlbum.value && currentAlbum.value.id === id) {
              await fetchAlbum(id);
          }
          await fetchAlbums();
          return true;
      } catch (err) {
          console.error('Error updating album:', err);
          error.value = err.response?.data?.detail || 'Failed to update album';
          return false;
      } finally {
          loading.value = false;
      }
  }
  async function deleteAlbum(id) {
    loading.value = true;
    error.value = null;
    try {
      await albumService.deleteAlbum(id);
      await fetchAlbums(); // Refresh list
      return true;
    } catch (err) {
      console.error('Error deleting album:', err);
      error.value = err.response?.data?.detail || 'Failed to delete album';
      return false;
    } finally {
      loading.value = false;
    }
  }
  async function addGenerationToAlbum(albumId, generationId) {
    loading.value = true;
    error.value = null;
    try {
      await albumService.addGenerationToAlbum(albumId, generationId);
      // Optionally refresh current album if it matches
      if (currentAlbum.value && currentAlbum.value.id === albumId) {
          await fetchAlbum(albumId);
      }
      return true;
    } catch (err) {
      console.error('Error adding generation to album:', err);
      error.value = err.response?.data?.detail || 'Failed to add generation to album';
      return false;
    } finally {
      loading.value = false;
    }
  }
  async function removeGenerationFromAlbum(albumId, generationId) {
    loading.value = true;
    error.value = null;
    try {
      await albumService.removeGenerationFromAlbum(albumId, generationId);
      if (currentAlbum.value && currentAlbum.value.id === albumId) {
          await fetchAlbum(albumId);
      }
      return true;
    } catch (err) {
      console.error('Error removing generation from album:', err);
      error.value = err.response?.data?.detail || 'Failed to remove generation from album';
      return false;
    } finally {
      loading.value = false;
    }
  }
  return {
    albums,
    currentAlbum,
    loading,
    error,
    totalAlbums,
    fetchAlbums,
    createAlbum,
    fetchAlbum,
    updateAlbum,
    deleteAlbum,
    addGenerationToAlbum,
    removeGenerationFromAlbum
  };
 });
--- a/src/stores/ideas.js
+++ b/src/stores/ideas.js
@@ -0,0 +1,161 @@
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
 import { ideaService } from '../services/ideaService';
 export const useIdeaStore = defineStore('ideas', () => {
  const ideas = ref([]);
  const currentIdea = ref(null);
  const loading = ref(false);
  const error = ref(null);
  const totalIdeas = ref(0);
  async function fetchIdeas(limit = 10, offset = 0) {
    loading.value = true;
    error.value = null;
    try {
      const response = await ideaService.getIdeas(limit, offset);
      if (response.data.ideas) {
          ideas.value = response.data.ideas;
          totalIdeas.value = response.data.total_count;
      } else {
          ideas.value = response.data;
      }
    } catch (err) {
      console.error('Error fetching ideas:', err);
      error.value = err.response?.data?.detail || 'Failed to fetch ideas';
    } finally {
      loading.value = false;
    }
  }
  async function createIdea(data) {
    loading.value = true;
    error.value = null;
    try {
      const response = await ideaService.createIdea(data);
      await fetchIdeas(); // Refresh list
      return response.data;
    } catch (err) {
      console.error('Error creating idea:', err);
      error.value = err.response?.data?.detail || 'Failed to create idea';
      return null;
    } finally {
      loading.value = false;
    }
  }
  async function fetchIdea(id) {
    loading.value = true;
    error.value = null;
    currentIdea.value = null;
    try {
      const response = await ideaService.getIdea(id);
      currentIdea.value = response.data;
      return response.data;
    } catch (err) {
      console.error('Error fetching idea:', err);
      error.value = err.response?.data?.detail || 'Failed to fetch idea';
      return null;
    } finally {
      loading.value = false;
    }
  }
  async function updateIdea(id, data) {
      loading.value = true;
      error.value = null;
      try {
          await ideaService.updateIdea(id, data);
          if (currentIdea.value && currentIdea.value.id === id) {
              await fetchIdea(id);
          }
          await fetchIdeas();
          return true;
      } catch (err) {
          console.error('Error updating idea:', err);
          error.value = err.response?.data?.detail || 'Failed to update idea';
          return false;
      } finally {
          loading.value = false;
      }
  }
  async function deleteIdea(id) {
    loading.value = true;
    error.value = null;
    try {
      await ideaService.deleteIdea(id);
      await fetchIdeas(); // Refresh list
      return true;
    } catch (err) {
      console.error('Error deleting idea:', err);
      error.value = err.response?.data?.detail || 'Failed to delete idea';
      return false;
    } finally {
      loading.value = false;
    }
  }
  async function addGenerationToIdea(ideaId, generationId) {
    loading.value = true;
    error.value = null;
    try {
      await ideaService.addGenerationToIdea(ideaId, generationId);
      if (currentIdea.value && currentIdea.value.id === ideaId) {
          await fetchIdea(ideaId);
      }
      return true;
    } catch (err) {
      console.error('Error adding generation to idea:', err);
      error.value = err.response?.data?.detail || 'Failed to add generation to idea';
      return false;
    } finally {
      loading.value = false;
    }
  }
  async function removeGenerationFromIdea(ideaId, generationId) {
    loading.value = true;
    error.value = null;
    try {
      await ideaService.removeGenerationFromIdea(ideaId, generationId);
      if (currentIdea.value && currentIdea.value.id === ideaId) {
          await fetchIdea(ideaId);
      }
      return true;
    } catch (err) {
      console.error('Error removing generation from idea:', err);
      error.value = err.response?.data?.detail || 'Failed to remove generation from idea';
      return false;
    } finally {
      loading.value = false;
    }
  }
  // Assuming getIdeaGenerations is separate from getIdea
  async function fetchIdeaGenerations(ideaId, limit = 100, offset = 0) {
      try {
          const response = await ideaService.getIdeaGenerations(ideaId, limit, offset);
          return response;
      } catch (err) {
          console.error('Error fetching idea generations:', err);
          return { data: [] };
      }
  }
  return {
    ideas,
    currentIdea,
    loading,
    error,
    totalIdeas,
    fetchIdeas,
    createIdea,
    fetchIdea,
    updateIdea,
    deleteIdea,
    addGenerationToIdea,
    removeGenerationFromIdea,
    fetchIdeaGenerations
  };
 });
--- a/src/stores/projectsStore.js
+++ b/src/stores/projectsStore.js
@@ -0,0 +1,98 @@
 import { defineStore } from 'pinia';
 import projectsService from '@/services/projectsService';
 export const useProjectsStore = defineStore('projects', {
    state: () => ({
        projects: [],
        currentProject: null,
        loading: false,
        error: null
    }),
    actions: {
        async fetchProjects() {
            this.loading = true;
            this.error = null;
            try {
                const response = await projectsService.getProjects();
                this.projects = response.data;
                // Restore selection from localStorage if valid
                this.restoreSelection();
            } catch (err) {
                console.error("Failed to fetch projects", err);
                this.error = "Failed to load projects";
            } finally {
                this.loading = false;
            }
        },
        restoreSelection() {
            const savedId = localStorage.getItem('active_project_id');
            if (savedId && this.projects.length > 0) {
                const found = this.projects.find(p => p.id === savedId);
                if (found) {
                    this.currentProject = found;
                } else {
                    // ID exists but project not in list (maybe deleted or lost access)
                    // Optional: clear it or keep it? Clearing seems safer.
                    localStorage.removeItem('active_project_id');
                    this.currentProject = null;
                }
            }
        },
        async createProject(name, description) {
            this.loading = true;
            try {
                const response = await projectsService.createProject({ name, description });
                const newProject = response.data;
                this.projects.push(newProject);
                // Automatically select the new project
                this.selectProject(newProject.id);
                return newProject;
            } catch (err) {
                console.error("Failed to create project", err);
                throw err;
            } finally {
                this.loading = false;
            }
        },
        selectProject(projectId) {
            const project = this.projects.find(p => p.id === projectId);
            if (project) {
                this.currentProject = project;
                localStorage.setItem('active_project_id', projectId);
            }
        },
        async addMember(projectId, username) {
            try {
                 await projectsService.addMember(projectId, username);
                 await this.fetchProjects(); // Refresh list to see updates if necessary
            } catch(err) {
                console.error("Failed to add member", err);
                throw err;
            }
        },
        getProjectById(id) {
            return this.projects.find(p => p.id === id);
        },
        async deleteProject(projectId) {
            try {
                await projectsService.deleteProject(projectId);
                this.projects = this.projects.filter(p => p.id !== projectId);
                if (this.currentProject && this.currentProject.id === projectId) {
                    this.currentProject = null;
                    localStorage.removeItem('active_project_id');
                }
            } catch (err) {
                console.error("Failed to delete project", err);
                throw err;
            }
        }
    }
 });
--- a/src/views/AlbumDetailView.vue
+++ b/src/views/AlbumDetailView.vue
@@ -0,0 +1,295 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAlbumStore } from '../stores/albums'
 import { albumService } from '../services/albumService'
 import { aiService } from '../services/aiService'
 import { storeToRefs } from 'pinia'
 import Skeleton from 'primevue/skeleton'
 import Button from 'primevue/button'
 import ConfirmDialog from 'primevue/confirmdialog'
 import { useConfirm } from 'primevue/useconfirm'
 import Dialog from 'primevue/dialog'
 const route = useRoute()
 const router = useRouter()
 const albumStore = useAlbumStore()
 const { currentAlbum, loading } = storeToRefs(albumStore)
 const confirm = useConfirm()
 const generations = ref([])
 const loadingGenerations = ref(false)
 // Gen Picker State
 const isGenerationPickerVisible = ref(false)
 const availableGenerations = ref([])
 const loadingAvailableGenerations = ref(false)
 const selectedGenerations = ref([])
 const API_URL = import.meta.env.VITE_API_URL
 onMounted(async () => {
    const id = route.params.id
    if (id) {
        await albumStore.fetchAlbum(id)
        if (currentAlbum.value) {
            fetchGenerations(id)
        }
    }
 })
 const fetchGenerations = async (albumId) => {
    loadingGenerations.value = true
    try {
        const response = await albumService.getAlbumGenerations(albumId, 100) // Increase limit for now
        generations.value = response.data.generations || [] // Adjust based on actual API response structure
        // If API returns list directly:
        if (Array.isArray(response.data)) {
            generations.value = response.data
        }
    } catch (e) {
        console.error('Failed to load generations', e)
    } finally {
        loadingGenerations.value = false
    }
 }
 const confirmDelete = () => {
    confirm.require({
        message: 'Are you sure you want to delete this album? This action cannot be undone.',
        header: 'Delete Album',
        icon: 'pi pi-exclamation-triangle',
        acceptClass: 'p-button-danger',
        accept: async () => {
            await albumStore.deleteAlbum(currentAlbum.value.id)
            router.push('/albums')
        }
    })
 }
 const copyPrompt = (prompt) => {
    navigator.clipboard.writeText(prompt)
    // Could add a toast notification here
 }
 // --- Generation Picker ---
 const openGenerationPicker = async () => {
    isGenerationPickerVisible.value = true
    selectedGenerations.value = []
    await loadAvailableGenerations()
 }
 const loadAvailableGenerations = async () => {
    loadingAvailableGenerations.value = true
    try {
        // Fetch recent generations to add
        const response = await aiService.getGenerations(50, 0)
        availableGenerations.value = response.generations || []
    } catch (e) {
        console.error('Failed to load available generations', e)
    } finally {
        loadingAvailableGenerations.value = false
    }
 }
 const toggleGenerationSelection = (gen) => {
    const index = selectedGenerations.value.findIndex(g => g.id === gen.id)
    if (index === -1) {
        selectedGenerations.value.push(gen)
    } else {
        selectedGenerations.value.splice(index, 1)
    }
 }
 const addSelectedGenerations = async () => {
    if (selectedGenerations.value.length === 0) return
    try {
        // Add sequentially
        for (const gen of selectedGenerations.value) {
            await albumService.addGenerationToAlbum(currentAlbum.value.id, gen.id)
        }
        isGenerationPickerVisible.value = false
        // Refresh album generations
        await fetchGenerations(currentAlbum.value.id)
    } catch (e) {
        console.error('Failed to add generations to album', e)
    }
 }
 const removeGeneration = (gen) => {
    confirm.require({
        message: 'Are you sure you want to remove this generation from the album?',
        header: 'Remove Generation',
        icon: 'pi pi-exclamation-triangle',
        acceptClass: 'p-button-danger',
        accept: async () => {
            await albumStore.removeGenerationFromAlbum(currentAlbum.value.id, gen.id)
            await fetchGenerations(currentAlbum.value.id)
        }
    })
 }
 // --- Image Preview ---
 const isImagePreviewVisible = ref(false)
 const previewImage = ref(null)
 const openImagePreview = (url) => {
    previewImage.value = { url }
    isImagePreviewVisible.value = true
 }
 </script>
 <template>
    <div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100">
        <ConfirmDialog></ConfirmDialog>
        <!-- Loading State -->
        <div v-if="loading" class="flex flex-col gap-8">
            <div class="flex justify-between items-start">
                <div>
                    <Skeleton width="15rem" height="3rem" class="mb-4" />
                    <Skeleton width="20rem" height="1.5rem" />
                </div>
                <Skeleton width="8rem" height="2.5rem" />
            </div>
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                <Skeleton v-for="i in 8" :key="i" height="16rem" class="rounded-xl" />
            </div>
        </div>
        <div v-else-if="currentAlbum">
            <!-- Header -->
            <header class="flex justify-between items-start mb-8 pb-8 border-b border-white/10">
                <div>
                    <div class="flex items-center gap-4 mb-2">
                        <Button icon="pi pi-arrow-left" text rounded @click="router.push('/albums')"
                            class="!text-slate-400 hover:!text-white hover:!bg-white/10" />
                        <h1 class="text-4xl font-bold m-0">{{ currentAlbum.name }}</h1>
                    </div>
                    <p class="text-slate-400 text-lg ml-14 max-w-2xl">{{ currentAlbum.description }}</p>
                </div>
                <div class="flex gap-2">
                    <Button label="Add Generation" icon="pi pi-plus" text @click="openGenerationPicker" />
                    <Button label="Delete Album" icon="pi pi-trash" severity="danger" text @click="confirmDelete" />
                </div>
            </header>
            <!-- Generations Grid -->
            <div v-if="loadingGenerations" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                <Skeleton v-for="i in 8" :key="i" height="20rem" class="rounded-xl" />
            </div>
            <div v-else-if="generations.length === 0"
                class="flex flex-col items-center justify-center py-20 text-slate-500">
                <i class="pi pi-image text-5xl mb-4 opacity-50"></i>
                <p class="text-xl">No generations in this album yet.</p>
                <p class="text-sm mt-2">Generate images and add them to this album!</p>
            </div>
            <div v-else class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                <!-- We need to adapt this based on actual generation object structure -->
                <div v-for="gen in generations" :key="gen.id"
                    class="glass-panel rounded-xl overflow-hidden group relative transition-all hover:bg-white/5">
                    <div class="aspect-[2/3] w-full bg-slate-800 relative overflow-hidden cursor-pointer"
                        @click="gen.result_list && gen.result_list.length > 0 ? openImagePreview(API_URL + '/assets/' + gen.result_list[0]) : null">
                        <img v-if="gen.result_list && gen.result_list.length > 0"
                            :src="gen.result || API_URL + `/assets/${gen.result_list[0]}` + '?thumbnail=true'"
                            class="w-full h-full object-cover" />
                        <!-- Overlay Actions -->
                        <div
                            class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2 pointer-events-none">
                            <div class="pointer-events-auto flex gap-2">
                                <Button icon="pi pi-copy" rounded text class="!text-white hover:!bg-white/20"
                                    v-tooltip.top="'Copy Prompt'" @click="copyPrompt(gen.prompt)" />
                                <Button icon="pi pi-trash" rounded text
                                    class="!text-white hover:!bg-red-500/80 hover:!text-white"
                                    v-tooltip.top="'Remove from Album'" @click="removeGeneration(gen)" />
                            </div>
                        </div>
                    </div>
                    <div class="p-3">
                        <p class="text-xs text-slate-400 line-clamp-2" :title="gen.prompt">
                            {{ gen.prompt }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div v-else class="flex flex-col items-center justify-center h-full text-slate-400">
            <i class="pi pi-exclamation-circle text-4xl mb-4 text-red-400"></i>
            <p class="text-xl">Album not found</p>
            <Button label="Back to Albums" class="mt-4 p-button-text" @click="router.push('/albums')" />
        </div>
        <Dialog v-model:visible="isGenerationPickerVisible" modal header="Add Generations"
            :style="{ width: '80vw', maxWidth: '1000px' }"
            :pt="{ root: { class: '!bg-slate-900 !border !border-white/10' }, header: { class: '!bg-slate-900 !border-b !border-white/5 !text-white' }, content: { class: '!bg-slate-900 !p-4' }, footer: { class: '!bg-slate-900 !border-t !border-white/5 !p-4' }, closeButton: { class: '!text-slate-400 hover:!text-white' } }">
            <div class="h-[60vh] overflow-y-auto custom-scrollbar">
                <div v-if="loadingAvailableGenerations" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
                    <Skeleton v-for="i in 10" :key="i" height="150px" class="!bg-slate-800 rounded-xl" />
                </div>
                <div v-else-if="availableGenerations.length > 0"
                    class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
                    <div v-for="gen in availableGenerations" :key="gen.id" @click="toggleGenerationSelection(gen)"
                        class="relative aspect-[2/3] rounded-xl overflow-hidden cursor-pointer border-2 transition-all group"
                        :class="selectedGenerations.some(g => g.id === gen.id) ? 'border-violet-500 ring-2 ring-violet-500/30' : 'border-transparent hover:border-white/20'">
                        <img v-if="gen.result_list && gen.result_list.length > 0"
                            :src="gen.result_list[0].includes('http') ? gen.result_list[0] : (gen.result || API_URL + `/assets/${gen.result_list[0]}`)"
                            class="w-full h-full object-cover" />
                        <!-- Fallback for no result -->
                        <div v-else class="w-full h-full bg-slate-800 flex items-center justify-center text-slate-500">
                            <i class="pi pi-image text-2xl"></i>
                        </div>
                        <div class="absolute bottom-0 left-0 right-0 p-2 bg-black/60 backdrop-blur-sm">
                            <p class="text-[10px] text-white line-clamp-2">{{ gen.prompt }}</p>
                        </div>
                        <!-- Checkmark -->
                        <div v-if="selectedGenerations.some(g => g.id === gen.id)"
                            class="absolute top-2 right-2 w-6 h-6 bg-violet-500 rounded-full flex items-center justify-center shadow-lg animate-in zoom-in duration-200">
                            <i class="pi pi-check text-white text-xs"></i>
                        </div>
                    </div>
                </div>
                <div v-else class="flex flex-col items-center justify-center h-full text-slate-500">
                    <p>No generations found.</p>
                </div>
            </div>
            <template #footer>
                <div class="flex justify-end gap-2">
                    <Button label="Cancel" @click="isGenerationPickerVisible = false"
                        class="!text-slate-300 hover:!bg-white/5" text />
                    <Button :label="'Add (' + selectedGenerations.length + ')'" @click="addSelectedGenerations"
                        class="!bg-violet-600 !border-none hover:!bg-violet-500" />
                </div>
            </template>
        </Dialog>
        <!-- Image Preview Modal -->
        <Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
            :style="{ width: '90vw', maxWidth: '1000px', background: 'transparent', boxShadow: 'none' }"
            :pt="{ root: { class: '!bg-transparent !border-none !shadow-none' }, header: { class: '!hidden' }, content: { class: '!bg-transparent !p-0' } }">
            <div class="relative flex items-center justify-center" @click="isImagePreviewVisible = false">
                <img v-if="previewImage" :src="previewImage.url"
                    class="max-w-full max-h-[85vh] object-contain rounded-xl shadow-2xl" />
                <Button icon="pi pi-times" @click="isImagePreviewVisible = false" rounded text
                    class="!absolute -top-4 -right-4 !text-white !bg-black/50 hover:!bg-black/70 !w-10 !h-10" />
            </div>
        </Dialog>
    </div>
 </template>
 <style scoped>
 .glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
 }
 </style>
--- a/src/views/AlbumsView.vue
+++ b/src/views/AlbumsView.vue
@@ -0,0 +1,123 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAlbumStore } from '../stores/albums'
 import { storeToRefs } from 'pinia'
 import Skeleton from 'primevue/skeleton'
 import Dialog from 'primevue/dialog'
 import InputText from 'primevue/inputtext'
 import Textarea from 'primevue/textarea'
 import Button from 'primevue/button'
 import Image from 'primevue/image'
 const router = useRouter()
 const albumStore = useAlbumStore()
 const { albums, loading } = storeToRefs(albumStore)
 const showCreateDialog = ref(false)
 const newAlbum = ref({ name: '', description: '' })
 const submitting = ref(false)
 const API_URL = import.meta.env.VITE_API_URL
 onMounted(async () => {
    await albumStore.fetchAlbums()
 })
 const goToDetail = (id) => {
    router.push({ name: 'album-detail', params: { id } })
 }
 const createAlbum = async () => {
    if (!newAlbum.value.name) return
    submitting.value = true
    try {
        await albumStore.createAlbum(newAlbum.value)
        showCreateDialog.value = false
        newAlbum.value = { name: '', description: '' }
    } finally {
        submitting.value = false
    }
 }
 </script>
 <template>
    <div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100">
        <!-- Top Bar -->
        <header class="flex justify-between items-end mb-8">
            <div>
                <h1 class="text-4xl font-bold m-0">Albums</h1>
                <p class="mt-2 mb-0 text-slate-400">Organize your generations</p>
            </div>
            <Button label="Create Album" icon="pi pi-plus" @click="showCreateDialog = true" 
                class="p-button-outlined p-button-secondary !text-white !border-white/20 hover:!bg-white/10" />
        </header>
        <!-- Loading State -->
        <div v-if="loading && albums.length === 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div v-for="i in 6" :key="i" class="glass-panel rounded-2xl p-6 flex flex-col gap-4">
                <Skeleton height="12rem" class="w-full rounded-xl" />
                <Skeleton width="60%" height="1.5rem" />
                <Skeleton width="40%" height="1rem" />
            </div>
        </div>
        <!-- Empty State -->
        <div v-else-if="albums.length === 0" class="flex flex-col items-center justify-center h-64 text-slate-400">
            <i class="pi pi-folder-open text-6xl mb-4 opacity-50"></i>
            <p class="text-xl">No albums found</p>
            <Button label="Create your first album" class="mt-4 p-button-text" @click="showCreateDialog = true" />
        </div>
        <!-- Albums Grid -->
        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div v-for="album in albums" :key="album.id"
                class="glass-panel rounded-2xl p-6 flex flex-col gap-4 transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:bg-white/5 hover:border-white/10 group"
                @click="goToDetail(album.id)">
                <!-- Album Cover Placeholder -->
                <div v-if="album.cover_asset_id" class="aspect-video w-full bg-slate-800 rounded-xl flex items-center justify-center overflow-hidden border border-white/5">
                    <Image :src="API_URL + '/assets/' + album.cover_asset_id + '?thumbnail=true'" preview class="w-full h-full object-cover" imageClass="w-full h-full object-cover" />
                </div>
                <div v-else class="aspect-video w-full bg-slate-800 rounded-xl flex items-center justify-center overflow-hidden border border-white/5">
                    <i class="pi pi-images text-4xl text-slate-600 group-hover:text-slate-400 transition-colors"></i>
                </div>
                <div>
                    <h3 class="m-0 mb-1 text-xl font-semibold truncate">{{ album.name }}</h3>
                    <p class="m-0 text-sm text-slate-400 line-clamp-2 min-h-[2.5em]">
                        {{ album.description || 'No description' }}
                    </p>
                    <div class="mt-3 flex items-center text-xs text-slate-500">
                        <i class="pi pi-image mr-1"></i>
                        <span>{{ album.generation_ids?.length || 0 }} items</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- Create Album Dialog -->
        <Dialog v-model:visible="showCreateDialog" modal header="Create New Album" :style="{ width: '500px' }" 
            :breakpoints="{ '960px': '75vw', '641px': '90vw' }" class="p-dialog-custom">
            <div class="flex flex-col gap-4 pt-4">
                <div class="flex flex-col gap-2">
                    <label for="name" class="font-semibold">Name</label>
                    <InputText id="name" v-model="newAlbum.name" class="w-full" placeholder="My Awesome Album" autofocus />
                </div>
                <div class="flex flex-col gap-2">
                    <label for="description" class="font-semibold">Description</label>
                    <Textarea id="description" v-model="newAlbum.description" rows="3" class="w-full" placeholder="Optional description..." />
                </div>
            </div>
            <template #footer>
                <Button label="Cancel" icon="pi pi-times" @click="showCreateDialog = false" text />
                <Button label="Create" icon="pi pi-check" @click="createAlbum" :loading="submitting" autofocus />
            </template>
        </Dialog>
    </div>
 </template>
 <style scoped>
 .glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
 }
 </style>
--- a/src/views/AssetsView.vue
+++ b/src/views/AssetsView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { dataService } from '../services/dataService'
 import type { Asset } from '@/models/asset'
@@ -11,6 +11,11 @@ import ConfirmDialog from 'primevue/confirmdialog'
 import { useConfirm } from "primevue/useconfirm"
 import Toast from 'primevue/toast'
 import { useToast } from "primevue/usetoast"
 import { useAlbumStore } from '../stores/albums'
 import { storeToRefs } from 'pinia'
 import InputText from 'primevue/inputtext'
 import Textarea from 'primevue/textarea'
 import Image from 'primevue/image'
 const router = useRouter()
 const confirm = useConfirm()
@@ -21,12 +26,47 @@ const activeFilter = ref('all')
 // @ts-ignore
 const API_URL = import.meta.env.VITE_API_URL
 // Albums Logic
 const albumStore = useAlbumStore()
 const { albums, loading: albumsLoading } = storeToRefs(albumStore)
 const viewMode = ref('assets') // 'assets' | 'albums'
 const showCreateDialog = ref(false)
 const newAlbum = ref({ name: '', description: '' })
 const submittingAlbum = ref(false)
 const selectedAsset = ref<Asset | null>(null)
 const isModalVisible = ref(false)
 const first = ref(0)
-const rows = ref(12)
+const rows = ref(18)
 const totalRecords = ref(0)
 const fileInput = ref<HTMLInputElement | null>(null)
 const triggerFileUpload = () => {
    fileInput.value?.click()
 }
 const handleFileUpload = async (event: Event) => {
    const target = event.target as HTMLInputElement
    if (target.files && target.files[0]) {
        const file = target.files[0]
        try {
            loading.value = true
            await dataService.uploadAsset(file)
            toast.add({ severity: 'success', summary: 'Success', detail: 'Asset uploaded successfully', life: 3000 })
            // Reset to first page and reload
            first.value = 0
            activeFilter.value = 'uploaded' // Switch to uploaded view to see the new asset
            loadAssets()
        } catch (e) {
            console.error('Failed to upload asset', e)
            toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to upload asset', life: 3000 })
        } finally {
            loading.value = false
            target.value = '' // Reset input
        }
    }
 }
 const openModal = (asset: Asset) => {
    selectedAsset.value = asset
@@ -52,10 +92,37 @@ const loadAssets = async () => {
    }
 }
 // Watch view mode to load albums
 watch(viewMode, async (newMode) => {
    if (newMode === 'albums' && albums.value.length === 0) {
        await albumStore.fetchAlbums()
    }
 })
 onMounted(() => {
    loadAssets()
    // Preload albums if needed or wait for switch
 })
 const createAlbum = async () => {
    if (!newAlbum.value.name) return
    submittingAlbum.value = true
    try {
        await albumStore.createAlbum(newAlbum.value)
        showCreateDialog.value = false
        newAlbum.value = { name: '', description: '' }
        toast.add({ severity: 'success', summary: 'Success', detail: 'Album created', life: 3000 })
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to create album', life: 3000 })
    } finally {
        submittingAlbum.value = false
    }
 }
 const goToAlbumDetail = (id: string) => {
    router.push({ name: 'album-detail', params: { id } })
 }
 // Server-side filtering is now used, so we don't need a local filteredAssets computed property
 // unless we want to do secondary filtering, but usually it's better to let the server handle it.
@@ -64,8 +131,6 @@ const paginatedAssets = computed(() => {
    return assets.value
 })
 const confirmDelete = (asset: Asset) => {
    confirm.require({
        message: 'Do you want to delete this asset?',
@@ -114,97 +179,195 @@ const formatDate = (dateString: string) => {
 <template>
    <div class="flex flex-col h-full p-8 overflow-y-auto w-full text-slate-100">
        <!-- Main Content (Sidebar removed) -->
-        <div class="flex-1 flex flex-col">
+        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- Top Bar -->
-            <header class="flex justify-between items-end mb-8">
+            <header class="flex justify-between items-center mb-4 px-1">
                <div>
-                    <h1 class="text-4xl font-bold m-0">Assets Library</h1>
+                    <h1
-                    <p class="mt-2 mb-0 text-slate-400">Manage all your assets</p>
+                        class="text-xl font-bold bg-gradient-to-r from-white to-slate-400 bg-clip-text text-transparent m-0">
                        Library</h1>
                    <p class="text-xs text-slate-500 mt-1">Manage your generations and albums</p>
                </div>
-                <div class="glass-panel p-2 flex gap-2 rounded-xl">
+                <div class="flex items-center gap-4">
-                    <Button v-for="filter in ['all', 'image']" :key="filter"
+                    <!-- View Switcher -->
                    <div class="glass-panel p-1 flex gap-1 rounded-xl bg-slate-800/50 border border-white/5">
                        <Button label="Assets" icon="pi pi-images"
                            :class="viewMode === 'assets' ? 'bg-white/10 text-slate-50 shadow-sm' : 'bg-transparent text-slate-400 hover:text-slate-200'"
                            class="px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200" text
                            @click="viewMode = 'assets'" />
                        <Button label="Albums" icon="pi pi-book"
                            :class="viewMode === 'albums' ? 'bg-white/10 text-slate-50 shadow-sm' : 'bg-transparent text-slate-400 hover:text-slate-200'"
                            class="px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200" text
                            @click="viewMode = 'albums'" />
                    </div>
                    <!-- Assets Toolbar -->
                    <div v-if="viewMode === 'assets'" class="flex items-center gap-2">
                        <input type="file" ref="fileInput" @change="handleFileUpload" class="hidden" accept="image/*" />
                        <Button label="Upload" icon="pi pi-upload" @click="triggerFileUpload"
                            class="!bg-violet-600 !border-none hover:!bg-violet-500 !text-xs !px-3 !py-1.5 !rounded-lg !font-medium shadow-lg shadow-violet-500/20" />
                        <div class="glass-panel p-1 flex gap-1 rounded-xl bg-slate-800/50 border border-white/5">
                            <Button v-for="filter in ['all', 'generated', 'uploaded']" :key="filter"
                                :label="filter.charAt(0).toUpperCase() + filter.slice(1)"
-                        :class="activeFilter === filter ? 'bg-white/10 text-slate-50' : 'bg-transparent text-slate-400'"
+                                :class="activeFilter === filter ? 'bg-white/10 text-slate-50 shadow-sm' : 'bg-transparent text-slate-400 hover:text-slate-200'"
-                        class="px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:text-slate-50" text
+                                class="px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200" text
                                @click="handleFilterChange(filter)" />
                        </div>
                    </div>
                    <!-- Albums Toolbar -->
                    <div v-if="viewMode === 'albums'" class="flex items-center gap-2">
                        <Button label="Create Album" icon="pi pi-plus" @click="showCreateDialog = true"
                            class="!bg-violet-600 !border-none hover:!bg-violet-500 !text-xs !px-3 !py-1.5 !rounded-lg !font-medium shadow-lg shadow-violet-500/20" />
                    </div>
                </div>
            </header>
            <!-- ASSETS VIEW -->
            <div v-if="viewMode === 'assets'" class="contents">
                <!-- Loading State -->
-            <div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 pb-8">
+                <div v-if="loading"
-                <div v-for="i in 8" :key="i" class="glass-panel rounded-2xl overflow-hidden">
+                    class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-6 gap-2 md:gap-1 pb-4 overflow-y-auto custom-scrollbar">
-                    <Skeleton height="180px" />
+                    <Skeleton v-for="i in 12" :key="i" class="aspect-[9/16] !bg-slate-800 rounded-none sm:rounded-md" />
                    <div class="p-5">
                        <Skeleton class="mb-2" />
                        <Skeleton width="60%" />
                    </div>
                </div>
                </div>
                <!-- Assets Grid -->
-            <div v-else class="flex-1 flex flex-col">
+                <div v-else class="flex-1 overflow-y-auto custom-scrollbar pb-20">
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6 pb-8">
+                    <div v-if="paginatedAssets.length > 0"
-                    <div v-for="asset in paginatedAssets" :key="asset.id" @click="openModal(asset)"
+                        class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-6 gap-2 md:gap-1">
-                        class="glass-panel rounded-2xl overflow-hidden transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:border-white/20 hover:shadow-2xl">
+                        <div v-for="asset in paginatedAssets" :key="asset.id"
-                        <!-- Media Preview -->
+                            class="aspect-[9/16] relative group overflow-hidden bg-slate-800 transition-all duration-300 rounded-none sm:rounded-md border border-white/5 hover:border-white/20"
-                        <div class="h-70 bg-black/30 relative overflow-hidden">
+                            @click="openModal(asset)">
                            <!-- Image -->
                            <img :src="(API_URL + asset.url + '?thumbnail=true') || 'https://via.placeholder.com/300'"
                                :alt="asset.name"
-                                class="w-full h-full object-cover transition-transform duration-500 hover:scale-105" />
+                                class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
-                            <div
+
-                                class="absolute top-2.5 right-2.5 bg-black/60 backdrop-blur-sm px-3 py-1 rounded-full text-xs uppercase font-semibold text-white z-10">
+                            <!-- Type Badge -->
                            <div v-if="asset.type !== 'image'"
                                class="absolute top-2 right-2 bg-black/60 backdrop-blur-sm px-1.5 py-0.5 rounded text-[10px] uppercase font-bold text-white z-10 opacity-70 group-hover:opacity-100 transition-opacity">
                                {{ asset.type }}
                            </div>
-                            <div @click.stop="confirmDelete(asset)"
+
-                                class="absolute top-2.5 left-2.5 w-8 h-8 rounded-full bg-black/60 backdrop-blur-sm flex items-center justify-center cursor-pointer hover:bg-red-500/80 transition-all z-10 group/delete">
+                            <!-- Hover Overlay -->
-                                <i
+                            <div
-                                    class="pi pi-trash text-white text-xs group-hover/delete:scale-110 transition-transform"></i>
+                                class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col justify-between p-3">
                                <!-- Top Actions -->
                                <div
                                    class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200">
                                    <Button icon="pi pi-trash" v-tooltip.right="'Delete'"
                                        class="!w-7 !h-7 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-xs hover:!bg-red-500 hover:!text-white transition-colors"
                                        @click.stop="confirmDelete(asset)" />
                                    <span v-if="asset.linked_char_id"
                                        class="text-[10px] bg-emerald-500/20 text-emerald-400 px-2 py-1 rounded-full border border-emerald-500/20"
                                        v-tooltip.left="'Linked to Character'">
                                        Linked
                                    </span>
                                </div>
                                <!-- Center View Button -->
                                <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                                    <Button icon="pi pi-eye" rounded text
                                        class="!bg-black/40 !text-white !w-10 !h-10 !rounded-full opacity-0 group-hover:opacity-100 hover:!bg-black/60 hover:!scale-110 transition-all duration-300 pointer-events-auto !border border-white/20"
                                        @click.stop="openModal(asset)" />
                                </div>
                                <!-- Bottom Info -->
                                <div
                                    class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200">
                                    <p class="text-xs font-medium text-white line-clamp-1 mb-0.5">{{ asset.name }}</p>
                                    <p class="text-[10px] text-slate-400">{{ formatDate(asset.created_at) }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
-                        <!-- Asset Info -->
+                    <div v-else class="flex flex-col items-center justify-center h-64 text-slate-500">
-                        <div class="p-5">
+                        <i class="pi pi-images text-4xl mb-3 opacity-50"></i>
-                            <div class="flex justify-between items-start mb-2">
+                        <p>No assets found</p>
-                                <h3
+                        <Button v-if="activeFilter !== 'all'" label="Clear Filters" text class="mt-2 !text-violet-400"
-                                    class="m-0 text-base font-semibold whitespace-nowrap overflow-hidden text-ellipsis flex-1 mr-2">
+                            @click="handleFilterChange('all')" />
                                    {{ asset.name }}
                                </h3>
                            </div>
                            <div class="flex justify-between items-center text-xs text-slate-400">
                                <span>{{ formatDate(asset.created_at) }}</span>
                                <span v-if="asset.linked_char_id"
                                    class="bg-emerald-500/10 text-emerald-400 px-2 py-0.5 rounded">
                                    🔗 Linked
                                </span>
                            </div>
                        </div>
                    </div>
                    </div>
                    <!-- Pagination -->
-                <div v-if="totalRecords > rows" class="mt-auto py-6">
+                    <div v-if="totalRecords > rows" class="mt-6 flex justify-center">
                        <Paginator :first="first" :rows="rows" :totalRecords="totalRecords" @page="onPage" :template="{
                            default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'
                        }" class="!bg-transparent !border-none !p-0" :pt="{
                            root: { class: '!bg-transparent' },
-                        pcPageButton: {
+                            pages: { class: 'gap-1' },
-                            root: ({ context }) => ({
+                            pageButton: ({ context }) => ({
                                class: [
-                                    '!min-w-[40px] !h-10 !rounded-xl !border-none !transition-all !duration-300 !font-bold',
+                                    '!min-w-[32px] !h-8 !rounded-lg !border-none !transition-all !duration-200 !text-xs',
-                                    context.active ? '!bg-violet-600 !text-white !shadow-lg' : '!bg-white/5 !text-slate-400 hover:!bg-white/10 hover:!text-slate-50'
+                                    context.active ? '!bg-violet-600 !text-white !shadow-lg !shadow-violet-500/30' : '!bg-white/5 !text-slate-400 hover:!bg-white/10 hover:!text-slate-200'
                                ]
-                            })
+                            }),
-                        },
+                            firstPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-lg !min-w-[32px] !h-8 hover:!bg-white/10 hover:!text-slate-200 transition-all !mr-1' } },
-                        pcFirstPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
+                            previousPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-lg !min-w-[32px] !h-8 hover:!bg-white/10 hover:!text-slate-200 transition-all !mr-2' } },
-                        pcPreviousPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
+                            nextPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-lg !min-w-[32px] !h-8 hover:!bg-white/10 hover:!text-slate-200 transition-all !ml-2' } },
-                        pcNextPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
+                            lastPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-lg !min-w-[32px] !h-8 hover:!bg-white/10 hover:!text-slate-200 transition-all !ml-1' } }
                        pcLastPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } }
                        }" />
                    </div>
                </div>
            </div>
            <!-- ALBUMS VIEW -->
            <div v-else class="flex-1 overflow-y-auto custom-scrollbar pb-20">
                <!-- Empty State -->
                <div v-if="albums.length === 0 && !albumsLoading"
                    class="flex flex-col items-center justify-center h-64 text-slate-400">
                    <i class="pi pi-folder-open text-6xl mb-4 opacity-50"></i>
                    <p class="text-xl">No albums found</p>
                    <Button label="Create your first album" class="mt-4 p-button-text"
                        @click="showCreateDialog = true" />
                </div>
                <!-- Loading State -->
                <div v-else-if="albumsLoading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div v-for="i in 6" :key="i" class="glass-panel rounded-2xl p-6 flex flex-col gap-4">
                        <Skeleton height="12rem" class="w-full rounded-xl" />
                        <Skeleton width="60%" height="1.5rem" />
                        <Skeleton width="40%" height="1rem" />
                    </div>
                </div>
                <!-- Albums Grid -->
                <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div v-for="album in albums" :key="album.id"
                        class="glass-panel rounded-2xl p-6 flex flex-col gap-4 transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:bg-white/5 hover:border-white/10 group"
                        @click="goToAlbumDetail(album.id)">
                        <!-- Album Cover Placeholder -->
                        <div v-if="album.cover_asset_id"
                            class="aspect-video w-full bg-slate-800 rounded-xl flex items-center justify-center overflow-hidden border border-white/5">
                            <Image :src="API_URL + '/assets/' + album.cover_asset_id + '?thumbnail=true'" preview
                                class="w-full h-full object-cover" imageClass="w-full h-full object-cover"
                                @click.stop />
                        </div>
                        <div v-else
                            class="aspect-video w-full bg-slate-800 rounded-xl flex items-center justify-center overflow-hidden border border-white/5">
                            <i
                                class="pi pi-images text-4xl text-slate-600 group-hover:text-slate-400 transition-colors"></i>
                        </div>
                        <div>
                            <h3 class="m-0 mb-1 text-xl font-semibold truncate">{{ album.name }}</h3>
                            <p class="m-0 text-sm text-slate-400 line-clamp-2 min-h-[2.5em]">
                                {{ album.description || 'No description' }}
                            </p>
                            <div class="mt-3 flex items-center text-xs text-slate-500">
                                <i class="pi pi-image mr-1"></i>
                                <span>{{ album.generation_ids?.length || 0 }} items</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Dialog v-model:visible="isModalVisible" modal dismissableMask header="Asset View"
            :style="{ width: '90vw', maxWidth: '800px' }" class="glass-panel rounded-2xl">
            <div v-if="selectedAsset" class="flex flex-col items-center">
@@ -216,6 +379,28 @@ const formatDate = (dateString: string) => {
                </div>
            </div>
        </Dialog>
        <!-- Create Album Dialog -->
        <Dialog v-model:visible="showCreateDialog" modal header="Create New Album" :style="{ width: '500px' }"
            :breakpoints="{ '960px': '75vw', '641px': '90vw' }" class="p-dialog-custom">
            <div class="flex flex-col gap-4 pt-4">
                <div class="flex flex-col gap-2">
                    <label for="name" class="font-semibold">Name</label>
                    <InputText id="name" v-model="newAlbum.name" class="w-full" placeholder="My Awesome Album"
                        autofocus />
                </div>
                <div class="flex flex-col gap-2">
                    <label for="description" class="font-semibold">Description</label>
                    <Textarea id="description" v-model="newAlbum.description" rows="3" class="w-full"
                        placeholder="Optional description..." />
                </div>
            </div>
            <template #footer>
                <Button label="Cancel" icon="pi pi-times" @click="showCreateDialog = false" text />
                <Button label="Create" icon="pi pi-check" @click="createAlbum" :loading="submittingAlbum" autofocus />
            </template>
        </Dialog>
        <ConfirmDialog></ConfirmDialog>
        <Toast />
    </div>
--- a/src/views/CharacterDetailView.vue
+++ b/src/views/CharacterDetailView.vue
@@ -94,6 +94,40 @@ const handleDownloadResults = () => {
    }
 }
 const generationCount = ref(1)
 const groupedHistoryGenerations = computed(() => {
    const groups = new Map()
    const result = []
    for (const gen of historyGenerations.value) {
        if (gen.generation_group_id) {
            if (groups.has(gen.generation_group_id)) {
                groups.get(gen.generation_group_id).children.push(gen)
            } else {
                const group = {
                    id: gen.generation_group_id,
                    generation_group_id: gen.generation_group_id,
                    prompt: gen.prompt,
                    created_at: gen.created_at,
                    isGroup: true,
                    children: [gen],
                    // Use first child status for group status if needed, or derived
                    status: gen.status
                }
                groups.set(gen.generation_group_id, group)
                result.push(group)
            }
        } else {
            result.push(gen)
        }
    }
    return result
 })
 const hasActiveGeneration = computed(() => {
    return isGenerating.value || historyGenerations.value.some(g => ['starting', 'processing', 'running'].includes(g.status))
 })
 const loadData = async () => {
    loading.value = true
    const charId = route.params.id
@@ -116,6 +150,13 @@ const loadData = async () => {
        if (historyResponse && historyResponse.generations) {
            historyGenerations.value = historyResponse.generations
            historyTotal.value = historyResponse.total_count || 0
            // Resume polling for active generations
            historyGenerations.value.forEach(gen => {
                if (['starting', 'processing', 'running'].includes(gen.status)) {
                    pollGeneration(gen.id)
                }
            })
        } else {
            historyGenerations.value = Array.isArray(historyResponse) ? historyResponse : []
            historyTotal.value = historyGenerations.value.length
@@ -158,6 +199,13 @@ const loadHistory = async () => {
        if (response && response.generations) {
            historyGenerations.value = response.generations
            historyTotal.value = response.total_count || 0
            // Resume polling for newly loaded active generations if any
            historyGenerations.value.forEach(gen => {
                if (['starting', 'processing', 'running'].includes(gen.status)) {
                    pollGeneration(gen.id)
                }
            })
        } else {
            historyGenerations.value = Array.isArray(response) ? response : []
            historyTotal.value = historyGenerations.value.length
@@ -306,50 +354,79 @@ const onModalAssetsPage = (event) => {
    loadAllAssets()
 }
-const pollStatus = async (id) => {
+const pollGeneration = async (id) => {
    let completed = false
-    while (!completed && isGenerating.value) {
+    let attempts = 0
    // Find the generation object in our list to update it specifically
    // We poll and update the object in historyGenerations
    while (!completed) {
        // Check if generation is still needed to be polled (e.g. if we navigated away? logic handles this by default)
        const genIndex = historyGenerations.value.findIndex(g => g.id === id)
        if (genIndex === -1) {
            // Maybe it's a new one not yet in history list? 
            // Logic in handleGenerate adds it first, so it should be there.
            // If not found, maybe stop polling?
            if (attempts > 5) return // Stop if keep failing to find it
        }
        const gen = historyGenerations.value[genIndex]
        try {
            const response = await aiService.getGenerationStatus(id)
            if (gen) {
                Object.assign(gen, response)
                // Update specific legacy ref if this is the latest one user is looking at in the "Creating..." block
                if (isGenerating.value && generatedResult.value === null) {
                    generationStatus.value = response.status
                    generationProgress.value = response.progress || 0
                }
            }
            if (response.status === 'done') {
                completed = true
-                generationSuccess.value = true
+                if (isGenerating.value && (!generatedResult.value || generatedResult.value === id)) {
-
+                    // only finish the "generating" blocking state if *all* active ones are done? 
-                // Refresh assets list
+                    // No, simpler: isGenerating tracks the *submission* process mainly, 
-                const assets = await loadAssets()
+                    // but we also use it to show the big spinner.
-
+                    // If we support multiple, we should probably stop showing the big spinner 
-                // Display created assets from the list (without selecting them)
+                    // once submission is done and just show history status.
-                if (response.assets_list && response.assets_list.length > 0) {
+                }
-                    const resultAssets = assets.filter(a => response.assets_list.includes(a.id))
+
-                    generatedResult.value = {
+                // If we want to show the result of the *just finished* one in the big box:
-                        type: 'assets',
+                if (isGenerating.value) {
-                        assets: resultAssets,
+                    // logic for "main" result display
                        tech_prompt: response.tech_prompt,
                        execution_time: response.execution_time_seconds,
                        api_execution_time: response.api_execution_time_seconds,
                        token_usage: response.token_usage
                    }
                }
                loadHistory()
            } else if (response.status === 'failed') {
                completed = true
-                generationError.value = response.failed_reason || 'Generation failed on server'
+                if (gen) gen.failed_reason = response.failed_reason
                throw new Error(generationError.value)
            } else {
                // Wait before next poll
                await new Promise(resolve => setTimeout(resolve, 2000))
            }
        } catch (e) {
-            console.error('Polling failed', e)
+            console.error(`Polling failed for ${id}`, e)
            attempts++
            if (attempts > 10) {
                completed = true
-            isGenerating.value = false
+                if (gen) {
                    gen.status = 'failed'
                    gen.failed_reason = 'Polling connection lost'
                }
            }
-    isGenerating.value = false
+            await new Promise(resolve => setTimeout(resolve, 5000))
        }
    }
    // Check if we can turn off global loading
    // Actually, let's turn off "isGenerating" immediately after submission success,
    // and let the history handle the progress. 
    // BUT user wants to see it in the main slot?
    // "display 4 copies in one slot in the feed"
    // "track status of generations after sending"
    // "block sending next if active"
 }
 const restoreGeneration = async (gen) => {
@@ -495,6 +572,7 @@ const handleGenerate = async () => {
    try {
        if (sendToTelegram.value && !telegramId.value) {
            alert("Please enter your Telegram ID")
            isGenerating.value = false
            return
        }
@@ -510,27 +588,55 @@ const handleGenerate = async () => {
            prompt: prompt.value,
            assets_list: selectedAssets.value.map(a => a.id),
            telegram_id: sendToTelegram.value ? telegramId.value : null,
-            use_profile_image: useProfileImage.value
+            use_profile_image: useProfileImage.value,
            count: generationCount.value
        }
        const response = await aiService.runGeneration(payload)
-        // response is expected to have an 'id' for the generation task
+
-        if (response && response.id) {
+        let generations = []
-            pollStatus(response.id)
+        if (response && response.generations) {
            generations = response.generations
        } else if (Array.isArray(response)) {
            generations = response
        } else {
-            // Fallback if it returns data immediately
+            generations = [response]
            generatedResult.value = response
            generationSuccess.value = true
            isGenerating.value = false
        }
        // Add to history and start polling
        for (const gen of generations) {
            if (gen && gen.id) {
                const newGen = {
                    ...gen,
                    status: gen.status || 'starting',
                    created_at: new Date().toISOString()
                }
                historyGenerations.value.unshift(newGen)
                historyTotal.value++
                pollGeneration(gen.id)
            }
        }
        // We set isGenerating to false immediately after successful submission
        // because we want detailed status to be tracked in the history list.
        // However, if we want to block the UI, hasActiveGeneration will do that.
        // But for the 'big spinner', if we want to show it, we can keep it for a bit or just rely on history.
        // User requested: "block next if active".
        // Let's reset isGenerating so the big spinner goes away, and the user sees the progress in the history list.
        isGenerating.value = false
        prompt.value = ''
        // Scroll to history?
        // Maybe open/switch history tab or ensure it is visible?
        // For now, let's just let the user see it in the history section.
    } catch (e) {
        console.error('Generation failed', e)
        isGenerating.value = false
        generationError.value = e.message || 'Failed to start generation'
    }
 }
 </script>
 <template>
@@ -636,6 +742,19 @@ const handleGenerate = async () => {
                                    </div>
                                    <div class="flex flex-col gap-1.5">
                                        <label
                                            class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Count</label>
                                        <div
                                            class="!flex !w-full !justify-between  items-center  justify-center !bg-slate-900/50 !p-1  gap-1 !rounded-lg !border !border-white/10">
                                            <div v-for="n in 4" :key="n" @click="generationCount = n"
                                                class="w-full items-center justify-center justify-items-center !text-center hover:bg-white/5 hover:text-white p-1 hover:rounded-lg cursor-pointer transition-all"
                                                :class="generationCount === n ? 'bg-white/10 text-white rounded-lg shadow-sm' : 'text-slate-500'">
                                                <span class="text-[10px] font-bold">{{ n }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex flex-col gap-1.5">
                                        <label
                                            class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Description</label>
@@ -712,10 +831,12 @@ const handleGenerate = async () => {
                                        </div>
                                    </div>
-                                    <Button :label="isGenerating ? 'Wait...' : `Generate`"
+                                    <Button
-                                        :icon="isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-magic'"
+                                        :label="hasActiveGeneration ? 'Processing...' : (isGenerating ? 'Wait...' : `Generate`)"
-                                        :loading="isGenerating" @click="handleGenerate"
+                                        :icon="hasActiveGeneration || isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-magic'"
-                                        class="w-full py-2 text-[11px] font-bold bg-gradient-to-r from-violet-600 to-cyan-500 border-none rounded shadow transition-all hover:scale-[1.01] active:scale-[0.99]" />
+                                        :loading="hasActiveGeneration || isGenerating" :disabled="hasActiveGeneration"
                                        @click="handleGenerate"
                                        class="w-full py-2 text-[11px] font-bold bg-gradient-to-r from-violet-600 to-cyan-500 border-none rounded shadow transition-all hover:scale-[1.01] active:scale-[0.99] disabled:opacity-50 disabled:cursor-not-allowed" />
                                    <Message v-if="generationSuccess" severity="success" :closable="true"
                                        @close="generationSuccess = false">
@@ -839,18 +960,66 @@ const handleGenerate = async () => {
                                                class="!p-1 !w-6 !h-6 text-slate-500" @click="loadHistory" />
                                        </div>
-                                        <div v-if="historyGenerations.length === 0"
+                                        <div v-if="groupedHistoryGenerations.length === 0"
                                            class="py-10 text-center text-slate-600 italic text-xs">
                                            No previous generations.
                                        </div>
                                        <div v-else
                                            class="flex-1 overflow-y-auto pr-2 custom-scrollbar flex flex-col gap-2">
-                                            <div v-for="gen in historyGenerations" :key="gen.id"
+                                            <div v-for="gen in groupedHistoryGenerations" :key="gen.id"
-                                                @click="restoreGeneration(gen)"
+                                                @click="gen.isGroup ? null : restoreGeneration(gen)"
                                                class="glass-panel p-2 rounded-lg border border-white/5 flex gap-3 items-start hover:bg-white/10 cursor-pointer transition-colors group">
                                                <!-- Grouped (Grid) -->
                                                <div v-if="gen.isGroup" class="w-full">
                                                    <div class="flex justify-between items-start mb-1.5">
                                                        <div
                                                            class="text-[10px] font-bold text-slate-400 bg-white/5 px-1.5 py-0.5 rounded flex items-center gap-1">
                                                            <i class="pi pi-images text-[9px]"></i>
                                                            {{ gen.children.length }} variations
                                                        </div>
                                                        <span class="text-[9px] text-slate-600">{{ new
                                                            Date(gen.created_at).toLocaleDateString() }}</span>
                                                    </div>
                                                    <div class="grid gap-1.5"
                                                        :class="gen.children.length > 2 ? 'grid-cols-4' : 'grid-cols-2'">
                                                        <div v-for="child in gen.children" :key="child.id"
                                                            class="relative aspect-[9/16] rounded-md overflow-hidden bg-black/30 border border-white/5 group/child"
                                                            @click.stop="restoreGeneration(child)">
                                                            <img v-if="child.result_list && child.result_list.length > 0"
                                                                :src="API_URL + '/assets/' + child.result_list[0] + '?thumbnail=true'"
                                                                class="w-full h-full object-cover hover:scale-105 transition-transform" />
                                                            <div v-else-if="['starting', 'processing', 'running'].includes(child.status)"
                                                                class="w-full h-full flex flex-col items-center justify-center bg-violet-500/10">
                                                                <i
                                                                    class="pi pi-spin pi-spinner text-violet-400 text-xs"></i>
                                                            </div>
                                                            <div v-else-if="child.status === 'failed'"
                                                                class="w-full h-full flex items-center justify-center bg-red-500/10"
                                                                v-tooltip.bottom="child.failed_reason">
                                                                <i
                                                                    class="pi pi-exclamation-circle text-red-500 text-xs"></i>
                                                            </div>
                                                            <div v-if="child.result_list && child.result_list.length > 0"
                                                                class="absolute inset-0 bg-black/40 opacity-0 group-hover/child:opacity-100 flex items-center justify-center transition-opacity">
                                                                <i class="pi pi-eye text-white text-xs"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <p class="text-[10px] text-slate-400 mt-1.5 px-0.5 truncate">{{
                                                        gen.prompt }}</p>
                                                </div>
                                                <!-- Single -->
                                                <div v-else class="flex gap-3 w-full">
                                                    <div class="w-12 h-12 rounded bg-black/40 border border-white/10 flex-shrink-0 mt-0.5 relative z-0"
-                                                    @mouseenter="onThumbnailEnter($event, API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true')"
+                                                        @mouseenter="gen.result_list && gen.result_list[0] ? onThumbnailEnter($event, API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true') : null"
                                                        @mouseleave="onThumbnailLeave">
                                                        <img v-if="gen.result_list && gen.result_list.length > 0"
                                                            :src="API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true'"
@@ -873,22 +1042,24 @@ const handleGenerate = async () => {
                                                        </p>
                                                        <div class="flex items-center gap-2 text-[10px] text-slate-500">
-                                                        <span>{{ new Date(gen.created_at).toLocaleDateString() }}</span>
+                                                            <span>{{ new Date(gen.created_at).toLocaleDateString()
                                                                }}</span>
                                                            <span class="capitalize"
                                                                :class="gen.status === 'done' ? 'text-green-500' : (gen.status === 'failed' ? 'text-red-500' : 'text-amber-500')">{{
                                                                    gen.status }}</span>
-                                                        <i v-if="gen.failed_reason" v-tooltip.right="gen.failed_reason"
+                                                            <i v-if="gen.failed_reason"
                                                                v-tooltip.right="gen.failed_reason"
                                                                class="pi pi-exclamation-circle text-red-500"
                                                                style="font-size: 12px;" />
                                                        </div>
                                                        <!-- Metrics in history -->
                                                        <div v-if="gen.execution_time_seconds || gen.token_usage"
                                                            class="flex flex-wrap gap-2 text-[9px] text-slate-500 font-mono opacity-70">
-                                                        <span v-if="gen.execution_time_seconds" title="Total Time"><i
+                                                            <span v-if="gen.execution_time_seconds"
-                                                                class="pi pi-clock mr-0.5"></i>{{
+                                                                title="Total Time"><i class="pi pi-clock mr-0.5"></i>{{
                                                                    gen.execution_time_seconds.toFixed(1) }}s</span>
-                                                        <span v-if="gen.api_execution_time_seconds" title="API Time"><i
+                                                            <span v-if="gen.api_execution_time_seconds"
-                                                                class="pi pi-server mr-0.5"></i>{{
+                                                                title="API Time"><i class="pi pi-server mr-0.5"></i>{{
                                                                    gen.api_execution_time_seconds.toFixed(1) }}s</span>
                                                            <span v-if="gen.token_usage" title="Tokens"><i
                                                                    class="pi pi-bolt mr-0.5"></i>{{ gen.token_usage
@@ -896,7 +1067,8 @@ const handleGenerate = async () => {
                                                        </div>
                                                        <!-- Action Buttons -->
-                                                    <div class="flex gap-2 mt-1 border-t border-white/5 pt-2 w-full">
+                                                        <div
                                                            class="flex gap-2 mt-1 border-t border-white/5 pt-2 w-full">
                                                            <Button icon="pi pi-copy" label="Prompt" size="small" text
                                                                class="!text-[10px] !py-0.5 !px-1.5 text-slate-400 hover:bg-white/5 flex-1"
                                                                @click.stop="reusePrompt(gen)"
@@ -915,6 +1087,7 @@ const handleGenerate = async () => {
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Compact Pagination -->
                                        <div v-if="historyTotal > historyRows" class="mt-2 text-xs">
--- a/src/views/CharactersView.vue
+++ b/src/views/CharactersView.vue
@@ -3,38 +3,135 @@ import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { dataService } from '../services/dataService'
 import Skeleton from 'primevue/skeleton'
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import InputText from 'primevue/inputtext'
 import Textarea from 'primevue/textarea'
 import ConfirmDialog from 'primevue/confirmdialog'
 import Toast from 'primevue/toast'
 import { useConfirm } from 'primevue/useconfirm'
 import { useToast } from 'primevue/usetoast'
 const router = useRouter()
 const confirm = useConfirm()
 const toast = useToast()
 const characters = ref([])
 const loading = ref(true)
 const showCreateDialog = ref(false)
 const creating = ref(false)
 const newCharacter = ref({
    name: '',
    character_bio: '',
    avatar_image: '' // Optional for now
 })
 const API_URL = import.meta.env.VITE_API_URL
 onMounted(async () => {
    await fetchCharacters()
 })
 const fetchCharacters = async () => {
    loading.value = true
    try {
        characters.value = await dataService.getCharacters()
    } catch (e) {
        console.error('Failed to load characters', e)
        toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to load characters', life: 3000 })
    } finally {
        loading.value = false
    }
-})
+}
 const goToDetail = (id) => {
    router.push({ name: 'character-detail', params: { id } })
 }
 const selectedAvatarFile = ref(null)
 const onFileSelect = (event) => {
    const file = event.target.files[0]
    if (file) {
        selectedAvatarFile.value = file
    }
 }
 const openCreateDialog = () => {
    newCharacter.value = { name: '', character_bio: '', avatar_image: '' }
    selectedAvatarFile.value = null
    showCreateDialog.value = true
 }
 const createCharacter = async () => {
    if (!newCharacter.value.name.trim()) return
    creating.value = true
    try {
        // Upload avatar if selected
        if (selectedAvatarFile.value) {
            const uploadResult = await dataService.uploadAsset(selectedAvatarFile.value)
            // Assuming uploadAsset returns object with 'url' or 'path' or similar. 
            // The dataService.uploadAsset returns response.data. 
            // Let's assume response.data has 'url' or is the url string? 
            // Checking dataService.js: returns response.data. usage in other places implies it might be the asset object.
            // Let's check typical asset response. It likely has 'url' or 'file_path'.
            // I'll assume it returns an Asset object and I should use its url.
            if (uploadResult && uploadResult.url) {
                newCharacter.value.avatar_image = uploadResult.url
            } else if (uploadResult && uploadResult.file_path) {
                newCharacter.value.avatar_image = uploadResult.file_path
            }
        }
        await dataService.createCharacter(newCharacter.value)
        toast.add({ severity: 'success', summary: 'Success', detail: 'Character created', life: 3000 })
        showCreateDialog.value = false
        await fetchCharacters()
    } catch (e) {
        console.error('Failed to create character', e)
        toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to create character', life: 3000 })
    } finally {
        creating.value = false
    }
 }
 const confirmDelete = (event, id) => {
    event.stopPropagation() // Prevent card click
    confirm.require({
        message: 'Are you sure you want to delete this character?',
        header: 'Delete Confirmation',
        icon: 'pi pi-exclamation-triangle',
        acceptClass: 'p-button-danger',
        rejectClass: 'p-button-secondary',
        acceptLabel: 'Delete',
        rejectLabel: 'Cancel',
        accept: async () => {
            try {
                await dataService.deleteCharacter(id)
                toast.add({ severity: 'success', summary: 'Success', detail: 'Character deleted', life: 3000 })
                await fetchCharacters()
            } catch (e) {
                console.error('Failed to delete character', e)
                toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to delete character', life: 3000 })
            }
        }
    })
 }
 </script>
 <template>
-    <div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100">
+    <div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100 relative">
        <Toast />
        <ConfirmDialog />
        <!-- Top Bar -->
        <header class="flex justify-between items-end mb-8">
            <div>
                <h1 class="text-4xl font-bold m-0">Characters</h1>
                <p class="mt-2 mb-0 text-slate-400">Manage your AI personas</p>
            </div>
            <Button label="Create Character" icon="pi pi-plus" @click="openCreateDialog" />
        </header>
        <!-- Loading State -->
@@ -51,20 +148,55 @@ const goToDetail = (id) => {
        <!-- Characters Grid -->
        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div v-for="char in characters" :key="char.id"
-                class="glass-panel rounded-2xl p-6 flex items-center gap-6 transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:bg-white/5 hover:border-white/10"
+                class="glass-panel rounded-2xl p-6 flex items-center gap-6 transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:bg-white/5 hover:border-white/10 relative group"
                @click="goToDetail(char.id)">
-                <div class="w-20 h-20 rounded-full overflow-hidden flex-shrink-0 border-3 border-white/10">
+
-                    <img :src="API_URL + char.avatar_image || 'https://via.placeholder.com/150'" :alt="char.name"
+                <!-- Delete Button (Visible on Hover) -->
                <button
                    class="absolute top-2 right-2 p-2 rounded-full hover:bg-red-500/20 text-slate-400 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-all z-10"
                    @click="(e) => confirmDelete(e, char.id)" title="Delete Character">
                    <i class="pi pi-trash"></i>
                </button>
                <div class="w-20 h-20 rounded-full overflow-hidden flex-shrink-0 border-3 border-white/10 bg-slate-800">
                    <img v-if="char.avatar_image" :src="API_URL + char.avatar_image" :alt="char.name"
                        class="w-full h-full object-cover" />
                    <div v-else class="w-full h-full flex items-center justify-center text-slate-500">
                        <i class="pi pi-user text-2xl"></i>
                    </div>
                </div>
                <div class="flex-1 overflow-hidden">
-                    <h3 class="m-0 mb-2 text-xl font-semibold">{{ char.name }}</h3>
+                    <h3 class="m-0 mb-2 text-xl font-semibold truncate pr-6">{{ char.name }}</h3>
                    <p class="m-0 text-sm text-slate-400 line-clamp-2">
-                        {{ char.character_bio }}
+                        {{ char.character_bio || 'No bio provided.' }}
                    </p>
                </div>
            </div>
        </div>
        <!-- Create Character Dialog -->
        <Dialog v-model:visible="showCreateDialog" modal header="Create New Character" :style="{ width: '30rem' }">
            <div class="flex flex-col gap-4 pt-4">
                <div class="flex flex-col gap-2">
                    <label class="font-semibold">Avatar</label>
                    <input type="file" accept="image/*" @change="onFileSelect"
                        class="text-slate-300 text-sm file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-500/10 file:text-violet-400 hover:file:bg-violet-500/20 file:cursor-pointer" />
                </div>
                <div class="flex flex-col gap-2">
                    <label for="name" class="font-semibold">Name</label>
                    <InputText id="name" v-model="newCharacter.name" class="w-full" autofocus />
                </div>
                <div class="flex flex-col gap-2">
                    <label for="bio" class="font-semibold">Bio</label>
                    <Textarea id="bio" v-model="newCharacter.character_bio" rows="3" class="w-full" />
                </div>
            </div>
            <template #footer>
                <Button label="Cancel" text severity="secondary" @click="showCreateDialog = false" />
                <Button label="Create" icon="pi pi-check" @click="createCharacter" :loading="creating"
                    :disabled="!newCharacter.name.trim()" />
            </template>
        </Dialog>
    </div>
 </template>
--- a/src/views/ContentPlanView.vue
+++ b/src/views/ContentPlanView.vue
@@ -0,0 +1,955 @@
 <script setup>
 import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
 import { postService } from '../services/postService'
 import { aiService } from '../services/aiService'
 import { useConfirm } from 'primevue/useconfirm'
 import { useToast } from 'primevue/usetoast'
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import InputText from 'primevue/inputtext'
 import DatePicker from 'primevue/datepicker'
 import ConfirmDialog from 'primevue/confirmdialog'
 import Toast from 'primevue/toast'
 import JSZip from 'jszip'
 const confirm = useConfirm()
 const toast = useToast()
 const API_URL = import.meta.env.VITE_API_URL || ''
 // --- Timezone helpers ---
 // Normalize a date to noon local time before converting to ISO
 // This prevents day-shift when UTC offset crosses midnight
 function toLocalNoonISO(date) {
    const d = new Date(date)
    d.setHours(12, 0, 0, 0)
    return d.toISOString()
 }
 // Parse date string from API — ensure it's treated as UTC
 // Server may return "2026-02-16T21:00:00" without Z, which browsers
 // would interpret as local time. We append Z to force UTC parsing.
 function parseUTCDate(dateStr) {
    if (typeof dateStr === 'string' && !dateStr.endsWith('Z') && !/[+-]\d{2}(:\d{2})?$/.test(dateStr)) {
        return new Date(dateStr + 'Z')
    }
    return new Date(dateStr)
 }
 // --- Calendar state ---
 const currentDate = ref(new Date()) // tracks currently viewed month
 const viewMode = ref('month') // 'month' | 'week' | 'day'
 const selectedDay = ref(null)
 const posts = ref([])
 const loading = ref(false)
 // --- New/Edit post dialog ---
 const showPostDialog = ref(false)
 const editingPost = ref(null) // null = create, object = edit
 const postForm = ref({ date: new Date(), topic: '' })
 // --- Day names (Monday first) ---
 const dayNames = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']
 const monthNames = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']
 // --- Computeds ---
 const currentMonthName = computed(() => monthNames[currentDate.value.getMonth()])
 const currentYear = computed(() => currentDate.value.getFullYear())
 const headerTitle = computed(() => {
    if (viewMode.value === 'day' && selectedDay.value) {
        const d = selectedDay.value
        return `${d.getDate()} ${monthNames[d.getMonth()]} ${d.getFullYear()}`
    }
    if (viewMode.value === 'week' && selectedDay.value) {
        const ws = getWeekStart(selectedDay.value)
        const we = new Date(ws)
        we.setDate(we.getDate() + 6)
        const m1 = monthNames[ws.getMonth()].substring(0, 3)
        const m2 = monthNames[we.getMonth()].substring(0, 3)
        if (ws.getMonth() === we.getMonth()) {
            return `${ws.getDate()} – ${we.getDate()} ${m1} ${ws.getFullYear()}`
        }
        return `${ws.getDate()} ${m1} – ${we.getDate()} ${m2} ${we.getFullYear()}`
    }
    return `${currentMonthName.value} ${currentYear.value}`
 })
 // Get Monday of the week containing a date
 function getWeekStart(date) {
    const d = new Date(date)
    const day = d.getDay()
    const diff = d.getDate() - day + (day === 0 ? -6 : 1) // Monday
    d.setDate(diff)
    d.setHours(0, 0, 0, 0)
    return d
 }
 // Calendar grid cells for month view
 const calendarDays = computed(() => {
    const year = currentDate.value.getFullYear()
    const month = currentDate.value.getMonth()
    const firstDay = new Date(year, month, 1)
    const lastDay = new Date(year, month + 1, 0)
    // Day of week for first day (0=Sun, we want Mon=0)
    let startDow = firstDay.getDay() - 1
    if (startDow < 0) startDow = 6
    const days = []
    // Previous month padding
    for (let i = startDow - 1; i >= 0; i--) {
        const d = new Date(year, month, -i)
        days.push({ date: d, isOtherMonth: true })
    }
    // Current month
    for (let i = 1; i <= lastDay.getDate(); i++) {
        const d = new Date(year, month, i)
        days.push({ date: d, isOtherMonth: false })
    }
    // Next month padding (fill to 42 cells = 6 rows)
    const remaining = 42 - days.length
    for (let i = 1; i <= remaining; i++) {
        const d = new Date(year, month + 1, i)
        days.push({ date: d, isOtherMonth: true })
    }
    return days
 })
 // Week view days
 const weekDays = computed(() => {
    const start = selectedDay.value ? getWeekStart(selectedDay.value) : getWeekStart(new Date())
    const days = []
    for (let i = 0; i < 7; i++) {
        const d = new Date(start)
        d.setDate(d.getDate() + i)
        days.push({ date: d, isOtherMonth: false })
    }
    return days
 })
 // Today check
 const isToday = (date) => {
    const today = new Date()
    return date.getDate() === today.getDate() &&
        date.getMonth() === today.getMonth() &&
        date.getFullYear() === today.getFullYear()
 }
 const isSameDay = (a, b) => {
    if (!a || !b) return false
    return a.getDate() === b.getDate() && a.getMonth() === b.getMonth() && a.getFullYear() === b.getFullYear()
 }
 // Posts for a given date
 const getPostsForDate = (date) => {
    return posts.value.filter(p => {
        const pd = parseUTCDate(p.date)
        return isSameDay(pd, date)
    })
 }
 // Day view posts
 const dayPosts = computed(() => {
    if (!selectedDay.value) return []
    return getPostsForDate(selectedDay.value)
 })
 // --- API calls ---
 async function fetchPosts() {
    loading.value = true
    try {
        const year = currentDate.value.getFullYear()
        const month = currentDate.value.getMonth()
        // Fetch the full visible range (prev month padding + next)
        const dateFrom = toLocalNoonISO(new Date(year, month - 1, 1))
        const dateTo = toLocalNoonISO(new Date(year, month + 2, 0))
        const result = await postService.getPosts(dateFrom, dateTo)
        posts.value = Array.isArray(result) ? result : []
    } catch (e) {
        console.error('Failed to fetch posts', e)
        posts.value = []
    } finally {
        loading.value = false
    }
 }
 // --- Navigation ---
 function prevPeriod() {
    if (viewMode.value === 'month') {
        const d = new Date(currentDate.value)
        d.setMonth(d.getMonth() - 1)
        currentDate.value = d
    } else if (viewMode.value === 'week') {
        const d = new Date(selectedDay.value || new Date())
        d.setDate(d.getDate() - 7)
        selectedDay.value = d
        currentDate.value = new Date(d.getFullYear(), d.getMonth(), 1)
    } else {
        const d = new Date(selectedDay.value || new Date())
        d.setDate(d.getDate() - 1)
        selectedDay.value = d
        currentDate.value = new Date(d.getFullYear(), d.getMonth(), 1)
    }
 }
 function nextPeriod() {
    if (viewMode.value === 'month') {
        const d = new Date(currentDate.value)
        d.setMonth(d.getMonth() + 1)
        currentDate.value = d
    } else if (viewMode.value === 'week') {
        const d = new Date(selectedDay.value || new Date())
        d.setDate(d.getDate() + 7)
        selectedDay.value = d
        currentDate.value = new Date(d.getFullYear(), d.getMonth(), 1)
    } else {
        const d = new Date(selectedDay.value || new Date())
        d.setDate(d.getDate() + 1)
        selectedDay.value = d
        currentDate.value = new Date(d.getFullYear(), d.getMonth(), 1)
    }
 }
 function goToday() {
    const today = new Date()
    currentDate.value = new Date(today.getFullYear(), today.getMonth(), 1)
    selectedDay.value = today
 }
 function selectDay(dayObj) {
    selectedDay.value = dayObj.date
    if (viewMode.value === 'month') {
        viewMode.value = 'day'
    }
 }
 // --- Post CRUD ---
 function openNewPostDialog(date) {
    editingPost.value = null
    postForm.value = {
        date: date ? new Date(date) : new Date(),
        topic: ''
    }
    showPostDialog.value = true
 }
 function openEditPostDialog(post) {
    editingPost.value = post
    postForm.value = {
        date: parseUTCDate(post.date),
        topic: post.topic
    }
    showPostDialog.value = true
 }
 async function savePost() {
    if (!postForm.value.topic.trim()) {
        toast.add({ severity: 'warn', summary: 'Тема обязательна', life: 2000 })
        return
    }
    try {
        if (editingPost.value) {
            await postService.updatePost(editingPost.value.id, {
                date: toLocalNoonISO(postForm.value.date),
                topic: postForm.value.topic
            })
            toast.add({ severity: 'success', summary: 'Пост обновлён', life: 2000 })
        } else {
            await postService.createPost({
                date: toLocalNoonISO(postForm.value.date),
                topic: postForm.value.topic,
                generation_ids: []
            })
            toast.add({ severity: 'success', summary: 'Пост создан', life: 2000 })
        }
        showPostDialog.value = false
        await fetchPosts()
    } catch (e) {
        console.error('Save post failed', e)
        toast.add({ severity: 'error', summary: 'Ошибка', detail: 'Не удалось сохранить', life: 3000 })
    }
 }
 function deletePost(post) {
    confirm.require({
        message: `Удалить пост "${post.topic}"?`,
        header: 'Удаление поста',
        icon: 'pi pi-trash',
        acceptClass: 'p-button-danger',
        accept: async () => {
            try {
                await postService.deletePost(post.id)
                toast.add({ severity: 'info', summary: 'Удалено', life: 2000 })
                await fetchPosts()
            } catch (e) {
                console.error('Delete post failed', e)
            }
        }
    })
 }
 async function removeGenerationFromPost(post, genId) {
    try {
        await postService.removeGeneration(post.id, genId)
        // Optimistic update
        const idx = post.generation_ids.indexOf(genId)
        if (idx > -1) post.generation_ids.splice(idx, 1)
        toast.add({ severity: 'info', summary: 'Генерация удалена из поста', life: 2000 })
    } catch (e) {
        console.error(e)
    }
 }
 // --- Download Post Assets ---
 const isDownloading = ref(false)
 async function downloadPostAssets(post) {
    const ids = post.generation_ids || []
    if (ids.length === 0) return
    isDownloading.value = true
    try {
        const user = JSON.parse(localStorage.getItem('user'))
        const headers = {}
        if (user && user.access_token) headers['Authorization'] = `Bearer ${user.access_token}`
        else if (user && user.token) headers['Authorization'] = `${user.tokenType} ${user.token}`
        const projectId = localStorage.getItem('active_project_id')
        if (projectId) headers['X-Project-ID'] = projectId
        // Multi-file ZIP (if > 1)
        if (ids.length > 1) {
            const zip = new JSZip()
            // Sanitize topic for filename
            const safeTopic = (post.topic || 'post').replace(/[^a-z0-9_\-а-яё ]/gi, '').trim().replace(/\s+/g, '_')
            const folderName = `${safeTopic}_assets`
            let successCount = 0
            await Promise.all(ids.map(async (assetId) => {
                try {
                    const url = API_URL + '/assets/' + assetId
                    const resp = await fetch(url, { headers })
                    if (!resp.ok) return
                    const blob = await resp.blob()
                    const mime = blob.type
                    const ext = mime.split('/')[1] || 'png'
                    zip.file(`${assetId}.${ext}`, blob)
                    successCount++
                } catch (err) {
                    console.error('Failed to zip asset', assetId, err)
                }
            }))
            if (successCount === 0) throw new Error('No images available for zip')
            const content = await zip.generateAsync({ type: 'blob' })
            const filename = `${folderName}.zip`
            const a = document.createElement('a')
            a.href = URL.createObjectURL(content)
            a.download = filename
            document.body.appendChild(a)
            a.click()
            document.body.removeChild(a)
            URL.revokeObjectURL(a.href)
            toast.add({ severity: 'success', summary: 'Архив создан', detail: `Скачано ${successCount} файлов`, life: 3000 })
        } else {
            // Single File
            const assetId = ids[0]
            const url = API_URL + '/assets/' + assetId
            const resp = await fetch(url, { headers })
            const blob = await resp.blob()
            const file = new File([blob], assetId + '.png', { type: blob.type || 'image/png' })
            const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) || navigator.maxTouchPoints > 1
            if (isMobile && navigator.canShare && navigator.canShare({ files: [file] })) {
                await navigator.share({ files: [file] })
            } else {
                const a = document.createElement('a')
                a.href = URL.createObjectURL(file)
                a.download = file.name
                document.body.appendChild(a)
                a.click()
                document.body.removeChild(a)
                URL.revokeObjectURL(a.href)
            }
            toast.add({ severity: 'success', summary: 'Скачано', detail: `Файл сохранен`, life: 2000 })
        }
    } catch (e) {
        console.error('Download failed', e)
        toast.add({ severity: 'error', summary: 'Ошибка скачивания', life: 3000 })
    } finally {
        isDownloading.value = false
    }
 }
 // --- Watchers ---
 watch(currentDate, fetchPosts)
 onMounted(() => {
    selectedDay.value = new Date()
    fetchPosts()
 })
 // --- Generation Picker ---
 const showGenPicker = ref(false)
 const genPickerPost = ref(null)
 const availableGenerations = ref([])
 const selectedGenIds = ref(new Set())
 const genLoading = ref(false)
 const genLoadingMore = ref(false)
 const genOffset = ref(0)
 const genHasMore = ref(true)
 const GEN_LIMIT = 30
 function openGenPicker(post) {
    genPickerPost.value = post
    selectedGenIds.value = new Set()
    availableGenerations.value = []
    genOffset.value = 0
    genHasMore.value = true
    showGenPicker.value = true
    loadGenerations(true)
 }
 async function loadGenerations(initial = false) {
    if (initial) {
        genLoading.value = true
        genOffset.value = 0
    } else {
        genLoadingMore.value = true
    }
    try {
        const response = await aiService.getGenerations(GEN_LIMIT, genOffset.value)
        const list = response && response.generations ? response.generations : (Array.isArray(response) ? response : [])
        if (initial) {
            availableGenerations.value = list
        } else {
            availableGenerations.value.push(...list)
        }
        genOffset.value += list.length
        genHasMore.value = list.length >= GEN_LIMIT
    } catch (e) {
        console.error('Load generations failed', e)
    } finally {
        genLoading.value = false
        genLoadingMore.value = false
    }
 }
 function toggleGenSelection(assetId) {
    const s = new Set(selectedGenIds.value)
    if (s.has(assetId)) s.delete(assetId)
    else s.add(assetId)
    selectedGenIds.value = s
 }
 async function confirmAddGenerations() {
    if (!genPickerPost.value || selectedGenIds.value.size === 0) return
    try {
        await postService.addGenerations(genPickerPost.value.id, [...selectedGenIds.value])
        toast.add({ severity: 'success', summary: `Добавлено ${selectedGenIds.value.size} изображений`, life: 2000 })
        showGenPicker.value = false
        await fetchPosts()
    } catch (e) {
        console.error('Add generations failed', e)
        toast.add({ severity: 'error', summary: 'Ошибка', detail: 'Не удалось добавить', life: 3000 })
    }
 }
 function onGenPickerScroll(e) {
    const el = e.target
    if (el.scrollTop + el.clientHeight >= el.scrollHeight - 100 && genHasMore.value && !genLoadingMore.value) {
        loadGenerations(false)
    }
 }
 // --- Image Preview ---
 const previewVisible = ref(false)
 const previewImages = ref([])
 const previewIndex = ref(0)
 const previewCurrent = computed(() => previewImages.value[previewIndex.value] || null)
 function openPreview(assetIds, clickedId) {
    previewImages.value = assetIds.map(id => API_URL + '/assets/' + id)
    const idx = assetIds.indexOf(clickedId)
    previewIndex.value = idx >= 0 ? idx : 0
    previewVisible.value = true
 }
 function previewNav(dir) {
    if (previewImages.value.length === 0) return
    let i = previewIndex.value + dir
    if (i < 0) i = previewImages.value.length - 1
    if (i >= previewImages.value.length) i = 0
    previewIndex.value = i
 }
 function onPreviewKey(e) {
    if (!previewVisible.value) return
    if (e.key === 'ArrowLeft') { e.preventDefault(); previewNav(-1) }
    else if (e.key === 'ArrowRight') { e.preventDefault(); previewNav(1) }
    else if (e.key === 'Escape') { previewVisible.value = false }
 }
 watch(previewVisible, (v) => {
    if (v) window.addEventListener('keydown', onPreviewKey)
    else window.removeEventListener('keydown', onPreviewKey)
 })
 onBeforeUnmount(() => {
    window.removeEventListener('keydown', onPreviewKey)
 })
 </script>
 <template>
    <div class="flex flex-col h-full w-full bg-slate-900 text-slate-100 font-sans overflow-hidden">
        <ConfirmDialog />
        <Toast />
        <!-- Header -->
        <header
            class="h-16 border-b border-white/5 flex items-center justify-between px-6 bg-slate-900/80 backdrop-blur z-20 shrink-0">
            <div class="flex items-center gap-4">
                <h1 class="text-lg font-bold text-slate-200">📅 Content plan</h1>
            </div>
            <div class="flex items-center gap-3">
                <!-- Navigation Arrows -->
                <div class="flex items-center gap-1">
                    <button @click="prevPeriod"
                        class="w-8 h-8 rounded-lg bg-slate-800 border border-white/10 flex items-center justify-center text-slate-400 hover:text-white hover:bg-slate-700 transition-all">
                        <i class="pi pi-chevron-left text-xs"></i>
                    </button>
                    <button @click="goToday"
                        class="px-3 py-1.5 rounded-lg text-xs font-medium bg-slate-800 border border-white/10 text-slate-400 hover:text-white hover:bg-slate-700 transition-all">
                        Сегодня
                    </button>
                    <button @click="nextPeriod"
                        class="w-8 h-8 rounded-lg bg-slate-800 border border-white/10 flex items-center justify-center text-slate-400 hover:text-white hover:bg-slate-700 transition-all">
                        <i class="pi pi-chevron-right text-xs"></i>
                    </button>
                </div>
                <!-- Period Title -->
                <span class="text-sm font-semibold text-slate-200 min-w-[180px] text-center hidden md:block">{{
                    headerTitle }}</span>
                <!-- View Toggle -->
                <div class="flex bg-slate-800 rounded-lg p-1 border border-white/5">
                    <button @click="viewMode = 'month'"
                        class="px-3 py-1.5 rounded-md text-xs font-medium transition-all"
                        :class="viewMode === 'month' ? 'bg-violet-600 text-white shadow-lg' : 'text-slate-400 hover:text-slate-200'">
                        Месяц
                    </button>
                    <button @click="viewMode = 'week'; if (!selectedDay) selectedDay = new Date()"
                        class="px-3 py-1.5 rounded-md text-xs font-medium transition-all"
                        :class="viewMode === 'week' ? 'bg-violet-600 text-white shadow-lg' : 'text-slate-400 hover:text-slate-200'">
                        Неделя
                    </button>
                    <button @click="viewMode = 'day'; if (!selectedDay) selectedDay = new Date()"
                        class="px-3 py-1.5 rounded-md text-xs font-medium transition-all"
                        :class="viewMode === 'day' ? 'bg-violet-600 text-white shadow-lg' : 'text-slate-400 hover:text-slate-200'">
                        День
                    </button>
                </div>
            </div>
        </header>
        <!-- Mobile Period Title -->
        <div class="md:hidden text-center py-2 text-sm font-semibold text-slate-200 border-b border-white/5">
            {{ headerTitle }}
        </div>
        <!-- Content Area -->
        <div class="flex-1 overflow-y-auto custom-scrollbar">
            <!-- ====== MONTH VIEW ====== -->
            <div v-if="viewMode === 'month'" class="h-full flex flex-col p-2 md:p-4">
                <!-- Day headers -->
                <div class="grid grid-cols-7 mb-1">
                    <div v-for="d in dayNames" :key="d"
                        class="text-center text-[10px] font-bold text-slate-500 uppercase tracking-wider py-2">
                        {{ d }}
                    </div>
                </div>
                <!-- Day cells -->
                <div class="grid grid-cols-7 flex-1 gap-px bg-white/5 rounded-xl overflow-hidden">
                    <div v-for="(dayObj, idx) in calendarDays" :key="idx" @click="selectDay(dayObj)" :class="[
                        'bg-slate-900 p-1.5 min-h-[80px] md:min-h-[100px] cursor-pointer transition-all hover:bg-slate-800/80 relative group',
                        dayObj.isOtherMonth ? 'opacity-30' : '',
                        isToday(dayObj.date) ? 'ring-1 ring-violet-500/50 ring-inset' : '',
                        isSameDay(dayObj.date, selectedDay) ? 'bg-violet-900/20' : ''
                    ]">
                        <!-- Day number -->
                        <div class="flex items-center justify-between mb-1">
                            <span :class="[
                                'text-xs font-bold w-6 h-6 flex items-center justify-center rounded-full',
                                isToday(dayObj.date) ? 'bg-violet-600 text-white' : 'text-slate-400'
                            ]">
                                {{ dayObj.date.getDate() }}
                            </span>
                            <!-- Add button (show on hover) -->
                            <button v-if="!dayObj.isOtherMonth" @click.stop="openNewPostDialog(dayObj.date)"
                                class="w-5 h-5 rounded-md bg-violet-600/30 text-violet-300 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-violet-600/50">
                                <i class="pi pi-plus" style="font-size: 8px"></i>
                            </button>
                        </div>
                        <!-- Posts in cell -->
                        <div class="flex flex-col gap-0.5 overflow-hidden">
                            <div v-for="post in getPostsForDate(dayObj.date)" :key="post.id"
                                @click.stop="openEditPostDialog(post)"
                                class="px-1.5 py-0.5 rounded text-[10px] font-medium truncate transition-all hover:scale-[1.02] cursor-pointer"
                                :class="post.generation_ids?.length > 0
                                    ? 'bg-violet-600/30 text-violet-200 border border-violet-500/20'
                                    : 'bg-slate-700/50 text-slate-300 border border-white/5'">
                                {{ post.topic }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ====== WEEK VIEW ====== -->
            <div v-else-if="viewMode === 'week'" class="h-full flex flex-col p-2 md:p-4">
                <!-- Day headers -->
                <div class="grid grid-cols-7 mb-1">
                    <div v-for="(dayObj, idx) in weekDays" :key="idx"
                        class="text-center text-[10px] font-bold uppercase tracking-wider py-2"
                        :class="isToday(dayObj.date) ? 'text-violet-400' : 'text-slate-500'">
                        {{ dayNames[idx] }} {{ dayObj.date.getDate() }}
                    </div>
                </div>
                <!-- Day columns -->
                <div class="grid grid-cols-7 flex-1 gap-px bg-white/5 rounded-xl overflow-hidden">
                    <div v-for="(dayObj, idx) in weekDays" :key="idx"
                        @click="selectedDay = dayObj.date; viewMode = 'day'" :class="[
                            'bg-slate-900 p-2 min-h-[300px] cursor-pointer transition-all hover:bg-slate-800/80 relative group',
                            isToday(dayObj.date) ? 'ring-1 ring-violet-500/50 ring-inset' : '',
                            isSameDay(dayObj.date, selectedDay) ? 'bg-violet-900/20' : ''
                        ]">
                        <!-- Add button -->
                        <button @click.stop="openNewPostDialog(dayObj.date)"
                            class="w-full mb-2 py-1 rounded-lg border border-dashed border-white/10 text-slate-500 text-xs opacity-0 group-hover:opacity-100 transition-opacity hover:border-violet-500/30 hover:text-violet-400">
                            <i class="pi pi-plus mr-1" style="font-size: 9px"></i> Добавить
                        </button>
                        <!-- Posts -->
                        <div class="flex flex-col gap-2">
                            <div v-for="post in getPostsForDate(dayObj.date)" :key="post.id"
                                class="bg-slate-800/80 rounded-lg border border-white/5 p-2 hover:border-violet-500/30 transition-all cursor-pointer"
                                @click.stop="openEditPostDialog(post)">
                                <p class="text-xs font-semibold text-slate-200 mb-1 line-clamp-2">{{ post.topic }}</p>
                                <!-- Generation thumbnails -->
                                <div v-if="post.generation_ids?.length > 0" class="flex gap-1 flex-wrap">
                                    <img v-for="gid in post.generation_ids.slice(0, 4)" :key="gid"
                                        :src="API_URL + '/assets/' + gid + '?thumbnail=true'"
                                        class="w-8 h-8 rounded object-cover border border-white/10" />
                                    <span v-if="post.generation_ids.length > 4"
                                        class="w-8 h-8 rounded bg-slate-700 border border-white/10 flex items-center justify-center text-[10px] text-slate-400">
                                        +{{ post.generation_ids.length - 4 }}
                                    </span>
                                </div>
                                <!-- Actions -->
                                <div class="flex gap-1 mt-1.5 justify-end">
                                    <button @click.stop="openGenPicker(post)"
                                        class="w-5 h-5 rounded bg-violet-500/10 text-violet-400 flex items-center justify-center hover:bg-violet-500/20 transition-colors"
                                        title="Добавить изображения">
                                        <i class="pi pi-images" style="font-size: 9px"></i>
                                    </button>
                                    <button @click.stop="deletePost(post)"
                                        class="w-5 h-5 rounded bg-red-500/10 text-red-400 flex items-center justify-center hover:bg-red-500/20 transition-colors">
                                        <i class="pi pi-trash" style="font-size: 9px"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ====== DAY VIEW ====== -->
            <div v-else class="max-w-3xl mx-auto p-4 md:p-8">
                <!-- Add Post Button -->
                <button @click="openNewPostDialog(selectedDay)"
                    class="w-full mb-6 py-3 rounded-xl border-2 border-dashed border-white/10 text-slate-400 text-sm font-medium hover:border-violet-500/40 hover:text-violet-300 hover:bg-violet-500/5 transition-all">
                    <i class="pi pi-plus mr-2"></i> Новый пост
                </button>
                <!-- No posts -->
                <div v-if="dayPosts.length === 0 && !loading"
                    class="flex flex-col items-center justify-center py-20 text-slate-500 opacity-60">
                    <i class="pi pi-calendar text-5xl mb-4"></i>
                    <p>Нет постов на этот день</p>
                </div>
                <!-- Posts list -->
                <div class="flex flex-col gap-4">
                    <div v-for="post in dayPosts" :key="post.id"
                        class="bg-slate-800/60 rounded-2xl border border-white/5 p-5 hover:border-violet-500/20 transition-all">
                        <!-- Header: topic + date -->
                        <div class="flex items-start justify-between mb-3">
                            <div class="flex-1">
                                <h3 class="text-base font-bold text-slate-100 mb-1">{{ post.topic }}</h3>
                                <p class="text-xs text-slate-500">
                                    {{ parseUTCDate(post.date).toLocaleDateString('ru-RU', {
                                        weekday: 'long', day: 'numeric', month: 'long'
                                    }) }}
                                </p>
                            </div>
                            <button @click="deletePost(post)"
                                class="w-8 h-8 rounded-lg bg-slate-700/50 text-slate-400 flex items-center justify-center hover:bg-red-600/30 hover:text-red-300 transition-all"
                                title="Удалить">
                                <i class="pi pi-trash text-xs"></i>
                            </button>
                        </div>
                        <!-- Images section header with actions -->
                        <div class="flex items-center justify-between mb-2">
                            <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                Изображения ({{ post.generation_ids?.length || 0 }})
                            </label>
                            <div class="flex gap-1">
                                <Button icon="pi pi-download" label="Скачать" size="small" text :loading="isDownloading"
                                    :disabled="!post.generation_ids?.length" @click="downloadPostAssets(post)"
                                    class="!text-slate-400 hover:!text-white !text-xs !py-1" />
                                <Button icon="pi pi-plus" label="Добавить" size="small" text
                                    @click="openGenPicker(post)"
                                    class="!text-violet-400 hover:!text-violet-300 !text-xs !py-1" />
                                <Button icon="pi pi-pencil" size="small" text @click="openEditPostDialog(post)"
                                    class="!text-slate-400 hover:!text-white !text-xs !py-1" title="Редактировать" />
                            </div>
                        </div>
                        <!-- Generation grid -->
                        <div v-if="post.generation_ids?.length > 0"
                            class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2">
                            <div v-for="gid in post.generation_ids" :key="gid"
                                class="aspect-square relative rounded-xl overflow-hidden bg-slate-900 border border-white/5 group/img">
                                <img :src="API_URL + '/assets/' + gid + '?thumbnail=true'"
                                    class="w-full h-full object-cover cursor-pointer"
                                    @click="openPreview(post.generation_ids, gid)" />
                                <button @click="removeGenerationFromPost(post, gid)"
                                    class="absolute top-1 right-1 w-5 h-5 rounded-md bg-red-600/80 text-white flex items-center justify-center opacity-0 group-hover/img:opacity-100 transition-opacity hover:bg-red-500">
                                    <i class="pi pi-times" style="font-size: 8px"></i>
                                </button>
                            </div>
                        </div>
                        <div v-else
                            class="py-6 text-center text-slate-600 text-xs border border-dashed border-white/5 rounded-xl cursor-pointer hover:border-violet-500/30 hover:text-violet-400 transition-all"
                            @click="openGenPicker(post)">
                            <i class="pi pi-images mr-1"></i> Нажмите, чтобы добавить изображения
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ====== NEW / EDIT POST DIALOG ====== -->
        <Dialog v-model:visible="showPostDialog" :header="editingPost ? 'Редактировать пост' : 'Новый пост'" modal
            :style="{ width: '600px', maxWidth: '95vw' }"
            :pt="{ root: { class: '!bg-slate-800 !border-white/10' }, header: { class: '!bg-slate-800' }, content: { class: '!bg-slate-800' } }">
            <div class="flex flex-col gap-4">
                <!-- Date & Topic row -->
                <div class="grid grid-cols-2 gap-3">
                    <div class="flex flex-col gap-1">
                        <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Дата</label>
                        <DatePicker v-model="postForm.date" dateFormat="dd.mm.yy" showIcon class="w-full" :pt="{
                            root: { class: '!bg-slate-700 !border-white/10' },
                            pcInputText: { root: { class: '!bg-slate-700 !border-white/10 !text-white' } }
                        }" />
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Тема</label>
                        <InputText v-model="postForm.topic" placeholder="Тема поста..."
                            class="w-full !bg-slate-700 !border-white/10 !text-white" />
                    </div>
                </div>
                <!-- Attached Generations (edit mode only) -->
                <div v-if="editingPost">
                    <div class="flex items-center justify-between mb-2">
                        <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                            Изображения ({{ editingPost.generation_ids?.length || 0 }})
                        </label>
                        <div class="flex gap-1">
                            <Button icon="pi pi-download" label="Скачать" size="small" text :loading="isDownloading"
                                :disabled="!editingPost.generation_ids?.length" @click="downloadPostAssets(editingPost)"
                                class="!text-slate-400 hover:!text-white !text-xs !py-1" />
                            <Button icon="pi pi-plus" label="Добавить" size="small" text
                                @click="openGenPicker(editingPost)"
                                class="!text-violet-400 hover:!text-violet-300 !text-xs !py-1" />
                        </div>
                    </div>
                    <!-- Generation grid -->
                    <div v-if="editingPost.generation_ids?.length > 0" class="grid grid-cols-4 sm:grid-cols-5 gap-2">
                        <div v-for="gid in editingPost.generation_ids" :key="gid"
                            class="aspect-square relative rounded-xl overflow-hidden bg-slate-900 border border-white/5 group/img">
                            <img :src="API_URL + '/assets/' + gid + '?thumbnail=true'"
                                class="w-full h-full object-cover cursor-pointer"
                                @click="openPreview(editingPost.generation_ids, gid)" />
                            <button @click="removeGenerationFromPost(editingPost, gid)"
                                class="absolute top-1 right-1 w-5 h-5 rounded-md bg-red-600/80 text-white flex items-center justify-center opacity-0 group-hover/img:opacity-100 transition-opacity hover:bg-red-500">
                                <i class="pi pi-times" style="font-size: 8px"></i>
                            </button>
                        </div>
                    </div>
                    <div v-else
                        class="py-6 text-center text-slate-600 text-xs border border-dashed border-white/5 rounded-xl cursor-pointer hover:border-violet-500/30 hover:text-violet-400 transition-all"
                        @click="openGenPicker(editingPost)">
                        <i class="pi pi-images mr-1"></i> Нажмите, чтобы добавить изображения
                    </div>
                </div>
                <div class="flex justify-end gap-2 mt-2">
                    <Button label="Отмена" text @click="showPostDialog = false"
                        class="!text-slate-400 hover:!text-white" />
                    <Button :label="editingPost ? 'Сохранить' : 'Создать'" @click="savePost"
                        class="!bg-violet-600 !border-none hover:!bg-violet-500" />
                </div>
            </div>
        </Dialog>
        <!-- ====== GENERATION PICKER DIALOG ====== -->
        <Dialog v-model:visible="showGenPicker" header="Добавить изображения" modal
            :style="{ width: '700px', maxWidth: '95vw' }"
            :pt="{ root: { class: '!bg-slate-800 !border-white/10' }, header: { class: '!bg-slate-800' }, content: { class: '!bg-slate-800 !p-0' } }">
            <!-- Selected count bar -->
            <div v-if="selectedGenIds.size > 0"
                class="sticky top-0 z-10 flex items-center justify-between px-4 py-2 bg-violet-600/20 border-b border-violet-500/20">
                <span class="text-sm text-violet-200 font-medium">
                    <i class="pi pi-check-circle mr-1"></i> Выбрано: {{ selectedGenIds.size }}
                </span>
                <Button label="Добавить" icon="pi pi-plus" @click="confirmAddGenerations" size="small"
                    class="!bg-violet-600 !border-none hover:!bg-violet-500 !text-sm !py-1" />
            </div>
            <!-- Loading -->
            <div v-if="genLoading" class="flex items-center justify-center py-20">
                <i class="pi pi-spin pi-spinner text-3xl text-violet-400"></i>
            </div>
            <!-- Grid -->
            <div v-else class="p-4 max-h-[60vh] overflow-y-auto custom-scrollbar" @scroll="onGenPickerScroll">
                <div v-if="availableGenerations.length === 0"
                    class="flex flex-col items-center justify-center py-16 text-slate-500">
                    <i class="pi pi-image text-4xl mb-3"></i>
                    <p class="text-sm">Нет доступных генераций</p>
                </div>
                <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2">
                    <template v-for="gen in availableGenerations" :key="gen.id">
                        <div v-for="assetId in (gen.result_list || [])" :key="assetId"
                            @click="toggleGenSelection(assetId)"
                            class="aspect-square relative rounded-xl overflow-hidden cursor-pointer transition-all group/gen border-2"
                            :class="selectedGenIds.has(assetId)
                                ? 'border-violet-500 ring-2 ring-violet-500/30 scale-[0.95]'
                                : 'border-transparent hover:border-white/20'">
                            <img :src="API_URL + '/assets/' + assetId + '?thumbnail=true'"
                                class="w-full h-full object-cover" loading="lazy" />
                            <!-- Selection overlay -->
                            <div v-if="selectedGenIds.has(assetId)"
                                class="absolute inset-0 bg-violet-600/30 flex items-center justify-center">
                                <div
                                    class="w-7 h-7 rounded-full bg-violet-600 flex items-center justify-center shadow-lg">
                                    <i class="pi pi-check text-white" style="font-size: 12px"></i>
                                </div>
                            </div>
                            <!-- Hover overlay -->
                            <div v-else
                                class="absolute inset-0 bg-black/0 group-hover/gen:bg-black/20 transition-all flex items-center justify-center">
                                <div
                                    class="w-7 h-7 rounded-full border-2 border-white/40 opacity-0 group-hover/gen:opacity-100 transition-opacity">
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
                <!-- Load more spinner -->
                <div v-if="genLoadingMore" class="flex justify-center py-4">
                    <i class="pi pi-spin pi-spinner text-xl text-slate-500"></i>
                </div>
            </div>
            <!-- Footer with action -->
            <div class="flex justify-end gap-2 px-4 py-3 border-t border-white/5">
                <Button label="Отмена" text @click="showGenPicker = false" class="!text-slate-400 hover:!text-white" />
                <Button label="Добавить" icon="pi pi-plus" :disabled="selectedGenIds.size === 0"
                    @click="confirmAddGenerations" class="!bg-violet-600 !border-none hover:!bg-violet-500" />
            </div>
        </Dialog>
        <!-- ====== FULLSCREEN IMAGE PREVIEW ====== -->
        <div v-if="previewVisible" class="fixed inset-0 z-[9999] bg-black/95 flex items-center justify-center"
            @click.self="previewVisible = false">
            <!-- Close -->
            <button @click="previewVisible = false"
                class="absolute top-4 right-4 w-10 h-10 rounded-full bg-white/10 text-white flex items-center justify-center hover:bg-white/20 transition-colors z-10">
                <i class="pi pi-times text-lg"></i>
            </button>
            <!-- Counter -->
            <div v-if="previewImages.length > 1"
                class="absolute top-4 left-1/2 -translate-x-1/2 text-white/60 text-sm bg-black/40 px-3 py-1 rounded-full">
                {{ previewIndex + 1 }} / {{ previewImages.length }}
            </div>
            <!-- Left arrow -->
            <button v-if="previewImages.length > 1" @click="previewNav(-1)"
                class="absolute left-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/10 text-white flex items-center justify-center hover:bg-white/20 transition-colors">
                <i class="pi pi-chevron-left"></i>
            </button>
            <!-- Image -->
            <img v-if="previewCurrent" :src="previewCurrent"
                class="max-h-[90vh] max-w-[90vw] object-contain rounded-lg shadow-2xl" />
            <!-- Right arrow -->
            <button v-if="previewImages.length > 1" @click="previewNav(1)"
                class="absolute right-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/10 text-white flex items-center justify-center hover:bg-white/20 transition-colors">
                <i class="pi pi-chevron-right"></i>
            </button>
        </div>
    </div>
 </template>
 <style scoped>
 .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
 }
 .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
 }
 </style>
--- a/src/views/FlexibleGenerationView.vue
+++ b/src/views/FlexibleGenerationView.vue
--- a/src/views/IdeaDetailView.vue
+++ b/src/views/IdeaDetailView.vue
--- a/src/views/IdeasView.vue
+++ b/src/views/IdeasView.vue
@@ -0,0 +1,547 @@
 <script setup>
 import { ref, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useIdeaStore } from '../stores/ideas'
 import { storeToRefs } from 'pinia'
 import { dataService } from '../services/dataService' // Added import
 import Skeleton from 'primevue/skeleton'
 import Dialog from 'primevue/dialog'
 import InputText from 'primevue/inputtext'
 import Textarea from 'primevue/textarea'
 import Button from 'primevue/button'
 import Image from 'primevue/image'
 import Dropdown from 'primevue/dropdown'
 import Checkbox from 'primevue/checkbox'
 const router = useRouter()
 const ideaStore = useIdeaStore()
 const { ideas, loading } = storeToRefs(ideaStore)
 const showCreateDialog = ref(false)
 const newIdea = ref({ name: '', description: '' })
 const submitting = ref(false)
 const API_URL = import.meta.env.VITE_API_URL
 // --- Generation Settings ---
 const prompt = ref('')
 const selectedModel = ref('flux-schnell')
 const quality = ref({ key: 'TWOK', value: '2K' })
 const aspectRatio = ref({ key: 'NINESIXTEEN', value: '9:16' })
 const imageCount = ref(1)
 const sendToTelegram = ref(false)
 const telegramId = ref('')
 const useProfileImage = ref(true)
 const isSubmittingGen = ref(false)
 // Character & Assets
 const characters = ref([])
 const selectedCharacter = ref(null)
 const selectedAssets = ref([])
 let _savedCharacterId = null
 const qualityOptions = ref([
    { key: 'ONEK', value: '1K' },
    { key: 'TWOK', value: '2K' },
    { key: 'FOURK', value: '4K' }
 ])
 const aspectRatioOptions = ref([
    { key: "NINESIXTEEN", value: "9:16" },
    { key: "FOURTHREE", value: "4:3" },
    { key: "THREEFOUR", value: "3:4" },
    { key: "SIXTEENNINE", value: "16:9" }
 ])
 // Restore settings
 const SETTINGS_KEY = 'idea-gen-settings'
 const restoreSettings = () => {
    const stored = localStorage.getItem(SETTINGS_KEY)
    if (!stored) return
    try {
        const s = JSON.parse(stored)
        if (s.prompt) prompt.value = s.prompt
        if (s.quality) quality.value = s.quality
        if (s.aspectRatio) aspectRatio.value = s.aspectRatio
        if (s.imageCount) imageCount.value = Math.min(s.imageCount, 4)
        if (s.selectedModel) selectedModel.value = s.selectedModel
        sendToTelegram.value = s.sendToTelegram || false
        telegramId.value = s.telegramId || localStorage.getItem('telegram_id') || ''
        if (s.useProfileImage !== undefined) useProfileImage.value = s.useProfileImage
        _savedCharacterId = s.selectedCharacterId || null
        if (s.selectedAssetIds && s.selectedAssetIds.length > 0) {
            selectedAssets.value = s.selectedAssetIds.map(id => ({
                id,
                url: `/assets/${id}`,
                name: 'Asset ' + id.substring(0, 4)
            }))
        }
    } catch (e) {
        console.error('Failed to restore settings', e)
    }
 }
 const saveSettings = () => {
    const settings = {
        prompt: prompt.value,
        quality: quality.value,
        aspectRatio: aspectRatio.value,
        imageCount: imageCount.value,
        selectedModel: selectedModel.value,
        sendToTelegram: sendToTelegram.value,
        telegramId: telegramId.value,
        useProfileImage: useProfileImage.value,
        selectedCharacterId: selectedCharacter.value?.id || null,
        selectedAssetIds: selectedAssets.value.map(a => a.id),
    }
    localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings))
    if (telegramId.value) localStorage.setItem('telegram_id', telegramId.value)
 }
 watch([prompt, quality, aspectRatio, imageCount, selectedModel, sendToTelegram, telegramId, useProfileImage, selectedCharacter, selectedAssets], saveSettings, { deep: true })
 onMounted(async () => {
    restoreSettings()
    await Promise.all([
        ideaStore.fetchIdeas(),
        loadCharacters()
    ])
 })
 const loadCharacters = async () => {
    try {
        characters.value = await dataService.getCharacters()
        if (_savedCharacterId && characters.value.length > 0) {
            const found = characters.value.find(c => c.id === _savedCharacterId)
            if (found) selectedCharacter.value = found
            _savedCharacterId = null
        }
    } catch (e) {
        console.error('Failed to load characters', e)
    }
 }
 const goToDetail = (id) => {
    router.push(`/ideas/${id}`) // Navigate to IdeaDetailView
 }
 const createIdea = async () => {
    if (!newIdea.value.name) return
    submitting.value = true
    try {
        await ideaStore.createIdea(newIdea.value)
        showCreateDialog.value = false
        newIdea.value = { name: '', description: '' }
    } finally {
        submitting.value = false
    }
 }
 // Auto-generation flow
 const handleGenerate = async () => {
    if (!prompt.value) return
    isSubmittingGen.value = true
    try {
        // 1. Create a random name idea
        const randomName = 'Session ' + new Date().toLocaleString()
        const newIdea = await ideaStore.createIdea({
            name: randomName,
            description: 'Auto-generated from quick start'
        })
        // 2. Save settings (already handled by watch, but ensure latest)
        saveSettings()
        // 3. Navigate with autostart param
        router.push({ path: `/ideas/${newIdea.id}`, query: { autostart: 'true' } })
    } catch (e) {
        console.error('Failed to start session', e)
    } finally {
        isSubmittingGen.value = false
    }
 }
 // --- Asset Picker Logic ---
 const isAssetPickerVisible = ref(false)
 const assetPickerTab = ref('all') // 'all', 'uploaded', 'generated'
 const modalAssets = ref([])
 const isModalLoading = ref(false)
 const tempSelectedAssets = ref([])
 const assetPickerFileInput = ref(null)
 const loadModalAssets = async () => {
    isModalLoading.value = true
    try {
        const typeParam = assetPickerTab.value === 'all' ? undefined : assetPickerTab.value
        const response = await dataService.getAssets(100, 0, typeParam)
        if (response && response.assets) {
            modalAssets.value = response.assets
        } else {
            modalAssets.value = Array.isArray(response) ? response : []
        }
    } catch (e) {
        console.error('Failed to load modal assets', e)
        modalAssets.value = []
    } finally {
        isModalLoading.value = false
    }
 }
 const openAssetPicker = () => {
    tempSelectedAssets.value = [...selectedAssets.value]
    isAssetPickerVisible.value = true
    loadModalAssets()
 }
 const toggleAssetSelection = (asset) => {
    const index = tempSelectedAssets.value.findIndex(a => a.id === asset.id)
    if (index === -1) {
        tempSelectedAssets.value.push(asset)
    } else {
        tempSelectedAssets.value.splice(index, 1)
    }
 }
 const confirmAssetSelection = () => {
    selectedAssets.value = [...tempSelectedAssets.value]
    isAssetPickerVisible.value = false
 }
 const removeAsset = (asset) => {
    selectedAssets.value = selectedAssets.value.filter(a => a.id !== asset.id)
 }
 watch(assetPickerTab, () => {
    if (isAssetPickerVisible.value) {
        loadModalAssets()
    }
 })
 const triggerAssetPickerUpload = () => {
    assetPickerFileInput.value?.click()
 }
 const handleAssetPickerUpload = async (event) => {
    const target = event.target
    if (target.files && target.files[0]) {
        const file = target.files[0]
        try {
            isModalLoading.value = true
            await dataService.uploadAsset(file)
            assetPickerTab.value = 'uploaded'
            loadModalAssets()
        } catch (e) {
            console.error('Failed to upload asset', e)
        } finally {
            isModalLoading.value = false
            target.value = ''
        }
    }
 }
 </script>
 <template>
    <div class="flex flex-col h-full font-sans relative">
        <!-- Content Area (Scrollable) -->
        <div class="flex-1 overflow-y-auto p-8 pb-48 custom-scrollbar">
            <!-- Top Bar -->
            <header class="flex justify-between items-end mb-8 border-b border-white/5 pb-6">
                <div>
                    <h1
                        class="text-4xl font-bold m-0 bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-transparent">
                        Ideas</h1>
                    <p class="mt-2 mb-0 text-slate-400">Your creative sessions and experiments</p>
                </div>
                <!-- REMOVED NEW IDEA BUTTON -->
            </header>
            <!-- Loading State -->
            <div v-if="loading && ideas.length === 0" class="flex flex-col gap-4">
                <div v-for="i in 6" :key="i" class="glass-panel rounded-2xl p-4 flex gap-4 items-center">
                    <Skeleton width="4rem" height="4rem" class="rounded-lg" />
                    <div class="flex-1">
                        <Skeleton width="40%" height="1.5rem" class="mb-2" />
                        <Skeleton width="60%" height="1rem" />
                    </div>
                </div>
            </div>
            <!-- Empty State -->
            <div v-else-if="ideas.length === 0"
                class="flex flex-col items-center justify-center h-96 text-slate-400 bg-slate-900/30 rounded-3xl border border-dashed border-white/10">
                <div class="w-20 h-20 rounded-full bg-violet-500/10 flex items-center justify-center mb-6">
                    <i class="pi pi-lightbulb text-4xl text-violet-400"></i>
                </div>
                <h3 class="text-xl font-semibold text-white mb-2">No ideas yet</h3>
                <p class="text-slate-400 mb-6 max-w-sm text-center">Use the panel below to start a new creative session.
                </p>
            </div>
            <!-- Ideas List (Vertical) -->
            <div v-else class="flex flex-col gap-3">
                <div v-for="idea in ideas" :key="idea.id"
                    class="glass-panel rounded-xl p-3 flex gap-4 items-center cursor-pointer border border-white/5 hover:bg-slate-800/80 hover:border-violet-500/30 group transition-all"
                    @click="goToDetail(idea.id)">
                    <!-- Thumbnail -->
                    <div
                        class="w-16 h-16 rounded-lg bg-slate-800 flex-shrink-0 overflow-hidden relative border border-white/10">
                        <img v-if="idea.last_generation && idea.last_generation.status == 'done' && idea.last_generation.result_list.length > 0"
                            :src="API_URL + '/assets/' + idea.last_generation.result_list[0] + '?thumbnail=true'"
                            class="w-full h-full object-cover" />
                        <div v-else class="w-full h-full flex items-center justify-center bg-slate-800 text-slate-600">
                            <i class="pi pi-image text-xl"></i>
                        </div>
                    </div>
                    <!-- Details -->
                    <div class="flex-1 min-w-0">
                        <h3
                            class="m-0 text-lg font-bold text-slate-200 group-hover:text-violet-300 transition-colors truncate">
                            {{ idea.name }}</h3>
                        <p class="m-0 text-sm text-slate-500 truncate">{{ idea.description || 'No description' }}</p>
                    </div>
                    <!-- Meta -->
                    <div class="flex items-center gap-4 text-xs text-slate-500">
                        <div class="flex items-center gap-1 bg-slate-900/50 px-2 py-1 rounded-md">
                            <i class="pi pi-images text-[10px]"></i>
                            <span>{{ idea.generation_ids?.length || 0 }}</span>
                        </div>
                        <i class="pi pi-chevron-right text-slate-600 group-hover:text-white transition-colors"></i>
                    </div>
                </div>
            </div>
        </div>
        <!-- Create Idea Dialog (Removed) -->
        <!-- SETTINGS PANEL (Bottom - Persistent) -->
        <div
            class="absolute bottom-4 left-1/2 -translate-x-1/2 w-[95%] max-w-4xl glass-panel border border-white/10 bg-slate-900/95 backdrop-blur-xl px-4 py-3 z-[60] !rounded-[2rem] shadow-2xl flex flex-col gap-1 max-h-[60vh] overflow-y-auto">
            <div class="flex flex-col lg:flex-row gap-3">
                <!-- LEFT COLUMN: Prompt + Character + Assets -->
                <div class="flex-1 flex flex-col gap-2">
                    <!-- Prompt -->
                    <div class="flex flex-col gap-1">
                        <div class="flex justify-between items-center">
                            <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Prompt</label>
                            <!-- Optional: Add Clear/Improve buttons here if desired, keeping simple for now to match layout -->
                        </div>
                        <Textarea v-model="prompt" rows="2" autoResize
                            placeholder="Describe what you want to create... (Auto-starts new session)"
                            class="w-full bg-slate-800 !text-sm border-white/10 text-white rounded-lg p-2 focus:border-violet-500 focus:ring-1 focus:ring-violet-500/50 transition-all resize-none shadow-inner" />
                    </div>
                    <!-- Character & Assets Row -->
                    <div class="flex flex-col md:flex-row gap-2">
                        <div class="flex-1 flex flex-col gap-1">
                            <label
                                class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Character</label>
                            <Dropdown v-model="selectedCharacter" :options="characters" optionLabel="name"
                                placeholder="Select Character" filter showClear
                                class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl" :pt="{
                                    root: { class: '!bg-slate-800' },
                                    input: { class: '!text-white' },
                                    trigger: { class: '!text-slate-400' },
                                    panel: { class: '!bg-slate-800 !border-white/10' },
                                    item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' }
                                }">
                                <template #value="slotProps">
                                    <div v-if="slotProps.value" class="flex items-center gap-2">
                                        <img v-if="slotProps.value.avatar_image"
                                            :src="API_URL + slotProps.value.avatar_image"
                                            class="w-6 h-6 rounded-full object-cover" />
                                        <span>{{ slotProps.value.name }}</span>
                                    </div>
                                    <span v-else>{{ slotProps.placeholder }}</span>
                                </template>
                                <template #option="slotProps">
                                    <div class="flex items-center gap-2">
                                        <img v-if="slotProps.option.avatar_image"
                                            :src="API_URL + slotProps.option.avatar_image"
                                            class="w-8 h-8 rounded-full object-cover" />
                                        <span>{{ slotProps.option.name }}</span>
                                    </div>
                                </template>
                            </Dropdown>
                            <div v-if="selectedCharacter"
                                class="flex items-center gap-2 mt-2 px-1 animate-in fade-in slide-in-from-top-1">
                                <Checkbox v-model="useProfileImage" :binary="true" inputId="idea-use-profile-img"
                                    class="!border-white/20" :pt="{
                                        box: ({ props, state }) => ({
                                            class: ['!bg-slate-800 !border-white/20', { '!bg-violet-600 !border-violet-600': props.modelValue }]
                                        })
                                    }" />
                                <label for="idea-use-profile-img"
                                    class="text-xs text-slate-300 cursor-pointer select-none">Use
                                    Character
                                    Photo</label>
                            </div>
                        </div>
                        <div class="flex-1 flex flex-col gap-1">
                            <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Assets</label>
                            <div @click="openAssetPicker"
                                class="w-full bg-slate-800 border border-white/10 rounded-lg p-2 min-h-[38px] cursor-pointer hover:bg-slate-700/50 transition-colors flex flex-wrap gap-1.5">
                                <span v-if="selectedAssets.length === 0" class="text-slate-400 text-sm py-0.5">Select
                                    Assets</span>
                                <div v-for="asset in selectedAssets" :key="asset.id"
                                    class="px-2 py-1 bg-violet-600/30 border border-violet-500/30 text-violet-200 text-xs rounded-md flex items-center gap-2 animate-in fade-in zoom-in duration-200"
                                    @click.stop>
                                    <img v-if="asset.url" :src="API_URL + asset.url + '?thumbnail=true'"
                                        class="w-4 h-4 rounded object-cover" />
                                    <span class="truncate max-w-[100px]">{{ asset.name || 'Asset ' + (asset.id ?
                                        asset.id.substring(0, 4) : '') }}</span>
                                    <i class="pi pi-times cursor-pointer hover:text-white"
                                        @click.stop="removeAsset(asset)"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- RIGHT COLUMN: Settings & Button -->
                <div class="w-full lg:w-72 flex flex-col gap-2">
                    <div class="grid grid-cols-2 gap-2">
                        <div class="flex flex-col gap-1">
                            <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Quality</label>
                            <Dropdown v-model="quality" :options="qualityOptions" optionLabel="value"
                                class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl"
                                :pt="{ input: { class: '!text-white' }, trigger: { class: '!text-slate-400' }, panel: { class: '!bg-slate-800 !border-white/10' }, item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' } }" />
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Ratio</label>
                            <Dropdown v-model="aspectRatio" :options="aspectRatioOptions" optionLabel="value"
                                class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl"
                                :pt="{ input: { class: '!text-white' }, trigger: { class: '!text-slate-400' }, panel: { class: '!bg-slate-800 !border-white/10' }, item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' } }" />
                        </div>
                    </div>
                    <!-- Generation Count -->
                    <div class="flex flex-col gap-1">
                        <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Count</label>
                        <div class="flex items-center">
                            <div class="flex-1 flex bg-slate-800 rounded-lg border border-white/10 overflow-hidden">
                                <button v-for="n in 4" :key="n" @click="imageCount = n"
                                    class="flex-1 py-1 text-xs font-bold transition-all"
                                    :class="imageCount === n ? 'bg-violet-600 text-white' : 'text-slate-400 hover:text-white hover:bg-white/5'">
                                    {{ n }}
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- Telegram (Copied from Detail View) -->
                    <div class="flex flex-col gap-1 bg-slate-800/50 p-2 rounded-lg border border-white/5">
                        <div class="flex items-center gap-2">
                            <Checkbox v-model="sendToTelegram" :binary="true" inputId="idea-tg-check" />
                            <label for="idea-tg-check" class="text-xs text-slate-300 cursor-pointer">Send to
                                Telegram</label>
                        </div>
                        <div v-if="sendToTelegram" class="animate-in fade-in slide-in-from-top-1">
                            <InputText v-model="telegramId" placeholder="Telegram ID"
                                class="w-full !text-xs !bg-slate-900 !border-white/10 !text-white !py-1.5" />
                        </div>
                    </div>
                    <div class="mt-auto">
                        <Button :label="isSubmittingGen ? 'Starting...' : 'Generate New Session'"
                            :icon="isSubmittingGen ? 'pi pi-spin pi-spinner' : 'pi pi-sparkles'"
                            :loading="isSubmittingGen" :disabled="isSubmittingGen || !prompt" @click="handleGenerate"
                            class="w-full !py-2 !text-sm !font-bold !bg-gradient-to-r from-violet-600 to-cyan-500 !border-none !rounded-lg !shadow-lg !shadow-violet-500/20 hover:!scale-[1.02] transition-all disabled:opacity-50 disabled:cursor-not-allowed" />
                    </div>
                </div>
            </div>
        </div>
        <Dialog v-model:visible="isAssetPickerVisible" modal header="Select Assets"
            :style="{ width: '80vw', maxWidth: '900px' }"
            :pt="{ root: { class: '!bg-slate-900 !border !border-white/10' }, header: { class: '!bg-slate-900 !border-b !border-white/5 !text-white' }, content: { class: '!bg-slate-900 !p-0' }, footer: { class: '!bg-slate-900 !border-t !border-white/5 !p-4' }, closeButton: { class: '!text-slate-400 hover:!text-white' } }">
            <div class="flex flex-col h-[70vh]">
                <!-- Tabs -->
                <div class="flex border-b border-white/5 px-4 items-center">
                    <button v-for="tab in ['all', 'uploaded', 'generated']" :key="tab" @click="assetPickerTab = tab"
                        class="px-4 py-3 text-sm font-medium border-b-2 transition-colors capitalize"
                        :class="assetPickerTab === tab ? 'border-violet-500 text-violet-400' : 'border-transparent text-slate-400 hover:text-slate-200'">
                        {{ tab }}
                    </button>
                    <!-- Upload Action -->
                    <div class="ml-auto flex items-center">
                        <input type="file" ref="assetPickerFileInput" @change="handleAssetPickerUpload" class="hidden"
                            accept="image/*" />
                        <Button icon="pi pi-upload" label="Upload" @click="triggerAssetPickerUpload"
                            class="!text-xs !bg-violet-600/20 !text-violet-300 hover:!bg-violet-600/40 !border-none !px-3 !py-1.5 !rounded-lg" />
                    </div>
                </div>
                <!-- Grid -->
                <div class="flex-1 overflow-y-auto p-4 custom-scrollbar">
                    <div v-if="isModalLoading" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
                        <Skeleton v-for="i in 10" :key="i" height="150px" class="!bg-slate-800 rounded-xl" />
                    </div>
                    <div v-else-if="modalAssets.length > 0"
                        class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
                        <div v-for="asset in modalAssets" :key="asset.id" @click="toggleAssetSelection(asset)"
                            class="relative aspect-square rounded-xl overflow-hidden cursor-pointer border-2 transition-all group"
                            :class="tempSelectedAssets.some(a => a.id === asset.id) ? 'border-violet-500 ring-2 ring-violet-500/30' : 'border-transparent hover:border-white/20'">
                            <img :src="API_URL + asset.url + '?thumbnail=true'" class="w-full h-full object-cover" />
                            <div class="absolute bottom-0 left-0 right-0 p-2 bg-black/60 backdrop-blur-sm">
                                <p class="text-[10px] text-white truncate">{{ asset.name || 'Asset ' + (asset.id ?
                                    asset.id.substring(0, 4) : '') }}</p>
                            </div>
                            <!-- Checkmark -->
                            <div v-if="tempSelectedAssets.some(a => a.id === asset.id)"
                                class="absolute top-2 right-2 w-6 h-6 bg-violet-500 rounded-full flex items-center justify-center shadow-lg animate-in zoom-in duration-200">
                                <i class="pi pi-check text-white text-xs"></i>
                            </div>
                        </div>
                    </div>
                    <div v-else class="flex flex-col items-center justify-center h-full text-slate-500">
                        <i class="pi pi-image text-4xl mb-2 opacity-50"></i>
                        <p>No assets found</p>
                    </div>
                </div>
            </div>
            <template #footer>
                <div class="flex justify-end gap-2">
                    <Button label="Cancel" @click="isAssetPickerVisible = false"
                        class="!text-slate-300 hover:!bg-white/5" text />
                    <Button :label="'Select (' + tempSelectedAssets.length + ')'" @click="confirmAssetSelection"
                        class="!bg-violet-600 !border-none hover:!bg-violet-500" />
                </div>
            </template>
        </Dialog>
    </div>
 </template>
 <style scoped>
 .glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
 }
 .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
 }
 .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
 }
 </style>
--- a/src/views/ImageGenerationView.vue
+++ b/src/views/ImageGenerationView.vue
@@ -211,8 +211,15 @@ const handleGenerate = async () => {
        const response = await aiService.runGeneration(payload)
-        if (response && response.id) {
+        let genId = null
-            pollStatus(response.id)
+        if (response && response.generations && response.generations.length > 0) {
            genId = response.generations[0].id
        } else if (response && response.id) {
            genId = response.id
        }
        if (genId) {
            pollStatus(genId)
        } else {
            // Fallback immediate response
            generatedResult.value = response
--- a/src/views/ProjectDetailView.vue
+++ b/src/views/ProjectDetailView.vue
@@ -0,0 +1,166 @@
 <template>
    <div class="container mx-auto p-4 animate-fade-in" v-if="project">
        <!-- Header -->
        <div class="glass-panel p-8 rounded-xl mb-8 relative overflow-hidden">
            <div class="absolute top-0 right-0 p-4 opacity-10">
                <i class="pi pi-folder text-9xl text-white"></i>
            </div>
            <div class="relative z-10">
                <div class="flex items-center gap-3 mb-2">
                    <Button icon="pi pi-arrow-left" text rounded @click="router.push('/projects')" />
                    <span v-if="isCurrentProject"
                        class="bg-green-500/20 text-green-400 text-xs px-2 py-1 rounded-full border border-green-500/30 font-medium">
                        Active Project
                    </span>
                </div>
                <h1 class="text-4xl font-bold text-white mb-4">{{ project.name }}</h1>
                <p class="text-slate-300 text-lg max-w-2xl mb-6">
                    {{ project.description || 'No description provided.' }}
                </p>
                <div class="flex gap-3">
                    <Button v-if="!isCurrentProject" label="Set as Active" icon="pi pi-check" @click="selectProject" />
                    <Button v-if="isOwner" label="Delete" icon="pi pi-trash" severity="danger" outlined
                        @click="confirmDelete" />
                    <Button label="Settings" icon="pi pi-cog" severity="secondary" outlined />
                </div>
            </div>
        </div>
        <!-- Confirm Dialog -->
        <ConfirmDialog />
        <!-- Content Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Members Column -->
            <div class="lg:col-span-1">
                <div class="glass-panel p-6 rounded-xl h-full">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-xl font-bold text-white">Team Members</h2>
                    </div>
                    <!-- Inline Add Member -->
                    <div v-if="isOwner" class="mb-6">
                        <div class="flex gap-2">
                            <InputText v-model="inviteUsername" placeholder="Username to add"
                                class="w-full p-inputtext-sm" @keyup.enter="addMember" />
                            <Button label="Add" icon="pi pi-user-plus" size="small" @click="addMember"
                                :loading="inviting" :disabled="!inviteUsername.trim()" />
                        </div>
                    </div>
                    <div class="flex flex-col gap-4">
                        <div v-for="memberId in project.members" :key="memberId"
                            class="flex items-center p-3 rounded-lg bg-slate-800/30 border border-slate-700/30">
                            <div
                                class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold mr-3">
                                <i class="pi pi-user"></i>
                            </div>
                            <div class="overflow-hidden">
                                <p class="text-white font-medium truncate">{{ memberId === project.owner_id ? 'Owner' :
                                    'Member' }}</p>
                                <p class="text-slate-500 text-xs truncate">ID: {{ memberId }}</p>
                            </div>
                            <div class="ml-auto" v-if="project.owner_id === memberId">
                                <i class="pi pi-crown text-yellow-500" title="Owner"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Stats/Activity Column (Placeholder) -->
            <div class="lg:col-span-2">
                <div class="glass-panel p-6 rounded-xl h-full">
                    <h2 class="text-xl font-bold text-white mb-6">Activity</h2>
                    <div class="text-center py-12 text-slate-500">
                        <i class="pi pi-chart-line text-4xl mb-4 opacity-50"></i>
                        <p>No recent activity registered.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div v-else class="flex justify-center items-center h-full">
        <div class="text-center">
            <i class="pi pi-spin pi-spinner text-4xl text-primary-500 mb-4"></i>
            <p class="text-slate-400">Loading project...</p>
        </div>
    </div>
 </template>
 <script setup>
 import { ref, computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useProjectsStore } from '@/stores/projectsStore';
 import { storeToRefs } from 'pinia';
 import { useAuthStore } from '@/stores/auth';
 import Button from 'primevue/button';
 import InputText from 'primevue/inputtext';
 import ConfirmDialog from 'primevue/confirmdialog';
 import { useConfirm } from 'primevue/useconfirm';
 const route = useRoute();
 const router = useRouter(); // Missing import fixed
 const projectsStore = useProjectsStore();
 const authStore = useAuthStore();
 const { projects, currentProject } = storeToRefs(projectsStore);
 const projectId = route.params.id;
 const project = computed(() => projectsStore.getProjectById(projectId));
 const isCurrentProject = computed(() => currentProject.value?.id === projectId);
 const isOwner = computed(() => authStore.user && project.value && authStore.user.id === project.value.owner_id);
 const inviteUsername = ref('');
 const inviting = ref(false);
 onMounted(async () => {
    // Ensure projects are loaded
    if (projects.value.length === 0) {
        await projectsStore.fetchProjects();
    }
 });
 const selectProject = () => {
    if (project.value) {
        projectsStore.selectProject(project.value.id);
    }
 }
 const addMember = async () => {
    if (!inviteUsername.value.trim()) return;
    inviting.value = true;
    try {
        await projectsStore.addMember(projectId, inviteUsername.value);
        inviteUsername.value = '';
    } catch (e) {
        console.error(e);
        // Toast error here ideally
    } finally {
        inviting.value = false;
    }
 }
 const confirm = useConfirm();
 const confirmDelete = () => {
    confirm.require({
        message: 'Are you sure you want to delete this project? This action cannot be undone.',
        header: 'Delete Confirmation',
        icon: 'pi pi-exclamation-triangle',
        acceptClass: 'p-button-danger',
        acceptLabel: 'Delete',
        rejectLabel: 'Cancel',
        accept: async () => {
            try {
                await projectsStore.deleteProject(projectId);
                router.push('/projects');
            } catch (e) {
                console.error("Failed to delete", e);
            }
        }
    });
 }
 </script>
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -0,0 +1,123 @@
 <template>
    <div class="container mx-auto p-4 animate-fade-in">
        <div class="flex justify-between items-center mb-6">
            <div>
                <h1 class="text-3xl font-bold text-white mb-2">Projects</h1>
                <p class="text-slate-400">Manage your workspaces and teams</p>
            </div>
            <Button label="New Project" icon="pi pi-plus" @click="showCreateDialog = true" />
        </div>
        <div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <Skeleton v-for="i in 3" :key="i" height="150px" class="rounded-xl" />
        </div>
        <div v-else-if="projects.length === 0" class="text-center py-12 glass-panel rounded-xl">
            <i class="pi pi-folder-open text-6xl text-slate-600 mb-4"></i>
            <h3 class="text-xl font-semibold text-white mb-2">No Projects Yet</h3>
            <p class="text-slate-400 mb-6">Create your first project to get started</p>
            <Button label="Create Project" icon="pi pi-plus" @click="showCreateDialog = true" text />
        </div>
        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div v-for="project in projects" :key="project.id"
                class="glass-panel p-6 rounded-xl hover:bg-slate-800/50 transition-colors cursor-pointer group relative overflow-hidden"
                @click="goToProject(project.id)">
                <!-- Active Indicator -->
                <div v-if="currentProject?.id === project.id" class="absolute top-0 right-0 p-2">
                    <span
                        class="bg-green-500/20 text-green-400 text-xs px-2 py-1 rounded-full border border-green-500/30 font-medium">
                        Active
                    </span>
                </div>
                <h3 class="text-xl font-semibold text-white mb-2 group-hover:text-primary-400 transition-colors">
                    {{ project.name }}
                </h3>
                <p class="text-slate-400 text-sm mb-4 line-clamp-2">
                    {{ project.description || 'No description' }}
                </p>
                <div class="flex items-center justify-between mt-4 border-t border-slate-700/50 pt-4">
                    <div class="flex items-center text-slate-500 text-sm">
                        <i class="pi pi-users mr-2"></i>
                        <span>{{ project.members.length }} members</span>
                    </div>
                    <Button v-if="currentProject?.id !== project.id" icon="pi pi-check" label="Select" size="small"
                        severity="secondary" @click.stop="selectProject(project.id)" />
                </div>
            </div>
        </div>
        <!-- Create Project Dialog -->
        <Dialog v-model:visible="showCreateDialog" modal header="Create New Project"
            :style="{ width: '90vw', maxWidth: '500px' }">
            <div class="flex flex-col gap-4 pt-4">
                <div class="flex flex-col gap-2">
                    <label for="name" class="text-slate-300">Project Name</label>
                    <InputText id="name" v-model="newProject.name" autofocus />
                </div>
                <div class="flex flex-col gap-2">
                    <label for="description" class="text-slate-300">Description</label>
                    <Textarea id="description" v-model="newProject.description" rows="3" autoResize />
                </div>
            </div>
            <template #footer>
                <Button label="Cancel" text severity="secondary" @click="showCreateDialog = false" />
                <Button label="Create" icon="pi pi-check" @click="createProject" :loading="creating" />
            </template>
        </Dialog>
    </div>
 </template>
 <script setup>
 import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useProjectsStore } from '@/stores/projectsStore';
 import { storeToRefs } from 'pinia';
 import Button from 'primevue/button';
 import Dialog from 'primevue/dialog';
 import InputText from 'primevue/inputtext';
 import Textarea from 'primevue/textarea';
 import Skeleton from 'primevue/skeleton';
 const router = useRouter();
 const projectsStore = useProjectsStore();
 // Use storeToRefs for reactive state
 const { projects, currentProject, loading } = storeToRefs(projectsStore);
 const showCreateDialog = ref(false);
 const creating = ref(false);
 const newProject = ref({
    name: '',
    description: ''
 });
 onMounted(() => {
    projectsStore.fetchProjects();
 });
 const createProject = async () => {
    if (!newProject.value.name.trim()) return;
    creating.value = true;
    try {
        await projectsStore.createProject(newProject.value.name, newProject.value.description);
        showCreateDialog.value = false;
        newProject.value = { name: '', description: '' };
    } catch (error) {
        console.error(error);
    } finally {
        creating.value = false;
    }
 };
 const selectProject = (id) => {
    projectsStore.selectProject(id);
 };
 const goToProject = (id) => {
    router.push(`/projects/${id}`);
 };
 </script>
Author	SHA1	Message	Date
xds	ff07ca6ae0	feat: Implement content planning and post management with a new service and calendar view.	2026-02-17 15:54:36 +03:00
xds	6bda0db181	feat: Implement native file sharing with Web Share API, falling back to individual downloads.	2026-02-16 17:46:35 +03:00
xds	fc9048fc94	feat: Implement multi-select and download functionality for gallery images and add `npm install` to the deployment script.	2026-02-16 17:37:41 +03:00
xidas	073c94140f	Merge pull request 'ideas' (#2 ) from ideas into main Reviewed-on: #2	2026-02-16 13:57:23 +00:00
xds	9a9d50a900	feat: Implement multi-generation support with individual status tracking and history grouping.	2026-02-16 16:35:29 +03:00
xds	2aa9156a20	feat: Support grouped generation responses and improve generation ID extraction for polling.	2026-02-16 00:25:41 +03:00
xds	55e8db92ed	123	2026-02-15 12:26:14 +03:00
xds	75e33cca9a	feat: enhance grouped generation item UI with detailed failure states, delete, and reuse prompt/asset actions.	2026-02-13 17:28:41 +03:00
xds	3910c79848	feat: Implement multiple image generation and enhance image preview with navigation and grouping.	2026-02-13 11:18:37 +03:00
xds	0406b175e9	fix	2026-02-12 17:54:14 +03:00
xds	2eda7526ef	feat: Replace text-based logo with an image in the AppSidebar.	2026-02-09 16:10:46 +03:00
xds	1a8c66ca35	feat: Implement project management with new views, services, store, and sidebar project selection.	2026-02-09 16:06:50 +03:00
xds	70e96eb503	feat: Add multiple favicon sizes, Apple touch icon, and web app manifest for improved PWA support.	2026-02-09 13:45:22 +03:00
xds	27337e0ccf	feat: Redesign sidebar to a horizontal top navigation bar and enhance assets view with asset upload, refined filters, and a new grid layout.	2026-02-09 01:52:20 +03:00
xds	c73bffc9f4	albums	2026-02-08 22:49:37 +03:00
xidas	0b9746bce8	Merge pull request 'init auth' (#1 ) from auth into main Reviewed-on: #1	2026-02-08 14:37:13 +00:00