video

feat: Replace text-based logo with an image in the AppSidebar.
feat: Implement project management with new views, services, store, and sidebar project selection.
2026-02-12 17:35:54 +03:00 · 2026-02-09 16:10:46 +03:00 · 2026-02-09 16:06:50 +03:00 · 2026-02-09 13:45:22 +03:00 · 2026-02-09 01:52:20 +03:00 · 2026-02-08 22:49:37 +03:00
27 changed files with 5074 additions and 159 deletions
--- 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/openapi/openapi.json
+++ b/openapi/openapi.json
--- 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()
@@ -23,9 +71,10 @@ const isActive = (path) => {
 const navItems = computed(() => {
    const items = [
        { path: '/', icon: '🏠', tooltip: 'Home' },
-        { path: '/assets', icon: '📂', tooltip: 'Assets' },
+        { path: '/projects', icon: '📂', tooltip: 'Projects' },
        // { path: '/generation', icon: '🎨', tooltip: 'Image Generation' },
        { path: '/flexible', icon: '🖌️', tooltip: 'Flexible Generation' },
        { path: '/video', icon: '🎬', tooltip: 'Video Generation' },
        { path: '/albums', icon: '🖼️', tooltip: 'Library' },
        { path: '/characters', icon: '👥', tooltip: 'Characters' },
        { path: '/image-to-prompt', icon: '✨', tooltip: 'Image to Prompt' }
    ]
@@ -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,31 @@ const router = createRouter({
      path: '/flexible',
      name: 'flexible',
      component: () => import('../views/FlexibleGenerationView.vue')
    },
    {
      path: '/video',
      name: 'video',
      component: () => import('../views/VideoGenerationView.vue')
    },
    {
      path: '/albums',
      name: 'albums',
      component: () => import('../views/AlbumsView.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/aiService.js
+++ b/src/services/aiService.js
@@ -66,5 +66,18 @@ export const aiService = {
      linked_assets: linkedAssets
    })
    return response.data
  },
  // Run video generation task
  async runVideoGeneration(payload) {
    const response = await api.post('/generations/video/_run', payload)
    return response.data
  },
  // Get video generations history
  async getVideoGenerations(limit, offset) {
    const params = { limit, offset, gen_type: 'Video' }
    const response = await api.get('/generations', { params })
    return response.data
  }
 }
--- 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/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/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,274 @@
 <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 Image from 'primevue/image'
 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)
        }
    })
 }
 </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">
                        <Image :src="gen.result || API_URL + `/assets/${gen.result_list[0]}` + '?thumbnail=true'"
                            preview class="w-full h-full object-cover" imageClass="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]}` + '?thumbnail=true')"
                            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>
    </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/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/FlexibleGenerationView.vue
+++ b/src/views/FlexibleGenerationView.vue
@@ -13,15 +13,22 @@ import MultiSelect from 'primevue/multiselect'
 import ProgressSpinner from 'primevue/progressspinner'
 import ProgressBar from 'primevue/progressbar'
 import Message from 'primevue/message'
 import Skeleton from 'primevue/skeleton'
 import { useAlbumStore } from '../stores/albums'
 const router = useRouter()
 const API_URL = import.meta.env.VITE_API_URL
 const albumStore = useAlbumStore()
 // --- State ---
 const prompt = ref('')
 const selectedCharacter = ref(null)
 const selectedAssets = ref([])
 // Album Picker State
 const isAlbumPickerVisible = ref(false)
 const generationToAdd = ref(null)
 const selectedAlbumForAdd = ref(null)
 // Asset Picker State
 const isAssetPickerVisible = ref(false)
 const assetPickerTab = ref('all') // 'all', 'uploaded', 'generated'
@@ -45,11 +52,7 @@ const historyRows = ref(50)
 const historyFirst = ref(0)
 const isSettingsVisible = ref(false)
-const isGenerating = ref(false)
+const isSubmitting = ref(false)
 const generationStatus = ref('')
 const generationProgress = ref(0)
 const generationError = ref(null)
 const generatedResult = ref(null) // For immediate feedback if needed
 const activeOverlayId = ref(null) // For mobile tap-to-show overlay
 // Options
