refactor: use button and link components for code pages

Author: essenmitsosse

app/components/Code/DirectoryListing.vue

@@ -76,13 +76,14 @@ const bytesFormatter = useBytesFormatter()
           class="border-b border-border hover:bg-bg-subtle transition-colors"
         >
           <td colspan="2">
-            <NuxtLink
+            <LinkBase
               :to="getCodeRoute(parentPath || undefined)"
-              class="flex items-center gap-2 py-2 px-4 font-mono text-sm text-fg-muted hover:text-fg transition-colors"
+              class="py-2 px-4 font-mono text-sm w-full"
+              noUnderline
+              classicon="i-carbon:folder text-yellow-600"
             >
-              <span class="i-carbon:folder w-4 h-4 text-yellow-600" />
-              <span>..</span>
-            </NuxtLink>
+              <span class="w-full flex justify-self-stretch items-center gap-2"> .. </span>
+            </LinkBase>
           </td>
         </tr>
 
@@ -93,24 +94,26 @@ const bytesFormatter = useBytesFormatter()
           class="border-b border-border hover:bg-bg-subtle transition-colors"
         >
           <td colspan="2">
-            <NuxtLink
+            <LinkBase
               :to="getCodeRoute(node.path)"
-              class="flex items-center gap-2 py-2 px-4 font-mono text-sm hover:text-fg transition-colors"
-              :class="node.type === 'directory' ? 'text-fg' : 'text-fg-muted'"
+              class="py-2 px-4 font-mono text-sm w-full"
+              noUnderline
+              :classicon="
+                node.type === 'directory'
+                  ? 'i-carbon:folder text-yellow-600'
+                  : getFileIcon(node.name)
+              "
             >
-              <span
-                v-if="node.type === 'directory'"
-                class="i-carbon:folder w-4 h-4 text-yellow-600"
-              />
-              <span v-else class="w-4 h-4" :class="getFileIcon(node.name)" />
-              <span class="flex-1">{{ node.name }}</span>
-              <span
-                v-if="node.type === 'file' && node.size"
-                class="text-end font-mono text-xs text-fg-subtle"
-              >
-                {{ bytesFormatter.format(node.size) }}
+              <span class="w-full flex justify-self-stretch items-center gap-2">
+                <span class="flex-1">{{ node.name }}</span>
+                <span
+                  v-if="node.type === 'file' && node.size"
+                  class="text-end text-xs text-fg-subtle"
+                >
+                  {{ bytesFormatter.format(node.size) }}
+                </span>
               </span>
-            </NuxtLink>
+            </LinkBase>
           </td>
         </tr>
       </tbody>

app/components/Code/FileTree.vue

@@ -49,17 +49,13 @@ watch(
     <li v-for="node in tree" :key="node.path">
       <!-- Directory -->
       <template v-if="node.type === 'directory'">
-        <button
-          type="button"
-          class="w-full flex items-center gap-1.5 py-1.5 px-3 text-start font-mono text-sm transition-colors hover:bg-bg-muted"
-          :class="isNodeActive(node) ? 'text-fg' : 'text-fg-muted'"
+        <ButtonBase
+          class="w-full flex! justify-start! rounded-none! border-none!"
+          :aria-pressed="isNodeActive(node)"
           :style="{ paddingLeft: `${depth * 12 + 12}px` }"
           @click="toggleDir(node.path)"
+          :classicon="isExpanded(node.path) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right'"
         >
-          <span
-            class="w-4 h-4 shrink-0 transition-transform"
-            :class="[isExpanded(node.path) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right']"
-          />
           <span
             class="w-4 h-4 shrink-0"
             :class="
@@ -69,7 +65,7 @@ watch(
             "
           />
           <span class="truncate">{{ node.name }}</span>
-        </button>
+        </ButtonBase>
         <CodeFileTree
           v-if="isExpanded(node.path) && node.children"
           :tree="node.children"
@@ -82,15 +78,16 @@ watch(
 
       <!-- File -->
       <template v-else>
-        <NuxtLink
+        <LinkBase
+          variant="button-secondary"
           :to="getFileRoute(node.path)"
-          class="flex items-center gap-1.5 py-1.5 px-3 font-mono text-sm transition-colors hover:bg-bg-muted"
-          :class="currentPath === node.path ? 'bg-bg-muted text-fg' : 'text-fg-muted'"
+          :aria-current="currentPath === node.path"
+          class="w-full flex! justify-start! rounded-none! border-none!"
           :style="{ paddingLeft: `${depth * 12 + 32}px` }"
+          :classicon="getFileIcon(node.name)"
         >
-          <span class="w-4 h-4 shrink-0" :class="getFileIcon(node.name)" />
           <span class="truncate">{{ node.name }}</span>
-        </NuxtLink>
+        </LinkBase>
       </template>
     </li>
   </ul>

app/components/Code/MobileTreeDrawer.vue

@@ -27,14 +27,13 @@ watch(isOpen, open => (isLocked.value = open))
 
 <template>
   <!-- Toggle button (mobile only) -->
-  <button
-    type="button"
-    class="md:hidden fixed bottom-4 inset-ie-4 z-45 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors"
+  <ButtonBase
+    variant="primary"
+    class="md:hidden fixed bottom-4 inset-ie-4 z-45"
     :aria-label="$t('code.toggle_tree')"
     @click="isOpen = !isOpen"
-  >
-    <span class="w-5 h-5" :class="isOpen ? 'i-carbon:close' : 'i-carbon:folder'" />
-  </button>
+    :classicon="isOpen ? 'i-carbon:close' : 'i-carbon:folder'"
+  />
 
   <!-- Backdrop -->
   <Transition
@@ -66,14 +65,11 @@ watch(isOpen, open => (isLocked.value = open))
       >
         <span class="font-mono text-sm text-fg-muted">{{ $t('code.files_label') }}</span>
         <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
-        <button
-          type="button"
-          class="text-fg-muted hover:text-fg transition-colors"
+        <ButtonBase
           :aria-label="$t('code.close_tree')"
           @click="isOpen = false"
-        >
-          <span class="i-carbon:close w-5 h-5" />
-        </button>
+          classicon="i-carbon-close"
+        />
       </div>
       <CodeFileTree
         :tree="tree"

app/components/Link/Base.vue

@@ -31,6 +31,9 @@ const props = withDefaults(
 
       /** always use `to` instead of `href` */
       href?: never
+
+      /** should only be used for links where the context makes it very clear they are clickable. Don't just use this, because you don't like underlines. */
+      noUnderline?: boolean
     } & NuxtLinkProps
   >(),
   { variant: 'link', size: 'medium' },
@@ -70,7 +73,8 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
     v-else
     class="group inline-flex gap-x-1 items-center justify-center"
     :class="{
-      'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30': !isLinkAnchor && isLink,
+      'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
+        !isLinkAnchor && isLink && !noUnderline,
       'font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
         isLink,
       'font-mono border border-border rounded-md transition-all duration-200': isButton,