From 5d9b1080ddbcf62b3512f2544a6ceafc25eb6402 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Wed, 3 Sep 2025 13:37:42 +0200
Subject: [PATCH] feat: add VSCode settings for improved development
 experience; remove Typing component and adjust layout in MessageContainer and
 index pages

---
 .vscode/settings.json                    | 20 ++++++++++++++
 app/components/chat/MessageContainer.vue | 10 +++----
 app/components/chat/Typing.vue           | 34 ------------------------
 app/pages/index.vue                      |  2 +-
 4 files changed, 26 insertions(+), 40 deletions(-)
 create mode 100644 .vscode/settings.json
 delete mode 100644 app/components/chat/Typing.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..a9d9597
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,20 @@
+{
+  "todo-tree.tree.scanMode": "workspace only",
+  "todo-tree.tree.disableCompactFolders": false,
+  "todo-tree.tree.showCountsInTree": false,
+  "todo-tree.tree.showBadges": true,
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
+  "tailwindCSS.classAttributes": ["class", "ui"],
+  "tailwindCSS.experimental.classRegex": [
+    ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ],
+  "i18n-ally.localesPaths": [
+    "locales"
+  ],
+  "i18n-ally.keystyle": "nested"
+}
diff --git a/app/components/chat/MessageContainer.vue b/app/components/chat/MessageContainer.vue
index 1551f68..d1c507d 100644
--- a/app/components/chat/MessageContainer.vue
+++ b/app/components/chat/MessageContainer.vue
@@ -14,8 +14,8 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
 </script>
 
 <template>
-  <div v-if="!isArthur" class="group flex flex-col gap-4">
-    <div class="flex flex-col-reverse gap-4 md:flex-row-reverse items-end">
+  <div v-if="!isArthur" class="group flex flex-col gap-2">
+    <div class="flex flex-col-reverse md:flex-row-reverse items-end">
       <UCard
         variant="solid"
         class="rounded-xl mt-1 bg-sky-500 md:max-w-3/4 text-white font-medium"
@@ -24,12 +24,12 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
         {{ t(message.content || '') }}
       </UCard>
     </div>
-    <div class="opacity-0 group-hover:opacity-80 duration-500 flex text-sm italic justify-end">
+    <div class="opacity-0 group-hover:opacity-80 duration-500 flex text-xs italic justify-end">
       {{ formatted }}
     </div>
   </div>
   <div v-else class="group space-y-2">
-    <div class="flex flex-col-reverse gap-4 items-start md:flex-row-reverse">
+    <div class="flex flex-col-reverse gap-2 items-start md:flex-row-reverse">
       <UCard
         v-if="message.state === ChatState.LOADING && message.fetchStates && message.fetchStates.length > 0"
         variant="soft"
@@ -83,7 +83,7 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
         <span class="md:hidden">Arthur DANJOU</span>
       </div>
     </div>
-    <div class="opacity-0 group-hover:opacity-80 duration-500 flex text-sm italic justify-start ml-12">
+    <div class="opacity-0 group-hover:opacity-80 duration-500 flex text-xs italic justify-start ml-12">
       {{ formatted }}
     </div>
   </div>
diff --git a/app/components/chat/Typing.vue b/app/components/chat/Typing.vue
deleted file mode 100644
index a4f3986..0000000
--- a/app/components/chat/Typing.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-const children = ref<HTMLElement[]>([])
-const shown = ref<HTMLElement[]>([])
-
-const container = ref<HTMLElement | null>(null)
-
-onMounted(async () => {
-  if (!container.value)
-    return
-
-  children.value = Array.from(container.value.children) as HTMLElement[]
-
-  for (const child of children.value) {
-    shown.value.push(child)
-    await new Promise(resolve => setTimeout(resolve, 400))
-  }
-})
-</script>
-
-<template>
-  <div>
-    <div ref="container" class="hidden">
-      <slot />
-    </div>
-    <div>
-      <component
-        :is="el.tagName.toLowerCase()"
-        v-for="(el, index) in shown"
-        :key="index"
-        v-html="el.innerHTML"
-      />
-    </div>
-  </div>
-</template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 742aec2..7bf8999 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -38,7 +38,7 @@ watch(
       }"
     />
     <ChatMain />
-    <div ref="parents" class="space-y-8 my-16 md:my-32">
+    <div ref="parents" class="space-y-4 my-32">
       <ChatMessageContainer
         v-motion
         :initial="{