Feat: Misc improvements (#107)

* Expand SCSS variables for improved theming

* Redesign 404 page with dynamic movie quotes

* Add password generator page

* Add missing Plex authentication page

* Improve torrent table and torrents page

* Enhance toast notification component

* Enhance popup components

* Refine UI components and remove DarkmodeToggle

* Add user profile component for settings

* Update autocomplete dropdown component

* Update register page

* Redesign signin and register pages with improved UX

* Improve torrent table with sort toggle and highlight colors

* eslint & prettier fixes

src/App.vue

@@ -15,8 +15,6 @@
 
     <!-- Command Palette for quick navigation -->
     <command-palette />
-
-    <darkmode-toggle />
   </div>
 </template>
 
@@ -26,7 +24,6 @@
   import NavigationIcons from "@/components/header/NavigationIcons.vue";
   import Popup from "@/components/Popup.vue";
   import CommandPalette from "@/components/ui/CommandPalette.vue";
-  import DarkmodeToggle from "@/components/ui/DarkmodeToggle.vue";
 
   const router = useRouter();
 </script>

src/components/CastListItem.vue

@@ -1,9 +1,25 @@
 <template>
-  <li class="card">
+  <li class="cast-card">
-    <a @click="openCastItem" @keydown.enter="openCastItem">
+    <a
-      <img :src="pictureUrl" alt="Movie or person poster image" />
+      class="cast-card__link"
-      <p class="name">{{ creditItem.name || creditItem.title }}</p>
+      role="button"
-      <p class="meta">{{ creditItem.character || creditItem.year }}</p>
+      tabindex="0"
+      :aria-label="ariaLabel"
+      @click="openCastItem"
+      @keydown.enter="openCastItem"
+    >
+      <div class="cast-card__image-wrapper">
+        <img
+          class="cast-card__image"
+          :src="pictureUrl"
+          :alt="imageAltText"
+          loading="lazy"
+        />
+      </div>
+      <div class="cast-card__content">
+        <p class="cast-card__name">{{ creditItem.name || creditItem.title }}</p>
+        <p v-if="metaText" class="cast-card__meta">{{ metaText }}</p>
+      </div>
     </a>
   </li>
 </template>
@@ -33,85 +49,139 @@
     return "/assets/no-image_small.svg";
   });
 
+  const metaText = computed(() => {
+    if ("character" in props.creditItem && props.creditItem.character) {
+      return props.creditItem.character;
+    }
+    if ("job" in props.creditItem && props.creditItem.job) {
+      return props.creditItem.job;
+    }
+    if ("year" in props.creditItem && props.creditItem.year) {
+      return props.creditItem.year;
+    }
+    return "";
+  });
+
+  const imageAltText = computed(() => {
+    const name = props.creditItem.name || (props.creditItem as any).title || "";
+    if ("character" in props.creditItem) {
+      return `${name} as ${props.creditItem.character}`;
+    }
+    if ("job" in props.creditItem) {
+      return `${name}, ${props.creditItem.job}`;
+    }
+    return name ? `Poster for ${name}` : "No image available";
+  });
+
+  const ariaLabel = computed(() => {
+    const name = props.creditItem.name || (props.creditItem as any).title || "";
+    if ("character" in props.creditItem && props.creditItem.character) {
+      return `View ${name}, played ${props.creditItem.character}`;
+    }
+    if ("job" in props.creditItem && props.creditItem.job) {
+      return `View ${name}, ${props.creditItem.job}`;
+    }
+    return `View ${name}`;
+  });
+
   function openCastItem() {
     store.dispatch("popup/open", { ...props.creditItem });
   }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-  li a p:first-of-type {
+  @import "scss/variables";
-    padding-top: 10px;
-  }
 
