supaslidev 0.3.5 → 0.4.0

package/app/assets/css/main.css

@@ -6,16 +6,16 @@
 }
 
 :root {
-  --ui-primary: var(--color-teal-700);
-  --ui-success: var(--color-green-700);
+  --supaslidev-accent: var(--color-primary-700);
+  --supaslidev-success: var(--color-green-700);
   --supaslidev-border: #d1d5db;
   --supaslidev-header-bg: rgba(0, 0, 0, 0.02);
   --supaslidev-text-muted: #6b7280;
 }
 
 .dark {
-  --ui-primary: var(--color-teal-500);
-  --ui-success: var(--color-green-500);
+  --supaslidev-accent: var(--color-primary-500);
+  --supaslidev-success: var(--color-green-500);
   --supaslidev-border: #4b5563;
   --supaslidev-header-bg: rgba(255, 255, 255, 0.03);
   --supaslidev-text-muted: #9ca3af;
@@ -37,7 +37,7 @@ summary {
 
 .settings-btn:hover .settings-icon {
   transform: rotate(45deg);
-  color: var(--ui-primary);
+  color: var(--supaslidev-accent);
 }
 
 *,

package/app/components/AppHeader.vue

@@ -305,7 +305,7 @@ defineExpose({ focusInput, inputRef });
 .logo-cursor {
   width: 8px;
   height: 1.25rem;
-  background: var(--ui-primary);
+  background: var(--supaslidev-accent);
   animation: blink 1s step-end infinite;
 }
 
@@ -322,7 +322,7 @@ defineExpose({ focusInput, inputRef });
   outline: none;
   color: var(--ui-text);
   font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
-  caret-color: var(--ui-primary);
+  caret-color: var(--supaslidev-accent);
 }
 
 .terminal-input::placeholder {
@@ -399,7 +399,7 @@ defineExpose({ focusInput, inputRef });
 }
 
 .dropdown-item--selected {
-  color: var(--ui-primary);
+  color: var(--supaslidev-accent);
 }
 
 .dropdown-item-label {

package/app/components/PresentationCard.vue

@@ -6,6 +6,7 @@ const props = defineProps<{
 }>();
 
 const { deployMode, showDeployDemoToast } = useDeployMode();
+const toast = useToast();
 const deployBasePath = computed(() => (import.meta.env.BASE_URL || '/').replace(/\/$/, ''));
 
 const {
@@ -14,6 +15,7 @@ const {
   startServer,
   stopServer,
   exportPresentation,
+  generateThumbnail,
   openInEditor,
   waitForServerReady,
 } = useServers();
@@ -26,6 +28,7 @@ const emit = defineEmits<{
 const loading = ref({
   dev: false,
   export: false,
+  thumbnail: false,
   edit: false,
 });
 
@@ -87,6 +90,43 @@ async function handleExport(event: Event) {
   }
 }
 
+async function handleThumbnail(event: Event) {
+  event.preventDefault();
+  event.stopPropagation();
+
+  if (deployMode.value) {
+    showDeployDemoToast();
+    return;
+  }
+
+  if (loading.value.thumbnail) return;
+
+  loading.value.thumbnail = true;
+  try {
+    const result = await generateThumbnail(props.presentation.id);
+    if (result.success && result.thumbnailPath) {
+      toast.add({
+        title: 'Thumbnail ready',
+        description: `${props.presentation.title} thumbnail generated`,
+        color: 'success',
+        icon: 'i-lucide-image',
+        actions: [
+          {
+            label: 'Open',
+            onClick: () => window.open(result.thumbnailPath, '_blank'),
+          },
+        ],
+      });
+    } else {
+      emit('exportError', result.error || 'Thumbnail generation failed');
+    }
+  } catch {
+    emit('exportError', 'Failed to generate thumbnail');
+  } finally {
+    loading.value.thumbnail = false;
+  }
+}
+
 async function handleEdit(event: Event) {
   event.preventDefault();
   event.stopPropagation();
@@ -166,6 +206,17 @@ function handleCardClick() {
       </div>
     </template>
 
+    <div
+      v-if="presentation.thumbnail"
+      class="thumbnail-preview border-b border-[var(--supaslidev-border)]"
+    >
+      <img
+        :src="presentation.thumbnail"
+        :alt="`${presentation.title} first slide`"
+        class="w-full h-auto block"
+      />
+    </div>
+
     <div class="terminal-body p-5 space-y-5">
       <div class="terminal-prompt">
         <div class="flex items-start gap-2">
@@ -234,6 +285,22 @@ function handleCardClick() {
           export
         </UButton>
 
+        <UButton
+          color="info"
+          variant="soft"
+          size="sm"
+          class="flex-1 terminal-btn font-mono"
+          :loading="loading.thumbnail"
+          :disabled="loading.thumbnail"
+          loading-icon="i-lucide-loader-circle"
+          @click="handleThumbnail"
+        >
+          <template v-if="!loading.thumbnail" #leading>
+            <span class="terminal-prompt-symbol">$</span>
+          </template>
+          thumbnail
+        </UButton>
+
         <UButton
           color="neutral"
           variant="soft"

package/app/components/PresentationListItem.vue

@@ -6,6 +6,7 @@ const props = defineProps<{
 }>();
 
 const { deployMode, showDeployDemoToast } = useDeployMode();
+const toast = useToast();
 const deployBasePath = computed(() => (import.meta.env.BASE_URL || '/').replace(/\/$/, ''));
 
 const {
@@ -14,6 +15,7 @@ const {
   startServer,
   stopServer,
   exportPresentation,
+  generateThumbnail,
   openInEditor,
   waitForServerReady,
 } = useServers();
@@ -26,6 +28,7 @@ const emit = defineEmits<{
 const loading = ref({
   dev: false,
   export: false,
+  thumbnail: false,
   edit: false,
 });
 
@@ -87,6 +90,43 @@ async function handleExport(event: Event) {
   }
 }
 
+async function handleThumbnail(event: Event) {
+  event.preventDefault();
+  event.stopPropagation();
+
+  if (deployMode.value) {
+    showDeployDemoToast();
+    return;
+  }
+
+  if (loading.value.thumbnail) return;
+
+  loading.value.thumbnail = true;
+  try {
+    const result = await generateThumbnail(props.presentation.id);
+    if (result.success && result.thumbnailPath) {
+      toast.add({
+        title: 'Thumbnail ready',
+        description: `${props.presentation.title} thumbnail generated`,
+        color: 'success',
+        icon: 'i-lucide-image',
+        actions: [
+          {
+            label: 'Open',
+            onClick: () => window.open(result.thumbnailPath, '_blank'),
+          },
+        ],
+      });
+    } else {
+      emit('exportError', result.error || 'Thumbnail generation failed');
+    }
+  } catch {
+    emit('exportError', 'Failed to generate thumbnail');
+  } finally {
+    loading.value.thumbnail = false;
+  }
+}
+
 async function handleEdit(event: Event) {
   event.preventDefault();
   event.stopPropagation();
@@ -144,6 +184,13 @@ function handleOpen(event: Event) {
       :class="running ? 'bg-[var(--ui-success)] animate-pulse' : 'bg-[var(--ui-text-muted)]'"
     />
 
+    <img
+      v-if="presentation.thumbnail"
+      :src="presentation.thumbnail"
+      :alt="`${presentation.title} first slide`"
+      class="w-10 h-6 object-cover rounded shrink-0 border border-[var(--supaslidev-border)]"
+    />
+
     <span class="text-xs text-[var(--ui-text-muted)] shrink-0">~/{{ presentation.id }}</span>
 
     <span class="text-sm text-[var(--ui-text)] truncate min-w-0 flex-1">
@@ -217,6 +264,19 @@ function handleOpen(event: Event) {
         @click="handleExport"
       />
 
+      <UButton
+        color="info"
+        variant="ghost"
+        size="xs"
+        :icon="loading.thumbnail ? '' : 'i-lucide-image'"
+        :loading="loading.thumbnail"
+        :disabled="loading.thumbnail"
+        loading-icon="i-lucide-loader-circle"
+        class="action-btn"
+        title="Generate thumbnail"
+        @click="handleThumbnail"
+      />
+
       <UButton
         color="neutral"
         variant="ghost"

package/app/composables/useServers.ts

@@ -78,6 +78,18 @@ async function exportPresentation(
   }
 }
 
+async function generateThumbnail(
+  presentationId: string,
+): Promise<{ success: boolean; thumbnailPath?: string; error?: string }> {
+  try {
+    const response = await fetch(`/api/thumbnail/${presentationId}`, { method: 'POST' });
+    const result = await response.json();
+    return result;
+  } catch {
+    return { success: false, error: 'Failed to connect to thumbnail service' };
+  }
+}
+
 async function openInEditor(presentationId: string): Promise<{ success: boolean; error?: string }> {
   try {
     const response = await fetch(`/api/open-editor/${presentationId}`, { method: 'POST' });
@@ -140,6 +152,7 @@ export function useServers() {
     startPolling,
     stopPolling,
     exportPresentation,
+    generateThumbnail,
     openInEditor,
     waitForServerReady,
   };

package/app/layouts/default.vue

@@ -43,7 +43,7 @@ useSettings();
 }
 
 .footer-link {
-  color: var(--ui-primary);
+  color: var(--supaslidev-accent);
   text-decoration: none;
   transition: opacity 0.2s ease;
 }

package/app/pages/index.vue

@@ -8,6 +8,7 @@ const {
   stopAllServers,
   startServer,
   exportPresentation,
+  generateThumbnail,
   openInEditor,
   waitForServerReady,
 } = useServers();
@@ -169,6 +170,42 @@ async function handleExportCommand(presentation: Presentation) {
   }
 }
 
+async function handleThumbnailCommand(presentation: Presentation) {
+  isCommandPaletteOpen.value = false;
+  if (deployMode.value) {
+    showDeployDemoToast();
+    return;
+  }
+  toast.add({
+    title: 'Generating thumbnail...',
+    description: `Creating thumbnail for ${presentation.title}`,
+    color: 'info',
+    icon: 'i-lucide-image',
+  });
+  const result = await generateThumbnail(presentation.id);
+  if (result.success && result.thumbnailPath) {
+    toast.add({
+      title: 'Thumbnail ready',
+      description: `${presentation.title} thumbnail generated`,
+      color: 'success',
+      icon: 'i-lucide-image',
+      actions: [
+        {
+          label: 'Open',
+          onClick: () => window.open(result.thumbnailPath, '_blank'),
+        },
+      ],
+    });
+  } else if (result.error) {
+    toast.add({
+      title: 'Thumbnail Failed',
+      description: result.error,
+      color: 'error',
+      icon: 'i-lucide-alert-circle',
+    });
+  }
+}
+
 async function handleEditCommand(presentation: Presentation) {
   isCommandPaletteOpen.value = false;
   if (deployMode.value) {
@@ -284,6 +321,30 @@ function handleExecuteCommand(command: string) {
     return;
   }
 
+  if (action === 'thumbnail') {
+    if (!arg) {
+      toast.add({
+        title: 'Missing argument',
+        description: 'Usage: thumbnail <presentation-name>',
+        color: 'warning',
+        icon: 'i-lucide-alert-triangle',
+      });
+      return;
+    }
+    const presentation = findPresentationByName(arg);
+    if (!presentation) {
+      toast.add({
+        title: 'Presentation not found',
+        description: `No presentation found with name "${arg}"`,
+        color: 'warning',
+        icon: 'i-lucide-alert-triangle',
+      });
+      return;
+    }
+    handleThumbnailCommand(presentation);
+    return;
+  }
+
   if (action === 'edit') {
     if (!arg) {
       toast.add({
@@ -310,7 +371,7 @@ function handleExecuteCommand(command: string) {
 
   toast.add({
     title: 'Unknown command',
-    description: `"${action}" is not a recognized command. Try: new, import, present, export, edit`,
+    description: `"${action}" is not a recognized command. Try: new, import, present, export, thumbnail, edit`,
     color: 'warning',
     icon: 'i-lucide-alert-triangle',
   });
@@ -370,6 +431,18 @@ const commandPaletteGroups = computed<CommandPaletteGroup[]>(() => {
         }),
       ),
     },
+    {
+      id: 'thumbnail',
+      label: 'Thumbnail',
+      items: presentations.value.map(
+        (p: Presentation): CommandPaletteItem => ({
+          label: `Thumbnail > ${p.title}`,
+          suffix: 'Generate PNG of first slide',
+          icon: 'i-lucide-image',
+          onSelect: () => handleThumbnailCommand(p),
+        }),
+      ),
+    },
     {
       id: 'edit',
       label: 'Edit',
@@ -424,6 +497,11 @@ const commandOptions = computed(() => {
       description: 'Export to PDF',
       onSelect: () => handleExportCommand(p),
     });
+    options.push({
+      label: `Thumbnail > ${p.title}`,
+      description: 'Generate PNG of first slide',
+      onSelect: () => handleThumbnailCommand(p),
+    });
     options.push({
       label: `Edit > ${p.title}`,
       description: 'Open in VS Code',