refactor: streamline component structure and enhance accessibility features

app/app.vue

@@ -28,28 +28,26 @@ const head = useLocaleHead()
     </Html>
     <NuxtLoadingIndicator color="#808080" />
     <AppBackground />
-    <UContainer>
-      <ChatCommandPalette
-        v-motion
-        :active="messages.length > 0"
-        :mode="route.path.includes('/projects') || route.path.includes('/writings') || route.path.includes('/canva') ? 'work' : 'chat'"
-        :initial="{
-          opacity: 0,
-          y: 200,
-          scale: 0.6,
-        }"
-        :enter="{
-          opacity: 1,
-          y: 0,
-          scale: 1,
-          transition: {
-            delay: route.path === '/' ? 1800 : 0,
-            ease: 'easeIn',
-          },
-        }"
-      />
-      <NuxtPage />
-    </UContainer>
+    <ChatCommandPalette
+      v-motion
+      :active="messages.length > 0"
+      :mode="route.path.includes('/projects') || route.path.includes('/writings') || route.path.includes('/canva') ? 'work' : 'chat'"
+      :initial="{
+        opacity: 0,
+        y: 200,
+        scale: 0.6,
+      }"
+      :enter="{
+        opacity: 1,
+        y: 0,
+        scale: 1,
+        transition: {
+          delay: route.path === '/' ? 1800 : 0,
+          ease: 'easeIn',
+        },
+      }"
+    />
+    <NuxtPage />
     <SpeedInsights />
     <Analytics />
   </UApp>

app/components/chat/CommandPalette.vue

@@ -46,8 +46,9 @@ defineShortcuts({
 })
 
 const activeElement = useActiveElement()
-watch(activeElement, () => {
-  if (activeElement.value instanceof HTMLElement && ['INPUT', 'TEXTAREA'].includes(activeElement.value.tagName)) {
+watch(openMessageModal, async () => {
+  await nextTick()
+  if (activeElement.value instanceof HTMLElement) {
     activeElement.value.blur()
   }
 })
@@ -201,6 +202,7 @@ function goHome() {
           />
         </UTooltip>
         <UTooltip
+          v-if="router.currentRoute.value.name !== 'canva'"
           :text="t('palette.tooltip.canva')"
           arrow
           :content="toolTipContent"

app/components/content/ProseH2.vue

@@ -14,7 +14,7 @@ const generate = computed(() => props.id && ((typeof headings?.anchorLinks === '
     <a
       v-if="id && generate"
       :href="`#${id}`"
-      class="text-xl font-bold border-transparent border-b-2 hover:border-black dark:hover:border-white duration-300"
+      class="text-xl font-bold decoration-neutral-300 dark:decoration-neutral-700 underline-offset-2 hover:decoration-black dark:hover:decoration-white duration-300"
     >
       <slot />
     </a>

app/components/content/ProseH3.vue

@@ -14,7 +14,7 @@ const generate = computed(() => props.id && ((typeof headings?.anchorLinks === '
     <a
       v-if="id && generate"
       :href="`#${id}`"
-      class="text-lg font-semibold text-neutral-800 dark:text-neutral-200"
+      class="text-lg font-semibold text-neutral-800 dark:text-neutral-200 decoration-neutral-300 dark:decoration-neutral-700 underline-offset-2 hover:decoration-black dark:hover:decoration-white duration-300"
     >
       <slot />
     </a>

app/components/post/Footer.vue

@@ -3,7 +3,7 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <div class="mt-8 p-8 border bg-white/70 dark:bg-black/70 border-gray-200 dark:border-neutral-700 rounded-md">
+  <UCard class="mt-8 shadow-sm bg-white dark:bg-neutral-900">
     <NuxtImg
       src="/arthur pro.webp"
       alt="Arthur Danjou"
@@ -42,5 +42,5 @@ const { t } = useI18n()
         <br> <br>
       </template>
     </i18n-t>
-  </div>
+  </UCard>
 </template>

app/pages/index.vue

@@ -25,7 +25,7 @@ watch(
 </script>
 
 <template>
-  <main>
+  <UContainer>
     <ChatMain />
     <div ref="parents" class="space-y-4 md:my-32 mb-16">
       <ChatMessageContainer
@@ -95,5 +95,5 @@ watch(
         }"
       />
     </div>
-  </main>
+  </UContainer>
 </template>

app/pages/projects/[slug].vue

@@ -3,8 +3,6 @@ const route = useRoute()
 const { data: project } = await useAsyncData(`projects/${route.params.slug}`, () =>
   queryCollection('projects').path(`/projects/${route.params.slug}`).first())
 
-const { t } = useI18n()
-
 useSeoMeta({
   title: project.value?.title,
   description: project.value?.description,
@@ -13,20 +11,7 @@ useSeoMeta({
 </script>
 
 <template>
-  <main v-if="project" class="mt-8 md:mt-16 md:mb-32 mb-20">
-    <div class="flex">
-      <NuxtLinkLocale
-        class="flex items-center gap-2 mb-8 group text-sm hover:text-black dark:hover:text-white duration-300"
-        to="/canva"
-      >
-        <UIcon
-          class="group-hover:-translate-x-1 transform duration-300"
-          name="i-ph-arrow-left-duotone"
-          size="20"
-        />
-        {{ t('post.back') }}
-      </NuxtLinkLocale>
-    </div>
+  <main v-if="project" class="mt-8 md:mt-16 md:mb-36 mb-20">
     <PostAlert class="mb-8" />
     <div>
       <div class="flex items-end justify-between gap-2 flex-wrap">

app/pages/writings/[slug].vue

@@ -3,8 +3,6 @@ const route = useRoute()
 const { data: writing } = await useAsyncData(`writings/${route.params.slug}`, () =>
   queryCollection('writings').path(`/writings/${route.params.slug}`).first())
 
-const { t } = useI18n()
-
 useSeoMeta({
   title: writing.value?.title,
   description: writing.value?.description,
@@ -13,20 +11,7 @@ useSeoMeta({
 </script>
 
 <template>
-  <main v-if="writing" class="mt-8 md:mt-16 md:mb-32 mb-20">
-    <div class="flex">
-      <NuxtLinkLocale
-        class="flex items-center gap-2 mb-8 group text-sm hover:text-black dark:hover:text-white duration-300"
-        to="/canva"
-      >
-        <UIcon
-          class="group-hover:-translate-x-1 transform duration-300"
-          name="i-ph-arrow-left-duotone"
-          size="20"
-        />
-        {{ t('post.back') }}
-      </NuxtLinkLocale>
-    </div>
+  <UContainer v-if="writing" class="mt-16 md:mt-16 md:mb-36 mb-22">
     <PostAlert class="mb-8" />
     <div>
       <div class="flex items-end justify-between gap-2 flex-wrap">
@@ -51,7 +36,7 @@ useSeoMeta({
       class="w-full rounded-md my-8"
     >
       <ProseImg
-        :src="`/projects/${writing.cover}`"
+        :src="`/writings/${writing.cover}`"
         label="Project cover"
       />
     </div>
@@ -66,7 +51,7 @@ useSeoMeta({
       />
     </ClientOnly>
     <PostFooter />
-  </main>
+  </UContainer>
 </template>
 
 <style scoped>