feat: ✨ Replaced the default homepage with the invite interface

apps/wizarr-frontend/src/components/NavBars/DefaultNavBar.vue

@@ -1,9 +1,14 @@
 <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">
+    <nav class="bg-white dark:bg-gray-900 relative w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600">
+        <div class="flex flex-row-reverse flex-column fixed right-0 m-3">
+            <LanguageSelector iconClasses="text-base h-6 w-6" />
+            <ThemeToggle iconClasses="text-base h-6 w-6" />
+        </div>
+
         <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
             <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>
+                <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">{{ settings.server_name }}</span>
             </router-link>
             <div class="flex md:order-2">
                 <DefaultButton :to="buttonLink" size="sm">
@@ -15,16 +20,22 @@
 </template>
 
 <script lang="ts">
+import { mapState } from 'pinia';
 import { defineComponent } from "vue";
+import { useServerStore } from '@/stores/server';
 import { RouterLink } from "vue-router";
 
 import WizarrLogo from "../WizarrLogo.vue";
+import LanguageSelector from '@/components/Buttons/LanguageSelector.vue';
+import ThemeToggle from '@/components/Buttons/ThemeToggle.vue';
 import DefaultButton from "@/components/Buttons/DefaultButton.vue";
 
 export default defineComponent({
     name: "DefaultNavBar",
     components: {
         WizarrLogo,
+        LanguageSelector,
+        ThemeToggle,
         RouterLink,
         DefaultButton,
     },
@@ -42,5 +53,8 @@ export default defineComponent({
             default: "/",
         },
     },
+    computed: {
+        ...mapState(useServerStore, ['settings']),
+    },
 });
 </script>

apps/wizarr-frontend/src/modules/admin/components/Forms/InvitationForm.vue

@@ -377,7 +377,7 @@ export default defineComponent({
             });
         },
         inviteLink() {
-            return `${window.location.origin}/j/${this.inviteCode}`;
+            return `${window.location.origin}/i/${this.inviteCode}`;
         },
         ...mapState(useLibrariesStore, ["libraries"]),
         ...mapState(useServerStore, ["settings"]),

apps/wizarr-frontend/src/modules/admin/components/InvitationManager/Invitation.vue

@@ -91,7 +91,7 @@ export default defineComponent({
                     active: true,
                 },
                 {
-                    value: `${window.location.origin}/j/${this.invitation.code}`,
+                    value: `${window.location.origin}/i/${this.invitation.code}`,
                     active: false,
                 },
             ],

apps/wizarr-frontend/src/modules/admin/components/Invitations/InvitationList/InvitationItem.vue

@@ -105,7 +105,7 @@ export default defineComponent({
                 text: this.__(
                     'I wanted to invite you to join my media server.',
                 ),
-                url: `${window.location.origin}/j/${this.invite.code}`,
+                url: `${window.location.origin}/i/${this.invite.code}`,
             },
         };
     },
@@ -138,7 +138,7 @@ export default defineComponent({
         async copyToClipboard() {
             if (this.clipboard.isSupported) {
                 this.clipboard.copy(
-                    `${window.location.origin}/j/${this.invite.code}`,
+                    `${window.location.origin}/i/${this.invite.code}`,
                 );
                 this.$toast.info(this.__('Copied to clipboard'));
             } else {

apps/wizarr-frontend/src/modules/admin/components/Invitations/ShareSheet.vue

@@ -66,9 +66,9 @@ export default defineComponent({
     },
     data() {
         return {
-            invitationLink: `${window.location.origin}/j/${this.code}`,
+            invitationLink: `${window.location.origin}/i/${this.code}`,
             QRcode: useQRCode(
-                `${window.location.origin}/j/${this.code}`,
+                `${window.location.origin}/i/${this.code}`,
                 this.qrCodeOptions,
             ),
             clipboard: useClipboard({

apps/wizarr-frontend/src/modules/admin/components/Users/UserManager/User.vue

@@ -100,7 +100,7 @@ export default defineComponent({
                     active: true,
                 },
                 {
-                    value: `${window.location.origin}/j/${this.user.code}`,
+                    value: `${window.location.origin}/i/${this.user.code}`,
                     active: false,
                 },
             ],

apps/wizarr-frontend/src/modules/join/pages/Complete.vue → apps/wizarr-frontend/src/modules/home/pages/Complete.vue

@@ -29,12 +29,12 @@ import { defineComponent } from 'vue';
 import { useServerStore } from '@/stores/server';
 
 export default defineComponent({
-    name: 'JoinCompleteView',
+    name: 'CompleteView',
     computed: {
         ...mapState(useServerStore, ['settings']),
     },
     mounted() {
-        console.log('mounted join complete view');
+        console.log('mounted complete view');
     },
 });
 </script>

apps/wizarr-frontend/src/modules/join/pages/JoinForm.vue → apps/wizarr-frontend/src/modules/home/pages/JoinForm.vue

@@ -54,9 +54,9 @@ export default defineComponent({
             // Check if the code is valid
             if (!response) return;
 
-            // If the route is /join then change to /j/:code
-            if (this.$route.path === '/join') {
-                this.$router.replace(`/j/${this.code}`);
+            // If the route is /, /join, or /j, change to /i/:code
+            if (this.$route.path === '/' || this.$route.path === '/join' || this.$route.path === '/j') {
+                this.$router.replace(`/i/${this.code}`);
             }
 
             // Go to the next step

apps/wizarr-frontend/src/modules/home/router/index.ts

@@ -1,11 +1,27 @@
 import type { RouteRecordRaw } from 'vue-router';
 
 const routes: Readonly<RouteRecordRaw[]> = [
+    {
+        path: '/i/:invite',
+        name: 'invite',
+        component: () => import('../views/Home.vue'),
+    },
     {
         path: '/',
         name: 'home',
         component: () => import('../views/Home.vue'),
     },
+    // TODO: Remove this route after a few versions to allow users to get used to the new route
+    {
+        path: '/j/:invite',
+        name: 'invite',
+        component: () => import('../views/Home.vue'),
+    },
+    {
+        path: '/join',
+        name: 'home',
+        component: () => import('../views/Home.vue'),
+    },
 ];
 
 export default routes;