refactor: extract reusable button component

Author: essenmitsosse

app/components/Button/Base.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const props = defineProps<{
+  disabled?: boolean
+  /**
+   * type should never be used, because this will always be a button.
+   *
+   * If you want a link use `TagLink` instead.
+   *  */
+  type?: never
+}>()
+
+const el = ref<HTMLButtonElement | null>(null)
+
+defineExpose({
+  focus: () => el.value?.focus(),
+})
+</script>
+
+<template>
+  <button
+    ref="el"
+    class="btn"
+    :class="{
+      'opacity-50 cursor-not-allowed': disabled,
+    }"
+    type="button"
+    :disabled="disabled ? true : undefined"
+  >
+    <slot />
+  </button>
+</template>

app/components/Button/Link.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { NuxtLinkProps } from '#app'
+
+const props = defineProps<
+  {
+    /** Disabled links will be displayed as plain text */
+    disabled?: boolean
+    /**
+     * `type` should never be used, because this will always be a link.
+     *
+     * If you want a button use `TagButton` instead.
+     * */
+    type?: never
+  } &
+    /** This makes sure the link always has either `to` or `href` */
+    (Required<Pick<NuxtLinkProps, 'to'>> | Required<Pick<NuxtLinkProps, 'href'>>) &
+    NuxtLinkProps
+>()
+</script>
+
+<template>
+  <!-- This is only a placeholder implementation yet. It will probably need some additional styling, but note: A disabled link is just text. -->
+  <span v-if="disabled" class="opacity-50"><slot /></span>
+  <NuxtLink
+    v-else
+    class="btn"
+    :class="
+      {
+        'opacity-50 cursor-not-allowed': disabled,
+      }
+    "
+  >
+    <slot />
+  </NuxtLink>
+</template>

app/components/ColumnPicker.vue