@@ -141,6 +144,32 @@ const loadData = async () => {
        if (historyRes && historyRes.generations) {
            historyGenerations.value = historyRes.generations
            historyTotal.value = historyRes.total_count || 0
            // Resume polling for unfinished generations
            // Resume polling for unfinished generations
            const threeMinutesAgo = Date.now() - 3 * 60 * 1000
            historyGenerations.value.forEach(gen => {
                const status = gen.status ? gen.status.toLowerCase() : ''
                const isActive = ['processing', 'starting', 'running'].includes(status)
                let isRecent = true
                if (gen.created_at) {
                    // Force UTC if missing timezone info (simple heuristic)
                    let timeStr = gen.created_at
                    if (timeStr.indexOf('Z') === -1 && timeStr.indexOf('+') === -1) {
                        timeStr += 'Z'
                    }
                    const createdTime = new Date(timeStr).getTime()
                    if (!isNaN(createdTime)) {
                        isRecent = createdTime > threeMinutesAgo
                    }
                }
                if (isActive && isRecent) {
                    pollGeneration(gen.id)
                }
            })
        } else {
            historyGenerations.value = Array.isArray(historyRes) ? historyRes : []
            historyTotal.value = historyGenerations.value.length
@@ -176,7 +205,12 @@ const refreshHistory = async () => {
                const existingIndex = historyGenerations.value.findIndex(g => g.id === gen.id)
                if (existingIndex !== -1) {
                    // Update existing item in place to preserve state/reactivity
-                    Object.assign(historyGenerations.value[existingIndex], gen)
+                    // Only update if not currently polling to avoid race conditions, 
                    // or just update fields that might change
                    const existing = historyGenerations.value[existingIndex]
                    if (!['processing', 'starting', 'running'].includes(existing.status)) {
                        Object.assign(existing, gen)
                    }
                } else {
                    newGenerations.push(gen)
                }
@@ -195,7 +229,6 @@ const refreshHistory = async () => {
 }
 // --- Generation ---
 const handleGenerate = async () => {
    if (!prompt.value.trim()) return
@@ -205,10 +238,7 @@ const handleGenerate = async () => {
        return
    }
-    isGenerating.value = true
+    isSubmitting.value = true
    generationError.value = null
    generationStatus.value = 'starting'
    generationProgress.value = 0
    // Close settings to show gallery/progress (optional preference)
    // isSettingsVisible.value = false 
@@ -227,51 +257,123 @@ const handleGenerate = async () => {
        const response = await aiService.runGeneration(payload)
        if (response && response.id) {
-            pollStatus(response.id)
+            // Create optimistic generation items
-        } else {
+            // If response is the full generation object, use it. 
-            // Immediate result
+            // If it's just { id: '...' }, create a placeholder.
-            isGenerating.value = false
+            // aiService.runGeneration returns response.data. 
-            loadHistory() // Refresh gallery
+
            const newGen = {
                id: response.id,
                prompt: prompt.value,
                status: 'starting',
                created_at: new Date().toISOString(),
                // Add other fields as necessary for display
            }
            // Add to history immediately
            historyGenerations.value.unshift(newGen)
            historyTotal.value++
            // Start polling
            pollGeneration(response.id)
            // Clear prompt if desired, or keep for reuse
            // prompt.value = '' 
        }
    } catch (e) {
        console.error('Generation failed', e)
-        generationError.value = e.message || 'Generation failed'
+        // Ideally show a toast error here
-        isGenerating.value = false
+        alert(e.message || 'Generation failed to start')
    } finally {
        isSubmitting.value = false
    }
 }
-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
    const genIndex = historyGenerations.value.findIndex(g => g.id === id)
    if (genIndex === -1) return // Should not happen if we just added it
    const gen = historyGenerations.value[genIndex]
    while (!completed) {
        try {
            const response = await aiService.getGenerationStatus(id)
            generationStatus.value = response.status
            generationProgress.value = response.progress || 0
-            if (response.status === 'done') {
+            // Update the object in the list
-                completed = true
+            // We use Object.assign to keep the reactive reference valid
            Object.assign(gen, response)
-                // Refresh history to show new item without resetting list
+            if (response.status === 'done' || response.status === 'failed') {
                await refreshHistory()
            } else if (response.status === 'failed') {
                completed = true
                generationError.value = response.failed_reason || 'Generation failed'
                throw new Error(generationError.value)
            } else {
                // Exponential backoff or fixed interval
                await new Promise(resolve => setTimeout(resolve, 2000))
            }
        } catch (e) {
-            console.error('Polling failed', e)
+            console.error(`Polling failed for ${id}`, e)
            attempts++
            if (attempts > 3) {
                completed = true
-            isGenerating.value = false
+                gen.status = 'failed'
                gen.failed_reason = 'Polling connection lost'
            }
            await new Promise(resolve => setTimeout(resolve, 5000))
        }
    }
-    isGenerating.value = false
+}
 // --- Infinite Scroll ---
 const isHistoryLoading = ref(false)
 const infiniteScrollTrigger = ref(null)
 let observer = null
 const setupInfiniteScroll = () => {
    observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && !isHistoryLoading.value && historyGenerations.value.length < historyTotal.value) {
            loadMoreHistory()
        }
    }, {
        root: null,
        rootMargin: '100px',
        threshold: 0.1
    })
    if (infiniteScrollTrigger.value) {
        observer.observe(infiniteScrollTrigger.value)
    }
 }
 const loadMoreHistory = async () => {
    if (isHistoryLoading.value) return
    isHistoryLoading.value = true
    try {
        const nextOffset = historyGenerations.value.length
        const response = await aiService.getGenerations(historyRows.value, nextOffset)
        if (response && response.generations) {
            const newGenerations = response.generations.filter(gen =>
                !historyGenerations.value.some(existing => existing.id === gen.id)
            )
            historyGenerations.value.push(...newGenerations)
            historyTotal.value = response.total_count || historyTotal.value
        }
    } catch (e) {
        console.error('Failed to load more history', e)
    } finally {
        isHistoryLoading.value = false
    }
 }
 // --- Initial Load ---
 onMounted(() => {
-    loadData()
+    loadData().then(() => {
        // slight delay to allow DOM render
        setTimeout(setupInfiniteScroll, 500)
    })
    isSettingsVisible.value = true
 })
@@ -437,6 +539,54 @@ watch(assetPickerTab, () => {
    }
 })
 // --- Asset Upload in Picker ---
 const assetPickerFileInput = ref(null)
 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)
            // Switch tab to 'uploaded' and reload
            assetPickerTab.value = 'uploaded'
            loadModalAssets()
        } catch (e) {
            console.error('Failed to upload asset', e)
        } finally {
            isModalLoading.value = false
            target.value = ''
        }
    }
 }
 // --- Album Picker Logic ---
 const openAlbumPicker = (gen) => {
    generationToAdd.value = gen
    isAlbumPickerVisible.value = true
    albumStore.fetchAlbums() // Fetch albums when opening picker
 }
 const confirmAddToAlbum = async () => {
    if (!generationToAdd.value || !selectedAlbumForAdd.value) return
    try {
        await albumStore.addGenerationToAlbum(selectedAlbumForAdd.value.id, generationToAdd.value.id)
        isAlbumPickerVisible.value = false
        selectedAlbumForAdd.value = null
        generationToAdd.value = null
        // Optional: Show success toast
    } catch (e) {
        console.error('Failed to add to album', e)
    }
 }
 </script>
 <template>
