fix: configure trailing slash for all links

Author: alexdln

app/components/Code/DirectoryListing.vue

@@ -103,6 +103,7 @@ const bytesFormatter = useBytesFormatter()
         >
           <td colspan="2">
             <LinkBase
+              :trailing-slash="node.type === 'directory' ? 'append' : 'remove'"
               :to="getCodeRoute(node.path)"
               class="py-2 px-4 font-mono text-sm w-full"
               no-underline

app/components/Code/FileTree.vue

@@ -87,6 +87,7 @@ watch(
       <!-- File -->
       <template v-else>
         <LinkBase
+          trailing-slash="remove"
           variant="button-secondary"
           :to="getFileRoute(node.path)"
           :aria-current="currentPath === node.path"

app/components/DependencyPathPopup.vue

@@ -93,6 +93,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
           >
             <span v-if="idx > 0" class="text-fg-subtle me-1">└─</span>
             <NuxtLink
+              trailing-slash="append"
               :to="
                 packageRoute(
                   parsePackageString(pathItem).name,

app/components/Header/MobileMenu.client.vue

@@ -195,6 +195,7 @@ onUnmounted(deactivate)
                   </span>
                   <div>
                     <NuxtLink
+                      trailing-slash="append"
                       v-for="link in group.items"
                       :key="link.name"
                       :to="link.to"

app/components/Header/OrgsDropdown.vue

@@ -58,6 +58,7 @@ function handleKeydown(event: KeyboardEvent) {
     @keydown="handleKeydown"
   >
     <NuxtLink
+      trailing-slash="append"
       :to="{ name: '~username-orgs', params: { username } }"
       class="link-subtle font-mono text-sm inline-flex items-center gap-1"
     >
@@ -94,6 +95,7 @@ function handleKeydown(event: KeyboardEvent) {
           <ul v-else-if="orgs.length > 0" class="py-1 max-h-80 overflow-y-auto">
             <li v-for="org in orgs" :key="org">
               <NuxtLink
+                trailing-slash="append"
                 :to="{ name: 'org', params: { org } }"
                 class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors"
               >
@@ -108,6 +110,7 @@ function handleKeydown(event: KeyboardEvent) {
 
           <div class="px-3 py-2 border-t border-border">
             <NuxtLink
+              trailing-slash="append"
               :to="{ name: '~username-orgs', params: { username } }"
               class="link-subtle font-mono text-xs inline-flex items-center gap-1"
             >

app/components/Header/PackagesDropdown.vue

@@ -58,6 +58,7 @@ function handleKeydown(event: KeyboardEvent) {
     @keydown="handleKeydown"
   >
     <NuxtLink
+      trailing-slash="append"
       :to="{ name: '~username', params: { username } }"
       class="link-subtle font-mono text-sm inline-flex items-center gap-1"
     >
@@ -94,6 +95,7 @@ function handleKeydown(event: KeyboardEvent) {
           <ul v-else-if="packages.length > 0" class="py-1 max-h-80 overflow-y-auto">
             <li v-for="pkg in packages" :key="pkg">
               <NuxtLink
+                trailing-slash="append"
                 :to="packageRoute(pkg)"
                 class="block px-3 py-2 font-mono text-sm text-fg hover:bg-bg-subtle transition-colors truncate"
               >
@@ -108,6 +110,7 @@ function handleKeydown(event: KeyboardEvent) {
 
           <div class="px-3 py-2 border-t border-border">
             <NuxtLink
+              trailing-slash="append"
               :to="{ name: '~username', params: { username } }"
               class="link-subtle font-mono text-xs inline-flex items-center gap-1"
             >

app/components/Link/Base.vue

@@ -35,8 +35,10 @@ const props = withDefaults(
 
     /** 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
+
+    trailingSlash?: 'append' | 'remove' | undefined
   }>(),
-  { variant: 'link', size: 'medium' },
+  { variant: 'link', size: 'medium', trailingSlash: 'append' },
 )
 
 const isLinkExternal = computed(
@@ -74,6 +76,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
   <NuxtLink
     v-bind="props"
     v-else
+    :trailing-slash="trailingSlash"
     class="group/link gap-x-1 items-center"
     :class="{
       'flex': block,

app/components/Org/MembersPanel.vue

@@ -446,6 +446,7 @@ watch(lastExecutionTime, () => {
         <div class="flex items-center justify-between">
           <div class="flex items-center gap-3">
             <NuxtLink
+              trailing-slash="append"
               :to="{ name: '~username', params: { username: member.name } }"
               class="font-mono text-sm text-fg hover:text-fg transition-colors duration-200"
             >

app/components/Org/TeamsPanel.vue

@@ -418,6 +418,7 @@ watch(lastExecutionTime, () => {
               class="flex items-center justify-start py-1 ps-2 pe-1 rounded hover:bg-bg-subtle transition-colors duration-200"
             >
               <NuxtLink
+                trailing-slash="append"
                 :to="{ name: '~username', params: { username: user } }"
                 class="font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200"
               >

app/components/Package/Card.vue

@@ -46,6 +46,7 @@ const numberFormatter = useNumberFormatter()
         class="font-mono text-sm sm:text-base font-medium text-fg group-hover:text-fg transition-colors duration-200 min-w-0 break-all"
       >
         <NuxtLink
+          trailing-slash="append"
           :to="packageRoute(result.package.name)"
           :prefetch-on="prefetch ? 'visibility' : 'interaction'"
           class="decoration-none scroll-mt-48 scroll-mb-6 after:content-[''] after:absolute after:inset-0"