npmx.dev/app/components/CodeDirectoryListing.vue at 31ed2df7328a97e54615d6995bab12ab78230fbc · userquin/npmx.dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<script setup lang="ts">
import type { PackageFileTree } from '#shared/types'
import { getFileIcon } from '~/utils/file-icons'

const props = defineProps<{
  tree: PackageFileTree[]
  currentPath: string
  baseUrl: string
}>()

// Get the current directory's contents
const currentContents = computed(() => {
  if (!props.currentPath) {
    return props.tree
  }

  const parts = props.currentPath.split('/')
  let current: PackageFileTree[] | undefined = props.tree

  for (const part of parts) {
    const found: PackageFileTree | undefined = current?.find(n => n.name === part)
    if (!found || found.type === 'file') {
      return []
    }
    current = found.children
  }

  return current ?? []
})

// Get parent directory path
const parentPath = computed(() => {
  if (!props.currentPath) return null
  const parts = props.currentPath.split('/')
  if (parts.length <= 1) return ''
  return parts.slice(0, -1).join('/')
})

// Format file size
function formatBytes(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} kB`
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
}
</script>

<template>
  <div class="directory-listing">
    <!-- Empty state -->
    <div v-if="currentContents.length === 0" class="py-20 text-center text-fg-muted">
      <p>{{ $t('code.no_files') }}</p>
    </div>

    <!-- File list -->
    <table v-else class="w-full">
      <thead class="sr-only">
        <tr>
          <th>{{ $t('code.table.name') }}</th>
          <th>{{ $t('code.table.size') }}</th>
        </tr>
      </thead>
      <tbody>
        <!-- Parent directory link -->
        <tr
          v-if="parentPath !== null"
          class="border-b border-border hover:bg-bg-subtle transition-colors"
        >
          <td class="py-2 px-4">
            <NuxtLink
              :to="parentPath ? `${baseUrl}/${parentPath}` : baseUrl"
              class="flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors"
            >
              <span class="i-carbon:folder w-4 h-4 text-yellow-600" />
              <span>..</span>
            </NuxtLink>
          </td>
          <td />
        </tr>

        <!-- Directory/file rows -->
        <tr
          v-for="node in currentContents"
          :key="node.path"
          class="border-b border-border hover:bg-bg-subtle transition-colors"
        >
          <td class="py-2 px-4">
            <NuxtLink
              :to="`${baseUrl}/${node.path}`"
              class="flex items-center gap-2 font-mono text-sm hover:text-fg transition-colors"
              :class="node.type === 'directory' ? 'text-fg' : 'text-fg-muted'"
            >
              <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>{{ node.name }}</span>
            </NuxtLink>
          </td>
          <td class="py-2 px-4 text-end font-mono text-xs text-fg-subtle">
            <span v-if="node.type === 'file' && node.size">
              {{ formatBytes(node.size) }}
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>