style: 💎 New Navigation Bar

realashleybailey · realashleybailey · commit 23bdb86e2536 · 2025-02-20T20:59:14.000Z
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,3 +1,3 @@
 {
-    "recommendations": ["nrwl.angular-console", "esbenp.prettier-vscode", "dbaeumer.vscode-eslint", "firsttris.vscode-jest-runner", "hollowtree.vue-snippets", "pkief.material-icon-theme", "github.copilot", "nicholashsiang.vscode-vue3-snippets", "dbcode.dbcode", "znck.vue", "dalirnet.vue-sort"]
+    "recommendations": ["nrwl.angular-console", "esbenp.prettier-vscode", "dbaeumer.vscode-eslint", "firsttris.vscode-jest-runner", "hollowtree.vue-snippets", "pkief.material-icon-theme", "github.copilot", "nicholashsiang.vscode-vue3-snippets", "dbcode.dbcode", "dalirnet.vue-sort", "johnsoncodehk.volar", "vue.volar"]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -25,5 +25,10 @@
     },
     "editor.formatOnSave": true,
     "dbcode.connections": [],
-    "files.autoSave": "onWindowChange"
+    "files.autoSave": "onWindowChange",
+    "files.watcherExclude": {
+        "**/.git/objects/**": true,
+        "**/.git/subtree-cache/**": true,
+        "**/node_modules/*/**": true
+    }
 }
diff --git a/apps/wizarr-frontend/index.html b/apps/wizarr-frontend/index.html
@@ -15,7 +15,8 @@
     </head>
 
     <body class="bg-gray-100 dark:bg-gray-900 overflow-x-hidden">
-        <div id="loading" class="z-index: 10000;"></div>
+        <div id="loading" style="z-index: 10000"></div>
+        <div id="setup" style="z-index: 9999"></div>
         <div id="app"></div>
         <script type="module" src="/src/main.ts"></script>
     </body>
diff --git a/apps/wizarr-frontend/src/App.vue b/apps/wizarr-frontend/src/App.vue
@@ -23,6 +23,7 @@ import ReloadPrompt from "@/components/ReloadPrompt.vue";
 import Help from "@/components/Help/Help.vue";
 
 import type { Information as IInformation } from "@wizarrrrr/wizarr-sdk";
