feat(stage-tamagotchi): add desktop chat list (#2065)

apps/stage-tamagotchi/src/renderer/components/InteractiveArea.vue

@@ -44,6 +44,7 @@ const { activeCard, activeCardId } = storeToRefs(airiCardStore)
 const { t } = useI18n()
 const { openImagePreview } = journalPreviewStore
 const isComposing = ref(false)
+const sessionsDrawerOpen = defineModel<boolean>('sessionsDrawerOpen', { default: false })
 const DOUBLE_ENTER_INTERVAL_MS = 300
 const TRAILING_NEWLINES_REGEX = /[\r\n]+$/
 const SEND_MODES = ['enter', 'ctrl-enter', 'double-enter'] as const
@@ -328,6 +329,17 @@ async function handleCleanupMessages() {
       </div>
     </div>
     <div :class="['flex items-center justify-end gap-2 py-1']">
+      <button
+        :class="[
+          'max-h-[10lh] min-h-[1lh] flex items-center justify-center rounded-md p-2 outline-none',
+          'bg-neutral-100 text-lg text-neutral-500 transition-colors transition-transform active:scale-95',
+          'dark:bg-neutral-800 dark:text-neutral-400 hover:text-primary-500 dark:hover:text-primary-400',
+        ]"
+        title="Conversations"
+        @click="sessionsDrawerOpen = true"
+      >
+        <div class="i-solar:chat-line-bold-duotone" />
+      </button>
       <DropdownMenuRoot>
         <DropdownMenuTrigger as-child>
           <button

apps/stage-tamagotchi/src/renderer/components/Window/TitleBar.vue

@@ -6,6 +6,10 @@ defineProps<{
   icon: string
 }>()
 
+const emit = defineEmits<{
+  titleClick: []
+}>()
+
 const { platform } = useAppRuntime()
 </script>
 
@@ -23,6 +27,8 @@ const { platform } = useAppRuntime()
         bg="hover:neutral-200 hover:dark:neutral-800"
         transition="all duration-200 ease-in-out"
         flex cursor-pointer select-none items-center gap-2 rounded-md px-1.5 py-0.5
+        class="[-webkit-app-region:no-drag]"
+        @click="emit('titleClick')"
       >
         <div :class="icon" select-none text="neutral-400 dark:neutral-500" whitespace-nowrap />
         <div><span select-none whitespace-nowrap text-sm>{{ title }}</span></div>

apps/stage-tamagotchi/src/renderer/pages/chat.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
+import { ChatSessionsDrawer } from '@proj-airi/stage-ui/components'
+import { shallowRef } from 'vue'
+
 import InteractiveArea from '../components/InteractiveArea.vue'
 import WindowTitleBar from '../components/Window/TitleBar.vue'
+
+const sessionsDrawerOpen = shallowRef(false)
 </script>
 
 <template>
@@ -8,11 +13,14 @@ import WindowTitleBar from '../components/Window/TitleBar.vue'
     <WindowTitleBar
       title="Chat"
       icon="i-solar:chat-line-bold"
+      @title-click="sessionsDrawerOpen = true"
     />
     <InteractiveArea
+      v-model:sessions-drawer-open="sessionsDrawerOpen"
       class="interaction-area block"
       h-full w-full p-4 transition="opacity duration-250"
     />
+    <ChatSessionsDrawer v-model="sessionsDrawerOpen" />
   </div>
 </template>