Refactor: Extract sidebar navigation from individual views into a new AppSidebar component.

src/App.vue

@@ -1,13 +1,28 @@
 <script setup>
-import { RouterView } from 'vue-router'
+import { RouterView, useRoute } from 'vue-router'
+import AppSidebar from './components/AppSidebar.vue'
+
+const route = useRoute()
 </script>
 
 <template>
-  <RouterView v-slot="{ Component }">
+  <!-- Login Layout (Full Screen) -->
-    <transition name="fade" mode="out-in">
+  <div v-if="route.name === 'login'" class="h-screen w-full">
-      <component :is="Component" />
+    <RouterView />
-    </transition>
+  </div>
-  </RouterView>
+
+  <!-- Main Layout (Sidebar + Content) -->
+  <div v-else class="flex h-screen bg-slate-900 text-slate-100 font-sans overflow-hidden">
+    <AppSidebar />
+
+    <div class="flex-1 h-full overflow-hidden relative">
+      <RouterView v-slot="{ Component }">
+        <transition name="fade" mode="out-in">
+          <component :is="Component" />
+        </transition>
+      </RouterView>
+    </div>
+  </div>
 </template>
 
 <style>

src/components/AppSidebar.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import Button from 'primevue/button'
+
+const router = useRouter()
+const route = useRoute()
+
+const handleLogout = () => {
+    localStorage.removeItem('auth_code')
+    router.push('/login')
+}
+
+// Check active route for styling
+const isActive = (path) => {
+    // Exact match for home, startsWith for others
+    if (path === '/') return route.path === '/'
+    return route.path.startsWith(path)
+}
+
+const navItems = [
+    { path: '/', icon: '🏠', tooltip: 'Home' },
+    { path: '/assets', icon: '📂', tooltip: 'Assets' },
+    { path: '/generation', icon: '🎨', tooltip: 'Image Generation' },
+    { path: '/flexible-generation', icon: '🖌️', tooltip: 'Flexible Generation' },
+    { path: '/characters', icon: '👥', tooltip: 'Characters' },
+    { path: '/image-to-prompt', icon: '✨', tooltip: 'Image to Prompt' }
+]
+</script>
+
+<template>
+    <div class="contents">
+        <!-- Sidebar (Desktop) -->
+        <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)]">
+            <div class="mb-12">
+                <div
+                    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">
+                    AI
+                </div>
+            </div>
+
+            <div class="flex-1 flex flex-col gap-6 w-full items-center">
+                <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',
+                    isActive(item.path)
+                        ? 'bg-white/10 text-slate-50 shadow-inner'
+                        : 'text-slate-400 hover:bg-white/10 hover:text-slate-50'
+                ]" @click="router.push(item.path)" v-tooltip.right="item.tooltip">
+                    <span class="text-2xl">{{ item.icon }}</span>
+                </div>
+            </div>
+
+            <div class="mt-auto flex flex-col items-center gap-4">
+                <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'">
+                    <i class="pi pi-power-off"></i>
+                </div>
+                <!-- Profile Avatar Placeholder -->
+                <div class="w-10 h-10 rounded-full bg-slate-800 border-2 border-violet-600 flex items-center justify-center font-bold text-slate-50 cursor-pointer hover:scale-105 transition-all"
+                    title="Profile">
+                    U
+                </div>
+            </div>
+        </nav>
+
+        <!-- Mobile Bottom Nav -->
+        <nav
+            class="md:hidden fixed bottom-0 left-0 right-0 h-16 bg-slate-900/90 backdrop-blur-xl border-t border-white/10 z-50 flex justify-around items-center px-2">
+            <div v-for="item in navItems" :key="item.path" :class="[
+                'flex flex-col items-center gap-1 p-2 rounded-xl transition-all',
+                isActive(item.path)
+                    ? 'text-white bg-white/10 relative top-[-10px] shadow-lg shadow-violet-500/20 border border-violet-500/30'
+                    : 'text-slate-400 hover:text-slate-200'
+            ]" @click="router.push(item.path)">
+                <span class="text-xl">{{ item.icon }}</span>
+            </div>
+        </nav>
+    </div>
+</template>
+
+<style scoped>
+.glass-panel {
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+</style>

src/views/AssetsView.vue

@@ -18,6 +18,7 @@ const toast = useToast()
 const assets = ref<Asset[]>([])
 const loading = ref(true)
 const activeFilter = ref('all')
+// @ts-ignore
 const API_URL = import.meta.env.VITE_API_URL
 
 const selectedAsset = ref<Asset | null>(null)
@@ -107,81 +108,13 @@ const formatDate = (dateString: string) => {
     if (!dateString) return ''
     return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(new Date(dateString))
 }
-const handleLogout = () => {
+
-    localStorage.removeItem('auth_code')
-    router.push('/login')
-}
 </script>
 
 <template>
-    <div class="flex h-screen bg-slate-900 overflow-hidden">
+    <div class="flex flex-col h-full p-8 overflow-y-auto w-full text-slate-100">
-        <!-- Sidebar -->
+        <!-- Main Content (Sidebar removed) -->
-        <nav class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10">
+        <div class="flex-1 flex flex-col">
-            <div class="mb-12">
-                <div
-                    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">
-                    AI
-                </div>
-            </div>
-
-            <div class="flex-1 flex flex-col gap-6 w-full items-center">
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/')" v-tooltip.right="'Home'">
-                    <span class="text-2xl">🏠</span>
-                </div>
-                <div v-tooltip.right="'Assets'"
-                    class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50">
-                    <span class="text-2xl">📂</span>
-                </div>
-                <!-- Image Generation -->
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/generation')" v-tooltip.right="'Image Generation'">
-                    <span class="text-2xl">🎨</span>
-                </div>
-                <!-- Flexible Generation -->
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/flexible-generation')" v-tooltip.right="'Flexible Generation'">
-                    <span class="text-2xl">🖌️</span>
-                </div>
-                <!-- Flexible Generation -->
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/flexible-generation')" v-tooltip.right="'Flexible Generation'">
-                    <span class="text-2xl">🖌️</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/characters')" v-tooltip.right="'Characters'">
-                    <span class="text-2xl">👥</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/image-to-prompt')" v-tooltip.right="'Image to Prompt'">
-                    <span class="text-2xl">✨</span>
-                </div>
-
-                <!-- Pagination
-                <div v-if="totalRecords > rows" class="mt-auto py-6">
-                    <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: {
-                            root: ({ context }) => ({
-                                class: [
-                                    '!min-w-[40px] !h-10 !rounded-xl !border-none !transition-all !duration-300 !font-bold',
-                                    context.active ? '!bg-violet-600 !text-white !shadow-lg' : '!bg-white/5 !text-slate-400 hover:!bg-white/10 hover:!text-slate-50'
-                                ]
-                            })
-                        },
-                        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' } },
-                        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' } },
-                        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' } },
-                        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>
-        </nav>
-
-        <!-- Main Content -->
-        <main class="flex-1 p-8 overflow-y-auto flex flex-col">
             <!-- Top Bar -->
             <header class="flex justify-between items-end mb-8">
                 <div>
@@ -270,7 +203,7 @@ const handleLogout = () => {
                     }" />
                 </div>
             </div>
-        </main>
+        </div>
 
         <Dialog v-model:visible="isModalVisible" modal dismissableMask header="Asset View"
             :style="{ width: '90vw', maxWidth: '800px' }" class="glass-panel rounded-2xl">

src/views/CharactersView.vue

@@ -24,99 +24,47 @@ const goToDetail = (id) => {
     router.push({ name: 'character-detail', params: { id } })
 }
 
-const handleLogout = () => {
+
-    localStorage.removeItem('auth_code')
-    router.push('/login')
-}
 </script>
 
 <template>
-    <div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100">
+    <div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100">
-        <!-- Sidebar -->
+        <!-- Top Bar -->
-        <nav class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10 border border-white/5">
+        <header class="flex justify-between items-end mb-8">
-            <div class="mb-12">
+            <div>
-                <div
+                <h1 class="text-4xl font-bold m-0">Characters</h1>
-                    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">
+                <p class="mt-2 mb-0 text-slate-400">Manage your AI personas</p>
-                    AI
+            </div>
+        </header>
+
+        <!-- Loading State -->
+        <div v-if="loading" 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 items-center gap-6">
+                <Skeleton shape="circle" size="5rem" />
+                <div class="flex-1">
+                    <Skeleton class="mb-2" height="1.5rem" />
+                    <Skeleton height="1rem" />
                 </div>
             </div>
+        </div>
 
-            <div class="flex-1 flex flex-col gap-6 w-full items-center">
+        <!-- Characters Grid -->
-                <div v-tooltip.right="'Home'"
+        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                    class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50 shadow-inner">
+            <div v-for="char in characters" :key="char.id"
-                    <span class="text-2xl">🏠</span>
+                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"
+                @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"
+                        class="w-full h-full object-cover" />
                 </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
+                <div class="flex-1 overflow-hidden">
-                    @click="router.push('/assets')" v-tooltip.right="'Assets'">
+                    <h3 class="m-0 mb-2 text-xl font-semibold">{{ char.name }}</h3>
-                    <span class="text-2xl">📂</span>
+                    <p class="m-0 text-sm text-slate-400 line-clamp-2">
-                </div>
+                        {{ char.character_bio }}
-                <!-- Image Generation -->
+                    </p>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/generation')" v-tooltip.right="'Image Generation'">
-                    <span class="text-2xl">🎨</span>
-                </div>
-                <div v-tooltip.right="'Characters'"
-                    class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50">
-                    <span class="text-2xl">👥</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/image-to-prompt')" v-tooltip.right="'Image to Prompt'">
-                    <span class="text-2xl">✨</span>
                 </div>
             </div>
-
+        </div>
-            <div class="mt-auto flex flex-col items-center gap-4">
-                <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'">
-                    <i class="pi pi-power-off"></i>
-                </div>
-                <div class="w-10 h-10 rounded-full bg-slate-800 border-2 border-violet-600 flex items-center justify-center font-bold text-slate-50 cursor-pointer hover:scale-105 transition-all"
-                    title="Profile">
-                    U
-                </div>
-            </div>
-        </nav>
-
-        <!-- Main Content -->
-        <main class="flex-1 p-8 overflow-y-auto flex flex-col">
-            <!-- 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>
-            </header>
-
-            <!-- Loading State -->
-            <div v-if="loading" 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 items-center gap-6">
-                    <Skeleton shape="circle" size="5rem" />
-                    <div class="flex-1">
-                        <Skeleton class="mb-2" height="1.5rem" />
-                        <Skeleton height="1rem" />
-                    </div>
-                </div>
-            </div>
-
-            <!-- 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"
-                    @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"
-                            class="w-full h-full object-cover" />
-                    </div>
-                    <div class="flex-1 overflow-hidden">
-                        <h3 class="m-0 mb-2 text-xl font-semibold">{{ char.name }}</h3>
-                        <p class="m-0 text-sm text-slate-400 line-clamp-2">
-                            {{ char.character_bio }}
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </main>
     </div>
 </template>
 

src/views/FlexibleGenerationView.vue

@@ -249,10 +249,7 @@ onMounted(() => {
 })
 
 // --- Sidebar Logic (Duplicated for now) ---
-const handleLogout = () => {
+// handleLogout removed - handled in AppSidebar
-    localStorage.removeItem('auth_code')
-    router.push('/login')
-}
 
 // Image Preview
 const isImagePreviewVisible = ref(false)
@@ -330,56 +327,32 @@ const clearPrompt = () => {
     previousPrompt.value = ''
 }
 
+const deleteGeneration = async (gen) => {
+    if (!gen) return
+    try {
+        // Optimistic update
+        historyGenerations.value = historyGenerations.value.filter(g => g.id !== gen.id)
+        historyTotal.value--
+
+        // Use deleteAsset since generations are essentially assets in this view's context, 
+        // or we need a way to delete the generation record. 
+        // The user said "delete asset", and these are likely linked.
+        // If gen has a result list, we delete the first asset.
+        if (gen.result_list && gen.result_list.length > 0) {
+            await dataService.deleteAsset(gen.result_list[0])
+        }
+    } catch (e) {
+        console.error('Failed to delete generation', e)
+        // Reload to restore state if failed
+        loadData()
+    }
+}
+
 </script>
 
 <template>
-    <div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100 font-sans">
+    <div class="flex flex-col h-full font-sans">
-        <!-- Sidebar -->
+        <!-- Sidebar and Mobile Nav removed (handled by App.vue) -->
-        <nav
-            class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10 border border-white/5 bg-slate-900/50 backdrop-blur-md">
-            <div class="mb-12">
-                <div
-                    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">
-                    AI
-                </div>
-            </div>
-
-            <div class="flex-1 flex flex-col gap-6 w-full items-center">
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/')" v-tooltip.right="'Home'">
-                    <span class="text-2xl">🏠</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/assets')" v-tooltip.right="'Assets'">
-                    <span class="text-2xl">📂</span>
-                </div>
-                <!-- Image Generation -->
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/generation')" v-tooltip.right="'Image Generation'">
-                    <span class="text-2xl">🎨</span>
-                </div>
-                <!-- Active State for Flexible Generation -->
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50 shadow-inner"
-                    v-tooltip.right="'Flexible Generation'">
-                    <span class="text-2xl">🖌️</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/characters')" v-tooltip.right="'Characters'">
-                    <span class="text-2xl">👥</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/image-to-prompt')" v-tooltip.right="'Image to Prompt'">
-                    <span class="text-2xl">✨</span>
-                </div>
-            </div>
-
-            <div class="mt-auto">
-                <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">
-                    <i class="pi pi-power-off"></i>
-                </div>
-            </div>
-        </nav>
 
         <!-- Main Content -->
         <main class="flex-1 relative flex flex-col h-full overflow-hidden">
@@ -397,10 +370,10 @@ const clearPrompt = () => {
             </header>
 
             <!-- Gallery Grid -->
-            <div class="flex-1 overflow-y-auto p-4 pb-32"> <!-- pb-32 to allow space for bottom panel -->
+            <div class="flex-1 overflow-y-auto p-4 pb-32 md:pb-32"> <!-- pb-32 to allow space for bottom panel -->
 
                 <div v-if="historyGenerations.length > 0"
-                    class="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8 gap-1">
+                    class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-2 md:gap-1">
                     <div v-for="gen in historyGenerations" :key="gen.id"
                         class="aspect-[9/16] relative group overflow-hidden bg-slate-800 transition-all duration-300">
 
@@ -419,7 +392,11 @@ const clearPrompt = () => {
 
                             <!-- Top Actions -->
                             <div
-                                class="flex justify-end gap-1 translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200">
+                                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-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)" />
+
                                 <Button 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)" />
@@ -451,7 +428,7 @@ const clearPrompt = () => {
             <!-- Bottom Settings Panel -->
             <transition name="slide-up">
                 <div v-if="isSettingsVisible"
-                    class="absolute bottom-0 left-0 right-0 glass-panel border-t border-white/10 bg-slate-900/95 backdrop-blur-xl p-6 z-20 rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.5)] flex flex-col gap-4 max-h-[85vh] overflow-y-auto">
+                    class="absolute bottom-0 left-0 right-0 glass-panel border-t border-white/10 bg-slate-900/95 backdrop-blur-xl p-6 z-[60] rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.5)] flex flex-col gap-4 max-h-[85vh] overflow-y-auto">
 
                     <!-- Handle / Close Button -->
                     <div class="w-full flex justify-center -mt-2 mb-2 cursor-pointer"
@@ -483,10 +460,11 @@ const clearPrompt = () => {
                                 <Textarea v-model="prompt" rows="3" autoResize
                                     placeholder="Describe what you want to create..."
                                     class="w-full bg-slate-800 border-white/10 text-white rounded-xl p-3 focus:border-violet-500 focus:ring-1 focus:ring-violet-500/50 transition-all resize-none shadow-inner" />
+
                             </div>
 
                             <!-- Assets & Character Row -->
-                            <div class="flex gap-4">
+                            <div class="flex flex-col md:flex-row gap-4">
                                 <div class="flex-1 flex flex-col gap-2">
                                     <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Character
                                         (Optional)</label>
@@ -544,7 +522,8 @@ const clearPrompt = () => {
                                             <div class="flex items-center gap-2">
                                                 <img :src="API_URL + slotProps.option.url + '?thumbnail=true'"
                                                     class="w-8 h-8 rounded object-cover border border-white/10" />
-                                                <span class="text-xs truncate max-w-[150px]">{{ slotProps.option.name ||
+                                                <span class="text-xs truncate max-w-[150px]">{{
+                                                    slotProps.option.name ||
                                                     'Asset ' + slotProps.option.id.substring(0, 4) }}</span>
                                             </div>
                                         </template>
@@ -611,7 +590,7 @@ const clearPrompt = () => {
 
             <!-- Toggle Button (when hidden) -->
             <transition name="fade">
-                <div v-if="!isSettingsVisible" class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10">
+                <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-violet-600 !border-none !shadow-xl !font-bold shadow-violet-500/40 !px-6 !py-3" />
                 </div>
@@ -619,6 +598,8 @@ const clearPrompt = () => {
 
         </main>
 
+
+
         <!-- Image Preview Modal -->
         <Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
             :style="{ width: '90vw', maxWidth: '1000px', background: 'transparent', boxShadow: 'none' }"

src/views/ImageGenerationView.vue

@@ -409,10 +409,7 @@ const copyToClipboard = () => {
     // Implement if needed for prompt copying
 }
 
-const handleLogout = () => {
+
-    localStorage.removeItem('auth_code')
-    router.push('/login')
-}
 
 // --- Lifecycle ---
 onMounted(() => {
@@ -421,50 +418,9 @@ onMounted(() => {
 </script>
 
 <template>
-    <div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100">
+    <div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100">
-        <!-- Sidebar -->
+        <!-- Main Content (Sidebar removed) -->
-        <nav class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10 border border-white/5">
+        <div class="flex-1 flex flex-col">
-            <div class="mb-12">
-                <div
-                    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">
-                    AI
-                </div>
-            </div>
-
-            <div class="flex-1 flex flex-col gap-6 w-full items-center">
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/')" v-tooltip.right="'Home'">
-                    <span class="text-2xl">🏠</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/assets')" v-tooltip.right="'Assets'">
-                    <span class="text-2xl">📂</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/flexible-generation')" v-tooltip.right="'Flexible Generation'">
-                    <span class="text-2xl">🎨</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/characters')" v-tooltip.right="'Characters'">
-                    <span class="text-2xl">👥</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/image-to-prompt')" v-tooltip.right="'Image to Prompt'">
-                    <span class="text-2xl">✨</span>
-                </div>
-            </div>
-
-            <div class="mt-auto flex flex-col items-center gap-4">
-                <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'">
-                    <i class="pi pi-power-off"></i>
-                </div>
-            </div>
-        </nav>
-
-        <!-- Main Content -->
-        <main class="flex-1 p-8 overflow-y-auto flex flex-col">
             <header class="mb-8">
                 <h1 class="text-4xl font-bold m-0">Image Generation</h1>
                 <p class="mt-2 mb-0 text-slate-400">Create stunning visuals using your assets</p>
@@ -747,56 +703,56 @@ onMounted(() => {
                     </div>
                 </div>
             </div>
-        </main>
+        </div>
-
+    </div>
-        <!-- Asset Selection Modal -->
+    <!-- Asset Selection Modal -->
-        <Dialog v-model:visible="isAssetModalVisible" modal header="Select Reference Assets"
+    <Dialog v-model:visible="isAssetModalVisible" modal header="Select Reference Assets"
-            :style="{ width: '80vw', maxWidth: '1000px' }" class="glass-panel rounded-2xl">
+        :style="{ width: '80vw', maxWidth: '1000px' }" class="glass-panel rounded-2xl">
-            <div class="flex flex-col h-[70vh]">
+        <div class="flex flex-col h-[70vh]">
-                <div v-if="allAssets.length > 0" class="flex-1 overflow-y-auto p-1 text-slate-100">
+            <div v-if="allAssets.length > 0" class="flex-1 overflow-y-auto p-1 text-slate-100">
-                    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
-                        <div v-for="asset in allAssets" :key="asset.id" @click="toggleAssetSelection(asset)"
+                    <div v-for="asset in allAssets" :key="asset.id" @click="toggleAssetSelection(asset)"
-                            class="aspect-square rounded-xl overflow-hidden cursor-pointer relative border transition-all"
+                        class="aspect-square rounded-xl overflow-hidden cursor-pointer relative border transition-all"
-                            :class="isAssetSelected(asset.id) ? 'border-violet-500 ring-2 ring-violet-500/20' : 'border-white/10 hover:border-white/30'">
+                        :class="isAssetSelected(asset.id) ? 'border-violet-500 ring-2 ring-violet-500/20' : 'border-white/10 hover:border-white/30'">
-                            <img :src="API_URL + asset.url + '?thumbnail=true'" class="w-full h-full object-cover" />
+                        <img :src="API_URL + asset.url + '?thumbnail=true'" class="w-full h-full object-cover" />
-                            <div v-if="isAssetSelected(asset.id)"
+                        <div v-if="isAssetSelected(asset.id)"
-                                class="absolute inset-0 bg-violet-600/30 flex items-center justify-center">
+                            class="absolute inset-0 bg-violet-600/30 flex items-center justify-center">
-                                <div class="bg-violet-600 rounded-full p-1 shadow-lg">
+                            <div class="bg-violet-600 rounded-full p-1 shadow-lg">
-                                    <i class="pi pi-check text-white text-xs font-bold"></i>
+                                <i class="pi pi-check text-white text-xs font-bold"></i>
-                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div v-else class="flex-1 flex items-center justify-center text-slate-500">
+            </div>
-                    No assets found
+            <div v-else class="flex-1 flex items-center justify-center text-slate-500">
-                </div>
+                No assets found
+            </div>
 
-                <div class="mt-4 pt-4 border-t border-white/10 flex justify-between items-center text-slate-100">
+            <div class="mt-4 pt-4 border-t border-white/10 flex justify-between items-center text-slate-100">
-                    <span class="text-sm text-slate-400">{{ selectedAssets.length }} selected</span>
+                <span class="text-sm text-slate-400">{{ selectedAssets.length }} selected</span>
-                    <div class="flex gap-4 items-center">
+                <div class="flex gap-4 items-center">
-                        <Paginator :first="assetsFirst" :rows="assetsRows" :totalRecords="assetsTotalRecords"
+                    <Paginator :first="assetsFirst" :rows="assetsRows" :totalRecords="assetsTotalRecords"
-                            @page="onAssetsPage" class="!bg-transparent !border-none !p-0" />
+                        @page="onAssetsPage" class="!bg-transparent !border-none !p-0" />
-                        <Button label="Done" @click="isAssetModalVisible = false" class="!px-6" />
+                    <Button label="Done" @click="isAssetModalVisible = false" class="!px-6" />
-                    </div>
                 </div>
             </div>
-        </Dialog>
+        </div>
+    </Dialog>
 
-        <!-- Image Preview Modal -->
+    <!-- Image Preview Modal -->
-        <Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
+    <Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
-            :header="previewImage?.name || 'Image Preview'" :style="{ width: '90vw', maxWidth: '800px' }"
+        :header="previewImage?.name || 'Image Preview'" :style="{ width: '90vw', maxWidth: '800px' }"
-            class="glass-panel rounded-2xl">
+        class="glass-panel rounded-2xl">
-            <div v-if="previewImage" class="flex flex-col items-center">
+        <div v-if="previewImage" class="flex flex-col items-center">
-                <img :src="previewImage.url" :alt="previewImage.name"
+            <img :src="previewImage.url" :alt="previewImage.name"
-                    class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
+                class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
-                <div class="mt-6 text-center">
+            <div class="mt-6 text-center">
-                    <h2 class="text-2xl font-bold mb-2">{{ previewImage.name }}</h2>
+                <h2 class="text-2xl font-bold mb-2">{{ previewImage.name }}</h2>
-                    <p v-if="previewImage.createdAt" class="text-slate-400">{{ formatDate(previewImage.createdAt) }}</p>
+                <p v-if="previewImage.createdAt" class="text-slate-400">{{ formatDate(previewImage.createdAt) }}</p>
-                </div>
             </div>
-        </Dialog>
+        </div>
-    </div>
+    </Dialog>
+
 </template>
 
 <style scoped>

src/views/ImageToPromptView.vue

@@ -55,68 +55,13 @@ const copyToClipboard = () => {
     navigator.clipboard.writeText(generatedPrompt.value)
 }
 
-const handleLogout = () => {
+
-    localStorage.removeItem('auth_code')
-    router.push('/login')
-}
 </script>
 
 <template>
-    <div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100">
+    <div class="flex flex-col h-full p-8 overflow-y-auto w-full text-slate-100">
-        <!-- Sidebar -->
+        <!-- Main Content (Sidebar removed) -->
-        <nav class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10 border border-white/5">
+        <div class="flex-1 flex flex-col">
-            <div class="mb-12">
-                <div
-                    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">
-                    AI
-                </div>
-            </div>
-
-            <div class="flex-1 flex flex-col gap-6 w-full items-center">
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/')" v-tooltip.right="'Home'">
-                    <span class="text-2xl">🏠</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/assets')" v-tooltip.right="'Assets'">
-                    <span class="text-2xl">📂</span>
-                </div>
-                <!-- Image Generation -->
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/generation')" v-tooltip.right="'Image Generation'">
-                    <span class="text-2xl">🎨</span>
-                </div>
-                <!-- Flexible Generation -->
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/flexible-generation')" v-tooltip.right="'Flexible Generation'">
-                    <span class="text-2xl">🖌️</span>
-                </div>
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
-                    @click="router.push('/characters')" v-tooltip.right="'Characters'">
-                    <span class="text-2xl">👥</span>
-                </div>
-                <!-- New Image to Prompt Item (Active) -->
-                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50 shadow-inner"
-                    v-tooltip.right="'Image to Prompt'">
-                    <span class="text-2xl">✨</span>
-                </div>
-            </div>
-
-            <div class="mt-auto flex flex-col items-center gap-4">
-                <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'">
-                    <i class="pi pi-power-off"></i>
-                </div>
-                <div class="w-10 h-10 rounded-full bg-slate-800 border-2 border-violet-600 flex items-center justify-center font-bold text-slate-50 cursor-pointer hover:scale-105 transition-all"
-                    title="Profile">
-                    U
-                </div>
-            </div>
-        </nav>
-
-        <!-- Main Content -->
-        <main class="flex-1 p-8 overflow-y-auto flex flex-col">
             <header class="mb-8">
                 <h1 class="text-4xl font-bold m-0">Image to Prompt</h1>
                 <p class="mt-2 mb-0 text-slate-400">Transform your images into descriptive prompts</p>
@@ -160,11 +105,6 @@ const handleLogout = () => {
                                     class="relative rounded-xl border-2 border-dashed border-white/20 flex flex-col items-center justify-center bg-white/5 hover:bg-white/10 transition-colors aspect-square text-slate-400 hover:text-white">
                                     <span class="text-3xl mb-2">+</span>
                                     <span class="text-xs font-bold text-center">Add<br>Image</span>
-                                    <!-- Input for just this square is handled by the main absolute input covering container, 
-                                         but to make it intuitive when grid exists, we might need z-index adjustments or a specific label.
-                                         Actually, the big input covers everything. Let's make sure it doesn't block delete buttons.
-                                         Better approach: Input covers everything ONLY when empty. When not empty, input should specific 'Add' button or similar/
-                                    -->
                                 </div>
                             </div>
 
@@ -238,6 +178,6 @@ const handleLogout = () => {
                     </div>
                 </div>
             </div>
-        </main>
+        </div>
     </div>
 </template>