+import type { Version as IVersion } from "@wizarrrrr/wizarr-sdk";
 
 export default defineComponent({
     name: "App",
@@ -75,18 +76,10 @@ export default defineComponent({
         this.updateTheme(this.theme);
 
         // Get the server data
-        const serverData = await this.$axiosRetry<IInformation>("/api/information", {
-            disableErrorToast: true,
-            disableInfoToast: true,
-        });
-
+        const serverData = await this.$axiosRetry<IInformation>("/api/information");
         this.setServerData(serverData);
 
-        const versionData = await this.$axiosRetry("/api/version", {
-            disableErrorToast: true,
-            disableInfoToast: true,
-        });
-
+        const versionData = await this.$axiosRetry<IVersion>("/api/version");
         this.setVersionData(versionData);
 
         this.$loading.unmount();
diff --git a/apps/wizarr-frontend/src/assets/img/profile.jpg b/apps/wizarr-frontend/src/assets/img/profile.jpg
diff --git a/apps/wizarr-frontend/src/components/Buttons/HelpButton.vue b/apps/wizarr-frontend/src/components/Buttons/HelpButton.vue
@@ -1,15 +1,10 @@
 <template>
-    <button class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button" @click="$help('Home')">
-        <div class="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
-            <i class="fa-solid fa-lg fa-circle-info" style="font-size: 15px"></i>
-        </div>
+    <button type="button" @click="$help('Home')" class="relative rounded-full text-gray-400 hover:text-white">
+        <span class="sr-only">View help</span>
+        <ExclamationCircleIcon class="size-5" aria-hidden="true" />
     </button>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-    name: "HelpButton",
-});
+<script lang="ts" setup>
+import { ExclamationCircleIcon } from "@heroicons/vue/24/outline";
 </script>
diff --git a/apps/wizarr-frontend/src/components/Buttons/LanguageSelector.vue b/apps/wizarr-frontend/src/components/Buttons/LanguageSelector.vue
@@ -1,31 +1,21 @@
 <template>
-    <button class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button" @click="createModal">
-        <div :class="iconClasses" class="flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
-            <i class="fa-solid fa-md fa-globe"></i>
-        </div>
+    <button type="button" @click="createModal()" class="relative rounded-full text-gray-400 hover:text-white">
+        <span class="sr-only">View translations</span>
+        <LanguageIcon class="size-5" aria-hidden="true" />
     </button>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { LanguageIcon } from "@heroicons/vue/24/outline";
 import LanguageForm from "@/components/Forms/LanguageForm/LanguageForm.vue";
 
 export default defineComponent({
     name: "LanguageSelector",
     components: {
+        LanguageIcon,
         LanguageForm,
     },
-    props: {
-        iconClasses: {
-            type: String,
-            default: "w-6 h-6",
-        },
-    },
-    computed: {
-        iconClasses(): string {
-            return this.iconClasses;
-        },
-    },
     methods: {
         createModal() {
             this.$modal.openModal(LanguageForm, {
diff --git a/apps/wizarr-frontend/src/main.ts b/apps/wizarr-frontend/src/main.ts
@@ -25,6 +25,7 @@ import Tours, { piniaPluginTours } from "./plugins/tours";
 import WebShare, { piniaPluginWebShare } from "./plugins/webshare";
 
 import App from "./App.vue";
+import Setup from "./modules/setup/views/Setup.vue";
 import FullPageLoading from "@/components/Loading/FullPageLoading.vue";
 import Analytics from "./plugins/analytics";
 import FloatingVue from "floating-vue";
@@ -43,6 +44,10 @@ import i18n from "./i18n";
 import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 import router from "./router";
 import async from "@wizarrrrr/async";
+import { axiosRetry } from "./plugins/axiosRetry";
+import type { Information } from "@wizarrrrr/wizarr-sdk";
+import { useInformationStore } from "./stores/information";
+import { GraphQLClient } from "graphql-request";
 
 const startApp = async () => {
     // Create the loading component
@@ -51,6 +56,7 @@ const startApp = async () => {
 
     // Create the app instance and pinia
     const app = createApp(App);
+    const setup = createApp(Setup);
     const pinia = createPinia();
 
     // Place the loading component on the app's globalProperties
@@ -70,6 +76,25 @@ const startApp = async () => {
 
     app.use(pinia);
 
+    setup.use(pinia);
+    setup.use(i18n);
+    setup.use(ToastPlugin, ToastOptions);
+    setup.use(Axios);
+    setup.use(plugin, defaultConfig(formkitConfig));
+    setup.use(ToastPlugin, ToastOptions);
+    setup.use(Toast);
+
+    // Get Information from Server
+    const informationStore = useInformationStore();
+    const serverData = await axiosRetry<Information>("/api/information");
+    informationStore.setServerData(serverData);
+
+    // If setupRequired then redirect to /setup
+    if (informationStore.setupRequired === true) {
+        loading.unmount();
+        return setup.mount("#setup");
+    }
+
     // Verify login state
     const authStore = useAuthStore();
     const [error, undefined] = await async(authStore.refreshToken);
@@ -83,6 +108,9 @@ const startApp = async () => {
         NODE_ENV: process.env.NODE_ENV as "development" | "production",
     };
 
+    const blogClient = new GraphQLClient("https://eu-west-2.cdn.hygraph.com/content/cm794oacz001307w5uvanqvdo/master");
+    app.config.globalProperties.$blogClient = blogClient;
+
     app.use(router);
     app.use(ToastPlugin, ToastOptions);
     app.use(Axios);
@@ -121,6 +149,7 @@ declare module "@vue/runtime-core" {
         };
         $help: (id: string) => void;
         $loading: App<Element>;
+        $blogClient: GraphQLClient;
     }
 
     interface GlobalComponents {
diff --git a/apps/wizarr-frontend/src/plugins/axiosRetry.ts b/apps/wizarr-frontend/src/plugins/axiosRetry.ts
@@ -55,6 +55,8 @@ const axiosRetry = async function <T>(url: string, config?: RetryOptions): Promi
     return attemptRequest();
 };
 
+export { axiosRetry };
+
 export default {
     install(app: App) {
         app.config.globalProperties.$axiosRetry = axiosRetry;
diff --git a/apps/wizarr-frontend/src/templates/Navbars/AdminNavBar.vue b/apps/wizarr-frontend/src/templates/Navbars/AdminNavBar.vue
@@ -1,107 +1,106 @@
 <template>
-    <nav class="bg-white dark:bg-gray-900 absolute w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600 md:h-[64px]">
-        <div class="max-w-screen-xl flex flex-col md:flex-row items-start md:items-center justify-between mx-auto p-4">
-            <!-- Left Side -->
-            <div class="flex md:order-2 text-center justify-between w-full md:w-min">
-                <router-link to="/" class="flex items-center">
-                    <WizarrLogo class="mr-3" rounded />
-                    <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Wizarr</span>
-                </router-link>
-                <button data-collapse-toggle="navbar-default" aria-controls="navbar-default" aria-expanded="false" type="button" class="text-gray-500 dark:text-gray-400 focus:outline-none block md:hidden" @click="expanded = !expanded">
-                    <i class="fa-solid fa-md fa-xl fa-bars"></i>
-                </button>
-            </div>
-
-            <!-- Right Side -->
-            <div class="flex md:order-2 text-center overflow-hidden justify-end w-full md:w-min mt-3 md:mt-0 md:block" :class="expanded ? 'block' : 'hidden'">
-                <ul class="flex flex-col md:flex-row md:space-x-8 md:text-sm md:font-medium w-full md:w-min">
-                    <!-- Page Links -->
-                    <li v-for="page in pages" :key="page.name" class="flex text-center items-center">
-                        <router-link :to="page.url" as="button" class="text-left md:text-center w-full md:w-auto block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-primary md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent" :class="$route.path == page.url || (page.url == '/admin/settings' && $route.path.includes('/admin/settings')) ? 'text-black dark:text-white' : ''">
-                            {{ __(page.name) }}
-                        </router-link>
-                    </li>
-
-                    <!-- Quick Actions -->
-                    <li class="flex bg-gray-100 dark:bg-gray-800 md:bg-transparent md:dark:bg-transparent rounded text-center p-2 px-3 w-full mt-3 md:mt-0 md:justify-end md:px-0 md:p-0">
-                        <div class="flex flex-column w-full space-x-3 justify-between">
-                            <div class="flex flex-column space-x-1">
-                                <LanguageSelector />
-                                <ThemeToggle />
-                                <HelpButton />
-                            </div>
-                            <span class="inline-flex hidden md:block w-px h-6 bg-gray-200 dark:bg-gray-700"></span>
-                            <LogoutButton />
+    <Disclosure as="nav" class="z-20 bg-white dark:bg-gray-900 absolute w-full top-0 left-0 right-0 border-b border-gray-200 dark:border-gray-600 md:h-[64px]" v-slot="{ open }">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            <div class="flex h-16 items-center justify-between">
+                <div class="flex items-center">
+                    <router-link to="/" class="flex items-center">
+                        <WizarrLogo class="rounded-md" />
+                    </router-link>
+                    <div class="hidden sm:ml-6 sm:block">
+                        <div class="flex space-x-4">
+                            <router-link v-for="page in pages" :key="page.name" :to="page.url" class="rounded-md px-3 py-2 text-sm font-semibold" :class="$route.path == page.url || (page.url == '/admin/settings' && $route.path.includes('/admin/settings')) ? 'bg-gray-800 text-white' : 'text-black dark:text-gray-300 hover:bg-gray-700 hover:text-white'">
+                                {{ __(page.name) }}
+                            </router-link>
                         </div>
-                    </li>
-                </ul>
+                    </div>
+                </div>
+                <div class="hidden sm:ml-6 sm:block">
+                    <div class="flex items-center space-x-3">
+                        <LanguageSelector />
+                        <ThemeToggle />
+                        <HelpButton />
+                        <button type="button" class="relative rounded-full text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
+                            <span class="sr-only">View notifications</span>
+                            <BellIcon class="size-5" aria-hidden="true" />
+                        </button>
+                        <Menu as="div" class="relative">
+                            <MenuButton class="relative flex rounded-full bg-gray-800 text-sm focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
+                                <span class="sr-only">Open user menu</span>
+                                <img class="size-8 rounded-full" src="../../assets/img/profile.jpg" alt="User avatar" />
+                            </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 z-21 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-gray-800 ring-1 shadow-lg ring-black/5 overflow-hidden">
+                                    <MenuItem v-for="item in menuItems" :key="item.text" v-slot="{ active }">
+                                        <a href="#" :class="[active ? 'bg-gray-100 dark:bg-gray-700' : '', 'block px-4 py-2 text-sm text-gray-700 dark:text-white flex justify-between items-center']">
+                                            <span>{{ item.text }}</span>
+                                            <i :class="['fa-solid fa-lg', item.icon]"></i>
+                                        </a>
+                                    </MenuItem>
+                                </MenuItems>
+                            </transition>
+                        </Menu>
+                    </div>
+                </div>
+                <div class="-mr-2 flex sm:hidden">
+                    <DisclosureButton class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:ring-2 focus:ring-white focus:ring-inset">
+                        <Bars3Icon v-if="!open" class="block size-6" aria-hidden="true" />
+                        <XMarkIcon v-else class="block size-6" aria-hidden="true" />
+                    </DisclosureButton>
+                </div>
             </div>
         </div>
-    </nav>
+        <DisclosurePanel class="sm:hidden h-[100%]">
+            <div class="border-y border-gray-700 pt-4 pb-3">
+                <div class="flex items-center px-5">
+                    <div class="shrink-0">
+                        <img class="size-10 rounded-full" src="../../assets/img/profile.jpg" alt="" />
+                    </div>
+                    <div class="ml-3">
+                        <div class="text-base font-medium text-white">Tom Cook</div>
+                        <div class="text-sm font-medium text-gray-400">tom@example.com</div>
+                    </div>
+                    <!-- <button type="button" class="relative ml-auto shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden">
+                        <span class="absolute -inset-1.5" />
+                        <span class="sr-only">View notifications</span>
+                        <BellIcon class="size-6" aria-hidden="true" />
+                    </button> -->
+                </div>
+            </div>
+            <div class="space-y-1 px-2 pt-2 pb-3">
+                <router-link v-for="page in pages" :key="page.name" :to="page.url" class="block rounded-md px-3 py-2 text-base font-medium" :class="$route.path == page.url ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'">
+                    {{ __(page.name) }}
+                </router-link>
+            </div>
+        </DisclosurePanel>
+    </Disclosure>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-import { useUserStore } from "@/stores/user";
-import { mapState } from "pinia";
+<style>
+nav[data-headlessui-state="open"] {
+    height: 100%;
+}
+</style>
 
-import WizarrLogo from "@/components/WizarrLogo.vue";
+<script setup>
+import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
+import { Bars3Icon, BellIcon, XMarkIcon, ExclamationCircleIcon, LanguageIcon } from "@heroicons/vue/24/outline";
 
-import AccountButton from "@/components/Buttons/AccountButton.vue";
+import WizarrLogo from "@/components/WizarrLogo.vue";
 import LanguageSelector from "@/components/Buttons/LanguageSelector.vue";
 import ThemeToggle from "@/components/Buttons/ThemeToggle.vue";
-import ViewToggle from "@/components/Buttons/ViewToggle.vue";
 import HelpButton from "@/components/Buttons/HelpButton.vue";
-import LogoutButton from "@/components/Buttons/LogoutButton.vue";
 
-export default defineComponent({
-    name: "AdminNavBar",
-    components: {
-        WizarrLogo,
-        AccountButton,
-        LanguageSelector,
-        ThemeToggle,
-        ViewToggle,
-        HelpButton,
-        LogoutButton,
-    },
-    computed: {
-        activeLink() {
-            return this.$route.path;
-        },
-        ...mapState(useUserStore, ["user"]),
-    },
-    data() {
-        return {
-            pages: [
-                {
-                    name: this.__("Home"),
-                    url: "/admin",
-                },
-                {
-                    name: this.__("Invitations"),
-                    url: "/admin/invitations",
-                },
-                {
-                    name: this.__("Servers"),
-                    url: "/admin/servers",
-                },
-                {
-                    name: this.__("Users"),
-                    url: "/admin/users",
-                },
-                {
-                    name: this.__("Settings"),
-                    url: "/admin/settings",
-                },
-            ],
-            expanded: false,
-        };
-    },
-    watch: {
-        "$route.path"() {
-            this.expanded = false;
-        },
-    },
-});
+const pages = [
+    { name: "Home", url: "/admin" },
+    { name: "Invitations", url: "/admin/invitations" },
+    { name: "Servers", url: "/admin/servers" },
+    { name: "Users", url: "/admin/users" },
+    { name: "Settings", url: "/admin/settings" },
+];
+
+const menuItems = [
+    { text: "Your Profile", icon: "fa-user" },
+    { text: "Settings", icon: "fa-gear" },
+    { text: "Logout", icon: "fa-right-from-bracket" },
+];
 </script>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`{`
`2`		`- "recommendations": ["nrwl.angular-console", "esbenp.prettier-vscode", "dbaeumer.vscode-eslint", "firsttris.vscode-jest-runner", "hollowtree.vue-snippets", "pkief.material-icon-theme", "github.copilot", "nicholashsiang.vscode-vue3-snippets", "dbcode.dbcode", "znck.vue", "dalirnet.vue-sort"]`
	`2`	`+ "recommendations": ["nrwl.angular-console", "esbenp.prettier-vscode", "dbaeumer.vscode-eslint", "firsttris.vscode-jest-runner", "hollowtree.vue-snippets", "pkief.material-icon-theme", "github.copilot", "nicholashsiang.vscode-vue3-snippets", "dbcode.dbcode", "dalirnet.vue-sort", "johnsoncodehk.volar", "vue.volar"]`
`3`	`3`	`}`