Merge branch 'main' of https://github.com/graphieros/npmx.dev

Author: graphieros

app/components/AppHeader.vue

@@ -26,7 +26,7 @@ withDefaults(
       <span v-else class="w-1" />
 
       <ul class="flex items-center gap-4 sm:gap-6 list-none m-0 p-0">
-        <li class="flex">
+        <li class="flex items-center">
           <NuxtLink
             to="/search"
             class="link-subtle font-mono text-sm inline-flex items-center gap-2"
@@ -41,17 +41,23 @@ withDefaults(
             </kbd>
           </NuxtLink>
         </li>
-        <li v-if="showConnector" class="flex">
+        <li class="flex items-center">
+          <ClientOnly>
+            <SettingsMenu />
+          </ClientOnly>
+        </li>
+        <li v-if="showConnector" class="flex items-center">
           <ConnectorStatus />
         </li>
-        <li v-else class="flex">
+        <li v-else class="flex items-center">
           <a
             href="https://github.com/npmx-dev/npmx.dev"
             rel="noopener noreferrer"
             class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
+            aria-label="GitHub"
           >
-            <span class="i-carbon-logo-github w-4 h-4" />
-            <span class="hidden sm:inline">github</span>
+            <span class="i-carbon-logo-github w-4 h-4" aria-hidden="true" />
+            <span class="hidden sm:inline" aria-hidden="true">github</span>
           </a>
         </li>
       </ul>

app/components/CodeFileTree.vue

@@ -18,33 +18,18 @@ function isNodeActive(node: PackageFileTree): boolean {
   return false
 }
 
-// State for expanded directories
-const expandedDirs = ref<Set<string>>(new Set())
+const { toggleDir, isExpanded, autoExpandAncestors } = useFileTreeState(props.baseUrl)
 
 // Auto-expand directories in the current path
 watch(
   () => props.currentPath,
   path => {
-    if (!path) return
-    const parts = path.split('/')
-    for (let i = 1; i <= parts.length; i++) {
-      expandedDirs.value.add(parts.slice(0, i).join('/'))
+    if (path) {
+      autoExpandAncestors(path)
     }
   },
   { immediate: true },
 )
-
-function toggleDir(path: string) {
-  if (expandedDirs.value.has(path)) {
-    expandedDirs.value.delete(path)
-  } else {
-    expandedDirs.value.add(path)
-  }
-}
-
-function isExpanded(path: string): boolean {
-  return expandedDirs.value.has(path)
-}
 </script>
 
 <template>

app/components/ConnectorStatus.client.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
-const { isConnected, isConnecting, npmUser, error, activeOperations, hasPendingOperations } =
-  useConnector()
+const {
+  isConnected,
+  isConnecting,
+  npmUser,
+  avatar,
+  error,
+  activeOperations,
+  hasPendingOperations,
+} = useConnector()
 
 const showModal = shallowRef(false)
 const showTooltip = shallowRef(false)
@@ -41,8 +48,16 @@ const ariaLabel = computed(() => {
       @focus="showTooltip = true"
       @blur="showTooltip = false"
     >
-      <!-- Status dot -->
+      <!-- Avatar (when connected with avatar) -->
+      <img
+        v-if="isConnected && avatar"
+        :src="avatar"
+        :alt="`${npmUser}'s avatar`"
+        class="w-6 h-6 rounded-full"
+      />
+      <!-- Status dot (when not connected or no avatar) -->
       <span
+        v-else
         class="w-2.5 h-2.5 rounded-full transition-colors duration-200"
         :class="statusColor"
         aria-hidden="true"

app/components/DateTime.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+/**
+ * DateTime component that wraps NuxtTime with settings-aware relative date support.
+ * Uses the global settings to determine whether to show relative or absolute dates.
+ *
+ * Note: When relativeDates setting is enabled, the component switches between
+ * relative and absolute display based on user preference. The title attribute
+ * always shows the full date for accessibility.
+ */
+const props = withDefaults(
+  defineProps<{
+    /** The datetime value (ISO string or Date) */
+    datetime: string | Date
+    /** Override title (defaults to datetime) */
+    title?: string
+    /** Date style for absolute display */
+    dateStyle?: 'full' | 'long' | 'medium' | 'short'
+    /** Individual date parts for absolute display (alternative to dateStyle) */
+    year?: 'numeric' | '2-digit'
+    month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'
+    day?: 'numeric' | '2-digit'
+  }>(),
+  {
+    title: undefined,
+    dateStyle: undefined,
+    year: undefined,
+    month: undefined,
+    day: undefined,
+  },
+)
+
+const relativeDates = useRelativeDates()
+
+// Compute the title - always show full date for accessibility
+const titleValue = computed(() => {
+  if (props.title) return props.title
+  if (typeof props.datetime === 'string') return props.datetime
+  return props.datetime.toISOString()
+})
+</script>
+
+<template>
+  <ClientOnly>
+    <NuxtTime v-if="relativeDates" :datetime="datetime" :title="titleValue" relative />
+    <NuxtTime
+      v-else
+      :datetime="datetime"
+      :title="titleValue"
+      :date-style="dateStyle"
+      :year="year"
+      :month="month"
+      :day="day"
+    />
+    <template #fallback>
+      <NuxtTime
+        :datetime="datetime"
+        :title="titleValue"
+        :date-style="dateStyle"
+        :year="year"
+        :month="month"
+        :day="day"
+      />
+    </template>
+  </ClientOnly>
+</template>

app/components/LicenseDisplay.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { parseLicenseExpression } from '#shared/utils/spdx'
+
+const props = defineProps<{
+  license: string
+}>()
+
+const tokens = computed(() => parseLicenseExpression(props.license))
+
+const hasAnyValidLicense = computed(() => tokens.value.some(t => t.type === 'license' && t.url))
+</script>
+
+<template>
+  <span class="inline-flex items-baseline gap-x-1.5 flex-wrap gap-y-0.5">
+    <template v-for="(token, i) in tokens" :key="i">
+      <a
+        v-if="token.type === 'license' && token.url"
+        :href="token.url"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="link-subtle"
+        title="View license text on SPDX"
+      >
+        {{ token.value }}
+      </a>
+      <span v-else-if="token.type === 'license'">{{ token.value }}</span>
+      <span v-else-if="token.type === 'operator'" class="text-[0.65em]">{{ token.value }}</span>
+    </template>
+    <span
+      v-if="hasAnyValidLicense"
+      class="i-carbon-scales w-3.5 h-3.5 text-fg-subtle flex-shrink-0 inline-block self-center"
+      aria-hidden="true"
+    />
+  </span>
+</template>

app/components/MarkdownText.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 const props = defineProps<{
   text: string
+  /** When true, renders link text without the anchor tag (useful when inside another link) */
+  plain?: boolean
 }>()
 
 // Escape HTML to prevent XSS
@@ -34,6 +36,23 @@ function parseMarkdown(text: string): string {
   // Strikethrough: ~~text~~
   html = html.replace(/~~(.+?)~~/g, '<del>$1</del>')
 
+  // Links: [text](url) - only allow https, mailto
+  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, text, url) => {
+    // In plain mode, just render the link text without the anchor
+    if (props.plain) {
+      return text
+    }
+    const decodedUrl = url.replace(/&amp;/g, '&')
+    try {
+      const { protocol, href } = new URL(decodedUrl)
+      if (['https:', 'mailto:'].includes(protocol)) {
+        const safeUrl = href.replace(/"/g, '&quot;')
+        return `<a href="${safeUrl}" rel="nofollow noreferrer noopener" target="_blank">${text}</a>`
+      }
+    } catch {}
+    return `${text} (${url})`
+  })
+
   return html
 }
 

app/components/OperationsQueue.vue

@@ -92,7 +92,7 @@ function getStatusIcon(status: string): string {
     case 'approved':
       return 'i-carbon-checkmark'
     case 'running':
-      return 'i-carbon-rotate'
+      return 'i-carbon-rotate-180'
     case 'completed':
       return 'i-carbon-checkmark-filled'
     case 'failed':

app/components/OrgMembersPanel.vue

@@ -387,7 +387,7 @@ watch(lastExecutionTime, () => {
     <!-- Loading state -->
     <div v-if="isLoading && memberList.length === 0" class="p-8 text-center">
       <span
-        class="i-carbon-rotate block w-5 h-5 text-fg-muted animate-spin mx-auto"
+        class="i-carbon-rotate-180 block w-5 h-5 text-fg-muted animate-spin mx-auto"
         aria-hidden="true"
       />
       <p class="font-mono text-sm text-fg-muted mt-2">Loading members…</p>

app/components/OrgTeamsPanel.vue

@@ -327,7 +327,7 @@ watch(lastExecutionTime, () => {
     <!-- Loading state -->
     <div v-if="isLoadingTeams && teams.length === 0" class="p-8 text-center">
       <span
-        class="i-carbon-rotate block w-5 h-5 text-fg-muted animate-spin mx-auto"
+        class="i-carbon-rotate-180 block w-5 h-5 text-fg-muted animate-spin mx-auto"
         aria-hidden="true"
       />
       <p class="font-mono text-sm text-fg-muted mt-2">Loading teams…</p>
@@ -382,7 +382,7 @@ watch(lastExecutionTime, () => {
             </span>
             <span
               v-if="isLoadingUsers[teamName]"
-              class="i-carbon-rotate w-3 h-3 text-fg-muted animate-spin"
+              class="i-carbon-rotate-180 w-3 h-3 text-fg-muted animate-spin"
               aria-hidden="true"
             />
           </button>

app/components/PackageAccessControls.vue

@@ -173,7 +173,7 @@ watch(
     <!-- Loading state -->
     <div v-if="isLoadingCollaborators && collaboratorList.length === 0" class="py-4 text-center">
       <span
-        class="i-carbon-rotate block w-4 h-4 text-fg-muted animate-spin mx-auto"
+        class="i-carbon-rotate-180 block w-4 h-4 text-fg-muted animate-spin mx-auto"
         aria-hidden="true"
       />
     </div>