PronounsPage/components/admin/AdminStorageTree.vue

<script setup lang="ts">
import { formatSize } from '~/src/helpers.ts';

type Tree = Map<string, Tree | { size: number; atime: string; mtime: string }>;

defineProps<{
    chunk: string;
    node: Tree;
}>();

const sumSize = (tree: Tree): number => {
    return [...tree.values()].map((node) => {
        if (node instanceof Map) {
            return sumSize(node);
        }
        return node.size;
    })
        .reduce((sum, size) => sum + size, 0);
};

const minDate = (tree: Tree): Date => {
    return [...tree.values()].map((node) => {
        if (node instanceof Map) {
            return minDate(node);
        }
        return new Date(node.atime);
    })
        .reduce((minDate, date) => minDate.getTime() <= date.getTime() ? minDate : date, new Date());
};
</script>

<template>
    <details>
        <summary>
            <span class="py-1 d-inline-flex justify-content-between">
                <code>{{ chunk }}</code>
                <span>
                    <span class="badge text-bg-info">{{ formatSize(sumSize(node)) }}</span>
                    <span class="badge text-bg-light">{{ minDate(node).toISOString() }}</span>
                </span>
            </span>
        </summary>
        <div class="ps-2 border-start border-secondary">
            <template v-for="[childChunk, childNode] of node.entries()" :key="childNode">
                <AdminStorageTree v-if="childNode instanceof Map" :chunk="childChunk" :node="childNode" />
                <AdminStorageItem v-else :chunk="childChunk" :node="childNode" />
            </template>
        </div>
    </details>
</template>

<style scoped lang="scss">
@import 'assets/variables';

summary > span {
    width: calc(100% - #{$spacer});
}
</style>