adds demo & reduced mode for live demo

Author: cars10

frontend/src/components/EmailContent/EmailAttachments.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col gap-2">
     <div v-if="attachments.length > 0" class="flex flex-wrap gap-2">
       <a
         v-for="attachment in attachments"
@@ -20,12 +20,6 @@
     </div>
 
     <div v-if="inlineAttachments.length > 0" class="flex flex-wrap gap-2">
-      <div
-        class="text-gray-500 flex items-center cursor-help"
-        title="Inline attachments are usually images displayed inside the email content and not typically intended to be downloaded."
-      >
-        Inline attachments:
-      </div>
       <a
         v-for="attachment in inlineAttachments"
         :key="attachment.id"
@@ -37,10 +31,13 @@
           :is="getAttachmentIcon(attachment.content_type)"
           class="h-4 w-4 text-gray-600"
         />
-        <span>{{ attachment.filename || 'unnamed' }}</span>
-        <span class="text-xs text-gray-600"
-          >({{ formatSize(attachment.size) }})</span
-        >
+        <span>
+          {{ attachment.filename || 'unnamed' }}
+          <small class="text-gray-500">(inline)</small>
+        </span>
+        <span class="text-xs text-gray-600">
+          ({{ formatSize(attachment.size) }})
+        </span>
       </a>
     </div>
   </div>

frontend/src/components/EmailContent/EmailHeader.vue

@@ -145,6 +145,11 @@
     }
   }
 
+  const demoMode = computed(() => {
+    const searchParams = new URLSearchParams(window.location.search)
+    return searchParams.get('demo') === 'true'
+  })
+
   const menuItems = computed<DropdownMenuItem[]>(() => [
     {
       id: 'download',
@@ -157,7 +162,7 @@
       id: 'delete',
       label: 'Delete',
       icon: TrashIcon,
-      disabled: loadingDelete.value,
+      disabled: loadingDelete.value || demoMode.value,
       onClick: handleDelete,
     },
   ])

frontend/src/components/EmailLayout/EmailLayout.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="flex flex-row h-full">
-    <EmailSidebar :counts="counts" />
+    <EmailSidebar v-if="!reducedMode" :counts="counts" />
 
-    <EmailList :emails="emails" :loading="loading" @load-more="fetchNextPage" />
+    <EmailList
+      v-if="!reducedMode"
+      :emails="emails"
+      :loading="loading"
+      @load-more="fetchNextPage"
+    />
 
     <div class="grow">
       <RouterView />
@@ -11,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, watch } from 'vue'
+  import { ref, onMounted, watch, computed } from 'vue'
   import { useWebSocket } from '@/composables/useWebSocket'
   import { apiClient } from '@/api/client'
   import { useSearchStore } from '@/stores/Search'
@@ -33,6 +38,11 @@
   const hasNextPage = ref(false)
   let searchTimeout: number | null = null
 
+  const reducedMode = computed(() => {
+    const searchParams = new URLSearchParams(window.location.search)
+    return searchParams.get('reduced') === 'true'
+  })
+
   const fetchSidebar = async () => {
     try {
       counts.value = await apiClient.getCounts()

frontend/src/router.ts

@@ -1,7 +1,13 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import {
+  createRouter,
+  createWebHistory,
+  type RouteLocationNormalized,
+  type NavigationGuardNext,
+} from 'vue-router'
 import EmailView from './components/EmailContent/EmailView.vue'
 import FullscreenEmailView from './components/EmailContent/FullscreenEmailView.vue'
 import EmailLayout from './components/EmailLayout/EmailLayout.vue'
+import { apiClient } from './api/client'
 
 const routes = [
   { path: '/', redirect: '/emails/inbox' },
@@ -15,6 +21,23 @@ const routes = [
     component: EmailLayout,
     children: [{ path: 'email/:id', component: EmailView }],
   },
+  {
+    path: '/redirect_first_email',
+    component: EmailLayout,
+    beforeEnter: async (
+      to: RouteLocationNormalized,
+      _from: RouteLocationNormalized,
+      next: NavigationGuardNext
+    ) => {
+      const response = await apiClient.inbox(1)
+      const first = response.emails[0]
+      if (first) {
+        next({ path: `/emails/inbox/email/${first.id}`, query: to.query })
+      } else {
+        next({ path: '/emails/inbox' })
+      }
+    }
+  },
   { path: '/emails/:id/fullscreen', component: FullscreenEmailView },
   { path: '/:pathMatch(.*)*', redirect: '/' },
 ]