Merge branch 'main' into feat/reduce-motion

Author: MatteoGabriele

app/app.vue

@@ -4,6 +4,9 @@ import { useEventListener } from '@vueuse/core'
 const route = useRoute()
 const router = useRouter()
 
+// Initialize accent color before hydration to prevent flash
+initAccentOnPrehydrate()
+
 const isHomepage = computed(() => route.path === '/')
 
 useHead({

app/components/AccentColorPicker.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useAccentColor } from '~/composables/useSettings'
+
+const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
+</script>
+
+<template>
+  <div role="listbox" aria-label="Accent colors" class="flex items-center justify-between">
+    <button
+      v-for="color in accentColors"
+      :key="color.id"
+      type="button"
+      role="option"
+      :aria-selected="selectedAccentColor === color.id"
+      :aria-label="color.name"
+      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 focus-ring aria-selected:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
+      :style="{ backgroundColor: color.value }"
+      @click="setAccentColor(color.id)"
+    />
+    <button
+      type="button"
+      aria-label="Clear accent color"
+      class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 focus-ring flex items-center justify-center bg-accent-fallback"
+      @click="setAccentColor(null)"
+    >
+      <span class="i-carbon-error size-4 text-bg" aria-hidden="true" />
+    </button>
+  </div>
+</template>

app/components/AppHeader.vue

@@ -24,7 +24,7 @@ const { isConnected, npmUser } = useConnector()
           :aria-label="$t('header.home')"
           class="header-logo font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
         >
-          <span class="text-fg-subtle"><span style="letter-spacing: -0.2em">.</span>/</span>npmx
+          <span class="text-accent"><span class="-tracking-0.2em">.</span>/</span>npmx
         </NuxtLink>
         <!-- Spacer when logo is hidden -->
         <span v-else class="w-1" />

app/components/ChartModal.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+const open = defineModel<boolean>('open', { default: false })
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    open.value = false
+  }
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-opacity duration-200"
+      leave-active-class="transition-opacity duration-200"
+      enter-from-class="opacity-0"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="open"
+        class="fixed inset-0 z-50 flex items-center justify-center p-0 sm:p-4"
+        @keydown="handleKeydown"
+      >
+        <!-- Backdrop -->
+        <button
+          type="button"
+          class="absolute inset-0 bg-black/60 cursor-default"
+          aria-label="Close modal"
+          @click="open = false"
+        />
+
+        <div
+          class="relative w-full h-full sm:h-auto bg-bg sm:border sm:border-border sm:rounded-lg shadow-xl sm:max-h-[90vh] overflow-y-auto overscroll-contain sm:max-w-3xl"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="chart-modal-title"
+        >
+          <div class="p-4 sm:p-6">
+            <div class="flex items-center justify-between mb-4 sm:mb-6">
+              <h2 id="chart-modal-title" class="font-mono text-lg font-medium">
+                <slot name="title" />
+              </h2>
+              <button
+                type="button"
+                class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+                aria-label="Close"
+                @click="open = false"
+              >
+                <span class="i-carbon-close block w-5 h-5" aria-hidden="true" />
+              </button>
+            </div>
+            <div class="font-mono text-sm">
+              <slot />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>