refactor: use design components for package sidebar

essenmitsosse · essenmitsosse · commit 1bfa878a047a · 2026-02-06T04:37:10.000+01:00
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
@@ -59,7 +59,7 @@ const props = withDefaults(
     v-else
     class="group inline-flex gap-x-1 items-center justify-center"
     :class="{
-      'text-fg underline-offset-4 underline decoration-1 decoration-fg/50 hover:(no-underline text-fg/80) transition-colors duration-200':
+      'text-fg underline-offset-[0.2rem] underline decoration-1 decoration-fg/50 hover:(no-underline text-fg/80) transition-colors duration-200':
         variant === 'link',
       'gap-x-1 font-mono border border-border rounded-md transition-all duration-200 aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
         variant !== 'link',
diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
@@ -81,12 +81,9 @@ const sortedOptionalDependencies = computed(() => {
           :key="dep"
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
-          <NuxtLink
-            :to="{ name: 'package', params: { package: dep.split('/') } }"
-            class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0 flex-1"
-          >
+          <LinkBase :to="{ name: 'package', params: { package: dep.split('/') } }">
             {{ dep }}
-          </NuxtLink>
+          </LinkBase>
           <span class="flex items-center gap-1 max-w-[40%]">
             <span
               v-if="outdatedDeps[dep]"
@@ -97,7 +94,7 @@ const sortedOptionalDependencies = computed(() => {
             >
               <span class="i-carbon:warning-alt w-3 h-3" />
             </span>
-            <NuxtLink
+            <LinkBase
               v-if="getVulnerableDepInfo(dep)"
               :to="{
                 name: 'package',
@@ -106,33 +103,33 @@ const sortedOptionalDependencies = computed(() => {
               class="shrink-0"
               :class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(dep)!.counts)]"
               :title="`${getVulnerableDepInfo(dep)!.counts.total} vulnerabilities`"
+              iconclass="i-carbon:security"
             >
-              <span class="i-carbon:security w-3 h-3" aria-hidden="true" />
               <span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
-            </NuxtLink>
-            <NuxtLink
+            </LinkBase>
+            <LinkBase
               v-if="getDeprecatedDepInfo(dep)"
               :to="{
                 name: 'package',
                 params: { package: [...dep.split('/'), 'v', getDeprecatedDepInfo(dep)!.version] },
               }"
               class="shrink-0 text-purple-500"
               :title="getDeprecatedDepInfo(dep)!.message"
+              iconclass="i-carbon:warning-hex"
             >
-              <span class="i-carbon-warning-hex w-3 h-3" aria-hidden="true" />
               <span class="sr-only">{{ $t('package.deprecated.label') }}</span>
-            </NuxtLink>
-            <NuxtLink
+            </LinkBase>
+            <LinkBase
               :to="{
                 name: 'package',
                 params: { package: [...dep.split('/'), 'v', version] },
               }"
-              class="font-mono text-xs text-end truncate"
+              class="truncate"
               :class="getVersionClass(outdatedDeps[dep])"
               :title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep], $t) : version"
             >
               {{ version }}
-            </NuxtLink>
+            </LinkBase>
             <span v-if="outdatedDeps[dep]" class="sr-only">
               ({{ getOutdatedTooltip(outdatedDeps[dep], $t) }})
             </span>
@@ -173,33 +170,29 @@ const sortedOptionalDependencies = computed(() => {
           class="flex items-center justify-between py-1 text-sm gap-1 min-w-0"
         >
           <div class="flex items-center gap-1 min-w-0 flex-1">
-            <NuxtLink
+            <LinkBase
               :to="{
                 name: 'package',
                 params: { package: peer.name.split('/') },
               }"
-              class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate"
+              class="truncate"
             >
               {{ peer.name }}
-            </NuxtLink>
-            <span
-              v-if="peer.optional"
-              class="px-1 py-0.5 font-mono text-[10px] text-fg-subtle bg-bg-muted border border-border rounded shrink-0"
-              :title="$t('package.dependencies.optional')"
-            >
+            </LinkBase>
+            <TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')">
               {{ $t('package.dependencies.optional') }}
-            </span>
+            </TagStatic>
           </div>
-          <NuxtLink
+          <LinkBase
             :to="{
               name: 'package',
               params: { package: [...peer.name.split('/'), 'v', peer.version] },
             }"
-            class="font-mono text-xs text-fg-subtle max-w-[40%] truncate"
+            class="truncate"
             :title="peer.version"
           >
             {{ peer.version }}
-          </NuxtLink>
+          </LinkBase>
         </li>
       </ul>
       <button
@@ -238,28 +231,25 @@ const sortedOptionalDependencies = computed(() => {
           :key="dep"
           class="flex items-center justify-between py-1 text-sm gap-2"
         >
-          <NuxtLink
-            :to="{ name: 'package', params: { package: dep.split('/') } }"
-            class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0 flex-1"
-          >
+          <LinkBase :to="{ name: 'package', params: { package: dep.split('/') } }" class="truncate">
             {{ dep }}
-          </NuxtLink>
-          <NuxtLink
+          </LinkBase>
+          <LinkBase
             :to="{
               name: 'package',
               params: { package: [...dep.split('/'), 'v', version] },
             }"
-            class="font-mono text-xs text-fg-subtle max-w-[40%] text-end truncate"
+            class="truncate"
             :title="version"
           >
             {{ version }}
-          </NuxtLink>
+          </LinkBase>
         </li>
       </ul>
       <button
         v-if="sortedOptionalDependencies.length > 10 && !optionalDepsExpanded"
         type="button"
-        class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
+        class="mt-2 truncate"
         @click="optionalDepsExpanded = true"
       >
         {{
diff --git a/app/components/Package/InstallScripts.vue b/app/components/Package/InstallScripts.vue
@@ -72,12 +72,12 @@ const isExpanded = shallowRef(false)
           :key="dep"
           class="flex items-center justify-between py-0.5 text-sm gap-2"
         >
-          <NuxtLink
+          <LinkBase
             :to="{ name: 'package', params: { package: dep.split('/') } }"
             class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
           >
             {{ dep }}
-          </NuxtLink>
+          </LinkBase>
           <span class="flex items-center gap-1">
             <span
               v-if="
diff --git a/app/components/Package/Maintainers.vue b/app/components/Package/Maintainers.vue
@@ -183,7 +183,7 @@ watch(
         class="flex items-center justify-between gap-2"
       >
         <div class="flex items-center gap-2 min-w-0">
-          <NuxtLink
+          <LinkBase
             v-if="maintainer.name"
             :to="{
               name: '~username',
@@ -192,7 +192,7 @@ watch(
             class="link-subtle font-mono text-sm shrink-0"
           >
             ~{{ maintainer.name }}
-          </NuxtLink>
+          </LinkBase>
           <span v-else class="font-mono text-sm text-fg-muted">{{ maintainer.email }}</span>
 
           <!-- Access source badges -->
@@ -214,10 +214,10 @@ watch(
         </div>
 
         <!-- Remove button (only when can manage and not self) -->
-        <button
+        <ButtonBase
           v-if="canManageOwners && maintainer.name && maintainer.name !== npmUser"
           type="button"
-          class="p-1 text-fg-subtle hover:text-red-400 transition-colors duration-200 shrink-0 rounded focus-visible:outline-accent/70"
+          class="hover:text-red-400"
           :aria-label="
             $t('package.maintainers.remove_owner', {
               name: maintainer.name,
@@ -226,15 +226,13 @@ watch(
           @click="handleRemoveOwner(maintainer.name)"
         >
           <span class="i-carbon-close w-3.5 h-3.5" aria-hidden="true" />
-        </button>
+        </ButtonBase>
       </li>
     </ul>
 
     <!-- Show more/less toggle (only when not managing and there are hidden maintainers) -->
-    <button
+    <ButtonBase
       v-if="!canManageOwners && hiddenMaintainersCount > 0"
-      type="button"
-      class="mt-2 text-xs text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
       @click="showAllMaintainers = !showAllMaintainers"
     >
       {{
@@ -244,7 +242,7 @@ watch(
               count: hiddenMaintainersCount,
             })
       }}
-    </button>
+    </ButtonBase>
 
     <!-- Add owner form (only when can manage) -->
     <div v-if="canManageOwners" class="mt-3">
@@ -262,31 +260,24 @@ watch(
             v-bind="noCorrect"
             class="flex-1 px-2 py-1 font-mono text-sm bg-bg-subtle border border-border rounded text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-border-hover focus-visible:outline-accent/70"
           />
-          <button
-            type="submit"
-            :disabled="!newOwnerUsername.trim() || isAdding"
-            class="px-2 py-1 font-mono text-xs text-bg bg-fg rounded transition-all duration-200 hover:bg-fg/90 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-accent/70"
-          >
+          <ButtonBase type="submit" :disabled="!newOwnerUsername.trim() || isAdding">
             {{ isAdding ? '…' : $t('package.maintainers.add_button') }}
-          </button>
-          <button
-            type="button"
-            class="p-1 text-fg-subtle hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70"
+          </ButtonBase>
+          <ButtonBase
             :aria-label="$t('package.maintainers.cancel_add')"
             @click="showAddOwner = false"
-          >
-            <span class="i-carbon-close w-4 h-4" aria-hidden="true" />
-          </button>
+            iconclass="i-carbon-close"
+          />
         </form>
       </div>
-      <button
+      <ButtonBase
         v-else
         type="button"
         class="w-full px-3 py-1.5 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
         @click="showAddOwner = true"
       >
         {{ $t('package.maintainers.add_owner') }}
-      </button>
+      </ButtonBase>
     </div>
   </CollapsibleSection>
 </template>
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