@@ -448,6 +598,7 @@ watch(assetPickerTab, () => {
                    <h1
                        class="text-xl font-bold bg-gradient-to-r from-white to-slate-400 bg-clip-text text-transparent m-0">
                        Gallery</h1>
                    <span class="text-xs text-slate-500 border-l border-white/10 pl-3">History</span>
                </div>
                <div class="flex items-center gap-2">
@@ -480,10 +631,24 @@ watch(assetPickerTab, () => {
                                v-tooltip.top="gen.failed_reason">{{ gen.failed_reason }}</span>
                        </div>
-                        <div v-else-if="gen.status === 'processing' || gen.status === 'starting'"
+                        <div v-else-if="['processing', 'starting', 'running'].includes(gen.status)"
-                            class="w-full h-full flex flex-col items-center justify-center bg-slate-800/50 border border-violet-500/20">
+                            class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50 border border-violet-500/20 group">
-                            <i class="pi pi-spin pi-spinner text-violet-500 text-xl mb-2"></i>
+                            <!-- Shimmer Background -->
-                            <span class="text-[10px] text-violet-300/70">Creating...</span>
+                            <div
                                class="absolute inset-0 bg-gradient-to-tr from-violet-500/5 via-violet-500/10 to-cyan-500/5 animate-pulse">
                            </div>
                            <!-- Moving Highlight -->
                            <div
                                class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/5 to-transparent">
                            </div>
                            <i class="pi pi-spin pi-spinner text-violet-500 text-xl mb-2 relative z-10"></i>
                            <span class="text-[10px] text-violet-300/70 relative z-10 capitalize">{{ gen.status
                            }}...</span>
                            <span v-if="gen.progress"
                                class="text-[9px] text-violet-400/60 font-mono mt-1 relative z-10">{{
                                    gen.progress }}%</span>
                        </div>
                        <div v-else class="w-full h-full flex items-center justify-center text-slate-600 bg-slate-800">
@@ -499,11 +664,22 @@ watch(assetPickerTab, () => {
                                    class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
                                    @click.stop="deleteGeneration(gen)" />
                                <div class="flex flex-col items-center gap-0.5 pointer-events-none">
                                    <span class="text-[10px] font-bold text-slate-300 font-mono tracking-wider">{{
                                        gen.cost }} $</span>
                                    <span v-if="gen.execution_time_seconds"
                                        class="text-[8px] text-slate-500 font-mono">{{
                                            gen.execution_time_seconds.toFixed(1) }}s</span>
                                </div>
                                <div class="flex gap-1">
                                    <Button v-if="gen.result_list && gen.result_list.length > 0" icon="pi pi-pencil"
                                        v-tooltip.left="'Edit (Use Result)'"
                                        class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
                                        @click.stop="useResultAsAsset(gen)" />
                                    <Button icon="pi pi-folder-plus" v-tooltip.left="'Add to Album'"
                                        class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
                                        @click.stop="openAlbumPicker(gen)" />
                                </div>
                            </div>
@@ -531,11 +707,20 @@ watch(assetPickerTab, () => {
                    </div>
                </div>
-                <div v-else-if="!isGenerating"
+                <div v-else-if="!isSubmitting && historyGenerations.length === 0"
                    class="flex flex-col items-center justify-center h-full text-slate-600 opacity-50">
                    <i class="pi pi-images text-6xl mb-4"></i>
                    <p class="text-xl">Your creations will appear here</p>
                </div>
                <!-- Infinite Scroll Sentinel & Loading Indicator -->
                <div ref="infiniteScrollTrigger" class="w-full py-4 flex justify-center items-center min-h-[50px]">
                    <i v-if="isHistoryLoading" class="pi pi-spin pi-spinner text-violet-500 text-2xl"></i>
                    <span v-else-if="historyGenerations.length > 0 && historyGenerations.length >= historyTotal"
                        class="text-slate-600 text-xs">
                        All items loaded
                    </span>
                </div>
            </div>
            <div v-if="isSettingsVisible"
@@ -662,20 +847,10 @@ watch(assetPickerTab, () => {
                        </div>
                        <div class="mt-auto">
-                            <Button :label="isGenerating ? 'Generating...' : 'Generate'"
+                            <Button :label="isSubmitting ? 'Starting...' : 'Generate'"
-                                :icon="isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-sparkles'"
+                                :icon="isSubmitting ? 'pi pi-spin pi-spinner' : 'pi pi-sparkles'"
-                                :loading="isGenerating" @click="handleGenerate"
+                                :loading="isSubmitting" @click="handleGenerate"
                                class="w-full !py-3 !text-base !font-bold !bg-gradient-to-r from-violet-600 to-cyan-500 !border-none !rounded-xl !shadow-lg !shadow-violet-500/20 hover:!scale-[1.02] transition-all" />
                            <div v-if="isGenerating" class="mt-2 text-center">
                                <ProgressBar :value="generationProgress" class="h-1 bg-slate-700"
                                    :pt="{ value: { class: '!bg-violet-500' } }" :showValue="false" />
                                <span class="text-[10px] text-slate-500">{{ generationStatus }}</span>
                            </div>
                            <div v-if="generationError"
                                class="mt-2 text-center text-xs text-red-400 bg-red-500/10 p-2 rounded border border-red-500/20">
                                {{ generationError }}
                            </div>
                        </div>
                    </div>
                </div>
@@ -710,12 +885,19 @@ watch(assetPickerTab, () => {
            :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">
+                <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 -->
@@ -757,6 +939,36 @@ watch(assetPickerTab, () => {
            </template>
        </Dialog>
        <Dialog v-model:visible="isAlbumPickerVisible" modal header="Add to Album" :style="{ width: '400px' }"
            :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="flex flex-col gap-4">
                <div v-if="albumStore.loading" class="flex justify-center p-4">
                    <i class="pi pi-spin pi-spinner text-violet-500 text-2xl"></i>
                </div>
                <div v-else-if="albumStore.albums.length === 0" class="text-center text-slate-400">
                    No albums found. Create one first!
                </div>
                <Dropdown v-else v-model="selectedAlbumForAdd" :options="albumStore.albums" optionLabel="name"
                    placeholder="Select an Album" class="w-full !bg-slate-800 !border-white/10 !text-white" :pt="{
                        root: { class: '!bg-slate-800' },
                        input: { class: '!text-white' },
                        trigger: { class: '!text-slate-400' },
                        panel: { class: '!bg-slate-900 !border-white/10' },
                        item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' }
                    }" />
            </div>
            <template #footer>
                <div class="flex justify-end gap-2">
                    <Button label="Cancel" @click="isAlbumPickerVisible = false"
                        class="!text-slate-300 hover:!bg-white/5" text />
                    <Button label="Add" @click="confirmAddToAlbum" :disabled="!selectedAlbumForAdd"
                        class="!bg-violet-600 !border-none hover:!bg-violet-500" />
                </div>
            </template>
        </Dialog>
    </div>
 </template>
--- 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>
--- a/src/views/VideoGenerationView.vue
+++ b/src/views/VideoGenerationView.vue
@@ -0,0 +1,982 @@
 <script setup>
 import { ref, onMounted, watch, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { dataService } from '../services/dataService'
 import { aiService } from '../services/aiService'
 import Button from 'primevue/button'
 import Textarea from 'primevue/textarea'
 import InputText from 'primevue/inputtext'
 import Dialog from 'primevue/dialog'
 import Checkbox from 'primevue/checkbox'
 import Dropdown from 'primevue/dropdown'
 import Slider from 'primevue/slider'
 import Skeleton from 'primevue/skeleton'
 import { useAlbumStore } from '../stores/albums'
 const router = useRouter()
 const API_URL = import.meta.env.VITE_API_URL
 const albumStore = useAlbumStore()
 // --- State ---
 const prompt = ref('')
 const negativePrompt = ref('')
 const startImage = ref(null)
 const tailImage = ref(null)
 const selectedCharacter = ref(null)
 const useProfileImage = ref(true)
 const duration = ref(5)
 const mode = ref('std')
 const modelName = ref('kling-v2-6')
 const cfgScale = ref(50) // 0-100 mapped to 0.0-1.0
 const sendToTelegram = ref(false)
 const telegramId = ref('')
 const isTelegramIdSaved = ref(false)
 const characters = ref([])
 const historyGenerations = ref([])
 const historyTotal = ref(0)
 const historyRows = ref(50)
 const isSettingsVisible = ref(false)
 const isSubmitting = ref(false)
 const activeOverlayId = ref(null)
 // Asset Picker State
 const isAssetPickerVisible = ref(false)
 const assetPickerTarget = ref('start') // 'start' or 'tail'
 const assetPickerTab = ref('all')
 const modalAssets = ref([])
 const isModalLoading = ref(false)
 // Album Picker State
 const isAlbumPickerVisible = ref(false)
 const generationToAdd = ref(null)
 const selectedAlbumForAdd = ref(null)
 // Video Preview
 const isVideoPreviewVisible = ref(false)
 const previewVideo = ref(null)
 // Options
 const modelOptions = ref([
    { key: 'kling-v2-1', value: 'Kling v2.1' },
    { key: 'kling-v2', value: 'Kling v2' },
    { key: 'kling-v1-6', value: 'Kling v1.6' },
    { key: 'kling-v2-6', value: 'Kling v2.6' }
 ])
 // --- Persistence ---
 const STORAGE_KEY = 'video_gen_settings'
 const saveSettings = () => {
    const settings = {
        prompt: prompt.value,
        negativePrompt: negativePrompt.value,
        startImageId: startImage.value?.id,
        tailImageId: tailImage.value?.id,
        selectedCharacterId: selectedCharacter.value?.id,
        useProfileImage: useProfileImage.value,
        duration: duration.value,
        mode: mode.value,
        modelName: modelName.value,
        cfgScale: cfgScale.value,
        sendToTelegram: sendToTelegram.value,
        telegramId: telegramId.value
    }
    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings))
    if (telegramId.value) {
        localStorage.setItem('telegram_id', telegramId.value)
        isTelegramIdSaved.value = true
    }
 }
 const restoreSettings = () => {
    const stored = localStorage.getItem(STORAGE_KEY)
    if (stored) {
        try {
            const settings = JSON.parse(stored)
            prompt.value = settings.prompt || ''
            negativePrompt.value = settings.negativePrompt || ''
            if (settings.duration) duration.value = settings.duration
            if (settings.mode) mode.value = settings.mode
            if (settings.modelName) modelName.value = settings.modelName
            if (settings.cfgScale !== undefined) cfgScale.value = settings.cfgScale
            sendToTelegram.value = settings.sendToTelegram || false
            telegramId.value = settings.telegramId || localStorage.getItem('telegram_id') || ''
            if (telegramId.value) isTelegramIdSaved.value = true
            if (settings.useProfileImage !== undefined) useProfileImage.value = settings.useProfileImage
            return settings
        } catch (e) {
            console.error('Failed to parse settings', e)
        }
    }
    return null
 }
 // Watchers for auto-save
 watch([prompt, negativePrompt, startImage, tailImage, selectedCharacter, useProfileImage, duration, mode, modelName, cfgScale, sendToTelegram, telegramId], () => {
    saveSettings()
 }, { deep: true })
 // --- Data Loading ---
 const loadData = async () => {
    try {
        const [charsRes, historyRes] = await Promise.all([
            dataService.getCharacters(),
            aiService.getVideoGenerations(historyRows.value, 0)
        ])
        characters.value = charsRes || []
        if (historyRes && historyRes.generations) {
            historyGenerations.value = historyRes.generations
            historyTotal.value = historyRes.total_count || 0
            // Resume polling for unfinished generations
            const threeMinutesAgo = Date.now() - 3 * 60 * 1000
            historyGenerations.value.forEach(gen => {
                const status = gen.status ? gen.status.toLowerCase() : ''
                const isActive = ['processing', 'starting', 'running'].includes(status)
                let isRecent = true
                if (gen.created_at) {
                    let timeStr = gen.created_at
                    if (timeStr.indexOf('Z') === -1 && timeStr.indexOf('+') === -1) {
                        timeStr += 'Z'
                    }
                    const createdTime = new Date(timeStr).getTime()
                    if (!isNaN(createdTime)) {
                        isRecent = createdTime > threeMinutesAgo
                    }
                }
                if (isActive && isRecent) {
                    pollGeneration(gen.id)
                }
            })
        } else {
            historyGenerations.value = Array.isArray(historyRes) ? historyRes : []
            historyTotal.value = historyGenerations.value.length
        }
        // Restore complex objects from IDs
        const savedSettings = restoreSettings()
        if (savedSettings) {
            if (savedSettings.selectedCharacterId) {
                selectedCharacter.value = characters.value.find(c => c.id === savedSettings.selectedCharacterId) || null
            }
        }
    } catch (e) {
        console.error('Failed to load data', e)
    }
 }
 const refreshHistory = async () => {
    try {
        const response = await aiService.getVideoGenerations(historyRows.value, 0)
        if (response && response.generations) {
            const newGenerations = []
            for (const gen of response.generations) {
                const existingIndex = historyGenerations.value.findIndex(g => g.id === gen.id)
                if (existingIndex !== -1) {
                    const existing = historyGenerations.value[existingIndex]
                    if (!['processing', 'starting', 'running'].includes(existing.status)) {
                        Object.assign(existing, gen)
                    }
                } else {
                    newGenerations.push(gen)
                }
            }
            if (newGenerations.length > 0) {
                historyGenerations.value = [...newGenerations, ...historyGenerations.value]
            }
            historyTotal.value = response.total_count || historyTotal.value
        }
    } catch (e) {
        console.error('Failed to refresh history', e)
    }
 }
 // --- Generation ---
 const handleGenerate = async () => {
    if (!startImage.value) {
        alert('Please select a start image')
        return
    }
    if (sendToTelegram.value && !telegramId.value) {
        alert('Please enter your Telegram ID')
        return
    }
    isSubmitting.value = true
    try {
        const payload = {
            image_asset_id: startImage.value.id,
            prompt: prompt.value || '',
            negative_prompt: negativePrompt.value || undefined,
            duration: duration.value,
            mode: mode.value,
            model_name: modelName.value,
            cfg_scale: cfgScale.value / 100,
            linked_character_id: selectedCharacter.value?.id || undefined,
            tail_image_asset_id: tailImage.value?.id || undefined,
            telegram_id: sendToTelegram.value ? telegramId.value : undefined,
            use_profile_image: selectedCharacter.value ? useProfileImage.value : false
        }
        const response = await aiService.runVideoGeneration(payload)
        if (response && response.id) {
            const newGen = {
                id: response.id,
                prompt: prompt.value,
                status: 'starting',
                gen_type: 'Video',
                created_at: new Date().toISOString(),
            }
            historyGenerations.value.unshift(newGen)
            historyTotal.value++
            pollGeneration(response.id)
        }
    } catch (e) {
        console.error('Generation failed', e)
        alert(e.response?.data?.detail || e.message || 'Video generation failed to start')
    } finally {
        isSubmitting.value = false
    }
 }
 const pollGeneration = async (id) => {
    let completed = false
    let attempts = 0
    const genIndex = historyGenerations.value.findIndex(g => g.id === id)
    if (genIndex === -1) return
    const gen = historyGenerations.value[genIndex]
    while (!completed) {
        try {
            const response = await aiService.getGenerationStatus(id)
            Object.assign(gen, response)
            if (response.status === 'done' || response.status === 'failed') {
                completed = true
            } else {
                await new Promise(resolve => setTimeout(resolve, 3000))
            }
        } catch (e) {
            console.error(`Polling failed for ${id}`, e)
            attempts++
            if (attempts > 3) {
                completed = true
                gen.status = 'failed'
                gen.failed_reason = 'Polling connection lost'
            }
            await new Promise(resolve => setTimeout(resolve, 5000))
        }
    }
 }
 // --- Infinite Scroll ---
 const isHistoryLoading = ref(false)
 const infiniteScrollTrigger = ref(null)
 let observer = null
 const setupInfiniteScroll = () => {
    observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && !isHistoryLoading.value && historyGenerations.value.length < historyTotal.value) {
            loadMoreHistory()
        }
    }, {
        root: null,
        rootMargin: '100px',
        threshold: 0.1
    })
    if (infiniteScrollTrigger.value) {
        observer.observe(infiniteScrollTrigger.value)
    }
 }
 const loadMoreHistory = async () => {
    if (isHistoryLoading.value) return
    isHistoryLoading.value = true
    try {
        const nextOffset = historyGenerations.value.length
        const response = await aiService.getVideoGenerations(historyRows.value, nextOffset)
        if (response && response.generations) {
            const newGenerations = response.generations.filter(gen =>
                !historyGenerations.value.some(existing => existing.id === gen.id)
            )
            historyGenerations.value.push(...newGenerations)
            historyTotal.value = response.total_count || historyTotal.value
        }
    } catch (e) {
        console.error('Failed to load more history', e)
    } finally {
        isHistoryLoading.value = false
    }
 }
 // --- Initial Load ---
 onMounted(() => {
    loadData().then(() => {
        setTimeout(setupInfiniteScroll, 500)
    })
    isSettingsVisible.value = true
 })
 // Video Preview
 const openVideoPreview = (url) => {
    previewVideo.value = { url }
    isVideoPreviewVisible.value = true
 }
 const reusePrompt = (gen) => {
    if (gen.prompt) {
        prompt.value = gen.prompt
        isSettingsVisible.value = true
    }
 }
 const deleteGeneration = async (gen) => {
    if (!gen) return
    try {
        historyGenerations.value = historyGenerations.value.filter(g => g.id !== gen.id)
        historyTotal.value--
        await dataService.deleteGeneration(gen.id)
    } catch (e) {
        console.error('Failed to delete generation', e)
        loadData()
    }
 }
 const toggleMobileOverlay = (id) => {
    if (activeOverlayId.value === id) {
        activeOverlayId.value = null
    } else {
        activeOverlayId.value = id
    }
 }
 // --- Asset Picker Logic ---
 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 = (target) => {
    assetPickerTarget.value = target
    isAssetPickerVisible.value = true
    loadModalAssets()
 }
 const selectAssetFromPicker = (asset) => {
    if (assetPickerTarget.value === 'start') {
        startImage.value = asset
    } else {
        tailImage.value = asset
    }
    isAssetPickerVisible.value = false
 }
 const removeStartImage = () => {
    startImage.value = null
 }
 const removeTailImage = () => {
    tailImage.value = null
 }
 watch(assetPickerTab, () => {
    if (isAssetPickerVisible.value) {
        loadModalAssets()
    }
 })
 // --- Asset Upload in Picker ---
 const assetPickerFileInput = ref(null)
 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 = ''
        }
    }
 }
 // --- Album Picker Logic ---
 const openAlbumPicker = (gen) => {
    generationToAdd.value = gen
    isAlbumPickerVisible.value = true
    albumStore.fetchAlbums()
 }
 const confirmAddToAlbum = async () => {
    if (!generationToAdd.value || !selectedAlbumForAdd.value) return
    try {
        await albumStore.addGenerationToAlbum(selectedAlbumForAdd.value.id, generationToAdd.value.id)
        isAlbumPickerVisible.value = false
        selectedAlbumForAdd.value = null
        generationToAdd.value = null
    } catch (e) {
        console.error('Failed to add to album', e)
    }
 }
 // Helper to determine if a generation result is a video
 const isVideoResult = (gen) => {
    return gen.gen_type === 'Video' || gen.gen_type === 'video'
 }
 const getResultUrl = (gen) => {
    if (gen.result_list && gen.result_list.length > 0) {
        return API_URL + '/assets/' + gen.result_list[0]
    }
    return null
 }
 const getResultThumbnailUrl = (gen) => {
    if (gen.result_list && gen.result_list.length > 0) {
        return API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true'
    }
    return null
 }
 </script>
 <template>
    <div class="flex flex-col h-full font-sans">
        <main class="flex-1 relative flex flex-col h-full overflow-hidden">
            <header
                class="p-4 flex justify-between items-center z-10 border-b border-white/5 bg-slate-900/80 backdrop-blur-sm">
                <div class="flex items-center gap-3">
                    <h1
                        class="text-xl font-bold bg-gradient-to-r from-cyan-400 to-violet-400 bg-clip-text text-transparent m-0">
                        🎬 Video Studio</h1>
                    <span class="text-xs text-slate-500 border-l border-white/10 pl-3">History</span>
                </div>
                <div class="flex items-center gap-2">
                    <Button icon="pi pi-refresh" @click="refreshHistory" rounded text
                        class="!text-slate-400 hover:!bg-white/10 !w-8 !h-8 md:hidden" />
                    <Button icon="pi pi-cog" @click="isSettingsVisible = true" rounded text
                        class="!text-slate-400 hover:!bg-white/10 !w-8 !h-8" v-if="!isSettingsVisible" />
                </div>
            </header>
            <div class="flex-1 overflow-y-auto p-4"
                :class="{ 'pb-[300px]': isSettingsVisible, 'pb-32': !isSettingsVisible }">
                <div v-if="historyGenerations.length > 0"
                    class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
                    <div v-for="gen in historyGenerations" :key="gen.id"
                        class="aspect-video relative group overflow-hidden rounded-xl bg-slate-800 transition-all duration-300 border border-white/5 hover:border-white/10"
                        @click="toggleMobileOverlay(gen.id)">
                        <!-- Video Thumbnail / Player -->
                        <template v-if="gen.result_list && gen.result_list.length > 0">
                            <video :src="getResultUrl(gen)" :poster="getResultThumbnailUrl(gen)"
                                class="w-full h-full object-cover cursor-pointer" muted preload="metadata"
                                @mouseenter="$event.target.play()"
                                @mouseleave="$event.target.pause(); $event.target.currentTime = 0"
                                @click.stop="openVideoPreview(getResultUrl(gen))" />
                            <!-- Play icon overlay -->
                            <div
                                class="absolute top-2 left-2 w-7 h-7 bg-black/50 rounded-full flex items-center justify-center pointer-events-none group-hover:opacity-0 transition-opacity">
                                <i class="pi pi-play text-white text-[10px] ml-0.5"></i>
                            </div>
                        </template>
                        <div v-else-if="gen.status === 'failed'"
                            class="w-full h-full flex flex-col items-center justify-center p-2 text-center bg-red-500/10 border border-red-500/20">
                            <i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
                            <span class="text-[10px] font-bold text-red-400 uppercase tracking-wide">Failed</span>
                            <span v-if="gen.failed_reason"
                                class="text-[8px] text-red-300/70 mt-1 line-clamp-2 leading-tight"
                                v-tooltip.top="gen.failed_reason">{{ gen.failed_reason }}</span>
                        </div>
                        <div v-else-if="['processing', 'starting', 'running'].includes(gen.status)"
                            class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50 border border-cyan-500/20 group">
                            <!-- Shimmer Background -->
                            <div
                                class="absolute inset-0 bg-gradient-to-tr from-cyan-500/5 via-violet-500/10 to-cyan-500/5 animate-pulse">
                            </div>
                            <!-- Moving Highlight -->
                            <div
                                class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/5 to-transparent">
                            </div>
                            <i class="pi pi-spin pi-spinner text-cyan-500 text-xl mb-2 relative z-10"></i>
                            <span class="text-[10px] text-cyan-300/70 relative z-10 capitalize">{{ gen.status
                                }}...</span>
                            <span v-if="gen.progress"
                                class="text-[9px] text-cyan-400/60 font-mono mt-1 relative z-10">{{
                                    gen.progress }}%</span>
                        </div>
                        <div v-else class="w-full h-full flex items-center justify-center text-slate-600 bg-slate-800">
                            <i class="pi pi-video text-4xl opacity-20"></i>
                        </div>
                        <!-- Overlay Actions -->
                        <div class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-2"
                            :class="{ 'opacity-0 group-hover:opacity-100': activeOverlayId !== gen.id, 'opacity-100': activeOverlayId === gen.id }">
                            <div
                                class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full z-10">
                                <Button icon="pi pi-trash" v-tooltip.right="'Delete'"
                                    class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
                                    @click.stop="deleteGeneration(gen)" />
                                <div class="flex flex-col items-center gap-0.5 pointer-events-none">
                                    <span class="text-[10px] font-bold text-slate-300 font-mono tracking-wider">{{
                                        gen.cost }} $</span>
                                    <span v-if="gen.execution_time_seconds"
                                        class="text-[8px] text-slate-500 font-mono">{{
                                            gen.execution_time_seconds.toFixed(1) }}s</span>
                                </div>
                                <div class="flex gap-1">
                                    <Button icon="pi pi-folder-plus" v-tooltip.left="'Add to Album'"
                                        class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
                                        @click.stop="openAlbumPicker(gen)" />
                                </div>
                            </div>
                            <!-- Centered Play Button -->
                            <div v-if="gen.result_list && gen.result_list.length > 0"
                                class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
                                <Button icon="pi pi-play" rounded text
                                    class="!bg-black/50 !text-white !w-12 !h-12 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border-2 !border-white/20"
                                    @click.stop="openVideoPreview(getResultUrl(gen))" />
                            </div>
                            <div
                                class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200 z-10">
                                <div class="flex gap-1 mb-1">
                                    <Button icon="pi pi-comment" v-tooltip.bottom="'Reuse Prompt'"
                                        class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
                                        @click.stop="reusePrompt(gen)" />
                                </div>
                                <p class="text-[10px] text-white/70 line-clamp-1 leading-tight">{{ gen.prompt }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else-if="!isSubmitting && historyGenerations.length === 0"
                    class="flex flex-col items-center justify-center h-full text-slate-600 opacity-50">
                    <i class="pi pi-video text-6xl mb-4"></i>
                    <p class="text-xl">Your videos will appear here</p>
                </div>
                <!-- Infinite Scroll Sentinel -->
                <div ref="infiniteScrollTrigger" class="w-full py-4 flex justify-center items-center min-h-[50px]">
                    <i v-if="isHistoryLoading" class="pi pi-spin pi-spinner text-cyan-500 text-2xl"></i>
                    <span v-else-if="historyGenerations.length > 0 && historyGenerations.length >= historyTotal"
                        class="text-slate-600 text-xs">
                        All items loaded
                    </span>
                </div>
            </div>
            <!-- Settings Panel -->
            <div v-if="isSettingsVisible"
                class="absolute bottom-2 left-1/2 -translate-x-1/2 w-[98%] max-w-6xl glass-panel border border-white/10 bg-slate-900/95 backdrop-blur-xl p-4 z-[60] !rounded-[2.5rem] shadow-2xl flex flex-col gap-3 max-h-[85vh] overflow-y-auto">
                <div class="w-full flex justify-center -mt-2 mb-2 cursor-pointer" @click="isSettingsVisible = false">
                    <div class="w-16 h-1 bg-white/20 rounded-full hover:bg-white/40 transition-colors"></div>
                </div>
                <div class="flex flex-col lg:flex-row gap-8">
                    <!-- Left Column: Prompt + Image Inputs -->
                    <div class="flex-1 flex flex-col gap-4">
                        <!-- Prompt -->
                        <div class="flex flex-col gap-2">
                            <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Prompt
                                <span class="text-slate-600 font-normal normal-case">(motion/scene description)</span>
                            </label>
                            <Textarea v-model="prompt" rows="2" autoResize
                                placeholder="Describe the motion or animation you want..."
                                class="w-full bg-slate-800 border-white/10 text-white rounded-xl p-3 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/50 transition-all resize-none shadow-inner" />
                        </div>
                        <!-- Negative Prompt -->
                        <div class="flex flex-col gap-2">
                            <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Negative Prompt
                                <span class="text-slate-600 font-normal normal-case">(optional)</span>
                            </label>
                            <Textarea v-model="negativePrompt" rows="1" autoResize
                                placeholder="What to avoid in the video..."
                                class="w-full bg-slate-800 border-white/10 text-white rounded-xl p-3 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/50 transition-all resize-none shadow-inner text-sm" />
                        </div>
                        <!-- Image Inputs -->
                        <div class="flex flex-col md:flex-row gap-4">
                            <!-- Start Image (Required) -->
                            <div class="flex-1 flex flex-col gap-2">
                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">
                                    Start Image <span class="text-red-400">*</span>
                                </label>
                                <div v-if="startImage"
                                    class="relative group rounded-xl overflow-hidden border-2 border-cyan-500/30 bg-slate-800 aspect-video">
                                    <img :src="API_URL + startImage.url + '?thumbnail=true'"
                                        class="w-full h-full object-cover" />
                                    <div
                                        class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                        <Button icon="pi pi-times" rounded
                                            class="!bg-red-500/80 !border-none !text-white !w-8 !h-8"
                                            @click="removeStartImage" />
                                    </div>
                                    <span
                                        class="absolute bottom-1 left-1 text-[9px] bg-black/60 text-white px-2 py-0.5 rounded-full">
                                        {{ startImage.name || 'Start' }}
                                    </span>
                                </div>
                                <div v-else @click="openAssetPicker('start')"
                                    class="aspect-video rounded-xl border-2 border-dashed border-white/10 bg-slate-800/50 hover:bg-slate-800 hover:border-cyan-500/30 transition-all cursor-pointer flex flex-col items-center justify-center gap-2">
                                    <i class="pi pi-image text-2xl text-slate-500"></i>
                                    <span class="text-xs text-slate-400">Select start frame</span>
                                </div>
                            </div>
                            <!-- Tail Image (Optional) -->
                            <div class="flex-1 flex flex-col gap-2">
                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">
                                    Tail Image <span class="text-slate-600 font-normal normal-case">(optional)</span>
                                </label>
                                <div v-if="tailImage"
                                    class="relative group rounded-xl overflow-hidden border-2 border-violet-500/30 bg-slate-800 aspect-video">
                                    <img :src="API_URL + tailImage.url + '?thumbnail=true'"
                                        class="w-full h-full object-cover" />
                                    <div
                                        class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                        <Button icon="pi pi-times" rounded
                                            class="!bg-red-500/80 !border-none !text-white !w-8 !h-8"
                                            @click="removeTailImage" />
                                    </div>
                                    <span
                                        class="absolute bottom-1 left-1 text-[9px] bg-black/60 text-white px-2 py-0.5 rounded-full">
                                        {{ tailImage.name || 'Tail' }}
                                    </span>
                                </div>
                                <div v-else @click="openAssetPicker('tail')"
                                    class="aspect-video rounded-xl border-2 border-dashed border-white/10 bg-slate-800/50 hover:bg-slate-800 hover:border-violet-500/30 transition-all cursor-pointer flex flex-col items-center justify-center gap-2">
                                    <i class="pi pi-image text-2xl text-slate-500"></i>
                                    <span class="text-xs text-slate-400">Select end frame</span>
                                </div>
                            </div>
                        </div>
                        <!-- Character -->
                        <div class="flex flex-col gap-2">
                            <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Character
                                <span class="text-slate-600 font-normal normal-case">(optional)</span>
                            </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-1 px-1 animate-in fade-in slide-in-from-top-1">
                                <Checkbox v-model="useProfileImage" :binary="true" inputId="use-profile-img-vid" />
                                <label for="use-profile-img-vid"
                                    class="text-xs text-slate-300 cursor-pointer select-none">Use
                                    Character
                                    Photo</label>
                            </div>
                        </div>
                    </div>
                    <!-- Right Column: Video Settings + Generate -->
                    <div class="w-full lg:w-80 flex flex-col gap-4">
                        <!-- Duration -->
                        <div class="flex flex-col gap-2">
                            <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Duration</label>
                            <div class="flex gap-2">
                                <button @click="duration = 5"
                                    class="flex-1 py-2 px-4 rounded-xl text-sm font-medium transition-all" :class="duration === 5
                                        ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/40 shadow-lg shadow-cyan-500/10'
                                        : 'bg-slate-800 text-slate-400 border border-white/10 hover:bg-slate-700'">
                                    5 sec
                                </button>
                                <button @click="duration = 10"
                                    class="flex-1 py-2 px-4 rounded-xl text-sm font-medium transition-all" :class="duration === 10
                                        ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/40 shadow-lg shadow-cyan-500/10'
                                        : 'bg-slate-800 text-slate-400 border border-white/10 hover:bg-slate-700'">
                                    10 sec
                                </button>
                            </div>
                        </div>
                        <!-- Mode -->
                        <div class="flex flex-col gap-2">
                            <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Mode</label>
                            <div class="flex gap-2">
                                <button @click="mode = 'std'"
                                    class="flex-1 py-2 px-4 rounded-xl text-sm font-medium transition-all" :class="mode === 'std'
                                        ? 'bg-violet-500/20 text-violet-400 border border-violet-500/40 shadow-lg shadow-violet-500/10'
                                        : 'bg-slate-800 text-slate-400 border border-white/10 hover:bg-slate-700'">
                                    Standard
                                </button>
                                <button @click="mode = 'pro'"
                                    class="flex-1 py-2 px-4 rounded-xl text-sm font-medium transition-all" :class="mode === 'pro'
                                        ? 'bg-violet-500/20 text-violet-400 border border-violet-500/40 shadow-lg shadow-violet-500/10'
                                        : 'bg-slate-800 text-slate-400 border border-white/10 hover:bg-slate-700'">
                                    Pro
                                </button>
                            </div>
                        </div>
                        <!-- Model -->
                        <div class="flex flex-col gap-2">
                            <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Model</label>
                            <Dropdown v-model="modelName" :options="modelOptions" optionLabel="value" optionValue="key"
                                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>
                        <!-- CFG Scale -->
                        <div class="flex flex-col gap-2">
                            <div class="flex justify-between items-center">
                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">CFG
                                    Scale</label>
                                <span class="text-xs text-cyan-400 font-mono">{{ (cfgScale / 100).toFixed(2) }}</span>
                            </div>
                            <Slider v-model="cfgScale" :min="0" :max="100" :step="5" class="!w-full" :pt="{
                                root: { class: '!bg-slate-700' },
                                range: { class: '!bg-gradient-to-r !from-cyan-500 !to-violet-500' },
                                handle: { class: '!bg-white !border-2 !border-cyan-500' }
                            }" />
                        </div>
                        <!-- Telegram -->
                        <div class="flex flex-col gap-2 bg-slate-800/50 p-3 rounded-xl border border-white/5">
                            <div class="flex items-center gap-2">
                                <Checkbox v-model="sendToTelegram" :binary="true" inputId="tg-check-vid" />
                                <label for="tg-check-vid" 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>
                        <!-- Generate Button -->
                        <div class="mt-auto">
                            <Button :label="isSubmitting ? 'Starting...' : '🎬 Generate Video'"
                                :icon="isSubmitting ? 'pi pi-spin pi-spinner' : 'pi pi-play'" :loading="isSubmitting"
                                @click="handleGenerate" :disabled="!startImage"
                                class="w-full !py-3 !text-base !font-bold !bg-gradient-to-r from-cyan-600 to-violet-500 !border-none !rounded-xl !shadow-lg !shadow-cyan-500/20 hover:!scale-[1.02] transition-all disabled:opacity-50 disabled:hover:!scale-100" />
                        </div>
                    </div>
                </div>
            </div>
            <!-- Floating Open Controls Button -->
            <transition name="fade">
                <div v-if="!isSettingsVisible" class="absolute bottom-24 md:bottom-8 left-1/2 -translate-x-1/2 z-10">
                    <Button label="Open Controls" icon="pi pi-chevron-up" @click="isSettingsVisible = true" rounded
                        class="!bg-cyan-600 !border-none !shadow-xl !font-bold shadow-cyan-500/40 !px-6 !py-3" />
                </div>
            </transition>
        </main>
        <!-- Video Preview Dialog -->
        <Dialog v-model:visible="isVideoPreviewVisible" 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="isVideoPreviewVisible = false">
                <video v-if="previewVideo" :src="previewVideo.url" controls autoplay
                    class="max-w-full max-h-[85vh] rounded-xl shadow-2xl" @click.stop />
                <Button icon="pi pi-times" @click="isVideoPreviewVisible = false" rounded text
                    class="!absolute -top-4 -right-4 !text-white !bg-black/50 hover:!bg-black/70 !w-10 !h-10" />
            </div>
        </Dialog>
        <!-- Asset Picker Dialog -->
        <Dialog v-model:visible="isAssetPickerVisible" modal
            :header="assetPickerTarget === 'start' ? 'Select Start Image' : 'Select Tail Image'"
            :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-cyan-500 text-cyan-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-cyan-600/20 !text-cyan-300 hover:!bg-cyan-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="selectAssetFromPicker(asset)"
                            class="relative aspect-square rounded-xl overflow-hidden cursor-pointer border-2 transition-all group border-transparent hover:border-cyan-500/40">
                            <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>
                        </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>
        </Dialog>
        <!-- Album Picker Dialog -->
        <Dialog v-model:visible="isAlbumPickerVisible" modal header="Add to Album" :style="{ width: '400px' }"
            :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="flex flex-col gap-4">
                <div v-if="albumStore.loading" class="flex justify-center p-4">
                    <i class="pi pi-spin pi-spinner text-cyan-500 text-2xl"></i>
                </div>
                <div v-else-if="albumStore.albums.length === 0" class="text-center text-slate-400">
                    No albums found. Create one first!
                </div>
                <Dropdown v-else v-model="selectedAlbumForAdd" :options="albumStore.albums" optionLabel="name"
                    placeholder="Select an Album" class="w-full !bg-slate-800 !border-white/10 !text-white" :pt="{
                        root: { class: '!bg-slate-800' },
                        input: { class: '!text-white' },
                        trigger: { class: '!text-slate-400' },
                        panel: { class: '!bg-slate-900 !border-white/10' },
                        item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' }
                    }" />
            </div>
            <template #footer>
                <div class="flex justify-end gap-2">
                    <Button label="Cancel" @click="isAlbumPickerVisible = false"
                        class="!text-slate-300 hover:!bg-white/5" text />
                    <Button label="Add" @click="confirmAddToAlbum" :disabled="!selectedAlbumForAdd"
                        class="!bg-cyan-600 !border-none hover:!bg-cyan-500" />
                </div>
            </template>
        </Dialog>
    </div>
 </template>
 <style scoped>
 .glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
 }
 .slide-up-enter-active,
 .slide-up-leave-active {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 .slide-up-enter-from,
 .slide-up-leave-to {
    transform: translateY(100%);
    opacity: 0;
 }
 .fade-enter-active,
 .fade-leave-active {
    transition: opacity 0.3s ease;
 }
 .fade-enter-from,
 .fade-leave-to {
    opacity: 0;
 }
 /* Custom Scrollbar */
 .overflow-y-auto::-webkit-scrollbar {
    width: 6px;
 }
 .overflow-y-auto::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
 }
 .overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
 }
 .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
 }
 </style>
Author	SHA1	Message	Date
xds	aee0d596c2	video	2026-02-12 17:35:54 +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