Merge branch 'main' into feat/action-bar

Author: MatteoGabriele

app/assets/main.css

@@ -114,7 +114,7 @@
 
   --badge-blue: oklch(0.579 0.191 252);
   --badge-yellow: oklch(0.588 0.183 91);
-  --badge-green: oklch(0.566 0.202 165);
+  --badge-green: oklch(0.49 0.15 161.08);
   --badge-indigo: oklch(0.457 0.24 277.023);
   --badge-purple: oklch(0.495 0.172 295);
   --badge-orange: oklch(0.67 0.185 55);

app/components/AppFooter.vue

@@ -88,13 +88,21 @@ const closeModal = () => modalRef.value?.close?.()
               </p>
               <ul class="mb-8 flex flex-col gap-2">
                 <li class="flex gap-2 items-center">
-                  <kbd class="kbd">.</kbd>
-                  <span>{{ $t('shortcuts.open_code_view') }}</span>
+                  <kbd class="kbd">m</kbd>
+                  <span>{{ $t('shortcuts.open_main') }}</span>
                 </li>
                 <li class="flex gap-2 items-center">
                   <kbd class="kbd">d</kbd>
                   <span>{{ $t('shortcuts.open_docs') }}</span>
                 </li>
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">.</kbd>
+                  <span>{{ $t('shortcuts.open_code_view') }}</span>
+                </li>
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">f</kbd>
+                  <span>{{ $t('shortcuts.open_diff') }}</span>
+                </li>
                 <li class="flex gap-2 items-center">
                   <kbd class="kbd">c</kbd>
                   <span>{{ $t('shortcuts.compare_from_package') }}</span>

app/components/BuildEnvironment.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { BuildInfo } from '#shared/types'
-
 const { footer = false, buildInfo: buildInfoProp } = defineProps<{
   footer?: boolean
   buildInfo?: BuildInfo

app/components/Code/DirectoryListing.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { PackageFileTree } from '#shared/types'
 import type { RouteLocationRaw } from 'vue-router'
 import type { RouteNamedMap } from 'vue-router/auto-routes'
 import { ADDITIONAL_ICONS, getFileIcon } from '~/utils/file-icons'

app/components/Code/FileTree.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { PackageFileTree } from '#shared/types'
 import type { RouteLocationRaw } from 'vue-router'
 import type { RouteNamedMap } from 'vue-router/auto-routes'
 import { ADDITIONAL_ICONS, getFileIcon } from '~/utils/file-icons'

app/components/Code/MobileTreeDrawer.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { PackageFileTree } from '#shared/types'
 import type { RouteNamedMap } from 'vue-router/auto-routes'
 
 defineProps<{
@@ -29,7 +28,7 @@ watch(isOpen, open => (isLocked.value = open))
   <!-- Toggle button (mobile only) -->
   <ButtonBase
     variant="primary"
-    class="md:hidden fixed bottom-4 inset-ie-4 z-45"
+    class="md:hidden fixed bottom-9 inset-ie-4 z-45"
     :aria-label="$t('code.toggle_tree')"
     @click="isOpen = !isOpen"
     :classicon="isOpen ? 'i-lucide:x' : 'i-lucide:folder'"

app/components/Compare/FacetBarChart.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { VueUiHorizontalBar } from 'vue-data-ui/vue-ui-horizontal-bar'
-import type {
-  VueUiHorizontalBarConfig,
-  VueUiHorizontalBarDatapoint,
-  VueUiHorizontalBarDatasetItem,
-} from 'vue-data-ui'
+import type { VueUiHorizontalBarConfig, VueUiHorizontalBarDatasetItem } from 'vue-data-ui'
 import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
 import { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
 import {
@@ -230,7 +226,7 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
                   ${name}
                 </span>
                 <span class="text-base text-[var(--fg)] font-mono tabular-nums text-end">
-                  ${(datapoint as VueUiHorizontalBarDatapoint).formattedValue ?? 0}
+                  ${datapoint?.formattedValue ?? 0}
                 </span>
               </div>
             </div>

app/components/Compare/FacetCard.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { FacetValue } from '#shared/types'
-
 const props = defineProps<{
   /** Facet label */
   label: string

app/components/Compare/FacetRow.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { FacetValue } from '#shared/types'
-
 const props = defineProps<{
   /** Facet label */
   label: string

app/components/Link/Base.vue

@@ -124,7 +124,7 @@ const keyboardShortcutsEnabled = useKeyboardShortcuts()
     <kbd
       v-if="keyboardShortcutsEnabled && ariaKeyshortcuts"
       data-kbd-hint
-      class="ms-2 inline-flex items-center justify-center size-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
+      class="ms-2 hidden sm:inline-flex items-center justify-center size-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
       aria-hidden="true"
     >
       {{ ariaKeyshortcuts }}