From a6e3d4f57fedf3723c3d0e9a9a91c54fceaecfd8 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Wed, 3 Sep 2025 13:52:57 +0200
Subject: [PATCH] feat: improve CommandPalette UI layout and enhance
 MessageContainer styling for better visibility

---
 app/components/chat/CommandPalette.vue   |  6 +++--
 app/components/chat/MessageContainer.vue |  4 ++--
 app/components/tool/Activity.vue         | 30 ++++++++++++------------
 app/pages/index.vue                      |  2 +-
 4 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/app/components/chat/CommandPalette.vue b/app/components/chat/CommandPalette.vue
index 2e336f3..b549586 100644
--- a/app/components/chat/CommandPalette.vue
+++ b/app/components/chat/CommandPalette.vue
@@ -68,8 +68,10 @@ const commandPaletteUi = {
             :disabled="loading"
           >
             <template #trailing>
-              <UKbd value="meta" color="info" />
-              <UKbd value="enter" color="info" />
+              <div class="hidden md:flex gap-1">
+                <UKbd value="meta" color="info" />
+                <UKbd value="enter" color="info" />
+              </div>
             </template>
           </UButton>
 
diff --git a/app/components/chat/MessageContainer.vue b/app/components/chat/MessageContainer.vue
index d1c507d..b021953 100644
--- a/app/components/chat/MessageContainer.vue
+++ b/app/components/chat/MessageContainer.vue
@@ -24,7 +24,7 @@ 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-xs italic justify-end">
+    <div class="text-muted opacity-0 group-hover:opacity-80 duration-500 flex text-xs italic justify-end">
       {{ formatted }}
     </div>
   </div>
@@ -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-xs italic justify-start ml-12">
+    <div class="text-muted opacity-0 group-hover:opacity-80 duration-500 flex text-xs italic justify-start ml-12">
       {{ formatted }}
     </div>
   </div>
diff --git a/app/components/tool/Activity.vue b/app/components/tool/Activity.vue
index e7ce939..0782103 100644
--- a/app/components/tool/Activity.vue
+++ b/app/components/tool/Activity.vue
@@ -75,13 +75,8 @@ const getActivity = computed(() => {
     </div>
     <div v-if="getActivity" class="space-y-4">
       <div v-if="getActivity" class="prose dark:prose-invert flex items-center gap-2">
-        <div>
-          {{ isActive ? t('tool.activity.working') : t('tool.activity.idling', {
-            editor: getActivity.name,
-          }) }}
-        </div>
         <UTooltip :text="isActive ? t('tool.activity.tooltip.online') : t('tool.activity.tooltip.idling')">
-          <div class="relative flex h-3 w-3">
+          <div class="relative flex h-3 w-3 mx-1">
             <div
               v-if="isActive"
               class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"
@@ -92,6 +87,11 @@ const getActivity = computed(() => {
             />
           </div>
         </UTooltip>
+        <div>
+          {{ isActive ? t('tool.activity.working') : t('tool.activity.idling', {
+            editor: getActivity.name,
+          }) }}
+        </div>
       </div>
       <ClientOnly>
         <UCard v-if="getActivity" variant="outline" class="md:max-w-1/2 m-1 shadow-sm" :ui="{ body: 'flex gap-8 items-center' }">
@@ -128,15 +128,6 @@ const getActivity = computed(() => {
       </ClientOnly>
     </div>
     <div v-else class="flex md:items-start gap-2">
-      <i18n-t
-        keypath="tool.activity.offline"
-        tag="p"
-        class="not-prose"
-      >
-        <template #maths>
-          <i>{{ t('maths') }}</i>
-        </template>
-      </i18n-t>
       <UTooltip :text="t('tool.activity.tooltip.offline')">
         <div class="relative flex h-3 w-3 mt-2">
           <div
@@ -144,6 +135,15 @@ const getActivity = computed(() => {
           />
         </div>
       </UTooltip>
+      <i18n-t
+        keypath="tool.activity.offline"
+        tag="p"
+        class="not-prose"
+      >
+        <template #maths>
+          <i>{{ t('tool.activity.maths') }}</i>
+        </template>
+      </i18n-t>
     </div>
   </section>
 </template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 7bf8999..049d28f 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -20,7 +20,7 @@ watch(
 </script>
 
 <template>
-  <main class="!max-w-none">
+  <main>
     <ChatCommandPalette
       v-motion
       :initial="{