add 404 page

src/components/PageNotFound.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="flex flex-col justify-center items-center min-h-[88vh]">
+        <h1 class="font-bold">404</h1>
+        <h2 v-t="'info.page_not_found'" />
+        <a class="btn mt-16" href="/" v-t="'actions.back_to_home'" />
+    </div>
+</template>
+
+<style scoped>
+/* font size can't be handled within windiCSS classes because it's overwritten with !important */
+h1 {
+    font-size: 8rem !important;
+}
+h2 {
+    font-size: 1.7rem !important;
+}
+</style>

src/components/PreferencesPage.vue

@@ -314,7 +314,7 @@
         </tbody>
     </table>
     <br />
-    <p v-t="'information.preferences_note'" />
+    <p v-t="'info.preferences_note'" />
     <br />
     <button class="btn" v-t="'actions.reset_preferences'" @click="resetPreferences()" />
     <button class="btn mx-4" v-t="'actions.backup_preferences'" @click="backupPreferences()" />

src/locales/en.json

@@ -96,7 +96,8 @@
         "reset_preferences": "Reset preferences",
         "confirm_reset_preferences": "Are you sure you want to reset your preferences?",
         "backup_preferences": "Backup preferences",
-        "restore_preferences": "Restore preferences"
+        "restore_preferences": "Restore preferences",
+        "back_to_home": "Back to home"
     },
     "comment": {
         "pinned_by": "Pinned by",
@@ -141,7 +142,8 @@
     "subscriptions": {
         "subscribed_channels_count": "Subscribed to: {0}"
     },
-    "information": {
-        "preferences_note": "Note: preferences are saved in the local storage of your browser. Deleting your browser data will reset them."
+    "info": {
+        "preferences_note": "Note: preferences are saved in the local storage of your browser. Deleting your browser data will reset them.",
+        "page_not_found": "Page not found"
     }
-}
+}

src/router/router.js

@@ -80,6 +80,11 @@ const routes = [
         name: "Playlists",
         component: () => import("../components/PlaylistsPage.vue"),
     },
+    {
+        path: "/:pathMatch(.*)*",
+        name: "Page Not Found",
+        component: () => import("../components/PageNotFound.vue"),
+    },
 ];
 
 const router = createRouter({