Merge branch 'main' into main

graphieros · web-flow · commit 083cd6361519 · 2026-02-05T22:02:08.000+01:00
diff --git a/app/app.vue b/app/app.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Directions } from '@nuxtjs/i18n'
-import { useEventListener } from '@vueuse/core'
+import { useEventListener, onKeyDown, onKeyUp } from '@vueuse/core'
 import { isEditableElement } from '~/utils/input'
 
 const route = useRoute()
@@ -47,16 +47,12 @@ if (import.meta.server) {
   setJsonLd(createWebSiteSchema())
 }
 
-// Global keyboard shortcut:
-// "/" focuses search or navigates to search page
-// "?" highlights all keyboard shortcut elements
-function handleGlobalKeydown(e: KeyboardEvent) {
-  if (isEditableElement(e.target)) return
-
-  if (isKeyWithoutModifiers(e, '/')) {
+onKeyDown(
+  '/',
+  e => {
+    if (isEditableElement(e.target)) return
     e.preventDefault()
 
-    // Try to find and focus search input on current page
     const searchInput = document.querySelector<HTMLInputElement>(
       'input[type="search"], input[name="q"]',
     )
@@ -67,18 +63,29 @@ function handleGlobalKeydown(e: KeyboardEvent) {
     }
 
     router.push('/search')
-  }
+  },
+  { dedupe: true },
+)
 
-  // For "?" we check the key property directly since it's usually combined with shift
-  if (e.key === '?') {
+onKeyDown(
+  '?',
+  e => {
+    if (isEditableElement(e.target)) return
     e.preventDefault()
     showKbdHints.value = true
-  }
-}
+  },
+  { dedupe: true },
+)
 
-function handleGlobalKeyup() {
-  showKbdHints.value = false
-}
+onKeyUp(
+  '?',
+  e => {
+    if (isEditableElement(e.target)) return
+    e.preventDefault()
+    showKbdHints.value = false
+  },
+  { dedupe: true },
+)
 
 // Light dismiss fallback for browsers that don't support closedby="any" (Safari + old Chrome/Firefox)
 // https://codepen.io/paramagicdev/pen/gbYompq
@@ -99,9 +106,6 @@ function handleModalLightDismiss(e: MouseEvent) {
 }
 
 if (import.meta.client) {
-  useEventListener(document, 'keydown', handleGlobalKeydown)
-  useEventListener(document, 'keyup', handleGlobalKeyup)
-
   // Feature check for native light dismiss support via closedby="any"
   // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby
   const supportsClosedBy =
diff --git a/app/assets/main.css b/app/assets/main.css
@@ -155,6 +155,7 @@ html {
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
   scroll-padding-top: 5rem; /* Offset for fixed header - otherwise anchor headers are cutted */
+  scrollbar-gutter: stable;
 }
 
 /*
@@ -229,6 +230,10 @@ select:focus-visible {
 }
 
 /* Scrollbar styling */
+* {
+  scrollbar-color: var(--border) var(--bg);
+}
+
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
@@ -244,14 +249,13 @@ select:focus-visible {
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #404040;
+  background: var(--border-hover);
 }
 
 /* Scrollbar styling for Firefox */
 @supports not selector(::-webkit-scrollbar) {
   * {
     scrollbar-width: thin;
-    scrollbar-color: var(--border) var(--bg);
   }
 }
 
diff --git a/app/components/ColumnPicker.vue b/app/components/ColumnPicker.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ColumnConfig, ColumnId } from '#shared/types/preferences'
+import { onKeyDown } from '@vueuse/core'
 
 const props = defineProps<{
   columns: ColumnConfig[]
@@ -26,13 +27,16 @@ onClickOutside(
   },
 )
 
-// Close on Escape key
-useEventListener('keydown', event => {
-  if (event.key === 'Escape' && isOpen.value) {
+onKeyDown(
+  'Escape',
+  e => {
+    if (!isOpen.value) return
     isOpen.value = false
     buttonRef.value?.focus()
-  }
-})
+  },
+  { dedupe: true },
+)
+
 // Columns that can be toggled (name is always visible)
 const toggleableColumns = computed(() => props.columns.filter(col => col.id !== 'name'))
 
diff --git a/app/components/DependencyPathPopup.vue b/app/components/DependencyPathPopup.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { onKeyDown } from '@vueuse/core'
+import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component'
+
 defineProps<{
   /** Dependency path from root to vulnerable package (readonly from VulnerabilityTreeResult) */
   path: readonly string[]
@@ -17,13 +20,16 @@ onClickOutside(popupEl, () => {
   if (isOpen.value) closePopup()
 })
 
-// Close popup on ESC or scroll
-function handleKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape') closePopup()
-}
+onKeyDown(
+  'Escape',
+  e => {
+    e.preventDefault()
+    closePopup()
+  },
+  { dedupe: true, target: popupEl },
+)
 
