+ env
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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,7 +1212,8 @@ 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">
|
||||
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 }) => ({
|
||||
@@ -1216,9 +1221,19 @@ watch(viewMode, (v) => {
|
||||
})
|
||||
}" />
|
||||
<label for="idea-use-profile-img"
|
||||
class="text-xs text-slate-300 cursor-pointer select-none">Use
|
||||
Character
|
||||
Photo</label>
|
||||
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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user