-  li.card p {
+  .cast-card {
-    font-size: 1em;
+    list-style: none;
-    padding: 0 10px;
+    margin: 0 10px 10px 0;
-    margin: 0;
+    width: 150px;
-    overflow: hidden;
+    flex-shrink: 0;
-    text-overflow: ellipsis;
-    max-height: calc(10px + ((16px * var(--line-height)) * 3));
-  }
-
-  li.card {
-    margin: 10px;
-    margin-right: 4px;
-    padding-bottom: 10px;
-    border-radius: 8px;
-    overflow: hidden;
-    cursor: pointer;
-
-    min-width: 140px;
-    width: 140px;
-    background-color: var(--background-color-secondary);
-    color: var(--text-color);
-
-    transition: all 0.3s ease;
-    transform: scale(0.97) translateZ(0);
-
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
     &:first-of-type {
       margin-left: 0;
     }
-
-    &:hover {
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-      transform: scale(1.03);
   }
 
-    .name {
+  .cast-card__link {
-      font-weight: 500;
-    }
-
-    .character {
-      font-size: 0.9em;
-    }
-
-    .meta {
-      font-size: 0.9em;
-      color: var(--text-color-70);
-      display: -webkit-box;
-      overflow: hidden;
-      -webkit-line-clamp: 1;
-      -webkit-box-orient: vertical;
-      // margin-top: auto;
-      max-height: calc((0.9em * var(--line-height)) * 1);
-    }
-
-    a {
-      display: block;
-      text-decoration: none;
-      height: 100%;
     display: flex;
     flex-direction: column;
+    height: 100%;
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+    border-radius: 10px;
+    overflow: hidden;
+    background-color: var(
+      --highlight-secondary,
+      var(--background-color-secondary)
+    );
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+    &:hover,
+    &:focus {
+      transform: translateY(-4px);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+      outline: none;
     }
 
-    img {
+    &:focus-visible {
-      width: 100%;
+      outline: 2px solid var(--highlight-color);
-      height: auto;
+      outline-offset: 2px;
-      max-height: 210px;
-      background-color: var(--background-color);
-      object-fit: cover;
     }
   }
+
+  .cast-card__image-wrapper {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 2 / 3;
+    overflow: hidden;
+    background: linear-gradient(
+      135deg,
+      var(--background-color) 0%,
+      var(--background-color-secondary) 100%
+    );
+  }
+
+  .cast-card__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .cast-card__content {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-height: 60px;
+  }
+
+  .cast-card__name {
+    margin: 0;
+    font-size: 0.95rem;
+    font-weight: 500;
+    line-height: 1.3;
+    color: var(--highlight-bg, var(--text-color));
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .cast-card__meta {
+    margin: 0;
+    font-size: 0.85rem;
+    font-weight: 400;
+    line-height: 1.3;
+    color: var(--highlight-bg, var(--text-color-70));
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 </style>

src/components/Popup.vue

@@ -1,16 +1,26 @@
 <template>
-  <div v-if="isOpen" class="movie-popup" @click="close" @keydown.enter="close">
+  <div
+    v-if="isOpen"
+    ref="popupContainer"
+    class="movie-popup"
+    role="dialog"
+    aria-modal="true"
+    tabindex="-1"
+    @click="close"
+    @keydown.enter="close"
+    @keydown="handleKeydown"
+  >
     <div class="movie-popup__box" @click.stop>
       <person v-if="type === 'person'" :id="id" type="person" />
       <movie v-else :id="id" :type="type"></movie>
-      <button class="movie-popup__close" @click="close"></button>
+      <button class="movie-popup__close" @click="close" tabindex="0"></button>
     </div>
     <i class="loader"></i>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, onBeforeUnmount } from "vue";
+  import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
   import { useStore } from "vuex";
   import Movie from "@/components/popup/Movie.vue";
   import Person from "@/components/popup/Person.vue";
@@ -26,6 +36,8 @@
   const isOpen: Ref<boolean> = ref();
   const id: Ref<string> = ref();
   const type: Ref<MediaTypes> = ref();
+  const popupContainer = ref<HTMLElement | null>(null);
+  let previouslyFocusedElement: HTMLElement | null = null;
 
   const unsubscribe = store.subscribe((mutation, state) => {
     if (!mutation.type.includes("popup")) return;
@@ -76,6 +88,75 @@
     close();
   }
 
+  function getFocusableElements(): HTMLElement[] {
+    if (!popupContainer.value) return [];
+
+    const focusableSelectors = [
+      "button:not([disabled])",
+      "a[href]",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])'
+    ].join(", ");
+
+    return Array.from(
+      popupContainer.value.querySelectorAll(focusableSelectors)
+    ) as HTMLElement[];
+  }
+
+  function trapFocus(event: KeyboardEvent) {
+    if (event.key !== "Tab") return;
+
+    const focusableElements = getFocusableElements();
+    if (focusableElements.length === 0) return;
+
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    if (event.shiftKey) {
+      // Shift + Tab
+      if (document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      }
+    } else {
+      // Tab
+      if (document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    trapFocus(event);
+  }
+
+  function setInitialFocus() {
+    nextTick(() => {
+      // Focus the popup container itself instead of a specific element
+      // This allows tab to start fresh without any element being focused
+      if (popupContainer.value) {
+        popupContainer.value.focus();
+      }
+    });
+  }
+
+  watch(isOpen, newValue => {
+    if (newValue) {
+      // Store the previously focused element
+      previouslyFocusedElement = document.activeElement as HTMLElement;
+      // Set focus to popup
+      setInitialFocus();
+    } else {
+      // Restore focus to previously focused element
+      if (previouslyFocusedElement) {
+        previouslyFocusedElement.focus();
+      }
+    }
+  });
+
   window.addEventListener("keyup", checkEventForEscapeKey);
 
   onMounted(() => {
@@ -104,6 +185,10 @@
     -webkit-overflow-scrolling: touch;
     overflow: auto;
 
+    &:focus {
+      outline: none;
+    }
+
     &__box {
       max-width: 768px;
       position: relative;

src/components/header/AutocompleteDropdown.vue

@@ -95,7 +95,8 @@
   }
 
   function parseElasticResponse(elasticResponse: IAutocompleteSearchResults) {
-    const data = elasticResponse.hits.hits;
+    const { hits } = elasticResponse.hits;
+    const data = hits.length > 0 ? hits : (searchResults.value ?? []);
 
     const results: Array<IAutocompleteResult> = [];
 

src/components/header/NavigationHeader.vue

@@ -41,7 +41,7 @@
 
   const signinNavigationIcon: INavigationIcon = {
     title: "Signin",
-    route: "/signin",
+    route: "/login",
     icon: IconProfileLock
   };
 

src/components/plex/PlexLibraryStats.vue

@@ -9,14 +9,19 @@
         unclickable: !!!stat.clickable
       }"
       @click="
-        stat.clickable && stat.value?.total > 0 && !loading && handleClick(stat.key)
+        stat.clickable &&
+        stat.value?.total > 0 &&
+        !loading &&
+        handleClick(stat.key)
       "
     >
       <div class="stat-icon">
         <component :is="stat.icon" />
       </div>
       <div class="stat-content">
-        <div class="stat-value" v-if="!loading">{{ formatNumber(stat.value?.total) }}</div>
+        <div class="stat-value" v-if="!loading">
+          {{ formatNumber(stat.value?.total) }}
+        </div>
         <div class="stat-value loading-dots" v-else>...</div>
         <div class="stat-label">{{ stat.label }}</div>
       </div>
@@ -26,7 +31,7 @@
 
 <script setup lang="ts">
   import { computed } from "vue";
-  import { formatNumber } from '@/utils'
+  import { formatNumber } from "@/utils";
   import IconMovie from "@/icons/IconMovie.vue";
   import IconShow from "@/icons/IconShow.vue";
   import IconMusic from "@/icons/IconMusic.vue";

src/components/plex/PlexServerInfo.vue

@@ -3,14 +3,14 @@
     <div class="plex-details">
       <div class="detail-row">
         <span class="detail-label">
-          <IconServer class="label-icon" />
+          <IconServer class="label-icon" style="fill: var(--text-color)" />
           Plex server name
         </span>
         <span class="detail-value">{{ serverName || "Unknown" }}</span>
       </div>
       <div class="detail-row">
         <span class="detail-label">
-          <IconSync class="label-icon" />
+          <IconSync class="label-icon" style="stroke: var(--text-color)" />
           Last Sync
         </span>
         <span class="detail-value">{{ lastSync || "Never" }}</span>
@@ -82,7 +82,6 @@
     }
 
     svg {
-      color: var(--text-color-60);
       flex-shrink: 0;
     }
 

src/components/popup/ActionButton.vue

@@ -2,8 +2,12 @@
   <li
     class="sidebar-list-element"
     :class="{ active, disabled }"
+    :tabindex="disabled ? -1 : 0"
+    role="button"
+    :aria-disabled="disabled"
     @click="emit('click')"
-    @keydown.enter="emit('click')"
+    @keydown.enter.prevent="emit('click')"
+    @keydown.space.prevent="emit('click')"
   >
     <slot></slot>
   </li>
@@ -53,8 +57,10 @@
     }
 
     &:hover,
+    &:focus,
     &.active {
       color: var(--text-color);
+      outline: none;
 
       div > svg,
       svg {
@@ -63,6 +69,12 @@
       }
     }
 
+    &:focus-visible {
+      outline: 2px solid var(--highlight-color);
+      outline-offset: 2px;
+      border-radius: 4px;
+    }
+
     &.active > div > svg,
     &.active > svg {
       fill: var(--highlight-color);

src/components/popup/Movie.vue

@@ -215,7 +215,7 @@
 
   const props = defineProps<Props>();
   const ASSET_URL = "https://image.tmdb.org/t/p/";
-  const COLORS_URL = "https://colors.schleppe.cloud/colors";
+  const COLORS_API = import.meta.env.VITE_SEASONED_COLORS_API || "";
   const ASSET_SIZES = ["w500", "w780", "original"];
 
   const media: Ref<IMovie | IShow> = ref();
@@ -352,7 +352,7 @@
   }
 
   async function colorsFromPoster(posterPath: string) {
-    const url = new URL(COLORS_URL);
+    const url = new URL("/colors", COLORS_API);
     url.searchParams.append("id", posterPath.replace("/", ""));
     url.searchParams.append("size", "w342");
 
@@ -435,7 +435,7 @@
 
       > img {
         width: 100%;
-        border-radius: inherit;
+        border-radius: calc(1.6rem - 1px);
       }
     }
   }

src/components/popup/Person.vue

@@ -51,7 +51,7 @@
       </Detail>
 
       <Detail
-        v-if="creditedShows.length"
+        v-if="creditedMovies.length"
         title="movies"
         :detail="`Credited in ${creditedMovies.length} movies`"
       >

src/components/settings/DataExport.vue

@@ -24,8 +24,8 @@
 <script setup lang="ts">
   import { ref } from "vue";
   import StorageManager from "./StorageManager.vue";
-  import ExportSection from "./ExportSection.vue"
+  import ExportSection from "./ExportSection.vue";
-  import RequestHistory from "./RequestHistory.vue"
+  import RequestHistory from "./RequestHistory.vue";
   import DangerZoneAction from "./DangerZoneAction.vue";
 
   const requestStats = ref({

src/components/settings/ExportSection.vue

@@ -72,8 +72,6 @@
   function convertToCSV(data: any): string {
     return `Username,Total Requests,Approved,Pending,Export Date\n${data.username},${data.requests.total},${data.requests.approved},${data.requests.pending},${data.exportDate}`;
   }
-
-
 </script>
 
 <style lang="scss" scoped>

src/components/settings/StorageSectionBrowser.vue

@@ -74,7 +74,6 @@
         </div>
       </div>
     </div>
-
   </div>
 </template>
 

src/components/settings/UserProfile.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="user-profile">
+    <div class="profile-card">
+      <div class="avatar-circle">{{ userInitials }}</div>
+      <div class="profile-details">
+        <div class="name-row">
+          <span class="username">{{ username }}</span>
+          <span :class="['role-badge', `role-badge--${userRole}`]">{{
+            userRole
+          }}</span>
+          <span
+            v-if="plexUsername"
+            class="role-badge role-badge--plex"
+            :title="`Connected as ${plexUsername}`"
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 256 256"
+              fill="currentColor"
+            >
+              <path
+                d="M128 0C57.3 0 0 57.3 0 128s57.3 128 128 128 128-57.3 128-128S198.7 0 128 0zm57.7 128.7l-48 48c-.4.4-.9.7-1.4.9-.5.2-1.1.4-1.6.4s-1.1-.1-1.6-.4c-.5-.2-1-.5-1.4-.9l-48-48c-1.6-1.6-1.6-4.1 0-5.7 1.6-1.6 4.1-1.6 5.7 0l41.1 41.1V80c0-2.2 1.8-4 4-4s4 1.8 4 4v84.1l41.1-41.1c1.6-1.6 4.1-1.6 5.7 0 .8.8 1.2 1.8 1.2 2.8s-.4 2.1-1.2 2.9z"
+              />
+            </svg>
+            Plex
+          </span>
+        </div>
+        <span class="member-info">Member since {{ memberSince }}</span>
+        <span v-if="plexUsername" class="plex-info"
+          >Connected as {{ plexUsername }}</span
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, onMounted } from "vue";
+  import { useStore } from "vuex";
+
+  const store = useStore();
+  const plexUsername = ref<string>("");
+
+  const username = computed(() => store.getters["user/username"] || "User");
+
+  const userRole = computed(() =>
+    store.getters["user/admin"] ? "admin" : "user"
+  );
+
+  const userInitials = computed(() => username.value.slice(0, 2).toUpperCase());
+
+  const memberSinceDate = computed(() => {
+    const date = new Date();
+    date.setMonth(date.getMonth() - 6);
+    return date;
+  });
+
+  const memberSince = computed(() =>
+    memberSinceDate.value.toLocaleDateString("en-US", {
+      month: "short",
+      year: "numeric"
+    })
+  );
+
+  const monthsActive = computed(() => {
+    const now = new Date();
+    return (
+      (now.getFullYear() - memberSinceDate.value.getFullYear()) * 12 +
+      now.getMonth() -
+      memberSinceDate.value.getMonth()
+    );
+  });
+
+  // Load Plex username from localStorage
+  function loadPlexUsername() {
+    const cachedData = localStorage.getItem("plex_user_data");
+    if (cachedData) {
+      try {
+        const plexData = JSON.parse(cachedData);
+        plexUsername.value = plexData.username || "";
+      } catch (error) {
+        console.error("Error parsing cached Plex data:", error);
+      }
+    }
+  }
+
+  onMounted(() => {
+    loadPlexUsername();
+  });
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .user-profile {
+    @include mobile-only {
+      width: 100%;
+    }
+  }
+
+  .profile-card {
+    display: flex;
+    align-items: center;
+    gap: 0.85rem;
+    padding: 0.85rem;
+    background-color: var(--background-ui);
+    border-radius: 0.25rem;
+
+    @include mobile-only {
+      padding: 0.75rem;
+      gap: 0.75rem;
+    }
+  }
+
+  .avatar-circle {
+    width: 55px;
+    height: 55px;
+    border-radius: 50%;
+    background: linear-gradient(
+      135deg,
+      var(--highlight-color),
+      var(--color-green-70)
+    );
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: $white;
+    flex-shrink: 0;
+
+    @include mobile-only {
+      width: 48px;
+      height: 48px;
+      font-size: 1.1rem;
+    }
+  }
+
+  .profile-details {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    min-width: 0;
+  }
+
+  .name-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .username {
+    font-size: 1.05rem;
+    font-weight: 600;
+    color: $text-color;
+    line-height: 1.2;
+
+    @include mobile-only {
+      font-size: 0.95rem;
+    }
+  }
+
+  .member-info {
+    font-size: 0.8rem;
+    color: $text-color-70;
+    line-height: 1.2;
+
+    @include mobile-only {
+      font-size: 0.75rem;
+    }
+  }
+
+  .plex-info {
+    font-size: 0.75rem;
+    color: #cc7b19;
+    line-height: 1.2;
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+
+    @include mobile-only {
+      font-size: 0.7rem;
+    }
+  }
+
+  .role-badge {
+    padding: 0.2rem 0.55rem;
+    border-radius: 0.25rem;
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    font-weight: 600;
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+
+    &--admin {
+      background-color: var(--color-warning);
+      color: $black;
+    }
+
+    &--user {
+      background-color: var(--background-40);
+      color: $text-color;
+    }
+
+    &--plex {
+      background-color: #cc7b19;
+      color: $white;
+      cursor: help;
+
+      svg {
+        flex-shrink: 0;
+      }
+    }
+  }
+</style>

src/components/torrent/TorrentTable.vue

@@ -1,43 +1,53 @@
 <template>
+  <div class="torrent-table">
+    <div class="sort-toggle">
+      <span class="sort-label">Sort by:</span>
+      <div class="sort-options">
+        <button
+          v-for="option in sortOptions"
+          :key="option.value"
+          :class="['sort-btn', { active: selectedSort === option.value }]"
+          @click="changeSort(option.value)"
+        >
+          {{ option.label }}
+        </button>
+      </div>
+    </div>
+
     <table>
       <thead class="table__header noselect">
         <tr>
           <th
-          v-for="column in columns"
+            class="name-header"
-          :key="column"
+            :class="selectedSort === 'name' ? 'active' : null"
-          :class="column === selectedColumn ? 'active' : null"
+            @click="changeSort('name')"
-          @click="sortTable(column)"
           >
-          {{ column }}
+            Name
-          <span v-if="prevCol === column && direction">↑</span>
+            <span v-if="selectedSort === 'name'">{{
-          <span v-if="prevCol === column && !direction">↓</span>
+              direction ? "↑" : "↓"
+            }}</span>
           </th>
+          <th class="add-header">Add</th>
         </tr>
       </thead>
 
       <tbody>
         <tr
-        v-for="torrent in torrents"
+          v-for="torrent in sortedTorrents"
           :key="torrent.magnet"
           class="table__content"
         >
           <td
+            class="torrent-info"
             @click="expand($event, torrent.name)"
             @keydown.enter="expand($event, torrent.name)"
           >
-          {{ torrent.name }}
+            <div class="torrent-title">{{ torrent.name }}</div>
-        </td>
+            <div class="torrent-meta">
-        <td
+              <span class="meta-item">{{ torrent.size }}</span>
-          @click="expand($event, torrent.name)"
+              <span class="meta-separator">•</span>
-          @keydown.enter="expand($event, torrent.name)"
+              <span class="meta-item">{{ torrent.seed }} seeders</span>
-        >
+            </div>
-          {{ torrent.seed }}
-        </td>
-        <td
-          @click="expand($event, torrent.name)"
-          @keydown.enter="expand($event, torrent.name)"
-        >
-          {{ torrent.size }}
           </td>
           <td
             class="download"
@@ -49,10 +59,11 @@
         </tr>
       </tbody>
     </table>
+  </div>
 </template>
 
 <script setup lang="ts">
-  import { ref } from "vue";
+  import { ref, computed } from "vue";
   import IconMagnet from "@/icons/IconMagnet.vue";
   import type { Ref } from "vue";
   import { sortableSize } from "../../utils";
@@ -69,14 +80,55 @@
   const props = defineProps<Props>();
   const emit = defineEmits<Emit>();
 
-  const columns: string[] = ["name", "seed", "size", "add"];
+  const sortOptions = [
+    { value: "name", label: "Name" },
+    { value: "size", label: "Size" },
+    { value: "seed", label: "Seeders" }
+  ];
 
   const torrents: Ref<ITorrent[]> = ref(props.torrents);
   const direction: Ref<boolean> = ref(false);
-  const selectedColumn: Ref<string> = ref(columns[0]);
+  const selectedSort: Ref<string> = ref("size");
-  const prevCol: Ref<string> = ref("");
+  const prevSort: Ref<string> = ref("");
+
+  const sortedTorrents = computed(() => {
+    const sorted = [...torrents.value];
+
+    if (selectedSort.value === "name") {
+      sorted.sort((a, b) =>
+        direction.value
+          ? a.name.localeCompare(b.name)
+          : b.name.localeCompare(a.name)
+      );
+    } else if (selectedSort.value === "size") {
+      sorted.sort((a, b) =>
+        direction.value
+          ? sortableSize(a.size) - sortableSize(b.size)
+          : sortableSize(b.size) - sortableSize(a.size)
+      );
+    } else if (selectedSort.value === "seed") {
+      sorted.sort((a, b) =>
+        direction.value
+          ? parseInt(a.seed, 10) - parseInt(b.seed, 10)
+          : parseInt(b.seed, 10) - parseInt(a.seed, 10)
+      );
+    }
+
+    return sorted;
+  });
+
+  function changeSort(sortBy: string) {
+    if (prevSort.value === sortBy) {
+      direction.value = !direction.value;
+    } else {
+      direction.value = false;
+      selectedSort.value = sortBy;
+    }
+    prevSort.value = sortBy;
+  }
 
   function expand(event: MouseEvent, text: string) {
+    return;
     const elementClicked = event.target as HTMLElement;
     const tableRow = elementClicked.parentElement;
     const scopedStyleDataVariable = Object.keys(tableRow.dataset)[0];
@@ -89,8 +141,6 @@
     if (existingExpandedElement) {
       existingExpandedElement.remove();
 
-      // Clicked the same element twice, remove and return
-      // not recreate and collapse
       if (clickedSameTwice) return;
     }
 
@@ -100,58 +150,12 @@
     expandedCol.dataset[scopedStyleDataVariable] = "";
     expandedRow.className = "expanded";
     expandedCol.innerText = text;
-    expandedCol.colSpan = 4;
+
+    expandedCol.colSpan = 2;
 
     expandedRow.appendChild(expandedCol);
     tableRow.insertAdjacentElement("afterend", expandedRow);
   }
-
-  function sortName() {
-    const torrentsCopy = [...torrents.value];
-    if (direction.value) {
-      torrents.value = torrentsCopy.sort((a, b) => (a.name < b.name ? 1 : -1));
-    } else {
-      torrents.value = torrentsCopy.sort((a, b) => (a.name > b.name ? 1 : -1));
-    }
-  }
-
-  function sortSeed() {
-    const torrentsCopy = [...torrents.value];
-    if (direction.value) {
-      torrents.value = torrentsCopy.sort(
-        (a, b) => parseInt(a.seed, 10) - parseInt(b.seed, 10)
-      );
-    } else {
-      torrents.value = torrentsCopy.sort(
-        (a, b) => parseInt(b.seed, 10) - parseInt(a.seed, 10)
-      );
-    }
-  }
-
-  function sortSize() {
-    const torrentsCopy = [...torrents.value];
-    if (direction.value) {
-      torrents.value = torrentsCopy.sort((a, b) =>
-        sortableSize(a.size) > sortableSize(b.size) ? 1 : -1
-      );
-    } else {
-      torrents.value = torrentsCopy.sort((a, b) =>
-        sortableSize(a.size) < sortableSize(b.size) ? 1 : -1
-      );
-    }
-  }
-
-  function sortTable(col, sameDirection = false) {
-    if (prevCol.value === col && sameDirection === false) {
-      direction.value = !direction.value;
-    }
-
-    if (col === "name") sortName();
-    else if (col === "seed") sortSeed();
-    else if (col === "size") sortSize();
-
-    prevCol.value = col;
-  }
 </script>
 
 <style lang="scss" scoped>
@@ -159,20 +163,74 @@
   @import "scss/media-queries";
   @import "scss/elements";
 
+  .torrent-table {
+    width: 100%;
+  }
+
+  .sort-toggle {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+    flex-wrap: wrap;
+
+    .sort-label {
+      font-size: 0.85rem;
+      color: var(--text-color-70);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .sort-options {
+      display: flex;
+      gap: 0.25rem;
+    }
+
+    .sort-btn {
+      border: 1px solid var(--highlight-bg, var(--background-color-40));
+      color: var(--text-color-70);
+      padding: 0.35rem 0.65rem;
+      font-size: 0.8rem;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+
+      &:hover {
+        background: var(--highlight-bg, var(--background-color));
+        color: var(--text-color);
+      }
+
+      &.active {
+        background: var(--highlight-color);
+        color: var(--text-color);
+        border-color: var(--highlight-color, $green);
+      }
+
+      @include mobile {
+        padding: 0.4rem 0.6rem;
+        font-size: 0.75rem;
+      }
+    }
+  }
+
   table {
     border-spacing: 0;
     margin-top: 0.5rem;
     width: 100%;
-    // border-collapse: collapse;
+    max-width: 100%;
     border-radius: 0.5rem;
     overflow: hidden;
+    table-layout: auto;
   }
 
   th,
   td {
-    border: 0.5px solid var(--background-color-40);
+    overflow: hidden;
+    text-overflow: ellipsis;
+
     @include mobile {
-      white-space: nowrap;
       padding: 0;
     }
   }
@@ -181,69 +239,115 @@
     position: relative;
     user-select: none;
     -webkit-user-select: none;
-    color: var(--table-header-text-color);
+    color: var(--highlight-bg, var(--table-header-text-color));
     text-transform: uppercase;
     cursor: pointer;
-    background-color: var(--table-background-color);
+    background-color: var(--highlight-color, var(--highlight-color));
-    background-color: var(--highlight-color);
-    // background-color: black;
-    // color: var(--color-green);
     letter-spacing: 0.8px;
     font-size: 1rem;
 
     th:last-of-type {
-      padding-right: 0.4rem;
+      padding: 0 0.4rem;
+      border-left: 1px solid var(--highlight-bg, var(--background-color));
     }
   }
 
   tbody {
-    // first column
+    // first column - torrent info
-    tr td:first-of-type {
+    .torrent-info {
       position: relative;
-      padding: 0 0.3rem;
+      padding: 0.5rem 0.6rem;
       cursor: default;
-      word-break: break-all;
+      word-break: break-word;
-      border-left: 1px solid var(--table-background-color);
+      border-left: 1px solid var(--highlight-secondary, var(--highlight-color));
 
       @include mobile {
-        max-width: 40vw;
+        width: 100%;
-        overflow-x: hidden;
+        padding: 0.75rem 0.5rem;
+      }
+
+      .torrent-title {
+        font-weight: 500;
+        margin-bottom: 0.25rem;
+        line-height: 1.3;
+        word-break: break-word;
+        overflow-wrap: break-word;
+
+        @include mobile {
+          font-size: 0.95rem;
         }
       }
 
-    // all columns except first
+      .torrent-meta {
-    tr td:not(td:first-of-type) {
+        font-size: 0.85rem;
-      text-align: center;
+        display: flex;
+        opacity: 70%;
+        align-items: center;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+        margin-top: 0.25rem;
+
+        .meta-item {
           white-space: nowrap;
         }
 
-    // last column
+        .meta-separator {
+          color: var(--text-color-40);
+        }
+      }
+    }
+
+    // last column - action
     tr td:last-of-type {
       vertical-align: middle;
       cursor: pointer;
-      border-right: 1px solid var(--table-background-color);
+      border-right: 1px solid var(--highlight-secondary, var(--highlight-color));
+      max-width: 60px;
+      text-align: center;
+
+      @include mobile {
+        width: 50px;
+      }
 
       svg {
         width: 21px;
         display: block;
         margin: auto;
         padding: 0.3rem 0;
-        fill: var(--text-color);
+        fill: var(inherit, var(--text-color));
+
+        @include mobile {
+          width: 18px;
+        }
       }
     }
 
     // alternate background color per row
     tr {
-      background-color: var(--background-color);
+      background-color: var(--highlight-bg, var(--background-90));
+      color: var(--text-color);
+
+      td {
+        border-left: 1px solid
+          var(--highlight-secondary, var(--highlight-color));
+        fill: var(--text-color);
+      }
+    }
+    tr:nth-child(odd) {
+      background-color: var(--highlight-secondary, var(--background-color));
+      color: var(--highlight-bg, var(--text-color));
+
+      td {
+        fill: var(--highlight-bg, var(--text-color)) !important;
       }
-    tr:nth-child(even) {
-      background-color: var(--background-70);
     }
 
     // last element rounded corner border
     tr:last-of-type {
       td {
-        border-bottom: 1px solid var(--table-background-color);
+        border-bottom: 1px solid
+          var(--highlight-secondary, var(--highlight-color));
+        border-left: 1px solid var(--highlight-bg, var(--text-color));
       }
 
       td:first-of-type {
@@ -259,15 +363,16 @@
   .expanded {
     padding: 0.25rem 1rem;
     max-width: 100%;
-    border-left: 1px solid $text-color;
+    border-left: 1px solid var(--text-color);
-    border-right: 1px solid $text-color;
+    border-right: 1px solid var(--text-color);
-    border-bottom: 1px solid $text-color;
+    border-bottom: 1px solid var(--text-color);
 
     td {
       white-space: normal;
       word-break: break-all;
       padding: 0.5rem 0.15rem;
       width: 100%;
+      color: var(--text-color);
     }
   }
 </style>

src/components/ui/DarkmodeToggle.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="darkToggle">
-    <span @click="toggleDarkmode" @keydown.enter="toggleDarkmode">{{
-      darkmodeToggleIcon
-    }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref, computed } from "vue";
-
-  function systemDarkModeEnabled() {
-    const computedStyle = window.getComputedStyle(document.body);
-    if (computedStyle?.colorScheme != null) {
-      return computedStyle.colorScheme.includes("dark");
-    }
-    return false;
-  }
-
-  const darkmode = ref(systemDarkModeEnabled());
-  const darkmodeToggleIcon = computed(() => {
-    return darkmode.value ? "🌝" : "🌚";
-  });
-
-  function toggleDarkmode() {
-    darkmode.value = !darkmode.value;
-    document.body.className = darkmode.value ? "dark" : "light";
-  }
-</script>
-
-<style lang="scss" scoped>
-  .darkToggle {
-    height: 25px;
-    width: 25px;
-    cursor: pointer;
-    position: fixed;
-    margin-bottom: 1.5rem;
-    margin-right: 2px;
-    bottom: 0;
-    right: 0;
-    z-index: 10;
-
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-</style>

src/components/ui/SeasonedButton.vue

@@ -2,7 +2,7 @@
   <button
     type="button"
     :class="{ active: active, fullwidth: fullWidth }"
-    @click="emit('click')"
+    @click="event => emit('click', event)"
   >
     <slot></slot>
   </button>
@@ -15,7 +15,7 @@
   }
 
   interface Emit {
-    (e: "click");
+    (e: "click", event?: MouseEvent);
   }
 
   defineProps<Props>();
@@ -37,7 +37,6 @@
     min-height: 45px;
     padding: 5px 10px 4px 10px;
     margin: 0;
-    margin-right: 0.3rem;
     color: $text-color;
     background: $background-color-secondary;
     cursor: pointer;

src/components/ui/SeasonedInput.vue

@@ -81,7 +81,6 @@
     display: flex;
     width: 100%;
     position: relative;
-    max-width: 35rem;
     border: 1px solid var(--text-color-50);
     background-color: var(--background-color-secondary);
 

src/composables/useTheme.ts

@@ -22,9 +22,9 @@ function applyTheme(theme: Theme) {
 }
 
 export function useTheme() {
-  const savedTheme = computed(() => {
+  const savedTheme = computed(
-    return (localStorage.getItem("theme-preference") as Theme) || "auto";
+    () => (localStorage.getItem("theme-preference") as Theme) || "auto"
-  });
+  );
 
   function initTheme() {
     const theme = savedTheme.value;

src/modules/user.ts

@@ -17,7 +17,7 @@ export interface CookieOptions {
  * Read a cookie value.
  */
 export function getAuthorizationCookie(): string | null {
-  const key = 'authorization';
+  const key = "authorization";
   const array = document.cookie.split(";");
   let match = null;
 

src/pages/404Page.vue

@@ -1,20 +1,28 @@
 <template>
   <div>
-    <section class="not-found" :style="backgroundImageCSS">
+    <section class="not-found">
-      <h1 class="not-found__title">Page Not Found</h1>
+      <div class="not-found__content">
+        <h1 class="not-found__title">404</h1>
+        <p class="not-found__subtitle">Page Not Found</p>
+        <div v-if="quote.text" class="quote">
+          &ldquo;{{ quote.text }}&rdquo;
+          <span v-if="quote.movie" class="quote__movie">
+            - {{ quote.movie }} {{ quote.year }}
+          </span>
+        </div>
         <seasoned-button class="button" @click="goBack">
-        go back to previous page
+          Go Back
         </seasoned-button>
+      </div>
     </section>
   </div>
 </template>
 
 <script setup lang="ts">
+  import { onMounted } from "vue";
   import { useStore } from "vuex";
   import SeasonedButton from "@/components/ui/SeasonedButton.vue";
-
+  import { ref } from "vue";
-  const backgroundImageCSS =
-    'background-image: url("/assets/pulp-fiction.jpg")';
 
   const store = useStore();
 
@@ -22,55 +30,311 @@
     store.dispatch("popup/close");
   }
 
+  const isMounted = ref(false);
+  const quotes = [
+    // --- Disney / Pixar 90s & early ---
+    { text: "Hakuna Matata", movie: "The Lion King", year: "1994" },
+    { text: "To infinity and beyond!", movie: "Toy Story", year: "1995" },
+    { text: "You're my favorite deputy.", movie: "Toy Story", year: "1995" },
+    {
+      text: "I have a brilliant beyond brilliant idea!",
+      movie: "The Parent Trap",
+      year: "1998"
+    },
+    {
+      text: "I'm not bad, I'm just drawn that way.",
+      movie: "Who Framed Roger Rabbit",
+      year: "1988"
+    },
+    // --- Classic 90s movies ---
+    {
+      text: "Life was like a box of chocolates.",
+      movie: "Forrest Gump",
+      year: "1994"
+    },
+    {
+      text: "Hasta la vista, baby.",
+      movie: "Terminator 2: Judgment Day",
+      year: "1991"
+    },
+    {
+      text: "There's no crying in baseball!",
+      movie: "A League of Their Own",
+      year: "1992"
+    },
+    {
+      text: "Get busy livin’ or get busy dyin’",
+      movie: "The Shawshank Redemption",
+      year: "1994"
+    },
+    { text: "I’m the king of the world!", movie: "Titanic", year: "1997" },
+    { text: "You had me at hello.", movie: "Jerry Maguire", year: "1996" },
+    { text: "Show me the money!", movie: "Jerry Maguire", year: "1996" },
+    {
+      text: "Yippee-ki-yay …",
+      movie: "Die Hard with a Vengeance",
+      year: "1995"
+    },
+    { text: "You’re gonna need a bigger boat.", movie: "Jaws", year: "1975" },
+    { text: "I see dead people.", movie: "The Sixth Sense", year: "1999" },
+    { text: "Why so serious?", movie: "The Dark Knight", year: "2008" },
+    { text: "Just keep swimming.", movie: "Finding Nemo", year: "2003" },
+    { text: "I’ll be back.", movie: "The Terminator", year: "1984" },
+    // --- Cult comedy quotes ---
+    {
+      text: "Stay classy, San Diego.",
+      movie: "Anchorman: The Legend of Ron Burgundy",
+      year: "2004"
+    },
+    {
+      text: "Milk was a bad choice.",
+      movie: "Anchorman: The Legend of Ron Burgundy",
+      year: "2004"
+    },
+    {
+      text: "60% of the time, it works every time.",
+      movie: "Anchorman: The Legend of Ron Burgundy",
+      year: "2004"
+    },
+    {
+      text: "I love lamp.",
+      movie: "Anchorman: The Legend of Ron Burgundy",
+      year: "2004"
+    },
+    {
+      text: "Well that escalated quickly.",
+      movie: "Anchorman: The Legend of Ron Burgundy",
+      year: "2004"
+    },
+    // --- A24 & Modern Indie ---
+    {
+      text: "In another life, I would have really liked just doing laundry and taxes with you.",
+      movie: "Everything Everywhere All at Once",
+      year: "2022"
+    },
+    {
+      text: "Every rejection, every disappointment has led you here.",
+      movie: "Everything Everywhere All at Once",
+      year: "2022"
+    },
+    {
+      text: "Whatever you plan on happening, never happens.",
+      movie: "C’mon C’mon",
+      year: "2021"
+    },
+    { text: "We made promises, Harper.", movie: "Men", year: "2022" },
+    // (A24 quotes are harder to find officially listed, so these are standout lines from fans and quote compilations.) :contentReference[oaicite:1]{index=1}
+    // --- Grand iconic movie quotes ---
+    { text: "May the Force be with you.", movie: "Star Wars", year: "1977" },
+    {
+      text: "Frankly, my dear, I don't give a damn.",
+      movie: "Gone with the Wind",
+      year: "1939"
+    },
+    {
+      text: "I love the smell of napalm in the morning.",
+      movie: "Apocalypse Now",
+      year: "1979"
+    },
+    {
+      text: "Toto, I've a feeling we're not in Kansas anymore.",
+      movie: "The Wizard of Oz",
+      year: "1939"
+    },
+    { text: "Here's looking at you, kid.", movie: "Casablanca", year: "1942" },
+    {
+      text: "You can't handle the truth!",
+      movie: "A Few Good Men",
+      year: "1992"
+    },
+    { text: "Bond. James Bond.", movie: "Dr. No", year: "1962" },
+    { text: "Houston, we have a problem.", movie: "Apollo 13", year: "1995" },
+    { text: "I see dead people.", movie: "The Sixth Sense", year: "1999" },
+    { text: "Rosebud.", movie: "Citizen Kane", year: "1941" },
+    { text: "Plastics.", movie: "The Graduate", year: "1967" },
+    { text: "You talkin’ to me?", movie: "Taxi Driver", year: "1976" },
+    {
+      text: "Fasten your seatbelts. It's going to be a bumpy night.",
+      movie: "All About Eve",
+      year: "1950"
+    },
+    { text: "Go ahead, make my day.", movie: "Sudden Impact", year: "1983" },
+    // --- More quotable modern lines ---
+    {
+      text: "With great power comes great responsibility.",
+      movie: "Spider‑Man",
+      year: "2002"
+    },
+    {
+      text: "You’re a wizard, Harry.",
+      movie: "Harry Potter and the Sorcerer’s Stone",
+      year: "2001"
+    },
+    {
+      text: "I am your father.",
+      movie: "Star Wars: The Empire Strikes Back",
+      year: "1980"
+    },
+    { text: "Wakanda Forever!", movie: "Black Panther", year: "2018" },
+    { text: "I am Iron Man.", movie: "Iron Man", year: "2008" },
+    { text: "Avengers, assemble!", movie: "Avengers: Endgame", year: "2019" },
+    { text: "We’ll always have Paris.", movie: "Casablanca", year: "1942" },
+    {
+      text: "Just when I thought I was out, they pull me back in.",
+      movie: "The Godfather Part III",
+      year: "1990"
+    },
+    {
+      text: "I drink your milkshake!",
+      movie: "There Will Be Blood",
+      year: "2007"
+    },
+    // --- Crowd‑sourced favorite 90s lines ---
+    {
+      text: "The greatest trick the Devil ever pulled …",
+      movie: "The Usual Suspects",
+      year: "1995"
+    },
+    { text: "English, motherfucker …", movie: "Pulp Fiction", year: "1994" },
+    {
+      text: "As far back as I can remember …",
+      movie: "Goodfellas",
+      year: "1990"
+    },
+    { text: "Run, Forrest, run!", movie: "Forrest Gump", year: "1994" }
+  ];
+  const quote = ref({
+    text: "404 - Page Not Found",
+    movie: "",
+    year: ""
+  });
+
+  onMounted(() => {
+    isMounted.value = true;
+    quote.value = quotes[Math.floor(Math.random() * quotes.length)];
+  });
+
   function goBack() {
-    window.history.go(-2);
+    window.history.go(-1);
   }
 </script>
 
 <style lang="scss" scoped>
   @import "scss/variables.scss";
-  @import "scss/media-queries";
+  @import "scss/media-queries.scss";
-
-  .button {
-    font-size: 1.2rem;
-    z-index: 10;
-
-    @include mobile {
-      font-size: 1rem;
-      width: content;
-    }
-  }
 
   .not-found {
+    position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
-    flex-direction: column;
+    min-height: calc(100vh - var(--header-size));
-    height: calc(100vh - var(--header-size));
+    background:
+      linear-gradient(135deg, #1a1a2e 0%, rgba(0, 0, 0, 0.5) 100%),
+      url("/assets/pulp-fiction.jpg");
     background-size: cover;
-    background-position: 50% 50%;
+    background-position: center;
-    background-repeat: no-repeat no-repeat;
+    background-blend-mode: multiply;
+    color: white;
+    overflow: hidden;
 
     &::before {
       content: "";
       position: absolute;
-      height: calc(100vh - var(--header-size));
+      top: 0;
-      width: 100%;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: radial-gradient(
+        circle at 50% 50%,
+        rgba(120, 65, 255, 0.1) 0%,
+        transparent 70%
+      );
       pointer-events: none;
-      background: var(--background-40);
+    }
+
+    &__content {
+      text-align: center;
+      z-index: 10;
+      padding: 2rem;
+      margin-top: calc(-1 * var(--header-size));
+
+      @include mobile {
+        padding: 1rem;
+      }
     }
 
     &__title {
-      font-size: 2.5rem;
+      font-size: clamp(4rem, 10vw, 8rem);
-      font-weight: 500;
+      font-weight: 800;
-      padding: 0 1rem;
+      margin: 0;
-      color: var(--text-color);
+      line-height: 1;
-      position: relative;
+      letter-spacing: -0.02em;
-      background-color: var(--background-90);
+      color: white;
-
+      text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
-      @include tablet-min {
-        font-size: 3.5rem;
     }
+
+    &__subtitle {
+      font-size: clamp(1.2rem, 3vw, 1.8rem);
+      font-weight: 300;
+      margin: 0.5rem 0 2rem;
+      color: rgba(255, 255, 255, 0.8);
+      letter-spacing: 0.05em;
+    }
+  }
+
+  .quote {
+    font-family: "Georgia", serif;
+    font-style: italic;
+    font-size: clamp(1.2rem, 3vw, 1.8rem);
+    margin: 1.5rem 0;
+    color: rgba(255, 255, 255, 0.9);
+    line-height: 1.6;
+    max-width: 600px;
+    text-align: center;
+    padding: 0 1rem;
+
+    @include mobile {
+      font-size: clamp(1rem, 2.5vw, 1.4rem);
+    }
+  }
+
+  .quote__movie {
+    display: block;
+    font-size: clamp(0.9rem, 1.8vw, 1.2rem);
+    margin-top: 0.5rem;
+    color: rgba(255, 255, 255, 0.7);
+    font-style: normal;
+    opacity: 0.8;
+    font-family: "Arial", sans-serif;
+    font-weight: 400;
+
+    @include mobile {
+      font-size: clamp(0.8rem, 1.5vw, 1rem);
+    }
+  }
+
+  .button {
+    font-size: clamp(1rem, 2vw, 1.4rem);
+    font-weight: 600;
+    padding: 1rem 2.5rem;
+    background: rgba(255, 255, 255, 0.9);
+    color: #1a1a2e;
+    border: none;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+
+    &:hover {
+      background: white;
+      transform: translateY(-2px);
+      box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
+    }
+
+    @include mobile {
+      padding: 0.8rem 2rem;
+      font-size: 1rem;
     }
   }
 </style>

src/pages/GenPasswordPage.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="password">
+    <h1 class="password__title">Password Generator</h1>
+
+    <div class="password__content">
+      <password-generator />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import PasswordGenerator from "@/components/settings/PasswordGenerator.vue";
+
+  function handleGeneratedPassword() {
+    return;
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .password {
+    padding: 3rem;
+    max-width: 100%;
+
+    @include mobile-only {
+      padding: 0.75rem;
+    }
+
+    &__title {
+      margin: 0 0 2rem 0;
+      font-size: 2rem;
+      font-weight: 300;
+      color: $text-color;
+      line-height: 1;
+
+      @include mobile-only {
+        font-size: 1.5rem;
+        margin: 0 0 1rem 0;
+      }
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: 0.65rem;
+    }
+  }
+</style>

src/pages/MissingPlexAuthPage.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="not-authenticated">
+    <h1><IconStop /> Must be authenticated with Plex</h1>
+    <p>Go to Settings to link your Plex account</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import IconStop from "@/icons/IconStop.vue";
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/media-queries";
+
+  .not-authenticated {
+    padding: 2rem;
+    text-align: center;
+
+    h1 {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 3rem;
+      margin-bottom: 1rem;
+
+      svg {
+        margin-right: 1rem;
+        height: 3rem;
+        width: 3rem;
+      }
+    }
+
+    p {
+      font-size: 1.2rem;
+      color: var(--text-color-60);
+    }
+
+    @include mobile {
+      padding: 1rem;
+      padding-right: 0;
+
+      h1 {
+        font-size: 1.65rem;
+
+        svg {
+          margin-right: 1rem;
+          height: 2rem;
+          width: 2rem;
+        }
+      }
+    }
+  }
+</style>

src/pages/RegisterPage.vue

@@ -1,40 +1,107 @@
 <template>
-  <section>
+  <div class="register auth-page">
-    <h1>Register new user</h1>
+    <div class="auth-content auth-content--wide">
+      <div class="auth-header">
+        <h1 class="auth-title">Register new user</h1>
+        <p class="auth-subtitle">Create an account to get started</p>
+      </div>
 
-    <form ref="formElement" class="form">
+      <form ref="formElement" class="auth-form" @submit.prevent>
         <seasoned-input
           v-model="username"
-        placeholder="username"
+          placeholder="Email address"
           icon="Email"
           type="email"
           @keydown.enter="focusOnNextElement"
         />
 
+        <div class="register__password-section">
+          <div class="password-generator">
+            <button
+              type="button"
+              class="generator-toggle"
+              @click="toggleGenerator"
+            >
+              <IconKey class="toggle-icon" />
+              <span>{{
+                showGenerator
+                  ? "Hide Password Generator"
+                  : "Generate Strong Password"
+              }}</span>
+            </button>
+            <div v-if="showGenerator" class="generator-content">
+              <password-generator
+                @password-generated="handlePasswordGenerated"
+              />
+            </div>
+          </div>
+
           <seasoned-input
             v-model="password"
-        placeholder="password"
+            placeholder="Password"
             icon="Keyhole"
             type="password"
+            class="password-input"
             @keydown.enter="focusOnNextElement"
           />
+
           <seasoned-input
             v-model="passwordRepeat"
-        placeholder="repeat password"
+            placeholder="Confirm password"
             icon="Keyhole"
             type="password"
+            class="password-input"
             @keydown.enter="submit"
           />
+        </div>
 
-      <seasoned-button @click="submit">Register</seasoned-button>
+        <div v-if="password.length > 0" class="register__password-requirements">
+          <p class="requirements-title">Password must contain:</p>
+          <div class="requirements-grid">
+            <div class="requirement" :class="{ met: password.length >= 8 }">
+              <span class="requirement-icon">{{
+                password.length >= 8 ? "✓" : "✗"
+              }}</span>
+              <span class="requirement-text">At least 8 characters</span>
+            </div>
+            <div class="requirement" :class="{ met: /[A-Z]/.test(password) }">
+              <span class="requirement-icon">{{
+                /[A-Z]/.test(password) ? "✓" : "✗"
+              }}</span>
+              <span class="requirement-text">One uppercase letter</span>
+            </div>
+            <div class="requirement" :class="{ met: /[a-z]/.test(password) }">
+              <span class="requirement-icon">{{
+                /[a-z]/.test(password) ? "✓" : "✗"
+              }}</span>
+              <span class="requirement-text">One lowercase letter</span>
+            </div>
+            <div class="requirement" :class="{ met: /[0-9]/.test(password) }">
+              <span class="requirement-icon">{{
+                /[0-9]/.test(password) ? "✓" : "✗"
+              }}</span>
+              <span class="requirement-text">One number</span>
+            </div>
+          </div>
+        </div>
+
+        <seasoned-button class="auth-button" @click="submit">
+          Create Account
+        </seasoned-button>
       </form>
 
-    <router-link class="link" to="/signin"
+      <div class="auth-footer">
-      >Have a user? Sign in here</router-link
+        <p class="auth-footer-text">
-    >
+          Already have an account?
+          <router-link class="auth-link" to="/login">
+            Sign in here
+          </router-link>
+        </p>
+      </div>
 
       <seasoned-messages v-model:messages="messages"></seasoned-messages>
-  </section>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -44,6 +111,8 @@
   import SeasonedButton from "@/components/ui/SeasonedButton.vue";
   import SeasonedInput from "@/components/ui/SeasonedInput.vue";
   import SeasonedMessages from "@/components/ui/SeasonedMessages.vue";
+  import PasswordGenerator from "@/components/settings/PasswordGenerator.vue";
+  import IconKey from "@/icons/IconKey.vue";
   import type { Ref } from "vue";
   import { register } from "../api";
   import { focusFirstFormInput, focusOnNextElement } from "../utils";
@@ -55,6 +124,7 @@
   const passwordRepeat: Ref<string> = ref("");
   const messages: Ref<IErrorMessage[]> = ref([]);
   const formElement: Ref<HTMLFormElement> = ref(null);
+  const showGenerator = ref(false);
 
   const store = useStore();
   const router = useRouter();
@@ -70,99 +140,198 @@
       message,
       title,
       type: ErrorMessageTypes.Error
-    } as IErrorMessage);
-  }
-
-  function addWarningMessage(message: string, title?: string) {
-    messages.value.push({
-      message,
-      title,
-      type: ErrorMessageTypes.Warning
-    } as IErrorMessage);
-  }
-
-  function validate(): Promise<boolean> {
-    return new Promise((resolve, reject) => {
-      if (!username.value || username?.value?.length === 0) {
-        addWarningMessage("Missing username", "Validation error");
-        reject();
-      }
-
-      if (!password.value || password?.value?.length === 0) {
-        addWarningMessage("Missing password", "Validation error");
-        reject();
-      }
-
-      if (passwordRepeat.value == null || passwordRepeat.value.length === 0) {
-        addWarningMessage("Missing repeat password", "Validation error");
-        reject();
-      }
-      if (passwordRepeat.value !== password.value) {
-        addWarningMessage("Passwords do not match", "Validation error");
-        reject();
-      }
-
-      resolve(true);
     });
   }
 
-  function registerUser() {
+  function addSuccessMessage(message: string, title?: string) {
-    register(username.value, password.value)
+    messages.value.push({
-      .then(data => {
+      message,
-        if (data?.success && store.dispatch("user/login")) {
+      title,
-          router.push({ name: "profile" });
+      type: ErrorMessageTypes.Success
-        }
+    });
-      })
-      .catch(error => {
-        if (error?.status === 401) {
-          addErrorMessage("Incorrect username or password", "Access denied");
-          return null;
   }
 
-        addErrorMessage(error?.message, "Unexpected error");
+  function validate() {
+    const errors = [];
+
+    if (username.value.length === 0) {
+      errors.push("Email must not be empty");
+    }
+
+    if (password.value.length === 0) {
+      errors.push("Password must not be empty");
+    }
+
+    if (password.value.length < 8) {
+      errors.push("Password must be at least 8 characters");
+    }
+
+    if (!/[A-Z]/.test(password.value)) {
+      errors.push("Password must contain at least one uppercase letter");
+    }
+
+    if (!/[a-z]/.test(password.value)) {
+      errors.push("Password must contain at least one lowercase letter");
+    }
+
+    if (!/[0-9]/.test(password.value)) {
+      errors.push("Password must contain at least one number");
+    }
+
+    if (password.value !== passwordRepeat.value) {
+      errors.push("Passwords do not match");
+    }
+
+    if (errors.length > 0) {
+      errors.forEach(error => addErrorMessage(error, "Validation error"));
+      return Promise.reject();
+    }
+
+    return Promise.resolve(true);
+  }
+
+  function createUser() {
+    return register(username.value, password.value)
+      .then(response => {
+        addSuccessMessage(
+          "Account created successfully! Redirecting to login...",
+          "Success"
+        );
+        setTimeout(() => {
+          router.push("/login");
+        }, 2000);
+        return response;
+      })
+      .catch(error => {
+        addErrorMessage(error?.message || "Registration failed", "Error");
         return null;
       });
   }
 
   function submit() {
     clearMessages();
-    validate().then(registerUser);
+    validate().then(createUser);
+  }
+
+  function handlePasswordGenerated(generatedPassword: string) {
+    password.value = generatedPassword;
+    passwordRepeat.value = generatedPassword;
+  }
+
+  function toggleGenerator() {
+    showGenerator.value = !showGenerator.value;
   }
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables";
+  @import "scss/shared-auth";
 
-  section {
+  .register {
-    padding: 1.3rem;
+    // Password inputs use monospace font
-
+    :deep(.password-input input[type="password"]),
-    @include tablet-min {
+    :deep(.password-input input[type="text"]) {
-      padding: 4rem;
+      font-family: "Courier New", monospace;
-    }
-
-    .form > div,
-    input,
-    button {
-      margin-bottom: 1rem;
-
-      &:last-child {
-        margin-bottom: 0px;
     }
   }
 
-    h1 {
+  .register__password-section {
-      margin: 0;
+    display: flex;
-      line-height: 16px;
+    flex-direction: column;
-      color: $text-color;
+    gap: 1.25rem;
-      font-weight: 300;
-      margin-bottom: 20px;
-      text-transform: uppercase;
   }
 
-    .link {
+  .password-generator {
-      display: block;
+    .generator-toggle {
-      width: max-content;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      width: 100%;
+      padding: 0.875rem 1rem;
+      background: var(--background-ui);
+      border: 1px solid var(--text-color-10);
+      border-radius: 8px;
+      color: var(--text-color);
+      font-size: 0.95rem;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s;
+
+      &:hover {
+        background: var(--background-color-secondary);
+        border-color: var(--text-color-20);
+      }
+
+      .toggle-icon {
+        width: 18px;
+        height: 18px;
+        color: var(--highlight-color);
+      }
+    }
+
+    .generator-content {
       margin-top: 1rem;
+      padding-top: 1rem;
+      border-top: 1px solid var(--text-color-10);
+    }
+  }
+
+  .register__password-requirements {
+    background: var(--background-ui);
+    border: 1px solid var(--text-color-10);
+    border-radius: 8px;
+    padding: 1.25rem;
+    margin-top: -0.25rem;
+
+    .requirements-title {
+      margin: 0 0 1rem 0;
+      font-size: 0.95rem;
+      font-weight: 500;
+      color: $text-color;
+    }
+
+    .requirements-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 0.75rem;
+
+      @include mobile-only {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .requirement {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 0.9rem;
+      color: var(--text-color-60);
+
+      &-icon {
+        flex-shrink: 0;
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        background: var(--text-color-10);
+        font-size: 0.75rem;
+        font-weight: bold;
+        color: var(--text-color-60);
+      }
+
+      &-text {
+        line-height: 1.3;
+      }
+
+      &.met {
+        color: var(--success-color, #51cf66);
+
+        .requirement-icon {
+          background: var(--success-color, #51cf66);
+          color: white;
+        }
+      }
     }
   }
 </style>

src/pages/SigninPage.vue

@@ -1,31 +1,44 @@
 <template>
-  <section>
+  <div class="signin auth-page">
-    <h1>Sign in</h1>
+    <div class="auth-content">
+      <div class="auth-header">
+        <h1 class="auth-title">Sign in</h1>
+        <p class="auth-subtitle">Welcome back! Please enter your credentials</p>
+      </div>
 
-    <form ref="formElement" class="form">
+      <form ref="formElement" class="auth-form">
         <seasoned-input
           v-model="username"
-        placeholder="username"
+          placeholder="Email address"
           icon="Email"
           type="email"
           @keydown.enter="focusOnNextElement"
         />
         <seasoned-input
           v-model="password"
-        placeholder="password"
+          placeholder="Password"
           icon="Keyhole"
           type="password"
           @keydown.enter="submit"
         />
 
-      <seasoned-button @click="submit">sign in</seasoned-button>
+        <seasoned-button class="auth-button" @click="submit">
+          Sign In
+        </seasoned-button>
       </form>
-    <router-link class="link" to="/register"
+
-      >Don't have a user? Register here</router-link
+      <div class="auth-footer">
-    >
+        <p class="auth-footer-text">
+          Don't have an account?
+          <router-link class="auth-link" to="/register">
+            Register here
+          </router-link>
+        </p>
+      </div>
 
       <seasoned-messages v-model:messages="messages" />
-  </section>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -60,43 +73,38 @@
       message,
       title,
       type: ErrorMessageTypes.Error
-    } as IErrorMessage);
-  }
-
-  function addWarningMessage(message: string, title?: string) {
-    messages.value.push({
-      message,
-      title,
-      type: ErrorMessageTypes.Warning
-    } as IErrorMessage);
-  }
-
-  function validate(): Promise<boolean> {
-    return new Promise((resolve, reject) => {
-      if (!username.value || username?.value?.length === 0) {
-        addWarningMessage("Missing username", "Validation error");
-        reject();
-      }
-
-      if (!password.value || password?.value?.length === 0) {
-        addWarningMessage("Missing password", "Validation error");
-        reject();
-      }
-
-      resolve(true);
     });
   }
 
-  function signin() {
+  function validate() {
-    login(username.value, password.value, true)
+    const errors = [];
-      .then(data => {
+
-        if (data?.success && store.dispatch("user/login")) {
+    if (username.value.length === 0) {
-          router.push({ name: "profile" });
+      errors.push("Username must not be empty");
     }
+
+    if (password.value.length === 0) {
+      errors.push("Password must not be empty");
+    }
+
+    if (errors.length > 0) {
+      errors.forEach(error => addErrorMessage(error, "Validation error"));
+      return Promise.reject();
+    }
+
+    return Promise.resolve(true);
+  }
+
+  function signin() {
+    return login(username.value, password.value)
+      .then(response => {
+        store.dispatch("user/login", response.user);
+        router.push("/");
+        return response;
       })
       .catch(error => {
-        if (error?.status === 401) {
+        if (error.error === "Incorrect username or password.") {
-          addErrorMessage("Incorrect username or password", "Access denied");
+          addErrorMessage(error.error, "Authentication failed");
           return null;
         }
 
@@ -112,28 +120,13 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables";
+  @import "scss/shared-auth";
 
-  section {
+  .signin {
-    padding: 1.3rem;
+    // Password input uses monospace font
-
+    :deep(input[type="password"]),
-    @include tablet-min {
+    :deep(input[type="text"][placeholder="Password"]) {
-      padding: 4rem;
+      font-family: "Courier New", monospace;
-    }
-
-    h1 {
-      margin: 0;
-      line-height: 16px;
-      color: $text-color;
-      font-weight: 300;
-      margin-bottom: 20px;
-      text-transform: uppercase;
-    }
-
-    .link {
-      display: block;
-      width: max-content;
-      margin-top: 1rem;
     }
   }
 </style>

src/pages/TorrentsPage.vue

@@ -1,8 +1,7 @@
 <template>
-  <div>
+  <div class="torrents">
-    <page-header title="Torrent search page" />
+    <h1 class="torrents__title">Torrent Search</h1>
 
-    <section>
     <div class="search-input-group">
       <seasoned-input
         v-model="query"
@@ -16,13 +15,11 @@
     <active-torrents />
 
     <TorrentList :query="torrentQuery" />
-    </section>
   </div>
 </template>
 
 <script setup lang="ts">
   import { ref } from "vue";
-  import PageHeader from "@/components/PageHeader.vue";
   import SeasonedInput from "@/components/ui/SeasonedInput.vue";
   import SeasonedButton from "@/components/ui/SeasonedButton.vue";
   import TorrentList from "@/components/torrent/TorrentSearchResults.vue";
@@ -42,16 +39,44 @@
 </script>
 
 <style lang="scss" scoped>
-  section {
+  @import "scss/variables";
-    padding: 1.25rem;
+  @import "scss/media-queries";
+
+  .torrents {
+    padding: 3rem;
+    max-width: 100%;
+
+    @include mobile-only {
+      padding: 0.75rem;
+    }
+
+    &__title {
+      margin: 0 0 2rem 0;
+      font-size: 2rem;
+      font-weight: 300;
+      color: $text-color;
+      line-height: 1;
+
+      @include mobile-only {
+        font-size: 1.5rem;
+        margin: 1rem 0;
+      }
+    }
 
     .search-input-group {
       display: flex;
-
+      gap: 0.5rem;
       margin-bottom: 2rem;
 
+      @include mobile-only {
+        flex-direction: column;
+        gap: 0.75rem;
+      }
+
       button {
-        margin-left: 0.5rem;
+        @include mobile-only {
+          width: 100%;
+        }
       }
     }
   }

src/plugins/Toast/ToastComponent.vue

@@ -3,22 +3,19 @@
   <transition name="slide">
     <div v-if="show" class="toast" :class="type || 'info'" @click="clicked">
       <div class="toast--content">
-        <div class="toast--icon">
-          <i v-if="image"
-            ><img class="toast--icon-image" :src="image" alt="Toast icon"
-          /></i>
-        </div>
         <div v-if="description" class="toast--text">
           <span class="toast--text__title">{{ title }}</span>
-          <br /><span
+          <span class="toast--text__description" v-html="description"></span>
-            class="toast--text__description"
-            v-html="description"
-          ></span>
         </div>
+
         <div v-else class="toast--text">
           <span class="toast--text__title-large">{{ title }}</span>
         </div>
 
+        <div class="toast--dismiss" @click.stop="dismiss">
+          <i class="fas fa-times"></i>
+        </div>
+
         <div class="toast--dismiss" @click="dismiss">
           <i class="fas fa-times"></i>
         </div>
@@ -65,107 +62,161 @@
 </script>
 
 <style lang="scss" scoped>
-  // @import '@/scss/variables.scss';
+  /* ------------------------------
+   Transition
+------------------------------ */
 
-  .slide-enter-active {
+  .slide-enter-active,
-    transition: all 0.3s ease;
+  .slide-leave-active {
+    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
   }
-  .slide-enter,
+
+  .slide-enter-from,
   .slide-leave-to {
-    transform: translateY(100vh);
+    transform: translateY(40px);
     opacity: 0;
   }
-  .slide-leave-active {
-    transition: all 2s ease;
-  }
 
-  .toast--icon-image {
+  /* ------------------------------
-    height: 100%;
+   Toast
-    width: 100%;
+------------------------------ */
-    max-height: 45px;
-    max-width: 45px;
-  }
 
   .toast {
     position: fixed;
-    bottom: 0.5rem;
+    right: 1.25rem;
+    bottom: 1.25rem;
+    z-index: 1000;
     cursor: pointer;
-    z-index: 100;
 
-    background-color: white;
+    min-width: 340px;
-    border-radius: 3px;
+    max-width: 460px;
-    box-shadow:
+    width: calc(100vw - 2rem);
-      0 4px 8px 0 rgba(0, 0, 0, 0.17),
-      0 2px 4px 0 rgba(0, 0, 0, 0.08);
-    padding: 0.5rem;
-    margin: 1rem 2rem 1rem 0.71rem;
-    // max-width: calc(100% - 3rem);
-    min-width: 320px;
 
-    // If small screen we have a min-width that is related to the screen size.
+    padding: 1.1rem 1.25rem;
-    // else large screens we want a max-width that only uses the space in bottom right
 
-    right: 0;
+    border-radius: 16px;
-    line-height: 22.5px;
+
+    /* System-based surface */
+    background: var(--background-color-secondary);
+
+    /* Subtle separation */
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+
+    /* Clear state indicator */
+    border-left: 5px solid transparent;
+
+    /* Base text tone */
+    color: var(--text-color, #1f2937);
+
+    line-height: 1.5;
+
+    /* ------------------------------
+     Content Layout
+  ------------------------------ */
 
     &--content {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
-    }
+      gap: 1rem;
-
-    &--icon {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      text-align: center;
     }
 
     &--text {
-      margin-left: 0.5rem;
+      flex: 1;
-      // color: $bt-brown;
+      display: flex;
-      color: black;
+      flex-direction: column;
-      word-wrap: break-word;
+    }
 
-      &__title {
+    /* ------------------------------
-        text-transform: capitalize;
+     Typography Hierarchy
+  ------------------------------ */
+
+    /* Context label */
+    &--text__title {
+      font-size: 0.85rem;
+      font-weight: 500;
+      letter-spacing: 0.3px;
+      text-transform: uppercase;
+
+      /* Softer than body but not faded */
+      color: color-mix(in srgb, currentColor 75%, transparent);
+    }
+
+    /* Primary message */
+    &--text__description {
+      margin-top: 0.3rem;
+      font-size: 0.98rem;
       font-weight: 400;
-
+      line-height: 1.5;
-        &-large {
+      color: currentColor;
-          font-size: 2rem;
-        }
     }
 
-      &__description {
+    &--text__title-large {
-        font-weight: 300;
+      font-size: 1.15rem;
-      }
+      font-weight: 500;
     }
 
+    /* ------------------------------
+     Dismiss Button
+  ------------------------------ */
+
     &--dismiss {
-      align-self: flex-end;
+      flex-shrink: 0;
 
-      img {
+      display: flex;
-        width: 2.5rem;
+      align-items: center;
+      justify-content: center;
+
+      width: 30px;
+      height: 30px;
+
+      border-radius: 8px;
+
+      transition: background 0.2s ease;
+
+      &:hover {
+        background: var(--background-color);
+      }
+
+      i {
+        font-size: 0.75rem;
       }
     }
 
+    /* ------------------------------
+     State Colors
+  ------------------------------ */
+
     &.success {
-      border-left: 6px solid #38c172;
+      border-left-color: #22c55e;
     }
 
     &.info {
-      border-left: 6px solid #ffd300;
+      border-left-color: #facc15;
     }
 
     &.warning {
-      border-left: 6px solid #f6993f;
+      border-left-color: #f97316;
     }
 
     &.error {
-      border-left: 6px solid #e3342f;
+      border-left-color: #ef4444;
     }
 
     &.simple {
-      border-left: unset;
+      border-left-color: transparent;
+    }
+  }
+
+  /* ------------------------------
+   Mobile
+------------------------------ */
+
+  @media (max-width: 480px) {
+    .toast {
+      right: 1rem;
+      left: 1rem;
+      width: auto;
+      min-width: unset;
     }
   }
 </style>

src/routes.ts

@@ -4,6 +4,7 @@ import type { RouteRecordRaw, RouteLocationNormalized } from "vue-router";
 /* eslint-disable-next-line import-x/no-cycle */
 import store from "./store";
 import { usePlexAuth } from "./composables/usePlexAuth";
+
 const { getPlexAuthCookie } = usePlexAuth();
 
 declare global {
@@ -58,8 +59,7 @@ const routes: RouteRecordRaw[] = [
   },
   {
     name: "signin",
-    path: "/signin",
+    path: "/login",
-    alias: "/login",
     component: () => import("./pages/SigninPage.vue")
   },
   {
@@ -76,8 +76,18 @@ const routes: RouteRecordRaw[] = [
   //   }
   // },
   {
-    name: "404",
+    name: "password-gen",
-    path: "/404",
+    path: "/password",
+    component: () => import("./pages/GenPasswordPage.vue")
+  },
+  {
+    name: "missing-plex-auth",
+    path: "/missing/plex",
+    component: () => import("./pages/MissingPlexAuthPage.vue")
+  },
+  {
+    path: "/:pathMatch(.*)*",
+    name: "NotFound",
     component: () => import("./pages/404Page.vue")
   }
   // {
@@ -102,7 +112,7 @@ const hasPlexAccount = () => {
   // Check Vuex store first
   if (store.getters["user/plexUserId"] !== null) return true;
 
-  // Fallback to localStorage/cookie for page refreshes
+  // Fallback to localStorage
   const authToken = getPlexAuthCookie();
   return !!authToken;
 };
@@ -120,15 +130,14 @@ router.beforeEach(
     // send user to signin page.
     if (to.matched.some(record => record.meta.requiresAuth)) {
       if (!loggedIn()) {
-        next({ path: "/signin" });
+        next({ path: "/login" });
       }
     }
 
     if (to.matched.some(record => record.meta.requiresPlexAccount)) {
       if (!hasPlexAccount()) {
         next({
-          path: "/settings",
+          path: "/missing/plex"
-          query: { missingPlexAccount: true }
         });
       }
     }

src/scss/shared-auth.scss

@@ -0,0 +1,100 @@
+// Shared styles for authentication pages (signin, register)
+@import "variables";
+@import "media-queries";
+
+// Base auth page layout
+.auth-page {
+  padding: 3rem;
+  max-width: 100%;
+
+  @include mobile-only {
+    padding: 0.75rem;
+  }
+}
+
+.auth-content {
+  max-width: 600px;
+
+  @include mobile-only {
+    max-width: 100%;
+  }
+
+  &--wide {
+    max-width: 700px;
+  }
+}
+
+.auth-header {
+  margin-bottom: 2.5rem;
+
+  @include mobile-only {
+    margin-bottom: 2rem;
+  }
+}
+
+.auth-title {
+  margin: 0 0 0.75rem 0;
+  font-size: 2.5rem;
+  font-weight: 600;
+  color: $text-color;
+  line-height: 1.2;
+
+  @include mobile-only {
+    font-size: 2rem;
+  }
+}
+
+.auth-subtitle {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 300;
+  color: var(--text-color-60);
+  line-height: 1.5;
+
+  @include mobile-only {
+    font-size: 1rem;
+  }
+}
+
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  margin-bottom: 2rem;
+}
+
+.auth-button {
+  margin-top: 0.5rem;
+  max-width: 200px;
+
+  @include mobile-only {
+    max-width: 100%;
+  }
+}
+
+.auth-footer {
+  padding-top: 2rem;
+  border-top: 1px solid var(--text-color-10);
+}
+
+.auth-footer-text {
+  margin: 0;
+  font-size: 1rem;
+  color: var(--text-color-60);
+
+  @include mobile-only {
+    font-size: 0.95rem;
+  }
+}
+
+.auth-link {
+  color: var(--highlight-color);
+  text-decoration: none;
+  font-weight: 500;
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 0.8;
+    text-decoration: underline;
+  }
+}

src/scss/variables.scss

@@ -114,10 +114,35 @@ $color-error: var(--color-error) !default;
 $color-error-highlight: var(--color-error-highlight) !default;
 
 .halloween {
-  --text-color: #6a318c;
+  --text-color: #f5f5f5;
-  --text-color-secondary: #fb5a33;
+  --text-color-90: rgba(245, 245, 245, 0.9);
-  --background-color: #80c350;
+  --text-color-70: rgba(245, 245, 245, 0.7);
-  --background-color-secondary: #ff9234;
+  --text-color-50: rgba(245, 245, 245, 0.5);
+  --text-color-10: rgba(245, 245, 245, 0.1);
+  --text-color-5: rgba(245, 245, 245, 0.05);
+  --text-color-secondary: #ff6600;
+  --background-color: #1a0e2e;
+  --background-color-secondary: #2d1b3d;
+  --background-ui: #3d2550;
+  --background-95: rgba(26, 14, 46, 0.95);
+  --background-90: rgba(26, 14, 46, 0.9);
+  --background-80: rgba(26, 14, 46, 0.8);
+  --background-70: rgba(45, 27, 61, 0.7);
+  --background-40: rgba(61, 37, 80, 0.4);
+  --background-0: rgba(26, 14, 46, 0);
+  --highlight-color: #ff6600;
+  --color-green: #ff6600;
+  --color-green-90: rgba(255, 102, 0, 0.9);
+  --color-green-70: rgba(255, 102, 0, 0.7);
+  --table-background-color: #0d0618;
+  --table-header-text-color: #ff6600;
+  --color-success: rgba(138, 43, 226, 0.8);
+  --color-success-text: #f5f5f5;
+  --color-success-highlight: #8a2be2;
+  --color-warning: rgba(255, 140, 0, 0.7);
+  --color-warning-highlight: #ff8c00;
+  --color-error: rgba(220, 20, 60, 0.8);
+  --color-error-highlight: #dc143c;
 }
 
 .dark {
@@ -158,3 +183,98 @@ $color-error-highlight: var(--color-error-highlight) !default;
   --table-background-color: #081c24;
   --table-header-text-color: white;
 }
+
+.ocean {
+  --text-color: #e0f7ff;
+  --text-color-90: rgba(224, 247, 255, 0.9);
+  --text-color-70: rgba(224, 247, 255, 0.7);
+  --text-color-50: rgba(224, 247, 255, 0.5);
+  --text-color-10: rgba(224, 247, 255, 0.1);
+  --text-color-5: rgba(224, 247, 255, 0.05);
+  --text-color-secondary: #00d4ff;
+  --background-color: #0f2027;
+  --background-color-secondary: #203a43;
+  --background-ui: #2c5364;
+  --background-95: rgba(15, 32, 39, 0.95);
+  --background-90: rgba(15, 32, 39, 0.9);
+  --background-80: rgba(15, 32, 39, 0.8);
+  --background-70: rgba(32, 58, 67, 0.7);
+  --background-40: rgba(44, 83, 100, 0.4);
+  --background-0: rgba(15, 32, 39, 0);
+  --highlight-color: #00d4ff;
+  --color-green: #00d4ff;
+  --color-green-90: rgba(0, 212, 255, 0.9);
+  --color-green-70: rgba(0, 212, 255, 0.7);
+  --table-background-color: #0a1519;
+  --table-header-text-color: #00d4ff;
+}
+
+.nordic {
+  --text-color: #2c3e2e;
+  --text-color-90: rgba(44, 62, 46, 0.9);
+  --text-color-70: rgba(44, 62, 46, 0.7);
+  --text-color-50: rgba(44, 62, 46, 0.5);
+  --text-color-10: rgba(44, 62, 46, 0.1);
+  --text-color-5: rgba(44, 62, 46, 0.05);
+  --text-color-secondary: #5a8a68;
+  --background-color: #f5f0e8;
+  --background-color-secondary: #fffef9;
+  --background-ui: #e8dfc8;
+  --background-95: rgba(245, 240, 232, 0.95);
+  --background-90: rgba(245, 240, 232, 0.9);
+  --background-80: rgba(245, 240, 232, 0.8);
+  --background-70: rgba(232, 223, 200, 0.7);
+  --background-40: rgba(232, 223, 200, 0.4);
+  --background-0: rgba(245, 240, 232, 0);
+  --highlight-color: #3d6e4e;
+  --color-green: #3d6e4e;
+  --color-green-90: rgba(61, 110, 78, 0.95);
+  --color-green-70: rgba(61, 110, 78, 0.7);
+  --table-background-color: #6d5a47;
+  --table-header-text-color: #fffef9;
+  --color-success: rgba(61, 110, 78, 0.85);
+  --color-success-text: #fffef9;
+  --color-success-highlight: #2d5e3e;
+  --color-warning: rgba(184, 134, 11, 0.75);
+  --color-warning-highlight: #d4a017;
+  --color-error: rgba(165, 42, 42, 0.85);
+  --color-error-highlight: #a52a2a;
+  --background-nav-logo: #2c3e2e;
+  --white: #fff;
+  --white-70: rgba(255, 255, 255, 0.7);
+}
+
+.seed {
+  --text-color: #fcfcf7;
+  --text-color-90: rgba(252, 252, 247, 0.9);
+  --text-color-70: rgba(252, 252, 247, 0.7);
+  --text-color-50: rgba(252, 252, 247, 0.5);
+  --text-color-10: rgba(252, 252, 247, 0.1);
+  --text-color-5: rgba(252, 252, 247, 0.05);
+  --text-color-secondary: #e9f0ca;
+  --background-color: #1c3a13;
+  --background-color-secondary: #334e2b;
+  --background-ui: #45663c;
+  --background-95: rgba(28, 58, 19, 0.95);
+  --background-90: rgba(28, 58, 19, 0.9);
+  --background-80: rgba(28, 58, 19, 0.8);
+  --background-70: rgba(51, 78, 43, 0.7);
+  --background-40: rgba(69, 102, 60, 0.4);
+  --background-0: rgba(28, 58, 19, 0);
+  --highlight-color: #e9f0ca;
+  --color-green: #e9f0ca;
+  --color-green-90: rgba(233, 240, 202, 0.9);
+  --color-green-70: rgba(233, 240, 202, 0.7);
+  --table-background-color: #142f0c;
+  --table-header-text-color: #e9f0ca;
+  --color-success: rgba(208, 217, 185, 0.85);
+  --color-success-text: #1c3a13;
+  --color-success-highlight: #d0d9b9;
+  --color-warning: rgba(233, 240, 202, 0.75);
+  --color-warning-highlight: #e9f0ca;
+  --color-error: rgba(185, 99, 94, 0.85);
+  --color-error-highlight: #b9635e;
+  --background-nav-logo: #fcfcf7;
+  --white: #fcfcf7;
+  --white-70: rgba(252, 252, 247, 0.7);
+}

src/utils.ts

@@ -89,7 +89,8 @@ export function setUrlQueryParameter(parameter: string, value: string): void {
   const params = new URLSearchParams();
   params.append(parameter, value);
 
-  const url = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ""
+  const url = `${window.location.protocol}//${window.location.hostname}${
+    window.location.port ? `:${window.location.port}` : ""
   }${window.location.pathname}${params.toString().length ? `?${params}` : ""}`;
 
   window.history.pushState({}, "search", url);
@@ -141,5 +142,5 @@ export function formatBytes(bytes: number): string {
   const k = 1024;
   const sizes = ["Bytes", "KB", "MB"];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+  return `${Math.round((bytes / k ** i) * 100) / 100} ${sizes[i]}`;
 }