@@ -65,18 +65,17 @@ function handleReset() {
 
 <template>
   <div class="relative">
-    <button
+    <ButtonBase
       ref="buttonRef"
-      type="button"
-      class="btn-ghost inline-flex items-center gap-1.5 px-3 py-1.5 border border-border rounded-md hover:border-border-hover focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+      class="inline-flex items-center gap-1.5 px-3 py-1.5 border border-border rounded-md hover:border-border-hover focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
       :aria-expanded="isOpen"
       aria-haspopup="true"
       :aria-controls="menuId"
       @click.stop="isOpen = !isOpen"
     >
       <span class="i-carbon-column w-4 h-4" aria-hidden="true" />
       <span class="font-mono text-sm">{{ $t('filters.columns.title') }}</span>
-    </button>
+    </ButtonBase>
 
     <Transition name="dropdown">
       <div

app/pages/@[org].vue

@@ -234,7 +234,7 @@ defineOgImageComponent('Default', {
       <p class="text-fg-muted mb-4">
         {{ error?.message ?? $t('org.page.failed_to_load') }}
       </p>
-      <NuxtLink to="/" class="btn">{{ $t('common.go_back_home') }}</NuxtLink>
+      <ButtonLink to="/">{{ $t('common.go_back_home') }}</ButtonLink>
     </div>
 
     <!-- Empty state -->

app/pages/package-code/[...path].vue

@@ -359,7 +359,7 @@ defineOgImageComponent('Default', {
     <!-- Error: no version -->
     <div v-if="!version" class="container py-20 text-center">
       <p class="text-fg-muted mb-4">{{ $t('code.version_required') }}</p>
-      <NuxtLink :to="packageRoute()" class="btn">{{ $t('code.go_to_package') }}</NuxtLink>
+      <ButtonLink :to="packageRoute()">{{ $t('code.go_to_package') }}</ButtonLink>
     </div>
 
     <!-- Loading state -->
@@ -371,7 +371,7 @@ defineOgImageComponent('Default', {
     <!-- Error state -->
     <div v-else-if="treeStatus === 'error'" class="container py-20 text-center" role="alert">
       <p class="text-fg-muted mb-4">{{ $t('code.failed_to_load_tree') }}</p>
-      <NuxtLink :to="packageRoute(version)" class="btn">{{ $t('code.back_to_package') }}</NuxtLink>
+      <ButtonLink :to="packageRoute(version)">{{ $t('code.back_to_package') }}</ButtonLink>
     </div>
 
     <!-- Main content: file tree + file viewer -->
@@ -472,15 +472,15 @@ defineOgImageComponent('Default', {
           <p class="text-fg-subtle text-sm mb-4">
             {{ $t('code.file_size_warning', { size: formatBytes(currentNode?.size ?? 0) }) }}
           </p>
-          <a
+          <ButtonLink
             :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
             target="_blank"
             rel="noopener noreferrer"
-            class="btn inline-flex items-center gap-2"
+            class="inline-flex items-center gap-2"
           >
             {{ $t('code.view_raw') }}
             <span class="i-carbon:launch w-4 h-4" />
-          </a>
+          </ButtonLink>
         </div>
 
         <!-- Loading file content -->
@@ -526,15 +526,15 @@ defineOgImageComponent('Default', {
           <div class="i-carbon:warning-alt w-8 h-8 mx-auto text-fg-subtle mb-4" />
           <p class="text-fg-muted mb-2">{{ $t('code.failed_to_load') }}</p>
           <p class="text-fg-subtle text-sm mb-4">{{ $t('code.unavailable_hint') }}</p>
-          <a
+          <ButtonLink
             :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
             target="_blank"
             rel="noopener noreferrer"
-            class="btn inline-flex items-center gap-2"
+            class="inline-flex items-center gap-2"
           >
             {{ $t('code.view_raw') }}
             <span class="i-carbon:launch w-4 h-4" />
-          </a>
+          </ButtonLink>
         </div>
 
         <!-- Directory listing (when no file selected or viewing a directory) -->

app/pages/package/[...package].vue

@@ -1151,7 +1151,7 @@ defineOgImageComponent('Package', {
       <p class="text-fg-muted mb-8">
         {{ error?.message ?? $t('package.not_found_message') }}
       </p>
-      <NuxtLink to="/" class="btn">{{ $t('common.go_back_home') }}</NuxtLink>
+      <ButtonLink to="/">{{ $t('common.go_back_home') }}</ButtonLink>
     </div>
   </main>
 </template>

app/pages/~[username]/index.vue

@@ -224,7 +224,7 @@ defineOgImageComponent('Default', {
       <p class="text-fg-muted mb-4">
         {{ error?.message ?? $t('user.page.failed_to_load') }}
       </p>
-      <NuxtLink to="/" class="btn">{{ $t('common.go_back_home') }}</NuxtLink>
+      <ButtonLink to="/">{{ $t('common.go_back_home') }}</ButtonLink>
     </div>
 
     <!-- Package list -->

app/pages/~[username]/orgs.vue

@@ -81,6 +81,8 @@ async function loadOrgs() {
   }
 }
 
+error.value = $t('header.orgs_dropdown.error')
+
 // Load on mount and when connection status changes
 watch(isOwnProfile, loadOrgs, { immediate: true })
 
@@ -154,9 +156,9 @@ defineOgImageComponent('Default', {
       <!-- Not own profile state -->
       <div v-else-if="!isOwnProfile" class="py-12 text-center">
         <p class="text-fg-muted">{{ $t('user.orgs_page.own_orgs_only') }}</p>
-        <NuxtLink :to="`/~${npmUser}/orgs`" class="btn mt-4">{{
+        <ButtonLink :to="`/~${npmUser}/orgs`" class="mt-4">{{
           $t('user.orgs_page.view_your_orgs')
-        }}</NuxtLink>
+        }}</ButtonLink>
       </div>
 
       <!-- Loading state -->
@@ -165,7 +167,7 @@ defineOgImageComponent('Default', {
       <!-- Error state -->
       <div v-else-if="error" role="alert" class="py-12 text-center">
         <p class="text-fg-muted mb-4">{{ error }}</p>
-        <button type="button" class="btn" @click="loadOrgs">{{ $t('common.try_again') }}</button>
+        <ButtonBase @click="loadOrgs">{{ $t('common.try_again') }}</ButtonBase>
       </div>
 
       <!-- Empty state -->