likes

src/views/IdeaDetailView.vue

@@ -34,8 +34,9 @@ const router = useRouter()
 const ideaStore = useIdeaStore()
 const confirm = useConfirm()
 const toast = useToast()
-const { currentIdea, loading, error } = storeToRefs(ideaStore)
+const { currentIdea, currentInspiration, loading, error } = storeToRefs(ideaStore)
 const generations = ref([])
+const inspirationContentType = ref('')
 
 // --- Idea Name Editing ---
 const isEditingName = ref(false)
@@ -218,6 +219,11 @@ onMounted(async () => {
             ])
             console.log('Fetched idea:', currentIdea.value)
             if (currentIdea.value) {
+                // Check for inspiration
+                if (currentIdea.value.inspiration_id) {
+                    ideaStore.fetchInspiration(currentIdea.value.inspiration_id)
+                }
+
                 // Check for autostart query param
                 if (route.query.autostart === 'true') {
                     // Slight delay to ensure everything is reactive and mounted
@@ -256,7 +262,7 @@ const loadCharacters = async () => {
 const fetchGenerations = async (ideaId) => {
     loadingGenerations.value = true
     try {
-        const response = await ideaStore.fetchIdeaGenerations(ideaId, 100, onlyLiked.value)
+        const response = await ideaStore.fetchIdeaGenerations(ideaId, 100, 0, onlyLiked.value)
         let loadedGens = []
         if (response.data && response.data.generations) {
             loadedGens = response.data.generations
@@ -611,6 +617,25 @@ const openImagePreview = (imageList, startIdx = 0) => {
     isImagePreviewVisible.value = true
 }
 
+// --- Inspiration Logic ---
+const showInspirationDialog = ref(false)
+
+const openInspirationDialog = () => {
+    showInspirationDialog.value = true
+}
+
+watch(currentInspiration, async (newVal) => {
+    if (newVal && newVal.asset_id) {
+        try {
+            const meta = await dataService.getAssetMetadata(newVal.asset_id)
+            inspirationContentType.value = meta.content_type
+        } catch (e) {
+            // console.warn('Failed to get asset metadata', e)
+            inspirationContentType.value = 'image/jpeg'
+        }
+    }
+}, { immediate: true })
+
 // --- Computeds ---
 const groupedGenerations = computed(() => {
     // Group by generation_group_id if present
@@ -976,6 +1001,11 @@ watch(viewMode, (v) => {
                         </button>
                     </div>
 
+                    <Button v-if="currentInspiration" icon="pi pi-lightbulb" text rounded size="small"
+                        class="!w-7 !h-7 !text-yellow-400 hover:!bg-yellow-400/10"
+                        v-tooltip.bottom="'View Inspiration'"
+                        @click="openInspirationDialog" />
+
                     <Button :icon="onlyLiked ? 'pi pi-heart-fill' : 'pi pi-heart'" 
                         @click="onlyLiked = !onlyLiked" rounded text 
                         class="!w-7 !h-7 !p-0"
@@ -1523,6 +1553,44 @@ watch(viewMode, (v) => {
             </div>
         </Dialog>
 
+        <!-- Inspiration Dialog -->
+        <Dialog v-model:visible="showInspirationDialog" modal header="Inspiration"
+            :style="{ width: '90vw', maxWidth: '1000px', height: '90vh' }"
+            :pt="{ root: { class: '!bg-slate-900 !border !border-white/10 flex flex-col' }, header: { class: '!bg-slate-900 !border-b !border-white/5 !text-white flex-shrink-0' }, content: { class: '!bg-slate-900 !p-4 flex-1 overflow-hidden flex flex-col' } }">
+            <div v-if="currentInspiration" class="flex flex-col gap-4 h-full">
+                <!-- Asset Viewer -->
+                <div v-if="currentInspiration.asset_id" class="flex-1 min-h-0 rounded-xl overflow-hidden border border-white/10 bg-black/20 flex items-center justify-center">
+                     <video v-if="inspirationContentType && inspirationContentType.startsWith('video/')" 
+                        :src="API_URL + '/assets/' + currentInspiration.asset_id" 
+                        controls autoplay loop muted 
+                        class="max-w-full max-h-full object-contain" />
+                    <img v-else 
+                        :src="API_URL + '/assets/' + currentInspiration.asset_id" 
+                        class="max-w-full max-h-full object-contain" />
+                </div>
+                
+                <!-- Caption -->
+                <div v-if="currentInspiration.caption" class="flex flex-col gap-2 flex-shrink-0">
+                    <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Caption</label>
+                    <div class="max-h-[150px] overflow-y-auto custom-scrollbar bg-slate-800/50 p-3 rounded-lg border border-white/5">
+                        <p class="text-sm text-slate-200 whitespace-pre-wrap">{{ currentInspiration.caption }}</p>
+                    </div>
+                </div>
+
+                <!-- Actions -->
+                <div class="flex justify-end mt-2 flex-shrink-0 gap-2">
+                    <Button label="Close" text @click="showInspirationDialog = false" class="!text-slate-400 hover:!text-white" />
+                    <a v-if="currentInspiration.source_url" :href="currentInspiration.source_url" target="_blank" rel="noopener noreferrer">
+                        <Button label="Go to Source" icon="pi pi-external-link" 
+                            class="!bg-violet-600 !border-none hover:!bg-violet-500" />
+                    </a>
+                </div>
+            </div>
+            <div v-else class="flex justify-center py-8">
+                <ProgressSpinner />
+            </div>
+        </Dialog>
+
     </div>
 </template>