Refactor: Extract sidebar navigation from individual views into a new AppSidebar component.
This commit is contained in:
@@ -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">
|
||||
<!-- Sidebar -->
|
||||
<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="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">
|
||||
<div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100">
|
||||
<!-- Main Content (Sidebar removed) -->
|
||||
<div class="flex-1 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>
|
||||
|
||||
<!-- Asset Selection Modal -->
|
||||
<Dialog v-model:visible="isAssetModalVisible" modal header="Select Reference Assets"
|
||||
:style="{ width: '80vw', maxWidth: '1000px' }" class="glass-panel rounded-2xl">
|
||||
<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 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)"
|
||||
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'">
|
||||
<img :src="API_URL + asset.url + '?thumbnail=true'" class="w-full h-full object-cover" />
|
||||
<div v-if="isAssetSelected(asset.id)"
|
||||
class="absolute inset-0 bg-violet-600/30 flex items-center justify-center">
|
||||
<div class="bg-violet-600 rounded-full p-1 shadow-lg">
|
||||
<i class="pi pi-check text-white text-xs font-bold"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Asset Selection Modal -->
|
||||
<Dialog v-model:visible="isAssetModalVisible" modal header="Select Reference Assets"
|
||||
:style="{ width: '80vw', maxWidth: '1000px' }" class="glass-panel rounded-2xl">
|
||||
<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 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)"
|
||||
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'">
|
||||
<img :src="API_URL + asset.url + '?thumbnail=true'" class="w-full h-full object-cover" />
|
||||
<div v-if="isAssetSelected(asset.id)"
|
||||
class="absolute inset-0 bg-violet-600/30 flex items-center justify-center">
|
||||
<div class="bg-violet-600 rounded-full p-1 shadow-lg">
|
||||
<i class="pi pi-check text-white text-xs font-bold"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex-1 flex items-center justify-center text-slate-500">
|
||||
No assets found
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex-1 flex items-center justify-center text-slate-500">
|
||||
No assets found
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div class="flex gap-4 items-center">
|
||||
<Paginator :first="assetsFirst" :rows="assetsRows" :totalRecords="assetsTotalRecords"
|
||||
@page="onAssetsPage" class="!bg-transparent !border-none !p-0" />
|
||||
<Button label="Done" @click="isAssetModalVisible = false" class="!px-6" />
|
||||
</div>
|
||||
<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>
|
||||
<div class="flex gap-4 items-center">
|
||||
<Paginator :first="assetsFirst" :rows="assetsRows" :totalRecords="assetsTotalRecords"
|
||||
@page="onAssetsPage" class="!bg-transparent !border-none !p-0" />
|
||||
<Button label="Done" @click="isAssetModalVisible = false" class="!px-6" />
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<!-- Image Preview Modal -->
|
||||
<Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
|
||||
:header="previewImage?.name || 'Image Preview'" :style="{ width: '90vw', maxWidth: '800px' }"
|
||||
class="glass-panel rounded-2xl">
|
||||
<div v-if="previewImage" class="flex flex-col items-center">
|
||||
<img :src="previewImage.url" :alt="previewImage.name"
|
||||
class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
|
||||
<div class="mt-6 text-center">
|
||||
<h2 class="text-2xl font-bold mb-2">{{ previewImage.name }}</h2>
|
||||
<p v-if="previewImage.createdAt" class="text-slate-400">{{ formatDate(previewImage.createdAt) }}</p>
|
||||
</div>
|
||||
<!-- Image Preview Modal -->
|
||||
<Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
|
||||
:header="previewImage?.name || 'Image Preview'" :style="{ width: '90vw', maxWidth: '800px' }"
|
||||
class="glass-panel rounded-2xl">
|
||||
<div v-if="previewImage" class="flex flex-col items-center">
|
||||
<img :src="previewImage.url" :alt="previewImage.name"
|
||||
class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
|
||||
<div class="mt-6 text-center">
|
||||
<h2 class="text-2xl font-bold mb-2">{{ previewImage.name }}</h2>
|
||||
<p v-if="previewImage.createdAt" class="text-slate-400">{{ formatDate(previewImage.createdAt) }}</p>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user