99 lines
4.1 KiB
Vue
99 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
import { Separator } from '@/components/ui/separator';
|
|
import CreateDirectoryDialog from '~/components/actions/CreateDirectoryDialog.vue';
|
|
import UploadDialog from '~/components/actions/UploadDialog.vue';
|
|
import { getWarrens } from '~/lib/api/warrens';
|
|
const uploadStore = useUploadStore();
|
|
|
|
const route = useRoute();
|
|
const store = useWarrenStore();
|
|
|
|
await useAsyncData('warrens', async () => {
|
|
const warrens = await getWarrens();
|
|
store.warrens = warrens;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<SidebarProvider>
|
|
<SelectionRect />
|
|
<ActionsShareDialog />
|
|
<ImageViewer />
|
|
<AppSidebar />
|
|
<SidebarInset class="flex flex-col-reverse md:flex-col">
|
|
<header
|
|
class="bg-background sticky bottom-0 z-10 flex h-16 items-center gap-2 border-t transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 md:top-0 md:bottom-[unset] md:border-t-0 md:border-b"
|
|
>
|
|
<div class="flex w-full items-center gap-4 px-4">
|
|
<SidebarTrigger class="[&_svg]:size-4" />
|
|
<div class="hidden flex-row items-center gap-4 md:flex">
|
|
<Separator orientation="vertical" class="mr-2 !h-4" />
|
|
<AppBreadcrumbs />
|
|
</div>
|
|
|
|
<div class="ml-auto flex flex-row items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
:disabled="
|
|
store.current != null &&
|
|
store.current.dir != null &&
|
|
store.selection.size >=
|
|
store.current.dir.entries.length
|
|
"
|
|
@click="
|
|
() =>
|
|
store.current != null &&
|
|
store.current.dir != null &&
|
|
store.addMultipleToSelection(
|
|
store.current.dir.entries
|
|
)
|
|
"
|
|
>
|
|
<Icon name="lucide:list" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
:disabled="store.selection.size < 1"
|
|
@click="() => store.clearSelection()"
|
|
>
|
|
<Icon name="lucide:list-x" />
|
|
</Button>
|
|
<Separator
|
|
orientation="vertical"
|
|
class="mr-2 hidden !h-4 md:block"
|
|
/>
|
|
<UploadDialog>
|
|
<Button
|
|
class="relative"
|
|
variant="outline"
|
|
size="icon"
|
|
>
|
|
<Icon name="lucide:upload" />
|
|
<div
|
|
v-if="uploadStore.progress != null"
|
|
class="bg-primary absolute top-1 right-1 h-1.5 w-1.5 animate-pulse rounded-full"
|
|
></div>
|
|
</Button>
|
|
</UploadDialog>
|
|
<CreateDirectoryDialog>
|
|
<Button
|
|
v-if="route.path.startsWith('/warrens/')"
|
|
variant="outline"
|
|
size="icon"
|
|
>
|
|
<Icon name="lucide:folder-plus" />
|
|
</Button>
|
|
</CreateDirectoryDialog>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="flex flex-1 flex-col p-4">
|
|
<slot />
|
|
</div>
|
|
</SidebarInset>
|
|
</SidebarProvider>
|
|
</template>
|