-useEventListener(document, 'keydown', handleKeydown)
-useEventListener('scroll', closePopup, true)
+useEventListener('scroll', closePopup, { passive: true })
 
 function togglePopup(event: MouseEvent) {
   if (isOpen.value) {
@@ -77,34 +83,36 @@ function parsePackageString(pkg: string): { name: string; version: string } {
       class="fixed z-[100] bg-bg-elevated border border-border rounded-lg shadow-xl p-3 min-w-64 max-w-sm"
       :style="getPopupStyle()"
     >
-      <ul class="list-none m-0 p-0 space-y-0.5">
-        <li
-          v-for="(pathItem, idx) in path"
-          :key="idx"
-          class="font-mono text-xs"
-          :style="{ paddingLeft: `${idx * 12}px` }"
-        >
-          <span v-if="idx > 0" class="text-fg-subtle me-1">└─</span>
-          <NuxtLink
-            :to="{
-              name: 'package',
-              params: {
-                package: [
-                  ...parsePackageString(pathItem).name.split('/'),
-                  'v',
-                  parsePackageString(pathItem).version,
-                ],
-              },
-            }"
-            class="hover:underline"
-            :class="idx === path.length - 1 ? 'text-fg font-medium' : 'text-fg-muted'"
-            @click="closePopup"
+      <UseFocusTrap :options="{ immediate: true }">
+        <ul class="list-none m-0 p-0 space-y-0.5">
+          <li
+            v-for="(pathItem, idx) in path"
+            :key="idx"
+            class="font-mono text-xs"
+            :style="{ paddingLeft: `${idx * 12}px` }"
           >
-            {{ pathItem }}
-          </NuxtLink>
-          <span v-if="idx === path.length - 1" class="ms-1 text-amber-500">⚠</span>
-        </li>
-      </ul>
+            <span v-if="idx > 0" class="text-fg-subtle me-1">└─</span>
+            <NuxtLink
+              :to="{
+                name: 'package',
+                params: {
+                  package: [
+                    ...parsePackageString(pathItem).name.split('/'),
+                    'v',
+                    parsePackageString(pathItem).version,
+                  ],
+                },
+              }"
+              class="hover:underline"
+              :class="idx === path.length - 1 ? 'text-fg font-medium' : 'text-fg-muted'"
+              @click="closePopup"
+            >
+              {{ pathItem }}
+            </NuxtLink>
+            <span v-if="idx === path.length - 1" class="ms-1 text-amber-500">⚠</span>
+          </li>
+        </ul>
+      </UseFocusTrap>
     </div>
   </div>
 </template>
diff --git a/app/components/Readme.vue b/app/components/Readme.vue
@@ -85,6 +85,8 @@ function handleClick(event: MouseEvent) {
   /* Contain all children */
   overflow: hidden;
   min-width: 0;
+  /* Contain all children z-index values inside this container */
+  isolation: isolate;
 }
 
 /* README headings - styled by visual level (data-level), not semantic level */
@@ -402,6 +404,8 @@ function handleClick(event: MouseEvent) {
   display: revert-layer;
   border-radius: 8px;
   margin: 1rem 0;
+  position: relative;
+  z-index: 1;
 }
 
 .readme :deep(video) {
diff --git a/app/components/ReadmeTocDropdown.vue b/app/components/ReadmeTocDropdown.vue
@@ -69,7 +69,7 @@ function handleScroll(event: Event) {
   }
   close()
 }
-useEventListener('scroll', handleScroll, true)
+useEventListener('scroll', handleScroll, { passive: true })
 
 // Generate unique ID for accessibility
 const inputId = useId()
diff --git a/app/composables/useRepoMeta.ts b/app/composables/useRepoMeta.ts
@@ -566,43 +566,18 @@ const tangledAdapter: ProviderAdapter = {
   },
 
   async fetchMeta(cachedFetch, ref, links, options = {}) {
-    // Tangled doesn't have a public JSON API, but we can scrape the star count
-    // from the HTML page (it's in the hx-post URL as countHint=N)
     try {
-      const { data: html } = await cachedFetch<string>(
-        `https://tangled.org/${ref.owner}/${ref.repo}`,
-        {
-          headers: { 'User-Agent': 'npmx', 'Accept': 'text/html', ...options.headers },
-          ...options,
-        },
+      const { data } = await cachedFetch<{ stars: number; forks: number }>(
+        `/api/atproto/tangled-stats/${ref.owner}/${ref.repo}`,
+        options,
         REPO_META_TTL,
       )
-      // Extracts the at-uri used in atproto
-      const atUriMatch = html.match(/data-star-subject-at="([^"]+)"/)
-      // Extract star count from: hx-post="/star?subject=...&countHint=23"
-      const starMatch = html.match(/countHint=(\d+)/)
-      //We'll set the stars from tangled's repo page and may override it with constellation if successful
-      let stars = starMatch?.[1] ? parseInt(starMatch[1], 10) : 0
-      let forks = 0
-      const atUri = atUriMatch?.[1]
-
-      if (atUri) {
-        try {
-          const constellation = new Constellation(cachedFetch)
-          //Get counts of records that reference this repo in the atmosphere using constellation
-          const { data: allLinks } = await constellation.getAllLinks(atUri)
-          stars = allLinks.links['sh.tangled.feed.star']?.['.subject']?.distinct_dids ?? stars
-          forks = allLinks.links['sh.tangled.repo']?.['.source']?.distinct_dids ?? stars
-        } catch {
-          //failing silently since this is just an enhancement to the information already showing
-        }
-      }
 
       return {
         provider: 'tangled',
         url: links.repo,
-        stars,
-        forks,
+        stars: data.stars,
+        forks: data.forks,
         links,
       }
     } catch {
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
@@ -1344,23 +1344,23 @@ onKeyStroke(
 @media (min-width: 1024px) {
   .sidebar-scroll {
     scrollbar-gutter: stable;
-    scrollbar-width: none;
+    scrollbar-width: 8px;
+    scrollbar-color: transparent transparent;
   }
 
   .sidebar-scroll::-webkit-scrollbar {
-    width: 0;
-    height: 0;
+    width: 8px;
+    height: 8px;
   }
 
-  .sidebar-scroll:hover,
-  .sidebar-scroll:focus-within {
-    scrollbar-width: auto;
+  .sidebar-scroll::-webkit-scrollbar-track,
+  .sidebar-scroll::-webkit-scrollbar-thumb {
+    background: transparent;
   }
 
-  .sidebar-scroll:hover::-webkit-scrollbar,
-  .sidebar-scroll:focus-within::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+  .sidebar-scroll:hover,
+  .sidebar-scroll:focus-within {
+    scrollbar-color: var(--border) transparent;
   }
 
   .sidebar-scroll:hover::-webkit-scrollbar-thumb,
diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json
diff --git a/lunaria/files/de-DE.json b/lunaria/files/de-DE.json
diff --git a/nuxt.config.ts b/nuxt.config.ts
diff --git a/server/api/atproto/tangled-stats/[owner]/[...repo].ts b/server/api/atproto/tangled-stats/[owner]/[...repo].ts

Original file line number	Diff line number	Diff line change
`@@ -155,6 +155,7 @@ html {`
`155`	`155`	`-moz-osx-font-smoothing: grayscale;`
`156`	`156`	`text-rendering: optimizeLegibility;`
`157`	`157`	`scroll-padding-top: 5rem; /* Offset for fixed header - otherwise anchor headers are cutted */`
	`158`	`+ scrollbar-gutter: stable;`
`158`	`159`	`}`
`159`	`160`
`160`	`161`	`/*`
`@@ -229,6 +230,10 @@ select:focus-visible {`
`229`	`230`	`}`
`230`	`231`
`231`	`232`	`/* Scrollbar styling */`
	`233`	`+* {`
	`234`	`+ scrollbar-color: var(--border) var(--bg);`
	`235`	`+}`
	`236`	`+`
`232`	`237`	`::-webkit-scrollbar {`
`233`	`238`	`width: 8px;`
`234`	`239`	`height: 8px;`
`@@ -244,14 +249,13 @@ select:focus-visible {`
`244`	`249`	`}`
`245`	`250`
`246`	`251`	`::-webkit-scrollbar-thumb:hover {`
`247`		`- background: #404040;`
	`252`	`+ background: var(--border-hover);`
`248`	`253`	`}`
`249`	`254`
`250`	`255`	`/* Scrollbar styling for Firefox */`
`251`	`256`	`@supports not selector(::-webkit-scrollbar) {`
`252`	`257`	`* {`
`253`	`258`	`scrollbar-width: thin;`
`254`		`- scrollbar-color: var(--border) var(--bg);`
`255`	`259`	`}`
`256`	`260`	`}`
`257`	`261`
Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,7 @@ function handleScroll(event: Event) {`
`69`	`69`	`}`
`70`	`70`	`close()`
`71`	`71`	`}`
`72`		`-useEventListener('scroll', handleScroll, true)`
	`72`	`+useEventListener('scroll', handleScroll, { passive: true })`
`73`	`73`
`74`	`74`	`// Generate unique ID for accessibility`
`75`	`75`	`const inputId = useId()`