admin ui shell

README.md

@@ -19,8 +19,9 @@ Drop uses a utility package called droplet that's written in Rust. It has builts
 
 Steps:
 1. Copy the `.env.example` to `.env` and add your GiantBomb metadata key (more metadata providers coming)
-2. Open up a terminal and navigate to `dev-tools`, and run `docker compose up`
-3. Open up a terminal in the root directory of the project and run `yarn` and then `yarn dev` to start the dev server
+2. Create the `.data` directory with `mkdir .data`
+3. Open up a terminal and navigate to `dev-tools`, and run `docker compose up`
+4. Open up a terminal in the root directory of the project and run `yarn` and then `yarn dev` to start the dev server
 
 To create an account:
 Head over to the `/register` page. It's currently a temporary development form for creating a username + password log in.

components/HeaderUserWidget.vue

@@ -1,67 +1,88 @@
 <template>
-    <Menu v-if="user" as="div" class="relative inline-block">
-        <MenuButton>
-            <HeaderWidget>
-                <div class="inline-flex items-center text-zinc-300 hover:text-white">
-                    <img :src="useObject(user.profilePicture)" class="w-5 h-5 rounded-sm" />
-                    <span class="ml-2 text-sm font-bold">{{ user.displayName }}</span>
-                    <ChevronDownIcon class="ml-3 h-4" />
-                </div>
-            </HeaderWidget>
-        </MenuButton>
+  <Menu v-if="user" as="div" class="relative inline-block">
+    <MenuButton>
+      <HeaderWidget>
+        <div class="inline-flex items-center text-zinc-300 hover:text-white">
+          <img
+            :src="useObject(user.profilePicture)"
+            class="w-5 h-5 rounded-sm"
+          />
+          <span class="ml-2 text-sm font-bold">{{ user.displayName }}</span>
+          <ChevronDownIcon class="ml-3 h-4" />
+        </div>
+      </HeaderWidget>
+    </MenuButton>
 
-        <transition enter-active-class="transition ease-out duration-100"
-            enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100"
-            leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100"
-            leave-to-class="transform opacity-0 scale-95">
-            <MenuItems class="absolute right-0 top-10 z-10 w-56 origin-top-right focus:outline-none shadow-md">
-                <PanelWidget class="flex-col gap-y-2">
-                    <NuxtLink to="/id/me"
-                        class="transition inline-flex items-center w-full py-3 px-4 hover:bg-zinc-800">
-                        <div class="inline-flex items-center text-zinc-300">
-                            <img :src="useObject(user.profilePicture)" class="w-5 h-5 rounded-sm" />
-                            <span class="ml-2 text-sm font-bold">{{ user.displayName }}</span>
-                        </div>
-                    </NuxtLink>
-                    <div class="h-0.5 rounded-full w-full bg-zinc-800" />
-                    <div class="flex flex-col">
-                        <MenuItem v-for="(nav, navIdx) in navigation" v-slot="{ active }">
-                        <NuxtLink :href="nav.route"
-                            :class="[active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400', 'transition block px-4 py-2 text-sm']">
-                            {{
-                                nav.label }}</NuxtLink>
-                        </MenuItem>
-                    </div>
-                </PanelWidget>
-            </MenuItems>
-        </transition>
-    </Menu>
+    <transition
+      enter-active-class="transition ease-out duration-100"
+      enter-from-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-from-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <MenuItems
+        class="absolute right-0 top-10 z-10 w-56 origin-top-right focus:outline-none shadow-md"
+      >
+        <PanelWidget class="flex-col gap-y-2">
+          <NuxtLink
+            to="/id/me"
+            class="transition inline-flex items-center w-full py-3 px-4 hover:bg-zinc-800"
+          >
+            <div class="inline-flex items-center text-zinc-300">
+              <img
+                :src="useObject(user.profilePicture)"
+                class="w-5 h-5 rounded-sm"
+              />
+              <span class="ml-2 text-sm font-bold">{{ user.displayName }}</span>
+            </div>
+          </NuxtLink>
+          <div class="h-0.5 rounded-full w-full bg-zinc-800" />
+          <div class="flex flex-col">
+            <MenuItem v-for="(nav, navIdx) in navigation" v-slot="{ active }">
+              <NuxtLink
+                :href="nav.route"
+                :class="[
+                  active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400',
+                  'transition block px-4 py-2 text-sm',
+                ]"
+              >
+                {{ nav.label }}</NuxtLink
+              >
+            </MenuItem>
+          </div>
+        </PanelWidget>
+      </MenuItems>
+    </transition>
+  </Menu>
 </template>
 
 <script setup lang="ts">
