From 489fd14903d750847b8d8802a9e7fb646f684685 Mon Sep 17 00:00:00 2001
From: xds <iam@voroninv.ru>
Date: Fri, 20 Feb 2026 02:02:40 +0300
Subject: [PATCH] + env

---
 src/components/AppSidebar.vue        | 66 +++++++++++++--------------
 src/views/FlexibleGenerationView.vue | 44 +++++++++---------
 src/views/IdeaDetailView.vue         | 67 +++++++++++++++++-----------
 src/views/IdeasView.vue              |  6 +--
 4 files changed, 97 insertions(+), 86 deletions(-)

diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index 7c7c45f..b9e0bac 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -104,52 +104,48 @@ const navItems = computed(() => {
     <div class="contents">
         <!-- Sidebar (Desktop -> Top Bar) -->
         <nav
-            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">
+            class="hidden md:flex glass-panel w-[calc(100%-2rem)] mx-4 mt-2 mb-1 flex-row items-center px-4 py-1.5 rounded-xl z-40 border border-white/5 bg-slate-900/50 backdrop-blur-md shrink-0 justify-between">
 
             <!-- Logo -->
             <img src="/web-app-manifest-512x512.png" alt="Logo"
-                class="w-10 h-10 rounded-xl shadow-lg shadow-violet-500/20 shrink-0" />
+                class="w-7 h-7 rounded-lg shadow-lg shadow-violet-500/20 shrink-0" />
 
             <!-- Project Switcher -->
-            <div class="hidden lg:block ml-4 relative">
+            <div class="hidden lg:block ml-2 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>
+                    class="flex items-center gap-1.5 px-2 py-1 rounded-lg hover:bg-white/5 transition-colors text-slate-400 hover:text-slate-200 text-xs">
+                    <i v-if="selectedProject" class="pi pi-folder text-violet-400 text-[10px]"></i>
+                    <i v-else class="pi pi-user text-[10px]"></i>
 
-                    <span class="max-w-[150px] truncate font-medium">
-                        {{ selectedProject ? getProjectName(selectedProject) : 'Personal Workspace' }}
+                    <span class="max-w-[120px] truncate font-medium">
+                        {{ selectedProject ? getProjectName(selectedProject) : 'Personal' }}
                     </span>
 
-                    <i class="pi pi-chevron-down text-xs ml-1 opacity-50"></i>
+                    <i class="pi pi-chevron-down text-[8px] 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">
+                    class="absolute top-full left-0 mt-1 w-48 bg-slate-900 border border-white/10 shadow-xl rounded-lg 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="flex items-center gap-2 px-3 py-2 hover:bg-white/5 cursor-pointer transition-colors text-xs"
                         :class="{ 'text-violet-400 bg-white/5': !selectedProject, 'text-slate-300': selectedProject }">
-                        <i class="pi pi-user"></i>
+                        <i class="pi pi-user text-[10px]"></i>
                         <span class="font-medium">Personal Workspace</span>
-                        <i v-if="!selectedProject" class="pi pi-check ml-auto text-sm"></i>
+                        <i v-if="!selectedProject" class="pi pi-check ml-auto text-[10px]"></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="flex items-center gap-2 px-3 py-2 hover:bg-white/5 cursor-pointer transition-colors text-xs"
                         :class="{ 'text-violet-400 bg-white/5': selectedProject === project.id, 'text-slate-300': selectedProject !== project.id }">
-                        <i class="pi pi-folder"></i>
+                        <i class="pi pi-folder text-[10px]"></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
+                        <i v-if="selectedProject === project.id" class="pi pi-check ml-auto text-[10px]"></i>
                     </div>
                 </div>
 
@@ -159,33 +155,33 @@ const navItems = computed(() => {
             </div>
 
             <!-- Nav Items -->
-            <div class="flex flex-row gap-2 items-center justify-center flex-1 mx-8">
+            <div class="flex flex-row gap-1 items-center justify-center flex-1 mx-4">
                 <div v-for="item in navItems" :key="item.path" :class="[
-                    'px-4 py-2 flex items-center gap-2 rounded-xl cursor-pointer transition-all duration-300',
+                    'px-3 py-1 flex items-center gap-1.5 rounded-lg cursor-pointer transition-all duration-300',
                     isActive(item.path)
                         ? 'bg-white/10 text-slate-50 shadow-inner'
                         : 'text-slate-400 hover:bg-white/5 hover:text-slate-50'
                 ]" @click="router.push(item.path)" v-tooltip.bottom="item.tooltip">
-                    <span class="text-xl">{{ item.icon }}</span>
-                    <span class="text-sm font-medium hidden lg:block">{{ item.tooltip }}</span>
+                    <span class="text-base">{{ item.icon }}</span>
+                    <span class="text-[11px] font-medium hidden lg:block">{{ item.tooltip }}</span>
                 </div>
             </div>
 
             <!-- Right Actions -->
-            <div class="flex items-center gap-4 shrink-0">
+            <div class="flex items-center gap-3 shrink-0">
                 <!-- Usage Stat -->
-                <div v-if="usageCost > 0" class="hidden xl:flex flex-col items-end mr-2">
-                    <span class="text-[10px] font-bold text-slate-500 uppercase tracking-tighter">Usage</span>
-                    <span class="text-sm font-bold text-violet-400">${{ usageCost.toFixed(2) }}</span>
+                <div v-if="usageCost > 0" class="hidden xl:flex flex-col items-end mr-1">
+                    <span class="text-[8px] font-bold text-slate-500 uppercase tracking-tighter">Usage</span>
+                    <span class="text-xs font-bold text-violet-400">${{ usageCost.toFixed(2) }}</span>
                 </div>
 
                 <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"
+                    class="w-7 h-7 rounded-lg 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.bottom="'Logout'">
-                    <i class="pi pi-power-off"></i>
+                    <i class="pi pi-power-off text-xs"></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"
+                <div class="w-7 h-7 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 text-xs"
                     title="Profile">
                     U
                 </div>
@@ -194,14 +190,14 @@ const navItems = computed(() => {
 
         <!-- 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">
+            class="md:hidden fixed bottom-0 left-0 right-0 h-12 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',
+                'flex flex-col items-center p-1.5 rounded-lg 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-white bg-white/10 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>
+                <span class="text-lg">{{ item.icon }}</span>
             </div>
         </nav>
     </div>
diff --git a/src/views/FlexibleGenerationView.vue b/src/views/FlexibleGenerationView.vue
index b2ab311..5bb8577 100644
--- a/src/views/FlexibleGenerationView.vue
+++ b/src/views/FlexibleGenerationView.vue
@@ -413,7 +413,7 @@ const handleGenerate = async () => {
             prompt: prompt.value,
             assets_list: selectedAssets.value.map(a => a.id),
             linked_character_id: selectedCharacter.value?.id || selectedCharacter.value?._id || null,
-            environment_id: selectedEnvironment.value?.id || selectedEnvironment.value?._id || null,
+            environment_id: (selectedCharacter.value && useEnvironment.value) ? (selectedEnvironment.value?.id || selectedEnvironment.value?._id || null) : null,
             telegram_id: sendToTelegram.value ? telegramId.value : null,
             use_profile_image: selectedCharacter.value ? useProfileImage.value : false,
             count: generationCount.value
@@ -854,48 +854,48 @@ const confirmAddToAlbum = async () => {
     <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">
+                class="p-2 px-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-2">
                     <h1
-                        class="text-xl font-bold bg-gradient-to-r from-white to-slate-400 bg-clip-text text-transparent m-0">
+                        class="text-base 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>
+                    <span class="text-[10px] text-slate-500 border-l border-white/10 pl-2">History</span>
                 </div>
-                <div class="flex items-center gap-2">
+                <div class="flex items-center gap-1.5">
                     <Dropdown v-model="filterCharacter" :options="characters" optionLabel="name"
                         placeholder="All Characters" showClear
-                        class="!w-48 !bg-slate-800/60 !border-white/10 !text-white !rounded-xl !text-sm" :pt="{
-                            root: { class: '!bg-slate-800/60 !h-8' },
-                            input: { class: '!text-white !text-xs !py-1 !px-2' },
-                            trigger: { class: '!text-slate-400 !w-6' },
+                        class="!w-40 !bg-slate-800/60 !border-white/10 !text-white !rounded-lg !text-[10px]" :pt="{
+                            root: { class: '!bg-slate-800/60 !h-7' },
+                            input: { class: '!text-white !text-[10px] !py-0.5 !px-2' },
+                            trigger: { class: '!text-slate-400 !w-5' },
                             panel: { class: '!bg-slate-800 !border-white/10' },
-                            item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white !text-xs !py-1.5' },
-                            clearIcon: { class: '!text-slate-400 hover:!text-white' }
+                            item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white !text-[10px] !py-1' },
+                            clearIcon: { class: '!text-slate-400 hover:!text-white !text-[8px]' }
                         }">
                         <template #value="slotProps">
-                            <div v-if="slotProps.value" class="flex items-center gap-1.5">
+                            <div v-if="slotProps.value" class="flex items-center gap-1">
                                 <img v-if="slotProps.value.avatar_image" :src="API_URL + slotProps.value.avatar_image"
-                                    class="w-5 h-5 rounded-full object-cover" />
-                                <span class="text-xs">{{ slotProps.value.name }}</span>
+                                    class="w-4 h-4 rounded-full object-cover" />
+                                <span class="text-[10px]">{{ slotProps.value.name }}</span>
                             </div>
-                            <span v-else class="text-xs text-slate-400">{{ slotProps.placeholder }}</span>
+                            <span v-else class="text-[10px] text-slate-400">{{ slotProps.placeholder }}</span>
                         </template>
                         <template #option="slotProps">
-                            <div class="flex items-center gap-2">
+                            <div class="flex items-center gap-1.5">
                                 <img v-if="slotProps.option.avatar_image" :src="API_URL + slotProps.option.avatar_image"
-                                    class="w-6 h-6 rounded-full object-cover" />
-                                <span>{{ slotProps.option.name }}</span>
+                                    class="w-5 h-5 rounded-full object-cover" />
+                                <span class="text-[10px]">{{ slotProps.option.name }}</span>
                             </div>
                         </template>
                     </Dropdown>
                     <Button icon="pi pi-refresh" @click="refreshHistory" rounded text
-                        class="!text-slate-400 hover:!bg-white/10 !w-8 !h-8 md:hidden" />
+                        class="!text-slate-400 hover:!bg-white/10 !w-7 !h-7 !p-0 md:hidden" />
                     <Button :icon="isSelectMode ? 'pi pi-times' : 'pi pi-check-square'" @click="toggleSelectMode"
-                        rounded text class="!w-8 !h-8"
+                        rounded text class="!w-7 !h-7 !p-0"
                         :class="isSelectMode ? '!text-violet-400 !bg-violet-500/20' : '!text-slate-400 hover:!bg-white/10'" />
                     <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" />
+                        class="!text-slate-400 hover:!bg-white/10 !w-7 !h-7 !p-0" v-if="!isSettingsVisible" />
                 </div>
             </header>
 
diff --git a/src/views/IdeaDetailView.vue b/src/views/IdeaDetailView.vue
index 96912ec..c6f1864 100644
--- a/src/views/IdeaDetailView.vue
+++ b/src/views/IdeaDetailView.vue
@@ -89,6 +89,7 @@ const imageCount = ref(1)
 const sendToTelegram = ref(false)
 const telegramId = ref('')
 const useProfileImage = ref(true)
+const useEnvironment = ref(false)
 const isImprovingPrompt = ref(false)
 const previousPrompt = ref('')
 let _savedCharacterId = null
@@ -129,6 +130,7 @@ const saveSettings = () => {
         sendToTelegram: sendToTelegram.value,
         telegramId: telegramId.value,
         useProfileImage: useProfileImage.value,
+        useEnvironment: useEnvironment.value,
         selectedCharacterId: selectedCharacter.value?.id || selectedCharacter.value?._id || null,
         selectedEnvironmentId: selectedEnvironment.value?.id || selectedEnvironment.value?._id || null,
         selectedAssetIds: selectedAssets.value.map(a => a.id),
@@ -152,6 +154,7 @@ const restoreSettings = () => {
         sendToTelegram.value = s.sendToTelegram || false
         telegramId.value = s.telegramId || localStorage.getItem('telegram_id') || ''
         if (s.useProfileImage !== undefined) useProfileImage.value = s.useProfileImage
+        if (s.useEnvironment !== undefined) useEnvironment.value = s.useEnvironment
         _savedCharacterId = s.selectedCharacterId || null
         _savedEnvironmentId = s.selectedEnvironmentId || null
         if (s.selectedAssetIds && s.selectedAssetIds.length > 0) {
@@ -167,7 +170,7 @@ const restoreSettings = () => {
 }
 restoreSettings()
 
-watch([prompt, quality, aspectRatio, imageCount, selectedModel, sendToTelegram, telegramId, useProfileImage, selectedCharacter, selectedEnvironment, selectedAssets], saveSettings, { deep: true })
+watch([prompt, quality, aspectRatio, imageCount, selectedModel, sendToTelegram, telegramId, useProfileImage, useEnvironment, selectedCharacter, selectedEnvironment, selectedAssets], saveSettings, { deep: true })
 
 const viewMode = ref('feed') // 'feed' or 'gallery'
 const isSubmitting = ref(false)
@@ -289,7 +292,7 @@ const handleGenerate = async () => {
             quality: quality.value.key,
             assets_list: selectedAssets.value.map(a => a.id),
             linked_character_id: selectedCharacter.value?.id || selectedCharacter.value?._id || null,
-            environment_id: selectedEnvironment.value?.id || selectedEnvironment.value?._id || null,
+            environment_id: (selectedCharacter.value && useEnvironment.value) ? (selectedEnvironment.value?.id || selectedEnvironment.value?._id || null) : null,
             telegram_id: sendToTelegram.value ? telegramId.value : null,
             use_profile_image: selectedCharacter.value ? useProfileImage.value : false,
             count: imageCount.value,
@@ -909,45 +912,46 @@ watch(viewMode, (v) => {
         <main class="flex-1 flex flex-col min-w-0 bg-slate-950/50 relative">
             <!-- Header -->
             <header
-                class="h-12 border-b border-white/5 flex items-center justify-between px-6 bg-slate-900/80 backdrop-blur z-20">
-                <div class="flex items-center gap-4">
+                class="h-10 border-b border-white/5 flex items-center justify-between px-4 bg-slate-900/80 backdrop-blur z-20">
+                <div class="flex items-center gap-3">
                     <div class="flex flex-col">
                         <div class="flex items-center gap-2">
                             <div v-if="isEditingName" class="flex items-center gap-2">
                                 <InputText v-model="editableName" 
-                                    class="idea-name-input !bg-slate-800 !border-violet-500/50 !text-white !py-0.5 !h-8 !text-base !font-bold"
+                                    class="idea-name-input !bg-slate-800 !border-violet-500/50 !text-white !py-0.5 !h-7 !text-sm !font-bold"
                                     @keyup.enter="saveName"
                                     @blur="saveName"
                                 />
                             </div>
-                            <h1 v-else class="text-base font-bold text-slate-200 truncate max-w-[200px] md:max-w-md cursor-pointer hover:text-violet-400 transition-colors"
+                            <h1 v-else class="text-sm font-bold text-slate-200 truncate max-w-[150px] md:max-w-md cursor-pointer hover:text-violet-400 transition-colors"
                                 @click="toggleEditName">
                                 {{ currentIdea?.name || 'Loading...' }}
-                                <i class="pi pi-pencil text-[9px] ml-1 opacity-50"></i>
+                                <i class="pi pi-pencil text-[8px] ml-1 opacity-50"></i>
                             </h1>
                             <span
-                                class="px-2 py-0.5 rounded-full bg-slate-800 text-[9px] text-slate-400 border border-white/5">Idea
-                                Session</span>
+                                class="px-1.5 py-0.5 rounded-full bg-slate-800 text-[8px] text-slate-500 border border-white/5">Idea</span>
                         </div>
                     </div>
                 </div>
 
-                <div class="flex items-center gap-3">
+                <div class="flex items-center gap-2">
                     <!-- View Toggle -->
-                    <div class="flex bg-slate-800 rounded-lg p-1 border border-white/5">
+                    <div class="flex bg-slate-800 rounded-lg p-0.5 border border-white/5">
                         <button @click="viewMode = 'feed'"
-                            class="px-3 py-1.5 rounded-md text-xs font-medium transition-all"
+                            class="px-2 py-1 rounded-md text-[10px] font-medium transition-all"
                             :class="viewMode === 'feed' ? 'bg-violet-600 text-white shadow-lg' : 'text-slate-400 hover:text-slate-200'">
                             <i class="pi pi-list mr-1"></i> Feed
                         </button>
                         <button @click="viewMode = 'gallery'"
-                            class="px-3 py-1.5 rounded-md text-xs font-medium transition-all"
+                            class="px-2 py-1 rounded-md text-[10px] font-medium transition-all"
                             :class="viewMode === 'gallery' ? 'bg-violet-600 text-white shadow-lg' : 'text-slate-400 hover:text-slate-200'">
                             <i class="pi pi-th-large mr-1"></i> Gallery
                         </button>
                     </div>
 
-                    <Button icon="pi pi-trash" text rounded severity="danger" v-tooltip.bottom="'Delete Idea'"
+                    <Button icon="pi pi-trash" text rounded severity="danger" size="small"
+                        class="!w-7 !h-7"
+                        v-tooltip.bottom="'Delete Idea'"
                         @click="deleteIdea" />
                 </div>
             </header>
@@ -1208,17 +1212,28 @@ watch(viewMode, (v) => {
                                                         </Dropdown>
                         
                                                         <div v-if="selectedCharacter"
-                                                            class="flex items-center gap-2 mt-2 px-1 animate-in fade-in slide-in-from-top-1">
-                                                            <Checkbox v-model="useProfileImage" :binary="true" inputId="idea-use-profile-img"
-                                                                class="!border-white/20" :pt="{
-                                                                    box: ({ props, state }) => ({
-                                                                        class: ['!bg-slate-800 !border-white/20', { '!bg-violet-600 !border-violet-600': props.modelValue }]
-                                                                    })
-                                                                }" />
-                                                            <label for="idea-use-profile-img"
-                                                                class="text-xs text-slate-300 cursor-pointer select-none">Use
-                                                                Character
-                                                                Photo</label>
+                                                            class="flex flex-wrap items-center gap-x-4 gap-y-2 mt-2 px-1 animate-in fade-in slide-in-from-top-1">
+                                                            <div class="flex items-center gap-2">
+                                                                <Checkbox v-model="useProfileImage" :binary="true" inputId="idea-use-profile-img"
+                                                                    class="!border-white/20" :pt="{
+                                                                        box: ({ props, state }) => ({
+                                                                            class: ['!bg-slate-800 !border-white/20', { '!bg-violet-600 !border-violet-600': props.modelValue }]
+                                                                        })
+                                                                    }" />
+                                                                <label for="idea-use-profile-img"
+                                                                    class="text-xs text-slate-300 cursor-pointer select-none">Use Photo</label>
+                                                            </div>
+
+                                                            <div class="flex items-center gap-2">
+                                                                <Checkbox v-model="useEnvironment" :binary="true" inputId="idea-use-env"
+                                                                    class="!border-white/20" :pt="{
+                                                                        box: ({ props, state }) => ({
+                                                                            class: ['!bg-slate-800 !border-white/20', { '!bg-violet-600 !border-violet-600': props.modelValue }]
+                                                                        })
+                                                                    }" />
+                                                                <label for="idea-use-env"
+                                                                    class="text-xs text-slate-300 cursor-pointer select-none">Use Environment</label>
+                                                            </div>
                                                         </div>
                                                     </div>
                         
@@ -1245,7 +1260,7 @@ watch(viewMode, (v) => {
                                                 </div>
                         
                                                 <!-- Environment Row (Below) -->
-                                                <div v-if="selectedCharacter" class="flex-1 flex flex-col gap-1 animate-in fade-in slide-in-from-top-1">
+                                                <div v-if="selectedCharacter && useEnvironment" class="flex-1 flex flex-col gap-1 animate-in fade-in slide-in-from-top-1 mt-2">
                                                     <div class="flex justify-between items-center">
                                                         <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Environment</label>
                                                         <Button v-if="selectedEnvironment" icon="pi pi-times" @click="selectedEnvironment = null" text size="small" 
diff --git a/src/views/IdeasView.vue b/src/views/IdeasView.vue
index 5822dd5..e9d55a3 100644
--- a/src/views/IdeasView.vue
+++ b/src/views/IdeasView.vue
@@ -320,12 +320,12 @@ const handleAssetPickerUpload = async (event) => {
         <!-- Content Area (Scrollable) -->
         <div class="flex-1 overflow-y-auto p-4 md:p-6 pb-48 custom-scrollbar">
             <!-- Top Bar -->
-            <header class="flex justify-between items-end mb-4 border-b border-white/5 pb-4">
+            <header class="flex justify-between items-center mb-3 border-b border-white/5 pb-2">
                 <div>
                     <h1
-                        class="text-2xl font-bold m-0 bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-transparent">
+                        class="text-lg font-bold m-0 bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-transparent">
                         Ideas</h1>
-                    <p class="mt-1 mb-0 text-xs text-slate-400">Your creative sessions and experiments</p>
+                    <p class="mt-0.5 mb-0 text-[10px] text-slate-500">Your creative sessions</p>
                 </div>
                 <!-- REMOVED NEW IDEA BUTTON -->
             </header>