mirror of
https://github.com/Drop-OSS/drop.git
synced 2025-11-13 00:02:37 +10:00
Rearchitecture for v0.4.0 (#197)
* feat: database redist support * feat: rearchitecture of database schemas, migration reset, and #180 * feat: import redists * fix: giantbomb logging bug * feat: partial user platform support + statusMessage -> message * feat: add user platform filters to store view * fix: sanitize svg uploads ... copilot suggested this I feel dirty. * feat: beginnings of platform & redist management * feat: add server side redist patching * fix: update drop-base commit * feat: import of custom platforms & file extensions * fix: redelete platform * fix: remove platform * feat: uninstall commands, new R UI * checkpoint: before migrating to nuxt v4 * update to nuxt 4 * fix: fixes for Nuxt v4 update * fix: remaining type issues * feat: initial feedback to import other kinds of versions * working commit * fix: lint * feat: redist import
This commit is contained in:
DecDuck
GitHub
242
app/layouts/admin.vue
Normal file
242
app/layouts/admin.vue
Normal file
@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div>
|
||||
<TransitionRoot as="template" :show="sidebarOpen">
|
||||
<Dialog class="relative z-50 lg:hidden" @close="sidebarOpen = false">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition-opacity ease-linear duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="transition-opacity ease-linear duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div class="fixed inset-0 bg-zinc-900/80" />
|
||||
</TransitionChild>
|
||||
|
||||
<div class="fixed inset-0 flex">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition ease-in-out duration-300 transform"
|
||||
enter-from="-translate-x-full"
|
||||
enter-to="translate-x-0"
|
||||
leave="transition ease-in-out duration-300 transform"
|
||||
leave-from="translate-x-0"
|
||||
leave-to="-translate-x-full"
|
||||
>
|
||||
<DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-in-out duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="ease-in-out duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div
|
||||
class="absolute left-full top-0 flex w-16 justify-center pt-5"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="-m-2.5 p-2.5"
|
||||
@click="sidebarOpen = false"
|
||||
>
|
||||
<span class="sr-only">{{
|
||||
$t("userHeader.closeSidebar")
|
||||
}}</span>
|
||||
<XMarkIcon class="size-6 text-white" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||
<div
|
||||
class="flex grow flex-col gap-y-5 overflow-y-auto bg-zinc-950 px-4 pb-4"
|
||||
>
|
||||
<div class="inline-flex items-center py-4 px-4">
|
||||
<DropWordmark class="h-full w-auto" alt="Drop`" />
|
||||
</div>
|
||||
<nav>
|
||||
<ul
|
||||
role="list"
|
||||
class="grid grid-cols-2 items-stretch gap-4 px-5"
|
||||
>
|
||||
<li v-for="(item, itemIdx) in navigation" :key="item.route">
|
||||
<NuxtLink
|
||||
:href="item.route"
|
||||
:class="[
|
||||
itemIdx === currentNavigationIndex
|
||||
? 'bg-zinc-900 text-white'
|
||||
: 'text-zinc-400 hover:bg-zinc-900 hover:text-white',
|
||||
'transition group flex flex-col items-center grow gap-x-3 rounded-md px-2 py-3 text-sm font-semibold leading-6',
|
||||
]"
|
||||
>
|
||||
<component
|
||||
:is="item.icon"
|
||||
class="h-6 w-6 shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span class="text-xs text-center">{{
|
||||
item.label
|
||||
}}</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
|
||||
<!-- Static sidebar for desktop -->
|
||||
<div
|
||||
class="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:z-50 lg:block lg:w-20 lg:overflow-y-auto lg:bg-zinc-950 lg:pb-4"
|
||||
>
|
||||
<div class="flex flex-col h-24 shrink-0 items-center justify-center">
|
||||
<DropLogo class="h-8 w-auto" />
|
||||
<span
|
||||
class="mt-1 bg-blue-400 px-1 py-0.5 rounded-md text-xs font-bold font-display"
|
||||
>{{ $t("header.admin.admin") }}</span
|
||||
>
|
||||
</div>
|
||||
<nav class="mt-8">
|
||||
<ul role="list" class="flex flex-col items-stretch space-y-4 mx-2">
|
||||
<li v-for="(item, itemIdx) in navigation" :key="item.route">
|
||||
<NuxtLink
|
||||
:href="item.route"
|
||||
:class="[
|
||||
itemIdx === currentNavigationIndex
|
||||
? 'bg-zinc-900 text-white'
|
||||
: 'text-zinc-400 hover:bg-zinc-900 hover:text-white',
|
||||
'transition group flex flex-col items-center grow gap-x-3 rounded-md px-2 py-3 text-sm font-semibold leading-6',
|
||||
]"
|
||||
>
|
||||
<component
|
||||
:is="item.icon"
|
||||
class="h-6 w-6 shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span class="text-xs text-center">{{ item.label }}</span>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="sticky top-0 z-40 flex items-center gap-x-6 bg-zinc-900 px-4 py-4 shadow-sm sm:px-6 lg:hidden"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="-m-2.5 p-2.5 text-zinc-400 lg:hidden"
|
||||
@click="sidebarOpen = true"
|
||||
>
|
||||
<span class="sr-only">{{ $t("header.openSidebar") }}</span>
|
||||
<Bars3Icon class="h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<main class="lg:pl-20 min-h-screen bg-zinc-900 flex flex-col">
|
||||
<div
|
||||
class="flex flex-col grow px-4 py-2 sm:py-10 sm:px-6 lg:px-8 lg:py-6"
|
||||
>
|
||||
<!-- Main area -->
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, type Component } from "vue";
|
||||
import {
|
||||
Dialog,
|
||||
DialogPanel,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
} from "@headlessui/vue";
|
||||
import {
|
||||
Bars3Icon,
|
||||
ServerStackIcon,
|
||||
HomeIcon,
|
||||
Cog6ToothIcon,
|
||||
UserGroupIcon,
|
||||
RectangleStackIcon,
|
||||
DocumentIcon,
|
||||
} from "@heroicons/vue/24/outline";
|
||||
import { ArrowLeftIcon } from "@heroicons/vue/16/solid";
|
||||
import { XMarkIcon } from "@heroicons/vue/24/solid";
|
||||
|
||||
const i18nHead = useLocaleHead();
|
||||
|
||||
const navigation: Array<NavigationItem & { icon: Component }> = [
|
||||
{
|
||||
label: $t("header.admin.home"),
|
||||
route: "/admin",
|
||||
prefix: "/admin",
|
||||
icon: HomeIcon,
|
||||
},
|
||||
{
|
||||
label: $t("header.admin.library"),
|
||||
route: "/admin/library",
|
||||
prefix: "/admin/library",
|
||||
icon: ServerStackIcon,
|
||||
},
|
||||
{
|
||||
label: $t("header.admin.metadata"),
|
||||
route: "/admin/metadata",
|
||||
prefix: "/admin/metadata",
|
||||
icon: DocumentIcon,
|
||||
},
|
||||
{
|
||||
label: $t("header.admin.users"),
|
||||
route: "/admin/users",
|
||||
prefix: "/admin/users",
|
||||
icon: UserGroupIcon,
|
||||
},
|
||||
{
|
||||
label: $t("header.admin.tasks"),
|
||||
route: "/admin/task",
|
||||
prefix: "/admin/task",
|
||||
icon: RectangleStackIcon,
|
||||
},
|
||||
{
|
||||
label: $t("header.admin.settings.title"),
|
||||
route: "/admin/settings",
|
||||
prefix: "/admin/settings",
|
||||
icon: Cog6ToothIcon,
|
||||
},
|
||||
{
|
||||
label: $t("header.back"),
|
||||
route: "/store",
|
||||
prefix: ".",
|
||||
icon: ArrowLeftIcon,
|
||||
},
|
||||
];
|
||||
|
||||
// const notifications = useNotifications();
|
||||
// const unreadNotifications = computed(() =>
|
||||
// notifications.value.filter((e) => !e.read)
|
||||
// );
|
||||
|
||||
const currentNavigationIndex = useCurrentNavigationIndex(navigation);
|
||||
|
||||
const sidebarOpen = ref(false);
|
||||
const router = useRouter();
|
||||
router.afterEach(() => {
|
||||
sidebarOpen.value = false;
|
||||
});
|
||||
|
||||
useHead({
|
||||
htmlAttrs: {
|
||||
lang: i18nHead.value.htmlAttrs.lang,
|
||||
// @ts-expect-error head.value.htmlAttrs.dir is not typed as strictly as it should be
|
||||
dir: i18nHead.value.htmlAttrs.dir,
|
||||
},
|
||||
titleTemplate(title) {
|
||||
return title ? $t("adminTitleTemplate", [title]) : $t("adminTitle");
|
||||
},
|
||||
});
|
||||
</script>
|
||||
34
app/layouts/default.vue
Normal file
34
app/layouts/default.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div v-if="!noWrapper" class="flex flex-col w-full min-h-screen bg-zinc-900">
|
||||
<LazyUserHeader class="z-50" hydrate-on-idle />
|
||||
<div class="grow flex">
|
||||
<NuxtPage />
|
||||
</div>
|
||||
<LazyUserFooter class="z-50" hydrate-on-interaction />
|
||||
</div>
|
||||
<div v-else class="flex w-full min-h-screen bg-zinc-900">
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const route = useRoute();
|
||||
const i18nHead = useLocaleHead();
|
||||
const noWrapper = !!route.query.noWrapper;
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
useHead({
|
||||
htmlAttrs: {
|
||||
lang: i18nHead.value.htmlAttrs.lang,
|
||||
// @ts-expect-error head.value.htmlAttrs.dir is not typed as strictly as it should be
|
||||
dir: i18nHead.value.htmlAttrs.dir,
|
||||
},
|
||||
// // seo headers
|
||||
// link: [...i18nHead.value.link],
|
||||
// meta: [...i18nHead.value.meta],
|
||||
titleTemplate(title) {
|
||||
return title ? t("titleTemplate", [title]) : t("title");
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user