zoeissleeping
a0f2e89154
- Add /resources page with file listing, filtering, and bulk operations - Add useResources composable for file state management - Add sidenav header and nav components for resources section - Add files list API endpoint (GET /api/files) - Track file size during upload - Add resources link to home navigation
34 lines
1.5 KiB
Vue
34 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import type { ResourceCategory } from '~/composables/useResources';
|
|
|
|
const { category, setCategory, categoryCount } = await useResources();
|
|
|
|
const categories: { key: ResourceCategory; label: string; icon: string }[] = [
|
|
{ key: 'all', label: 'All', icon: 'i-mynaui-folder' },
|
|
{ key: 'documents', label: 'Documents', icon: 'i-mynaui-file-text' },
|
|
{ key: 'images', label: 'Images', icon: 'i-mynaui-image' },
|
|
{ key: 'audio', label: 'Audio', icon: 'i-mynaui-music' },
|
|
{ key: 'videos', label: 'Videos', icon: 'i-mynaui-video' },
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="flex flex-col gap-1 overflow-auto">
|
|
<button v-for="cat in categories" :key="cat.key" @click="setCategory(cat.key)"
|
|
class="flex items-center justify-between gap-2 px-2 h-9 shrink-0 rounded-lg transition-colors w-full"
|
|
:class="category === cat.key
|
|
? 'text-[var(--text-primary)] bg-[var(--color-hover)]'
|
|
: 'text-[var(--text-secondary)] @hover:bg-[var(--color-hover)]'">
|
|
<div class="flex items-center gap-2">
|
|
<div class="h-9 w-9 md:h-7 md:w-7 flex items-center justify-center">
|
|
<span class="text-5 md:text-4.5" :class="cat.icon"></span>
|
|
</div>
|
|
<span class="md:text-sm font-medium">{{ cat.label }}</span>
|
|
</div>
|
|
<span class="text-xs tabular-nums text-[var(--text-tertiary)]">
|
|
{{ categoryCount(cat.key) }}
|
|
</span>
|
|
</button>
|
|
</nav>
|
|
</template>
|