This commit is contained in:
xds
2026-02-18 16:34:11 +03:00
parent f8adcf33d3
commit 0cc5150f9c
12 changed files with 489 additions and 118 deletions

View File

@@ -21,6 +21,40 @@ const showCreateDialog = ref(false)
const newIdea = ref({ name: '', description: '' })
const submitting = ref(false)
const API_URL = import.meta.env.VITE_API_URL
const isSettingsVisible = ref(localStorage.getItem('ideas_view_settings_visible') !== 'false')
watch(isSettingsVisible, (val) => {
localStorage.setItem('ideas_view_settings_visible', val)
})
// --- Rename Idea ---
const showRenameDialog = ref(false)
const ideaToRename = ref(null)
const newName = ref('')
const renaming = ref(false)
const openRenameDialog = (idea) => {
ideaToRename.value = idea
newName.value = idea.name
showRenameDialog.value = true
}
const handleRename = async () => {
if (!newName.value.trim() || newName.value === ideaToRename.value.name) {
showRenameDialog.value = false
return
}
renaming.value = true
try {
await ideaStore.updateIdea(ideaToRename.value.id, {
name: newName.value.trim()
})
showRenameDialog.value = false
} finally {
renaming.value = false
}
}
// --- Generation Settings ---
const prompt = ref('')
@@ -161,6 +195,15 @@ const handleGenerate = async () => {
}
}
const pastePrompt = async () => {
try {
const text = await navigator.clipboard.readText()
if (text) prompt.value = text
} catch (err) {
console.error('Failed to read clipboard', err)
}
}
// --- Asset Picker Logic ---
const isAssetPickerVisible = ref(false)
const assetPickerTab = ref('all') // 'all', 'uploaded', 'generated'
@@ -243,14 +286,14 @@ const handleAssetPickerUpload = async (event) => {
<template>
<div class="flex flex-col h-full font-sans relative">
<!-- Content Area (Scrollable) -->
<div class="flex-1 overflow-y-auto p-8 pb-48 custom-scrollbar">
<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-8 border-b border-white/5 pb-6">
<header class="flex justify-between items-end mb-4 border-b border-white/5 pb-4">
<div>
<h1
class="text-4xl font-bold m-0 bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-transparent">
class="text-2xl font-bold m-0 bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-transparent">
Ideas</h1>
<p class="mt-2 mb-0 text-slate-400">Your creative sessions and experiments</p>
<p class="mt-1 mb-0 text-xs text-slate-400">Your creative sessions and experiments</p>
</div>
<!-- REMOVED NEW IDEA BUTTON -->
</header>
@@ -296,9 +339,15 @@ const handleAssetPickerUpload = async (event) => {
<!-- Details -->
<div class="flex-1 min-w-0">
<h3
class="m-0 text-lg font-bold text-slate-200 group-hover:text-violet-300 transition-colors truncate">
{{ idea.name }}</h3>
<div class="flex items-center gap-2">
<h3
class="m-0 text-lg font-bold text-slate-200 group-hover:text-violet-300 transition-colors truncate">
{{ idea.name }}</h3>
<Button icon="pi pi-pencil" text rounded size="small"
class="!w-6 !h-6 !text-slate-500 hover:!text-violet-400 opacity-0 group-hover:opacity-100 transition-opacity"
@click.stop="openRenameDialog(idea)"
/>
</div>
<p class="m-0 text-sm text-slate-500 truncate">{{ idea.description || 'No description' }}</p>
</div>
@@ -315,13 +364,29 @@ const handleAssetPickerUpload = async (event) => {
</div>
</div>
<!-- Create Idea Dialog (Removed) -->
<!-- Rename Dialog -->
<Dialog v-model:visible="showRenameDialog" header="Rename Idea" modal :style="{ width: '400px' }"
:pt="{ root: { class: '!bg-slate-800 !border-white/10' }, header: { class: '!bg-slate-800' }, content: { class: '!bg-slate-800' } }">
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-1">
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">New Name</label>
<InputText v-model="newName" class="w-full !bg-slate-700 !border-white/10 !text-white" autofocus @keyup.enter="handleRename" />
</div>
<div class="flex justify-end gap-2 mt-2">
<Button label="Cancel" text @click="showRenameDialog = false" class="!text-slate-400 hover:!text-white" />
<Button label="Save" :loading="renaming" @click="handleRename" class="!bg-violet-600 !border-none hover:!bg-violet-500" />
</div>
</div>
</Dialog>
<!-- SETTINGS PANEL (Bottom - Persistent) -->
<div
<div v-if="isSettingsVisible"
class="absolute bottom-4 left-1/2 -translate-x-1/2 w-[95%] max-w-4xl glass-panel border border-white/10 bg-slate-900/95 backdrop-blur-xl px-4 py-3 z-[60] !rounded-[2rem] shadow-2xl flex flex-col gap-1 max-h-[60vh] overflow-y-auto">
<div class="w-full flex justify-center -mt-1 mb-1 cursor-pointer" @click="isSettingsVisible = false">
<div class="w-12 h-1 bg-white/20 rounded-full hover:bg-white/40 transition-colors"></div>
</div>
<div class="flex flex-col lg:flex-row gap-3">
<!-- LEFT COLUMN: Prompt + Character + Assets -->
<div class="flex-1 flex flex-col gap-2">
@@ -329,7 +394,14 @@ const handleAssetPickerUpload = async (event) => {
<div class="flex flex-col gap-1">
<div class="flex justify-between items-center">
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Prompt</label>
<!-- Optional: Add Clear/Improve buttons here if desired, keeping simple for now to match layout -->
<div class="flex gap-1">
<Button icon="pi pi-clipboard" label="Paste" size="small" text
class="!text-slate-400 hover:!text-white hover:!bg-white/10 !py-0 !px-1.5 !text-[9px] !h-5"
@click="pastePrompt" />
<Button icon="pi pi-times" label="Clear" size="small" text
class="!text-slate-400 hover:!text-white hover:!bg-white/10 !py-0 !px-1.5 !text-[9px] !h-5"
@click="prompt = ''" />
</div>
</div>
<Textarea v-model="prompt" rows="2"
placeholder="Describe what you want to create... (Auto-starts new session)"
@@ -460,6 +532,13 @@ const handleAssetPickerUpload = async (event) => {
</div>
</div>
<transition name="fade">
<div v-if="!isSettingsVisible" class="absolute 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>
</transition>
<Dialog v-model:visible="isAssetPickerVisible" modal header="Select Assets"
:style="{ width: '80vw', maxWidth: '900px' }"
:pt="{ root: { class: '!bg-slate-900 !border !border-white/10' }, header: { class: '!bg-slate-900 !border-b !border-white/5 !text-white' }, content: { class: '!bg-slate-900 !p-0' }, footer: { class: '!bg-slate-900 !border-t !border-white/5 !p-4' }, closeButton: { class: '!text-slate-400 hover:!text-white' } }">