-import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
-import { ChevronDownIcon } from '@heroicons/vue/16/solid';
-import type { NavigationItem } from '../composables/types';
-import HeaderWidget from './HeaderWidget.vue';
-import { useObject } from '~/composables/objects';
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+import { ChevronDownIcon } from "@heroicons/vue/16/solid";
+import type { NavigationItem } from "../composables/types";
+import HeaderWidget from "./HeaderWidget.vue";
+import { useObject } from "~/composables/objects";
 
 const user = useUser();
 
 const navigation: NavigationItem[] = [
-    {
+  user.value?.admin
+    ? {
         label: "Admin Dashboard",
         route: "/admin",
-        prefix: ""
-    },
-    {
-        label: "Account settings",
-        route: "/account",
         prefix: "",
-    },
-    {
-        label: "Sign out",
-        route: "/signout",
-        prefix: ""
-    }
-]
+      }
+    : undefined,
+  {
+    label: "Account settings",
+    route: "/account",
+    prefix: "",
+  },
+  {
+    label: "Sign out",
+    route: "/signout",
+    prefix: "",
+  },
+].filter((e) => e !== undefined);
 </script>

composables/current-page-engine.ts

@@ -0,0 +1,28 @@
+import type { RouteLocationNormalized } from "vue-router";
+import type { NavigationItem } from "./types";
+
+export const useCurrentNavigationIndex = (navigation: Array<NavigationItem>) => {
+  const router = useRouter();
+  const route = useRoute();
+
+  const currentNavigation = ref(-1);
+
+  function calculateCurrentNavIndex(to: RouteLocationNormalized) {
+    const validOptions = navigation
+      .map((e, i) => ({ ...e, index: i }))
+      .filter((e) => to.fullPath.startsWith(e.prefix));
+    const bestOption = validOptions
+      .sort((a, b) => b.route.length - a.route.length)
+      .at(0);
+
+    return bestOption?.index ?? -1;
+  }
+
+  currentNavigation.value = calculateCurrentNavIndex(route);
+
+  router.afterEach((to) => {
+    currentNavigation.value = calculateCurrentNavIndex(to);
+  });
+
+  return currentNavigation;
+};

layouts/admin.vue

@@ -1,2 +1,112 @@
 <template>
+  <div>
+    <!-- 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">
+        <Logo 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"
+          >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">Open sidebar</span>
+        <Bars3Icon class="h-6 w-6" aria-hidden="true" />
+      </button>
+    </div>
+
+    <main class="lg:pl-20 min-h-screen bg-zinc-900">
+      <div class="xl:pl-96">
+        <div class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6">
+          <!-- Main area -->
+          <NuxtPage />
+        </div>
+      </div>
+    </main>
+  </div>
 </template>
+
+<script setup lang="ts">
+import { ref, type Component } from "vue";
+import {
+  Bars3Icon,
+  ServerStackIcon,
+  HomeIcon,
+  LockClosedIcon,
+  Cog6ToothIcon,
+  FlagIcon,
+} from "@heroicons/vue/24/outline";
+import type { NavigationItem } from "~/composables/types";
+import { useCurrentNavigationIndex } from "~/composables/current-page-engine";
+
+const navigation: Array<NavigationItem & { icon: Component }> = [
+  { label: "Home", route: "/admin", prefix: "/admin", icon: HomeIcon },
+  {
+    label: "Libraries",
+    route: "/admin/libraries",
+    prefix: "/admin/libraries",
+    icon: ServerStackIcon,
+  },
+  {
+    label: "Auth",
+    route: "/admin/auth",
+    prefix: "/admin/auth",
+    icon: LockClosedIcon,
+  },
+  {
+    label: "Feature Flags",
+    route: "/admin/features",
+    prefix: "/admin/features",
+    icon: FlagIcon
+  },
+  {
+    label: "Settings",
+    route: "/admin/settings",
+    prefix: "/admin/settings",
+    icon: Cog6ToothIcon
+  }
+];
+
+const currentNavigationIndex = useCurrentNavigationIndex(navigation);
+
+const sidebarOpen = ref(false);
+
+useHead({
+  titleTemplate(title) {
+    return title ? `${title} | Admin | Drop` : `Admin Dashboard | Drop`;
+  },
+});
+</script>

pages/admin/index.vue

@@ -1,8 +1,11 @@
-<template>
-</template>
+<template></template>
 
 <script setup lang="ts">
 definePageMeta({
-    layout: "admin"
-})
+  layout: "admin",
+});
+
+useHead({
+  title: "Home",
+});
 </script>

pages/admin/libraries.vue

@@ -0,0 +1,11 @@
+<template></template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "admin",
+});
+
+useHead({
+    title: "Libraries"
+})
+</script>

pages/signin.vue

@@ -64,7 +64,7 @@
                     name="remember-me"
                     type="checkbox"
                     v-model="rememberMe"
-                    class="h-4 w-4 rounded border-zinc-300 text-blue-600 focus:ring-blue-600"
+                    class="h-4 w-4 rounded bg-zinc-800 border-zinc-700 text-blue-600 focus:ring-blue-600"
                   />
                   <label
                     for="remember-me"
@@ -159,7 +159,7 @@ async function signin() {
     },
   });
   const user = useUser();
-  user.value = await $fetch<User | null>("/api/v1/user");
+  user.value = await $fetch<User | null>("/api/v1/whoami");
 }
 
 definePageMeta({

server/api/v1/auth/signup/simple.post.ts

@@ -44,6 +44,7 @@ export default defineEventHandler(async (h3) => {
       displayName: "DecDuck",
       email: "",
       profilePicture: profilePictureObject,
+      admin: true,
     },
   });