Remove deprecated ListPage component

* 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

@@ -13,9 +13,7 @@
     <!-- Popup that will show above existing rendered content -->
     <popup />
 
-    <darkmode-toggle />
-
-    <!-- Command Palette -->
+    <!-- Command Palette for quick navigation -->
     <command-palette />
   </div>
 </template>
@@ -25,7 +23,6 @@
   import NavigationHeader from "@/components/header/NavigationHeader.vue";
   import NavigationIcons from "@/components/header/NavigationIcons.vue";
   import Popup from "@/components/Popup.vue";
-  import DarkmodeToggle from "@/components/ui/DarkmodeToggle.vue";
   import CommandPalette from "@/components/ui/CommandPalette.vue";
 
   const router = useRouter();
@@ -65,6 +62,7 @@
       grid-column: 2 / 3;
       width: calc(100% - var(--header-size));
       grid-row: 2;
+      z-index: 5;
 
       @include mobile {
         grid-column: 1 / 3;

src/api.ts

@@ -413,6 +413,20 @@ const unlinkPlexAccount = async () => {
     });
 };
 
+const plexRecentlyAddedInLibrary = async (id: number) => {
+  const url = new URL(`/api/v2/plex/recently_added/${id}`, API_HOSTNAME);
+  const options: RequestInit = {
+    credentials: "include"
+  };
+
+  return fetch(url.href, options)
+    .then(resp => resp.json())
+    .catch(error => {
+      console.error(`api error fetch plex recently added`); // eslint-disable-line no-console
+      throw error;
+    });
+};
+
 // - - - User graphs - - -
 
 const fetchGraphData = async (
@@ -543,6 +557,7 @@ const elasticSearchMoviesAndShows = async (query: string, count = 22) => {
 };
 
 export {
+  API_HOSTNAME,
   getMovie,
   getShow,
   getPerson,
@@ -559,6 +574,7 @@ export {
   getRequestStatus,
   linkPlexAccount,
   unlinkPlexAccount,
+  plexRecentlyAddedInLibrary,
   register,
   login,
   logout,

src/components/CastListItem.vue

@@ -1,9 +1,25 @@
 <template>
-  <li class="card">
-    <a @click="openCastItem" @keydown.enter="openCastItem">
-      <img :src="pictureUrl" alt="Movie or person poster image" />
-      <p class="name">{{ creditItem.name || creditItem.title }}</p>
-      <p class="meta">{{ creditItem.character || creditItem.year }}</p>
+  <li class="cast-card">
+    <a
+      class="cast-card__link"
+      role="button"
+      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">
-  li a p:first-of-type {
-    padding-top: 10px;
-  }
+<style lang="scss" scoped>
+  @import "scss/variables";
 
-  li.card p {
-    font-size: 1em;
-    padding: 0 10px;
-    margin: 0;
-    overflow: hidden;
-    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);
+  .cast-card {
+    list-style: none;
+    margin: 0 10px 10px 0;
+    width: 150px;
+    flex-shrink: 0;
 
     &:first-of-type {
       margin-left: 0;
     }
+  }
 
-    &:hover {
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-      transform: scale(1.03);
+  .cast-card__link {
+    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;
     }
 
-    .name {
-      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;
-    }
-
-    img {
-      width: 100%;
-      height: auto;
-      max-height: 210px;
-      background-color: var(--background-color);
-      object-fit: cover;
+    &:focus-visible {
+      outline: 2px solid var(--highlight-color);
+      outline-offset: 2px;
     }
   }
+
+  .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/DiscoverMinimal.vue

@@ -0,0 +1,277 @@
+<template>
+  <section class="discover-minimal">
+    <div class="discover-minimal-header">
+      <div class="header-content">
+        <h2 class="discover-title">Explore Collections</h2>
+        <p class="discover-description">
+          Curated selections organized by genre, mood, and decade
+        </p>
+      </div>
+      <router-link to="/discover" class="view-all-link">
+        <span class="desktop-only">View All Categories →</span>
+        <span class="mobile-only">View All →</span>
+      </router-link>
+    </div>
+
+    <DiscoverShowcase @select="navigateToDiscover" />
+
+    <div class="featured-collections-wrapper">
+      <div class="featured-collections-header">
+        <div class="header-decorator"></div>
+        <h3 class="featured-title">Featured Picks</h3>
+        <div class="header-decorator"></div>
+      </div>
+      <div class="featured-collections">
+        <ResultsSection
+          v-for="list in featuredLists"
+          :key="list.id"
+          :api-function="list.apiFunction"
+          :title="list.title"
+          :short-list="true"
+          section-type="discover"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { useRouter } from "vue-router";
+  import ResultsSection from "@/components/ResultsSection.vue";
+  import DiscoverShowcase from "@/components/DiscoverShowcase.vue";
+  import { getTmdbMovieDiscoverByName } from "../api";
+
+  const router = useRouter();
+
+  const featuredLists = [
+    {
+      id: "feel_good",
+      title: "Feel Good",
+      apiFunction: () => getTmdbMovieDiscoverByName("feel_good")
+    },
+    {
+      id: "2000s_classics",
+      title: "2000s Classics",
+      apiFunction: () => getTmdbMovieDiscoverByName("2000s_classics")
+    },
+    {
+      id: "horror_hits",
+      title: "Horror Hits",
+      apiFunction: () => getTmdbMovieDiscoverByName("horror_hits")
+    }
+  ];
+
+  function navigateToDiscover(categoryId?: string) {
+    router.push(`/discover${categoryId ? `?category=${categoryId}` : ""}`);
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .discover-minimal {
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.01) 0%,
+      rgba(255, 255, 255, 0.03) 50%,
+      rgba(255, 255, 255, 0.01) 100%
+    );
+    padding: 3rem 0;
+    position: relative;
+    margin: 2rem 0;
+    width: 100%;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 90%;
+      height: 1px;
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.2) 50%,
+        transparent 100%
+      );
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 90%;
+      height: 1px;
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.15) 50%,
+        transparent 100%
+      );
+    }
+
+    @include mobile {
+      padding: 1rem 0 0.5rem;
+      margin: 0;
+      background: transparent;
+
+      &::before,
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  .discover-minimal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 1.5rem 2rem;
+    gap: 1rem;
+
+    @include mobile {
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 1rem 0.6rem;
+      gap: 0.75rem;
+    }
+
+    .header-content {
+      flex: 1;
+
+      @include mobile {
+        min-width: 0;
+      }
+    }
+
+    .discover-title {
+      margin: 0 0 0.5rem;
+      font-size: 2rem;
+      font-weight: 600;
+      color: var(--text-color);
+      letter-spacing: -0.5px;
+
+      @include mobile {
+        font-size: 1.75rem;
+        margin: 0 0 0.15rem;
+        font-weight: 600;
+      }
+    }
+
+    .discover-description {
+      margin: 0;
+      font-size: 0.95rem;
+      color: $text-color-70;
+      font-weight: 300;
+
+      @include mobile {
+        display: none;
+      }
+    }
+
+    .view-all-link {
+      padding: 0.75rem 1.5rem;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 25px;
+      color: $text-color-70;
+      font-size: 0.9rem;
+      font-weight: 400;
+      text-decoration: none;
+      transition: all 0.3s ease;
+      white-space: nowrap;
+
+      @include mobile {
+        padding: 0.45rem 0.85rem;
+        font-size: 0.75rem;
+        border-radius: 20px;
+        flex-shrink: 0;
+      }
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.08);
+        border-color: rgba(255, 255, 255, 0.2);
+        color: var(--text-color);
+        transform: translateX(2px);
+      }
+    }
+  }
+
+  .featured-collections-wrapper {
+    padding-top: 2rem;
+    position: relative;
+
+    @include mobile {
+      margin-top: 0;
+      padding-top: 0.5rem;
+    }
+  }
+
+  .featured-collections-header {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    padding: 0 1.5rem 1.5rem;
+    max-width: 1400px;
+    margin: 0 auto;
+
+    @include mobile {
+      padding: 0 1rem 0.4rem;
+      gap: 0.4rem;
+    }
+
+    .header-decorator {
+      flex: 1;
+      height: 1px;
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.3) 50%,
+        rgba(255, 255, 255, 0.3) 100%
+      );
+
+      &:last-child {
+        background: linear-gradient(
+          90deg,
+          rgba(255, 255, 255, 0.3) 0%,
+          rgba(255, 255, 255, 0.3) 50%,
+          transparent 100%
+        );
+      }
+    }
+
+    .featured-title {
+      margin: 0;
+      font-size: 1.4rem;
+      font-weight: 500;
+      color: var(--text-color);
+      letter-spacing: 0.5px;
+      white-space: nowrap;
+      text-transform: uppercase;
+      font-size: 0.9rem;
+      color: $text-color-70;
+
+      @include mobile {
+        font-size: 0.8rem;
+      }
+    }
+  }
+
+  .featured-collections {
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 20px;
+    max-width: calc(100% - 4rem);
+    margin: 0 auto;
+
+    @include mobile {
+      border-radius: 12px;
+      padding: 0.25rem 0;
+      max-width: calc(100% - 2rem);
+    }
+  }
+</style>

src/components/DiscoverShowcase.vue

@@ -0,0 +1,360 @@
+<template>
+  <div class="category-showcase">
+    <div class="categories-grid">
+      <button
+        v-for="category in categories"
+        :key="category.id"
+        class="category-card"
+        :class="[
+          `category-${category.id}`,
+          { active: activeCategory === category.id }
+        ]"
+        @click="$emit('select', category.id)"
+      >
+        <component :is="category.icon" class="category-icon" />
+        <div class="category-info">
+          <h3 class="category-name">{{ category.label }}</h3>
+          <p class="category-count">
+            <span class="desktop-only">{{ category.count }} collections</span>
+            <span class="mobile-only">{{ category.count }}</span>
+          </p>
+        </div>
+        <div class="category-arrow">→</div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useRouter } from "vue-router";
+  import IconPopular from "@/icons/IconPopular.vue";
+  import IconSpotlights from "@/icons/IconSpotlights.vue";
+  import IconTheater from "@/icons/IconTheater.vue";
+  import IconCalendar from "@/icons/IconCalendar.vue";
+  import IconStar from "@/icons/IconStar.vue";
+
+  interface Props {
+    activeCategory?: string;
+  }
+
+  withDefaults(defineProps<Props>(), {
+    activeCategory: ""
+  });
+
+  defineEmits<{
+    select: [categoryId: string];
+  }>();
+
+  const router = useRouter();
+
+  const categories = [
+    { id: "popular", label: "Popular", icon: IconPopular, count: 5 },
+    { id: "genres", label: "Genres", icon: IconSpotlights, count: 13 },
+    { id: "moods", label: "Moods & Themes", icon: IconTheater, count: 7 },
+    { id: "decades", label: "By Decade", icon: IconCalendar, count: 4 },
+    { id: "special", label: "Special Collections", icon: IconStar, count: 11 }
+  ];
+
+  function navigateToDiscover(categoryId?: string) {
+    router.push(`/discover${categoryId ? `?category=${categoryId}` : ""}`);
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .category-showcase {
+    padding: 1.5rem;
+    padding-top: 0;
+
+    @include mobile {
+      padding: 0 1rem 0.6rem;
+    }
+  }
+
+  .categories-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    justify-content: center;
+
+    @include mobile {
+      gap: 0.45rem;
+    }
+  }
+
+  .category-card {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.9rem;
+    padding: 1rem 1.5rem;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 50px;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+
+    @include mobile {
+      padding: 0.45rem 0.7rem;
+      gap: 0.4rem;
+      border-radius: 20px;
+    }
+
+    &.category-popular {
+      background: rgba(255, 80, 80, 0.15);
+      border-color: rgba(255, 80, 80, 0.3);
+
+      .category-icon {
+        fill: rgba(255, 120, 120, 0.9);
+      }
+    }
+
+    &.category-genres {
+      background: rgba(80, 140, 255, 0.15);
+      border-color: rgba(80, 140, 255, 0.3);
+
+      .category-icon {
+        fill: rgba(120, 170, 255, 0.9);
+      }
+    }
+
+    &.category-moods {
+      background: rgba(160, 80, 255, 0.15);
+      border-color: rgba(160, 80, 255, 0.3);
+
+      .category-icon {
+        fill: rgba(180, 120, 255, 0.9);
+      }
+    }
+
+    &.category-decades {
+      background: rgba(80, 200, 200, 0.15);
+      border-color: rgba(80, 200, 200, 0.3);
+
+      .category-icon {
+        fill: rgba(100, 220, 220, 0.9);
+      }
+    }
+
+    &.category-special {
+      background: rgba(255, 180, 80, 0.15);
+      border-color: rgba(255, 180, 80, 0.3);
+
+      .category-icon {
+        fill: rgba(255, 200, 120, 0.9);
+      }
+    }
+
+    &.active {
+      transform: translateY(-3px) scale(1.03);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+
+      &::before {
+        opacity: 1;
+      }
+
+      .category-icon {
+        transform: rotate(5deg) scale(1.15);
+      }
+
+      .category-arrow {
+        opacity: 1;
+        transform: translateX(4px);
+      }
+
+      &.category-popular {
+        background: rgba(255, 80, 80, 0.3);
+        border-color: rgba(255, 80, 80, 0.6);
+
+        .category-icon {
+          fill: rgba(255, 160, 160, 1);
+        }
+      }
+
+      &.category-genres {
+        background: rgba(80, 140, 255, 0.3);
+        border-color: rgba(80, 140, 255, 0.6);
+
+        .category-icon {
+          fill: rgba(160, 210, 255, 1);
+        }
+      }
+
+      &.category-moods {
+        background: rgba(160, 80, 255, 0.3);
+        border-color: rgba(160, 80, 255, 0.6);
+
+        .category-icon {
+          fill: rgba(220, 160, 255, 1);
+        }
+      }
+
+      &.category-decades {
+        background: rgba(80, 200, 200, 0.3);
+        border-color: rgba(80, 200, 200, 0.6);
+
+        .category-icon {
+          fill: rgba(140, 255, 255, 1);
+        }
+      }
+
+      &.category-special {
+        background: rgba(255, 180, 80, 0.3);
+        border-color: rgba(255, 180, 80, 0.6);
+
+        .category-icon {
+          fill: rgba(255, 230, 160, 1);
+        }
+      }
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(
+        135deg,
+        rgba(255, 255, 255, 0.15) 0%,
+        transparent 100%
+      );
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+
+    &:hover {
+      transform: translateY(-3px) scale(1.03);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+
+      &.category-popular {
+        background: rgba(255, 80, 80, 0.25);
+        border-color: rgba(255, 80, 80, 0.5);
+
+        .category-icon {
+          fill: rgba(255, 140, 140, 1);
+        }
+      }
+
+      &.category-genres {
+        background: rgba(80, 140, 255, 0.25);
+        border-color: rgba(80, 140, 255, 0.5);
+
+        .category-icon {
+          fill: rgba(140, 190, 255, 1);
+        }
+      }
+
+      &.category-moods {
+        background: rgba(160, 80, 255, 0.25);
+        border-color: rgba(160, 80, 255, 0.5);
+
+        .category-icon {
+          fill: rgba(200, 140, 255, 1);
+        }
+      }
+
+      &.category-decades {
+        background: rgba(80, 200, 200, 0.25);
+        border-color: rgba(80, 200, 200, 0.5);
+
+        .category-icon {
+          fill: rgba(120, 240, 240, 1);
+        }
+      }
+
+      &.category-special {
+        background: rgba(255, 180, 80, 0.25);
+        border-color: rgba(255, 180, 80, 0.5);
+
+        .category-icon {
+          fill: rgba(255, 220, 140, 1);
+        }
+      }
+
+      &::before {
+        opacity: 1;
+      }
+
+      .category-icon {
+        transform: rotate(5deg) scale(1.15);
+      }
+
+      .category-arrow {
+        opacity: 1;
+        transform: translateX(4px);
+      }
+    }
+
+    .category-icon {
+      width: 24px;
+      height: 24px;
+      fill: var(--text-color);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      flex-shrink: 0;
+
+      @include mobile {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    .category-info {
+      display: flex;
+      align-items: center;
+      gap: 0.6rem;
+      line-height: 1;
+
+      @include mobile {
+        gap: 0.4rem;
+      }
+    }
+
+    .category-name {
+      margin: 0;
+      font-size: 0.95rem;
+      font-weight: 500;
+      color: white;
+      white-space: nowrap;
+
+      @include mobile {
+        font-size: 0.8rem;
+      }
+    }
+
+    .category-count {
+      margin: 0;
+      font-size: 0.8rem;
+      color: rgba(255, 255, 255, 0.8);
+      font-weight: 500;
+      background: rgba(255, 255, 255, 0.1);
+      padding: 0.2rem 0.6rem;
+      border-radius: 12px;
+      white-space: nowrap;
+
+      @include mobile {
+        font-size: 0.65rem;
+        padding: 0.15rem 0.4rem;
+      }
+    }
+
+    .category-arrow {
+      font-size: 1.1rem;
+      color: white;
+      opacity: 0;
+      transition: all 0.3s ease;
+      margin-left: 0.25rem;
+
+      @include mobile {
+        display: none;
+      }
+    }
+  }
+</style>

src/components/Graph.vue

@@ -56,12 +56,6 @@
   const graphCanvas: Ref<HTMLCanvasElement | null> = ref(null);
   let graphInstance: Chart | null = null;
 
-  /*
-|--------------------------------------------------------------------------
-| Modern Color System
-|--------------------------------------------------------------------------
-*/
-
   const graphTemplates = [
     {
       borderColor: "#6366F1",
@@ -77,12 +71,6 @@
     }
   ];
 
-  /*
-|--------------------------------------------------------------------------
-| Lifecycle
-|--------------------------------------------------------------------------
-*/
-
   onMounted(() => generateGraph());
   watch(() => props.data, generateGraph, { deep: true });
 
@@ -90,12 +78,6 @@
     if (graphInstance) graphInstance.destroy();
   });
 
-  /*
-|--------------------------------------------------------------------------
-| Helpers
-|--------------------------------------------------------------------------
-*/
-
   function removeEmptyDataset(dataset: IGraphDataset) {
     return dataset;
     return !dataset.data.every(point => point === 0);
@@ -146,12 +128,6 @@
     };
   }
 
-  /*
-|--------------------------------------------------------------------------
-| Chart Generator
-|--------------------------------------------------------------------------
-*/
-
   function generateGraph() {
     if (!graphCanvas.value) return;
 

src/components/PageHeader.vue

@@ -31,12 +31,22 @@
     info?: string | Array<string>;
     link?: string;
     shortList?: boolean;
+    sectionType?: "list" | "discover";
   }
 
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    sectionType: "list"
+  });
 
   const urlify = computed(() => {
-    return `/list/${props.title.toLowerCase().replace(" ", "_")}`;
+    const normalizedTitle = props.title
+      .toLowerCase()
+      .replace(/'s\b/g, "") // Remove possessive 's
+      .replace(/[^\w\d\s-]/g, "") // Remove special characters (keep word chars, dashes, digits, spaces)
+      .replace(/\s+/g, "_") // Replace spaces with underscores
+      .replace(/-/g, "_") // Replace dash with underscore
+      .replace(/_+/g, "_"); // Replace multiple underscores with single underscore
+    return `/${props.sectionType}/${normalizedTitle}`;
   });
 
   const prettify = computed(() => {

src/components/ResultsSection.vue

@@ -1,6 +1,8 @@
 <template>
   <div ref="resultSection" class="resultSection">
-    <page-header v-bind="{ title, info, shortList }" />
+    <page-header
+      v-bind="{ title, info, shortList, sectionType: props.sectionType }"
+    />
 
     <div
       v-if="!loadedPages.includes(1) && loading == false"
@@ -40,9 +42,12 @@
     title: string;
     apiFunction: (page: number) => Promise<IList>;
     shortList?: boolean;
+    sectionType?: "list" | "discover";
   }
 
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    sectionType: "list"
+  });
 
   const results: Ref<ListResults> = ref([]);
   const page: Ref<number> = ref(1);

src/components/activity/StatsOverview.vue

@@ -0,0 +1,86 @@
+<template>
+  <div v-if="watchStats" class="stats-overview">
+    <div class="stat-card">
+      <div class="stat-value">{{ watchStats.totalPlays }}</div>
+      <div class="stat-label">Total Plays</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-value">{{ watchStats.totalHours }}h</div>
+      <div class="stat-label">Watch Time</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-value">{{ watchStats.moviePlays }}</div>
+      <div class="stat-label">Movies watched</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-value">{{ watchStats.episodePlays }}</div>
+      <div class="stat-label">Episodes watched</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { WatchStats } from "../../composables/useTautulliStats";
+
+  interface Props {
+    watchStats: WatchStats | null;
+  }
+
+  defineProps<Props>();
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .stats-overview {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+
+    @include mobile-only {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 1rem;
+    }
+  }
+
+  .stat-card {
+    background: var(--background-ui);
+    padding: 1.5rem;
+    border-radius: 12px;
+    text-align: center;
+    transition: transform 0.2s;
+
+    &:hover {
+      transform: translateY(-4px);
+    }
+
+    @include mobile-only {
+      padding: 1rem;
+    }
+  }
+
+  .stat-value {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--highlight-color);
+    margin-bottom: 0.5rem;
+
+    @include mobile-only {
+      font-size: 2rem;
+    }
+  }
+
+  .stat-label {
+    font-size: 0.9rem;
+    color: var(--text-color-60);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 300;
+
+    @include mobile-only {
+      font-size: 0.8rem;
+    }
+  }
+</style>

src/components/activity/WatchHistory.vue

@@ -0,0 +1,101 @@
+<template>
+  <div v-if="topContent.length > 0" class="watch-history">
+    <h3 class="section-title">Last Watched</h3>
+    <div class="top-content-list">
+      <div
+        v-for="(item, index) in topContent"
+        :key="index"
+        class="top-content-item"
+      >
+        <div class="content-rank">{{ index + 1 }}</div>
+        <div class="content-details">
+          <div class="content-title">{{ item.title }}</div>
+          <div class="content-meta">
+            {{ item.type }} • {{ item.plays }} plays • {{ item.duration }}min
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  interface TopContentItem {
+    title: string;
+    type: string;
+    plays: number;
+    duration: number;
+  }
+
+  interface Props {
+    topContent: TopContentItem[];
+  }
+
+  defineProps<Props>();
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .watch-history {
+    margin-top: 2rem;
+  }
+
+  .section-title {
+    margin: 0 0 1rem 0;
+    font-size: 1.2rem;
+    font-weight: 500;
+    color: $text-color;
+  }
+
+  .top-content-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1rem;
+
+    @include mobile-only {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .top-content-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    background: var(--background-ui);
+    padding: 1rem;
+    border-radius: 8px;
+    border: 1px solid var(--text-color-50);
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: var(--text-color);
+      transform: translateY(-2px);
+    }
+  }
+
+  .content-rank {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--highlight-color);
+    min-width: 2.5rem;
+    text-align: center;
+  }
+
+  .content-details {
+    flex: 1;
+  }
+
+  .content-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-color);
+    margin-bottom: 0.25rem;
+  }
+
+  .content-meta {
+    font-size: 0.85rem;
+    color: var(--text-color-60);
+  }
+</style>

src/components/admin/AdminStats.vue

@@ -1,503 +0,0 @@
-<template>
-  <div class="admin-stats">
-    <div class="admin-stats__header">
-      <h2 class="admin-stats__title">Statistics</h2>
-      <div class="admin-stats__controls">
-        <select
-          v-model="timeRange"
-          class="time-range-select"
-          @change="fetchStats"
-        >
-          <option value="today">Today</option>
-          <option value="week">This Week</option>
-          <option value="month">This Month</option>
-          <option value="all">All Time</option>
-        </select>
-        <button class="refresh-btn" @click="fetchStats" :disabled="loading">
-          <IconActivity :class="{ spin: loading }" />
-        </button>
-      </div>
-    </div>
-
-    <div v-if="loading" class="admin-stats__loading">Loading statistics...</div>
-
-    <div v-else class="admin-stats__grid">
-      <div
-        class="stat-card"
-        v-for="stat in statCards"
-        :key="stat.key"
-        @click="handleCardClick(stat.key)"
-        :class="{ 'stat-card--clickable': stat.clickable }"
-      >
-        <div class="stat-card__header">
-          <component :is="stat.icon" class="stat-card__icon" />
-          <span
-            v-if="stat.trend !== 0"
-            :class="[
-              'stat-card__trend',
-              stat.trend > 0 ? 'stat-card__trend--up' : 'stat-card__trend--down'
-            ]"
-          >
-            {{ stat.trend > 0 ? "↑" : "↓" }} {{ Math.abs(stat.trend) }}%
-          </span>
-        </div>
-        <span class="stat-card__value">{{ stat.value }}</span>
-        <span class="stat-card__label">{{ stat.label }}</span>
-        <div v-if="stat.sparkline" class="stat-card__sparkline">
-          <div
-            v-for="(point, index) in stat.sparkline"
-            :key="index"
-            class="sparkline-bar"
-            :style="{
-              height: `${(point / Math.max(...stat.sparkline)) * 100}%`
-            }"
-          ></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref, computed, onMounted } from "vue";
-  import IconProfile from "@/icons/IconProfile.vue";
-  import IconPlay from "@/icons/IconPlay.vue";
-  import IconRequest from "@/icons/IconRequest.vue";
-  import IconActivity from "@/icons/IconActivity.vue";
-
-  interface Stat {
-    key: string;
-    value: string | number;
-    label: string;
-    trend: number;
-    icon: any;
-    clickable: boolean;
-    sparkline?: number[];
-  }
-
-  const stats = ref({
-    totalUsers: 0,
-    activeTorrents: 0,
-    totalRequests: 0,
-    pendingRequests: 0,
-    approvedRequests: 0,
-    totalStorage: "0 GB",
-    usersTrend: 0,
-    torrentsTrend: 0,
-    requestsTrend: 0,
-    pendingTrend: 0,
-    approvedTrend: 0,
-    storageTrend: 0,
-    usersSparkline: [] as number[],
-    torrentsSparkline: [] as number[],
-    requestsSparkline: [] as number[]
-  });
-
-  const loading = ref(false);
-  const timeRange = ref("week");
-
-  const statCards = computed<Stat[]>(() => [
-    {
-      key: "totalUsers",
-      value: stats.value.totalUsers,
-      label: "Total Users",
-      trend: stats.value.usersTrend,
-      icon: IconProfile,
-      clickable: true,
-      sparkline: stats.value.usersSparkline
-    },
-    {
-      key: "activeTorrents",
-      value: stats.value.activeTorrents,
-      label: "Active Torrents",
-      trend: stats.value.torrentsTrend,
-      icon: IconPlay,
-      clickable: true,
-      sparkline: stats.value.torrentsSparkline
-    },
-    {
-      key: "totalRequests",
-      value: stats.value.totalRequests,
-      label: "Total Requests",
-      trend: stats.value.requestsTrend,
-      icon: IconRequest,
-      clickable: true,
-      sparkline: stats.value.requestsSparkline
-    },
-    {
-      key: "pendingRequests",
-      value: stats.value.pendingRequests,
-      label: "Pending Requests",
-      trend: stats.value.pendingTrend,
-      icon: IconRequest,
-      clickable: true
-    },
-    {
-      key: "approvedRequests",
-      value: stats.value.approvedRequests,
-      label: "Approved",
-      trend: stats.value.approvedTrend,
-      icon: IconRequest,
-      clickable: true
-    },
-    {
-      key: "totalStorage",
-      value: stats.value.totalStorage,
-      label: "Storage Used",
-      trend: stats.value.storageTrend,
-      icon: IconActivity,
-      clickable: false
-    }
-  ]);
-
-  const generateSparkline = (
-    baseValue: number,
-    points: number = 7
-  ): number[] => {
-    return Array.from({ length: points }, () => {
-      const variance = Math.random() * 0.3 - 0.15;
-      return Math.max(0, Math.floor(baseValue * (1 + variance)));
-    });
-  };
-
-  async function fetchStats() {
-    loading.value = true;
-
-    try {
-      await new Promise(resolve => setTimeout(resolve, 500));
-
-      const baseUsers = 142;
-      const baseTorrents = 23;
-      const baseRequests = 856;
-
-      stats.value = {
-        totalUsers: baseUsers,
-        activeTorrents: baseTorrents,
-        totalRequests: baseRequests,
-        pendingRequests: 12,
-        approvedRequests: 712,
-        totalStorage: "2.4 TB",
-        usersTrend: 8.5,
-        torrentsTrend: -3.2,
-        requestsTrend: 12.7,
-        pendingTrend: -15.4,
-        approvedTrend: 18.2,
-        storageTrend: 5.8,
-        usersSparkline: generateSparkline(baseUsers / 7),
-        torrentsSparkline: generateSparkline(baseTorrents),
-        requestsSparkline: generateSparkline(baseRequests / 30)
-      };
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  function handleCardClick(key: string) {
-    console.log(`Stat card clicked: ${key}`);
-  }
-
-  onMounted(() => fetchStats());
-</script>
-
-<style lang="scss" scoped>
-  @import "scss/variables";
-  @import "scss/media-queries";
-
-  .admin-stats {
-    background-color: var(--background-color-secondary);
-    border-radius: 0.5rem;
-    padding: 1rem;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    max-width: 100%;
-    overflow: hidden;
-
-    @include mobile-only {
-      background-color: transparent;
-      border-radius: 0;
-      padding: 0;
-      box-shadow: none;
-      width: 100%;
-    }
-
-    &__header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 0.75rem;
-      flex-wrap: wrap;
-      gap: 0.5rem;
-
-      @include mobile-only {
-        margin-bottom: 0.6rem;
-        width: 100%;
-      }
-    }
-
-    &__title {
-      margin: 0;
-      font-size: 1.1rem;
-      font-weight: 400;
-      color: $text-color;
-      text-transform: uppercase;
-      letter-spacing: 0.8px;
-
-      @include mobile-only {
-        font-size: 0.95rem;
-      }
-    }
-
-    &__controls {
-      display: flex;
-      gap: 0.5rem;
-      align-items: center;
-
-      @include mobile-only {
-        width: 100%;
-        justify-content: space-between;
-      }
-    }
-
-    &__loading {
-      padding: 2rem;
-      text-align: center;
-      color: $text-color-70;
-
-      @include mobile-only {
-        padding: 1.5rem;
-        font-size: 0.9rem;
-      }
-    }
-
-    &__grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 0.75rem;
-
-      @include mobile-only {
-        grid-template-columns: repeat(2, 1fr);
-        gap: 0.6rem;
-        width: 100%;
-      }
-    }
-  }
-
-  .time-range-select {
-    padding: 0.5rem 0.75rem;
-    border: 1px solid var(--background-40);
-    border-radius: 0.25rem;
-    background-color: var(--background-color);
-    color: $text-color;
-    font-size: 0.85rem;
-    cursor: pointer;
-
-    @include mobile-only {
-      flex: 1;
-      font-size: 0.8rem;
-      padding: 0.4rem 0.5rem;
-    }
-
-    &:focus {
-      outline: none;
-      border-color: var(--highlight-color);
-    }
-  }
-
-  .refresh-btn {
-    background: none;
-    border: 1px solid var(--background-40);
-    cursor: pointer;
-    padding: 0.5rem;
-    border-radius: 0.25rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s;
-    flex-shrink: 0;
-
-    @include mobile-only {
-      width: 40px;
-      padding: 0.4rem;
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--background-ui);
-      border-color: var(--highlight-color);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    svg {
-      width: 18px;
-      height: 18px;
-      fill: $text-color;
-
-      @include mobile-only {
-        width: 16px;
-        height: 16px;
-      }
-
-      &.spin {
-        animation: spin 1s linear infinite;
-      }
-    }
-  }
-
-  .stat-card {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 0.75rem;
-    background-color: var(--background-ui);
-    border-radius: 0.5rem;
-    text-align: center;
-    transition: all 0.2s;
-    overflow: hidden;
-    min-width: 0;
-
-    @include mobile-only {
-      padding: 0.6rem 0.4rem;
-      width: 100%;
-      box-sizing: border-box;
-    }
-
-    &--clickable {
-      cursor: pointer;
-
-      &:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        background-color: var(--background-40);
-      }
-
-      @include mobile-only {
-        &:hover {
-          transform: none;
-        }
-
-        &:active {
-          transform: scale(0.98);
-        }
-      }
-    }
-
-    &__header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 100%;
-      margin-bottom: 0.4rem;
-
-      @include mobile-only {
-        margin-bottom: 0.3rem;
-      }
-    }
-
-    &__icon {
-      width: 20px;
-      height: 20px;
-      fill: var(--highlight-color);
-      opacity: 0.8;
-
-      @include mobile-only {
-        width: 16px;
-        height: 16px;
-      }
-    }
-
-    &__trend {
-      font-size: 0.75rem;
-      font-weight: 600;
-      padding: 0.2rem 0.4rem;
-      border-radius: 0.25rem;
-
-      @include mobile-only {
-        font-size: 0.65rem;
-        padding: 0.15rem 0.3rem;
-      }
-
-      &--up {
-        color: $white;
-        background-color: var(--color-success-highlight);
-      }
-
-      &--down {
-        color: $white;
-        background-color: var(--color-error-highlight);
-      }
-    }
-
-    &__value {
-      font-size: 2.2rem;
-      font-weight: 600;
-      color: var(--highlight-color);
-      margin-bottom: 0.15rem;
-      line-height: 1.1;
-      padding: 1rem 0;
-
-      @include mobile-only {
-        margin-bottom: 0.1rem;
-      }
-    }
-
-    &__label {
-      font-size: 0.8rem;
-      color: $text-color-70;
-      text-transform: uppercase;
-      letter-spacing: 0.4px;
-      margin-bottom: 0.4rem;
-      word-break: break-word;
-      max-width: 100%;
-      line-height: 1.2;
-
-      @include mobile-only {
-        margin-bottom: 0.3rem;
-        letter-spacing: 0.2px;
-      }
-    }
-
-    &__sparkline {
-      display: flex;
-      align-items: flex-end;
-      justify-content: space-between;
-      width: 100%;
-      height: 24px;
-      margin-top: 0.4rem;
-      gap: 2px;
-
-      @include mobile-only {
-        height: 18px;
-        margin-top: 0.3rem;
-        gap: 1px;
-      }
-    }
-  }
-
-  .sparkline-bar {
-    flex: 1;
-    background: linear-gradient(
-      180deg,
-      var(--highlight-color) 0%,
-      var(--color-green-70) 100%
-    );
-    border-radius: 2px 2px 0 0;
-    min-height: 3px;
-    transition: all 0.3s ease;
-
-    .stat-card:hover & {
-      opacity: 0.9;
-    }
-  }
-
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-</style>

src/components/admin/RecentActivityFeed.vue

@@ -1,685 +0,0 @@
-<template>
-  <div class="activity-feed">
-    <div class="activity-feed__header">
-      <h2 class="activity-feed__title">Recent Activity</h2>
-      <div class="activity-feed__controls">
-        <select v-model="typeFilter" class="activity-feed__filter">
-          <option value="">All Types</option>
-          <option value="request">Requests</option>
-          <option value="download">Downloads</option>
-          <option value="user">Users</option>
-          <option value="movie">Library</option>
-        </select>
-        <select
-          v-model="timeFilter"
-          class="activity-feed__filter"
-          @change="fetchActivities"
-        >
-          <option value="1h">Last Hour</option>
-          <option value="24h">Last 24 Hours</option>
-          <option value="7d">Last 7 Days</option>
-          <option value="30d">Last 30 Days</option>
-        </select>
-        <button
-          class="refresh-btn"
-          @click="fetchActivities"
-          :disabled="loading"
-        >
-          <IconActivity :class="{ spin: loading }" />
-        </button>
-      </div>
-    </div>
-
-    <div v-if="loading" class="activity-feed__loading">
-      Loading activities...
-    </div>
-    <div v-else-if="error" class="activity-feed__error">{{ error }}</div>
-
-    <div v-else class="activity-feed__list">
-      <div
-        class="activity-item"
-        v-for="activity in filteredActivities"
-        :key="activity.id"
-        @click="handleActivityClick(activity)"
-      >
-        <div
-          :class="[
-            'activity-item__icon',
-            `activity-item__icon--${activity.type}`
-          ]"
-        >
-          <component :is="getIcon(activity.type)" />
-        </div>
-        <div class="activity-item__content">
-          <div class="activity-item__header">
-            <span class="activity-item__message">{{ activity.message }}</span>
-            <span v-if="activity.metadata" class="activity-item__badge">
-              {{ activity.metadata }}
-            </span>
-          </div>
-          <div class="activity-item__footer">
-            <span class="activity-item__user" v-if="activity.user">{{
-              activity.user
-            }}</span>
-            <span class="activity-item__time">{{
-              formatTime(activity.timestamp)
-            }}</span>
-          </div>
-        </div>
-      </div>
-
-      <div v-if="filteredActivities.length === 0" class="activity-feed__empty">
-        No activities found
-      </div>
-    </div>
-
-    <div
-      v-if="!loading && filteredActivities.length > 0"
-      class="activity-feed__footer"
-    >
-      <span class="activity-count"
-        >{{ filteredActivities.length }} of
-        {{ activities.length }} activities</span
-      >
-      <button
-        v-if="hasMore"
-        class="load-more-btn"
-        @click="loadMore"
-        :disabled="loadingMore"
-      >
-        {{ loadingMore ? "Loading..." : "Load More" }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref, computed, onMounted, onUnmounted } from "vue";
-  import IconMovie from "@/icons/IconMovie.vue";
-  import IconPlay from "@/icons/IconPlay.vue";
-  import IconRequest from "@/icons/IconRequest.vue";
-  import IconProfile from "@/icons/IconProfile.vue";
-  import IconActivity from "@/icons/IconActivity.vue";
-
-  type ActivityType = "request" | "download" | "user" | "movie";
-
-  interface Activity {
-    id: number;
-    type: ActivityType;
-    message: string;
-    timestamp: Date;
-    user?: string;
-    metadata?: string;
-    details?: any;
-  }
-
-  const activities = ref<Activity[]>([]);
-  const loading = ref(false);
-  const loadingMore = ref(false);
-  const error = ref("");
-  const typeFilter = ref<ActivityType | "">("");
-  const timeFilter = ref("24h");
-  const hasMore = ref(true);
-  const page = ref(1);
-
-  const filteredActivities = computed(() => {
-    let result = [...activities.value];
-
-    if (typeFilter.value) {
-      result = result.filter(a => a.type === typeFilter.value);
-    }
-
-    return result;
-  });
-
-  const getIcon = (type: string) => {
-    const icons: Record<string, any> = {
-      request: IconRequest,
-      download: IconPlay,
-      user: IconProfile,
-      movie: IconMovie
-    };
-    return icons[type] || IconMovie;
-  };
-
-  const formatTime = (date: Date): string => {
-    const now = new Date();
-    const diff = now.getTime() - date.getTime();
-    const minutes = Math.floor(diff / 60000);
-    const hours = Math.floor(diff / 3600000);
-    const days = Math.floor(diff / 86400000);
-
-    if (minutes < 1) return "Just now";
-    if (minutes < 60) return `${minutes}m ago`;
-    if (hours < 24) return `${hours}h ago`;
-    return `${days}d ago`;
-  };
-
-  const generateMockActivities = (
-    count: number,
-    startId: number
-  ): Activity[] => {
-    const types: ActivityType[] = ["request", "download", "user", "movie"];
-    const messages = {
-      request: [
-        "New request: Interstellar (2014)",
-        "Request approved: Oppenheimer",
-        "Request denied: The Matrix",
-        "Request fulfilled: Dune Part Two"
-      ],
-      download: [
-        "Torrent completed: Dune Part Two",
-        "Torrent started: Poor Things",
-        "Download failed: Network Error",
-        "Torrent paused by admin"
-      ],
-      user: [
-        "New user registered: john_doe",
-        "User upgraded to VIP: sarah_s",
-        "User login from new device: alex_p",
-        "Password changed: mike_r"
-      ],
-      movie: [
-        "Movie added to library: The Batman",
-        "Library scan completed: 12 new items",
-        "Show updated: Breaking Bad S5",
-        "Media deleted: Old Movie (1999)"
-      ]
-    };
-
-    const users = [
-      "admin",
-      "kevin_m",
-      "sarah_s",
-      "john_doe",
-      "alex_p",
-      "mike_r"
-    ];
-
-    return Array.from({ length: count }, (_, i) => {
-      const type = types[Math.floor(Math.random() * types.length)];
-      const typeMessages = messages[type];
-      const message =
-        typeMessages[Math.floor(Math.random() * typeMessages.length)];
-      const timeOffset = Math.random() * 24 * 60 * 60 * 1000; // Random time in last 24h
-
-      return {
-        id: startId + i,
-        type,
-        message,
-        timestamp: new Date(Date.now() - timeOffset),
-        user: users[Math.floor(Math.random() * users.length)],
-        metadata: type === "request" ? "Pending" : undefined
-      };
-    });
-  };
-
-  async function fetchActivities() {
-    loading.value = true;
-    error.value = "";
-    page.value = 1;
-
-    try {
-      await new Promise(resolve => setTimeout(resolve, 500));
-
-      activities.value = generateMockActivities(15, 1).sort(
-        (a, b) => b.timestamp.getTime() - a.timestamp.getTime()
-      );
-
-      hasMore.value = true;
-    } catch (e) {
-      error.value = "Failed to load activities";
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  async function loadMore() {
-    if (!hasMore.value || loadingMore.value) return;
-
-    loadingMore.value = true;
-
-    try {
-      await new Promise(resolve => setTimeout(resolve, 500));
-
-      const newActivities = generateMockActivities(
-        10,
-        activities.value.length + 1
-      );
-      activities.value = [...activities.value, ...newActivities].sort(
-        (a, b) => b.timestamp.getTime() - a.timestamp.getTime()
-      );
-
-      page.value += 1;
-
-      if (page.value >= 5) {
-        hasMore.value = false;
-      }
-    } finally {
-      loadingMore.value = false;
-    }
-  }
-
-  function handleActivityClick(activity: Activity) {
-    console.log("Activity clicked:", activity);
-  }
-
-  onMounted(fetchActivities);
-</script>
-
-<style lang="scss" scoped>
-  @import "scss/variables";
-  @import "scss/media-queries";
-
-  .activity-feed {
-    background-color: var(--background-color-secondary);
-    border-radius: 0.5rem;
-    padding: 1rem;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    max-width: 100%;
-    overflow: hidden;
-
-    @include mobile-only {
-      background-color: transparent;
-      border-radius: 0;
-      padding: 0;
-      box-shadow: none;
-      width: 100%;
-    }
-
-    &__header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 0.75rem;
-      flex-wrap: wrap;
-      gap: 0.75rem;
-
-      @include mobile-only {
-        gap: 0.6rem;
-        margin-bottom: 0.6rem;
-      }
-    }
-
-    &__title {
-      margin: 0;
-      font-size: 1.1rem;
-      font-weight: 400;
-      color: $text-color;
-      text-transform: uppercase;
-      letter-spacing: 0.8px;
-
-      @include mobile-only {
-        font-size: 0.95rem;
-        width: 100%;
-      }
-    }
-
-    &__controls {
-      display: flex;
-      gap: 0.5rem;
-      align-items: center;
-
-      @include mobile-only {
-        width: 100%;
-        gap: 0.4rem;
-      }
-    }
-
-    &__filter {
-      padding: 0.5rem 0.75rem;
-      border: 1px solid var(--background-40);
-      border-radius: 0.25rem;
-      background-color: var(--background-color);
-      color: $text-color;
-      font-size: 0.85rem;
-      cursor: pointer;
-
-      @include mobile-only {
-        flex: 1;
-        font-size: 0.8rem;
-        padding: 0.4rem 0.5rem;
-        min-width: 0;
-        max-width: calc(50% - 0.2rem - 20px);
-      }
-
-      &:focus {
-        outline: none;
-        border-color: var(--highlight-color);
-      }
-    }
-
-    &__loading,
-    &__error {
-      padding: 2rem;
-      text-align: center;
-      color: $text-color-70;
-
-      @include mobile-only {
-        padding: 1.5rem;
-        font-size: 0.9rem;
-      }
-    }
-
-    &__error {
-      color: var(--color-error-highlight);
-    }
-
-    &__list {
-      display: flex;
-      flex-direction: column;
-      gap: 0.4rem;
-      max-height: 450px;
-      overflow-y: auto;
-      padding-right: 0.25rem;
-
-      @include mobile-only {
-        max-height: 350px;
-        gap: 0.35rem;
-      }
-
-      &::-webkit-scrollbar {
-        width: 6px;
-      }
-
-      &::-webkit-scrollbar-track {
-        background: var(--background-40);
-        border-radius: 3px;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background: var(--text-color-50);
-        border-radius: 3px;
-
-        &:hover {
-          background: var(--text-color-70);
-        }
-      }
-    }
-
-    &__empty {
-      padding: 2rem;
-      text-align: center;
-      color: $text-color-50;
-      font-style: italic;
-
-      @include mobile-only {
-        padding: 1.5rem;
-        font-size: 0.9rem;
-      }
-    }
-
-    &__footer {
-      margin-top: 1rem;
-      padding-top: 0.75rem;
-      border-top: 1px solid var(--background-40);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      @include mobile-only {
-        margin-top: 0.75rem;
-        padding-top: 0.5rem;
-        flex-direction: column;
-        gap: 0.5rem;
-        align-items: stretch;
-      }
-    }
-  }
-
-  .activity-item {
-    display: flex;
-    align-items: flex-start;
-    gap: 0.75rem;
-    padding: 0.65rem;
-    background-color: var(--background-ui);
-    border-radius: 0.5rem;
-    transition: background-color 0.2s;
-    cursor: pointer;
-    min-width: 0;
-
-    @include mobile-only {
-      gap: 0.6rem;
-      padding: 0.6rem;
-      width: 100%;
-      box-sizing: border-box;
-    }
-
-    &:hover {
-      background-color: var(--background-40);
-    }
-
-    @include mobile-only {
-      &:hover {
-        background-color: var(--background-ui);
-      }
-
-      &:active {
-        background-color: var(--background-40);
-      }
-    }
-
-    &__icon {
-      flex-shrink: 0;
-      width: 28px;
-      height: 28px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-
-      @include mobile-only {
-        width: 26px;
-        height: 26px;
-      }
-
-      &--request {
-        background-color: #3b82f6;
-      }
-
-      &--download {
-        background-color: var(--highlight-color);
-      }
-
-      &--user {
-        background-color: #8b5cf6;
-      }
-
-      &--movie {
-        background-color: #f59e0b;
-      }
-
-      svg {
-        width: 14px;
-        height: 14px;
-        fill: $white;
-
-        @include mobile-only {
-          width: 13px;
-          height: 13px;
-        }
-      }
-    }
-
-    &__content {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      gap: 0.25rem;
-      min-width: 0;
-
-      @include mobile-only {
-        gap: 0.2rem;
-      }
-    }
-
-    &__header {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      gap: 0.4rem;
-    }
-
-    &__message {
-      font-size: 0.85rem;
-      color: $text-color;
-      line-height: 1.3;
-      flex: 1;
-      word-break: break-word;
-      overflow-wrap: break-word;
-
-      @include mobile-only {
-        font-size: 0.78rem;
-        line-height: 1.25;
-      }
-    }
-
-    &__badge {
-      flex-shrink: 0;
-      font-size: 0.7rem;
-      padding: 0.15rem 0.4rem;
-      border-radius: 0.25rem;
-      background-color: var(--color-warning);
-      color: $black;
-      font-weight: 500;
-      text-transform: uppercase;
-
-      @include mobile-only {
-        font-size: 0.6rem;
-        padding: 0.1rem 0.3rem;
-      }
-    }
-
-    &__footer {
-      display: flex;
-      gap: 0.5rem;
-      align-items: center;
-      font-size: 0.75rem;
-
-      @include mobile-only {
-        font-size: 0.7rem;
-        gap: 0.35rem;
-      }
-    }
-
-    &__user {
-      color: $text-color-70;
-      font-weight: 500;
-
-      @include mobile-only {
-        font-size: 0.7rem;
-      }
-
-      &::before {
-        content: "@";
-        opacity: 0.7;
-      }
-    }
-
-    &__time {
-      color: $text-color-50;
-
-      @include mobile-only {
-        font-size: 0.7rem;
-      }
-
-      &::before {
-        content: "•";
-        margin-right: 0.5rem;
-
-        @include mobile-only {
-          margin-right: 0.3rem;
-        }
-      }
-    }
-  }
-
-  .refresh-btn {
-    background: none;
-    border: 1px solid var(--background-40);
-    cursor: pointer;
-    padding: 0.5rem;
-    border-radius: 0.25rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s;
-    flex-shrink: 0;
-
-    @include mobile-only {
-      width: 40px;
-      padding: 0.4rem;
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--background-ui);
-      border-color: var(--highlight-color);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    svg {
-      width: 18px;
-      height: 18px;
-      fill: $text-color;
-
-      @include mobile-only {
-        width: 16px;
-        height: 16px;
-      }
-
-      &.spin {
-        animation: spin 1s linear infinite;
-      }
-    }
-  }
-
-  .load-more-btn {
-    padding: 0.5rem 1rem;
-    border: 1px solid var(--background-40);
-    background-color: var(--background-ui);
-    color: $text-color;
-    border-radius: 0.25rem;
-    cursor: pointer;
-    font-size: 0.85rem;
-    transition: all 0.2s;
-
-    @include mobile-only {
-      width: 100%;
-      padding: 0.65rem 1rem;
-      font-size: 0.9rem;
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--background-40);
-      border-color: var(--highlight-color);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-
-  .activity-count {
-    font-size: 0.8rem;
-    color: $text-color-50;
-
-    @include mobile-only {
-      font-size: 0.75rem;
-      text-align: center;
-    }
-  }
-
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-</style>

src/components/admin/SystemStatusPanel.vue

@@ -1,750 +0,0 @@
-<template>
-  <div class="system-status">
-    <div class="system-status__header">
-      <h2 class="system-status__title">System Status</h2>
-      <button
-        class="refresh-btn"
-        @click="fetchSystemStatus"
-        :disabled="loading"
-      >
-        <IconActivity :class="{ spin: loading }" />
-      </button>
-    </div>
-
-    <div v-if="loading" class="system-status__loading">
-      Loading system status...
-    </div>
-
-    <div v-else class="system-status__items">
-      <div
-        class="status-item"
-        v-for="item in systemItems"
-        :key="item.name"
-        @click="showDetails(item)"
-      >
-        <div class="status-item__header">
-          <span class="status-item__name">{{ item.name }}</span>
-          <div class="status-item__indicator-wrapper">
-            <span class="status-item__uptime" v-if="item.uptime">{{
-              item.uptime
-            }}</span>
-            <span
-              :class="[
-                'status-item__indicator',
-                `status-item__indicator--${item.status}`
-              ]"
-              :title="`${item.status}`"
-            ></span>
-          </div>
-        </div>
-        <div class="status-item__details">
-          <span class="status-item__value">{{ item.value }}</span>
-          <span class="status-item__description">{{ item.description }}</span>
-        </div>
-        <div v-if="item.metrics" class="status-item__metrics">
-          <div
-            v-for="metric in item.metrics"
-            :key="metric.label"
-            class="metric"
-          >
-            <span class="metric__label">{{ metric.label }}</span>
-            <div class="metric__bar">
-              <div
-                class="metric__fill"
-                :style="{ width: `${metric.value}%` }"
-                :class="getMetricClass(metric.value)"
-              ></div>
-            </div>
-            <span class="metric__value">{{ metric.value }}%</span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Details Modal -->
-    <div v-if="selectedItem" class="modal-overlay" @click="closeDetails">
-      <div class="modal-content" @click.stop>
-        <div class="modal-header">
-          <h3>{{ selectedItem.name }} Details</h3>
-          <button class="close-btn" @click="closeDetails">
-            <IconClose />
-          </button>
-        </div>
-        <div class="modal-body">
-          <div class="detail-row">
-            <span class="detail-label">Status:</span>
-            <span
-              :class="['detail-value', `detail-value--${selectedItem.status}`]"
-            >
-              {{ selectedItem.status.toUpperCase() }}
-            </span>
-          </div>
-          <div class="detail-row">
-            <span class="detail-label">Current Value:</span>
-            <span class="detail-value">{{ selectedItem.value }}</span>
-          </div>
-          <div class="detail-row">
-            <span class="detail-label">Description:</span>
-            <span class="detail-value">{{ selectedItem.description }}</span>
-          </div>
-          <div v-if="selectedItem.uptime" class="detail-row">
-            <span class="detail-label">Uptime:</span>
-            <span class="detail-value">{{ selectedItem.uptime }}</span>
-          </div>
-          <div v-if="selectedItem.lastCheck" class="detail-row">
-            <span class="detail-label">Last Check:</span>
-            <span class="detail-value">{{ selectedItem.lastCheck }}</span>
-          </div>
-          <div v-if="selectedItem.logs" class="detail-logs">
-            <h4>Recent Logs</h4>
-            <div
-              class="log-entry"
-              v-for="(log, index) in selectedItem.logs"
-              :key="index"
-            >
-              <span class="log-time">{{ log.time }}</span>
-              <span class="log-message">{{ log.message }}</span>
-            </div>
-          </div>
-        </div>
-        <div class="modal-footer">
-          <button class="action-btn" @click="restartService(selectedItem)">
-            Restart Service
-          </button>
-          <button
-            class="action-btn action-btn--secondary"
-            @click="viewFullLogs(selectedItem)"
-          >
-            View Full Logs
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref, onMounted } from "vue";
-  import IconActivity from "@/icons/IconActivity.vue";
-  import IconClose from "@/icons/IconClose.vue";
-
-  interface Metric {
-    label: string;
-    value: number;
-  }
-
-  interface LogEntry {
-    time: string;
-    message: string;
-  }
-
-  interface SystemItem {
-    name: string;
-    status: "online" | "warning" | "offline";
-    value: string;
-    description: string;
-    uptime?: string;
-    lastCheck?: string;
-    metrics?: Metric[];
-    logs?: LogEntry[];
-  }
-
-  const systemItems = ref<SystemItem[]>([]);
-  const loading = ref(false);
-  const selectedItem = ref<SystemItem | null>(null);
-
-  const getMetricClass = (value: number) => {
-    if (value >= 90) return "metric__fill--critical";
-    if (value >= 70) return "metric__fill--warning";
-    return "metric__fill--good";
-  };
-
-  async function fetchSystemStatus() {
-    loading.value = true;
-
-    try {
-      await new Promise(resolve => setTimeout(resolve, 500));
-
-      systemItems.value = [
-        {
-          name: "API Server",
-          status: "online",
-          value: "Running",
-          description: "All endpoints responding",
-          uptime: "15d 7h 23m",
-          lastCheck: "Just now",
-          metrics: [
-            { label: "CPU", value: 23 },
-            { label: "Memory", value: 45 }
-          ],
-          logs: [
-            { time: "2m ago", message: "Health check passed" },
-            { time: "5m ago", message: "Request handled: /api/v2/movie" },
-            { time: "7m ago", message: "Cache hit: user_settings" }
-          ]
-        },
-        {
-          name: "Disk Space",
-          status: "warning",
-          value: "45% Used",
-          description: "1.2 TB / 2.7 TB",
-          uptime: "15d 7h 23m",
-          lastCheck: "Just now",
-          metrics: [
-            { label: "System", value: 45 },
-            { label: "Media", value: 78 }
-          ],
-          logs: [
-            { time: "5m ago", message: "Disk usage check completed" },
-            { time: "10m ago", message: "Media folder: 78% full" }
-          ]
-        },
-        {
-          name: "Plex Connection",
-          status: "online",
-          value: "Connected",
-          description: "Server: Home",
-          uptime: "15d 7h 23m",
-          lastCheck: "Just now",
-          metrics: [{ label: "Response Time", value: 15 }],
-          logs: [
-            { time: "2m ago", message: "Plex API request successful" },
-            { time: "8m ago", message: "Library sync completed" }
-          ]
-        }
-      ];
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  function showDetails(item: SystemItem) {
-    selectedItem.value = item;
-  }
-
-  function closeDetails() {
-    selectedItem.value = null;
-  }
-
-  function restartService(item: SystemItem) {
-    console.log(`Restarting service: ${item.name}`);
-    alert(`Restart initiated for ${item.name}`);
-    closeDetails();
-  }
-
-  function viewFullLogs(item: SystemItem) {
-    console.log(`Viewing full logs for: ${item.name}`);
-    alert(`Full logs for ${item.name} would open here`);
-  }
-
-  onMounted(fetchSystemStatus);
-</script>
-
-<style lang="scss" scoped>
-  @import "scss/variables";
-  @import "scss/media-queries";
-
-  .system-status {
-    background-color: var(--background-color-secondary);
-    border-radius: 0.5rem;
-    padding: 1rem;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    max-width: 100%;
-    overflow: hidden;
-
-    @include mobile-only {
-      background-color: transparent;
-      border-radius: 0;
-      padding: 0;
-      box-shadow: none;
-      width: 100%;
-    }
-
-    &__header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 0.75rem;
-
-      @include mobile-only {
-        margin-bottom: 0.6rem;
-      }
-    }
-
-    &__title {
-      margin: 0;
-      font-size: 1.1rem;
-      font-weight: 400;
-      color: $text-color;
-      text-transform: uppercase;
-      letter-spacing: 0.8px;
-
-      @include mobile-only {
-        font-size: 0.95rem;
-      }
-    }
-
-    &__loading {
-      padding: 1.5rem;
-      text-align: center;
-      color: $text-color-70;
-
-      @include mobile-only {
-        padding: 1rem;
-        font-size: 0.85rem;
-      }
-    }
-
-    &__items {
-      display: flex;
-      flex-direction: column;
-      gap: 0.6rem;
-
-      @include mobile-only {
-        gap: 0.5rem;
-      }
-    }
-  }
-
-  .refresh-btn {
-    background: none;
-    border: 1px solid var(--background-40);
-    cursor: pointer;
-    padding: 0.5rem;
-    border-radius: 0.25rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s;
-    flex-shrink: 0;
-
-    @include mobile-only {
-      width: 40px;
-      padding: 0.4rem;
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--background-ui);
-      border-color: var(--highlight-color);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    svg {
-      width: 18px;
-      height: 18px;
-      fill: $text-color;
-
-      @include mobile-only {
-        width: 16px;
-        height: 16px;
-      }
-
-      &.spin {
-        animation: spin 1s linear infinite;
-      }
-    }
-  }
-
-  .status-item {
-    padding: 0.65rem;
-    background-color: var(--background-ui);
-    border-radius: 0.5rem;
-    cursor: pointer;
-    transition: all 0.2s;
-    min-width: 0;
-
-    @include mobile-only {
-      padding: 0.6rem;
-      width: 100%;
-      box-sizing: border-box;
-    }
-
-    &:hover {
-      background-color: var(--background-40);
-      transform: translateX(2px);
-    }
-
-    @include mobile-only {
-      &:hover {
-        transform: none;
-      }
-
-      &:active {
-        background-color: var(--background-40);
-        transform: scale(0.98);
-      }
-    }
-
-    &__header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 0.2rem;
-    }
-
-    &__name {
-      font-weight: 500;
-      color: $text-color;
-      font-size: 0.9rem;
-      line-height: 1.2;
-
-      @include mobile-only {
-        font-size: 0.82rem;
-      }
-    }
-
-    &__indicator-wrapper {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-
-      @include mobile-only {
-        gap: 0.35rem;
-      }
-    }
-
-    &__uptime {
-      font-size: 0.75rem;
-      color: $text-color-50;
-
-      @include mobile-only {
-        font-size: 0.7rem;
-      }
-    }
-
-    &__indicator {
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      animation: pulse 2s infinite;
-
-      @include mobile-only {
-        width: 8px;
-        height: 8px;
-      }
-
-      &--online {
-        background-color: var(--color-success-highlight);
-        box-shadow: 0 0 6px var(--color-success);
-      }
-
-      &--warning {
-        background-color: var(--color-warning-highlight);
-        box-shadow: 0 0 6px var(--color-warning);
-      }
-
-      &--offline {
-        background-color: var(--color-error-highlight);
-        box-shadow: 0 0 6px var(--color-error);
-      }
-    }
-
-    &__details {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 0.4rem;
-
-      @include mobile-only {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 0.15rem;
-        margin-bottom: 0.3rem;
-      }
-    }
-
-    &__value {
-      font-size: 0.8rem;
-      color: $text-color-70;
-      line-height: 1.2;
-
-      @include mobile-only {
-        font-size: 0.75rem;
-      }
-    }
-
-    &__description {
-      font-size: 0.75rem;
-      color: $text-color-50;
-      line-height: 1.2;
-
-      @include mobile-only {
-        font-size: 0.7rem;
-      }
-    }
-
-    &__metrics {
-      margin-top: 0.4rem;
-      display: flex;
-      flex-direction: column;
-      gap: 0.4rem;
-
-      @include mobile-only {
-        margin-top: 0.3rem;
-        gap: 0.3rem;
-      }
-    }
-  }
-
-  .metric {
-    display: flex;
-    align-items: center;
-    gap: 0.4rem;
-    font-size: 0.7rem;
-
-    &__label {
-      min-width: 65px;
-      color: $text-color-70;
-      line-height: 1;
-    }
-
-    &__bar {
-      flex: 1;
-      height: 5px;
-      background-color: var(--background-40);
-      border-radius: 3px;
-      overflow: hidden;
-    }
-
-    &__fill {
-      height: 100%;
-      border-radius: 3px;
-      transition: width 0.3s ease;
-
-      &--good {
-        background-color: var(--color-success-highlight);
-      }
-
-      &--warning {
-        background-color: var(--color-warning-highlight);
-      }
-
-      &--critical {
-        background-color: var(--color-error-highlight);
-      }
-    }
-
-    &__value {
-      min-width: 35px;
-      text-align: right;
-      color: $text-color-50;
-    }
-  }
-
-  .modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.7);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    padding: 1rem;
-
-    @include mobile-only {
-      padding: 0.5rem;
-      align-items: flex-end;
-    }
-  }
-
-  .modal-content {
-    background-color: var(--background-color-secondary);
-    border-radius: 0.5rem;
-    max-width: 600px;
-    width: 100%;
-    max-height: 80vh;
-    overflow-y: auto;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
-
-    @include mobile-only {
-      max-height: 90vh;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-
-  .modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1.5rem;
-    border-bottom: 1px solid var(--background-40);
-
-    @include mobile-only {
-      padding: 1rem;
-    }
-
-    h3 {
-      margin: 0;
-      color: $text-color;
-      font-weight: 400;
-
-      @include mobile-only {
-        font-size: 1rem;
-      }
-    }
-  }
-
-  .close-btn {
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0.25rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.25rem;
-    transition: background-color 0.2s;
-
-    &:hover {
-      background-color: var(--background-40);
-    }
-
-    svg {
-      width: 20px;
-      height: 20px;
-      fill: $text-color;
-    }
-  }
-
-  .modal-body {
-    padding: 1.5rem;
-
-    @include mobile-only {
-      padding: 1rem;
-    }
-  }
-
-  .detail-row {
-    display: flex;
-    justify-content: space-between;
-    padding: 0.75rem 0;
-    border-bottom: 1px solid var(--background-40);
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  .detail-label {
-    font-weight: 500;
-    color: $text-color-70;
-  }
-
-  .detail-value {
-    color: $text-color;
-
-    &--online {
-      color: var(--color-success-highlight);
-    }
-
-    &--warning {
-      color: var(--color-warning-highlight);
-    }
-
-    &--offline {
-      color: var(--color-error-highlight);
-    }
-  }
-
-  .detail-logs {
-    margin-top: 1.5rem;
-    padding-top: 1rem;
-    border-top: 1px solid var(--background-40);
-
-    h4 {
-      margin: 0 0 0.75rem 0;
-      color: $text-color;
-      font-weight: 400;
-      font-size: 0.95rem;
-    }
-  }
-
-  .log-entry {
-    display: flex;
-    gap: 1rem;
-    padding: 0.5rem;
-    font-size: 0.8rem;
-    background-color: var(--background-ui);
-    border-radius: 0.25rem;
-    margin-bottom: 0.5rem;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .log-time {
-    min-width: 60px;
-    color: $text-color-50;
-  }
-
-  .log-message {
-    color: $text-color-70;
-  }
-
-  .modal-footer {
-    padding: 1rem 1.5rem;
-    border-top: 1px solid var(--background-40);
-    display: flex;
-    gap: 0.5rem;
-    justify-content: flex-end;
-
-    @include mobile-only {
-      padding: 1rem;
-      flex-direction: column-reverse;
-    }
-  }
-
-  .action-btn {
-    padding: 0.5rem 1rem;
-    border: 1px solid var(--highlight-color);
-    background-color: var(--highlight-color);
-    color: $white;
-    border-radius: 0.25rem;
-    cursor: pointer;
-    font-size: 0.85rem;
-    transition: all 0.2s;
-
-    &:hover {
-      background-color: var(--color-green-90);
-      border-color: var(--color-green-90);
-    }
-
-    &--secondary {
-      background-color: transparent;
-      color: $text-color;
-      border-color: var(--background-40);
-
-      &:hover {
-        background-color: var(--background-ui);
-      }
-    }
-  }
-
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes pulse {
-    0%,
-    100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.6;
-    }
-  }
-</style>

src/components/admin/TorrentManagementGrid.vue

@@ -1,723 +0,0 @@
-<template>
-  <div class="torrent-management">
-    <div class="torrent-management__header">
-      <h2 class="torrent-management__title">Torrent Management</h2>
-      <div class="torrent-management__controls">
-        <input
-          v-model="searchQuery"
-          type="text"
-          placeholder="Search torrents..."
-          class="torrent-management__search"
-        />
-        <select v-model="statusFilter" class="torrent-management__filter">
-          <option value="">All Status</option>
-          <option value="seeding">Seeding</option>
-          <option value="downloading">Downloading</option>
-          <option value="paused">Paused</option>
-          <option value="stopped">Stopped</option>
-        </select>
-        <button class="refresh-btn" @click="fetchTorrents" :disabled="loading">
-          <IconActivity :class="{ spin: loading }" />
-        </button>
-      </div>
-    </div>
-
-    <div v-if="loading" class="torrent-management__loading">
-      Loading torrents...
-    </div>
-    <div v-else-if="error" class="torrent-management__error">{{ error }}</div>
-
-    <table v-else class="torrent-management__table">
-      <thead>
-        <tr>
-          <th @click="sortBy('name')" class="sortable">
-            Name
-            <span v-if="sortColumn === 'name'">{{
-              sortDirection === "asc" ? "↑" : "↓"
-            }}</span>
-          </th>
-          <th v-if="!isMobile" @click="sortBy('size')" class="sortable">
-            Size
-            <span v-if="sortColumn === 'size'">{{
-              sortDirection === "asc" ? "↑" : "↓"
-            }}</span>
-          </th>
-          <th v-if="!isMobile" @click="sortBy('seeders')" class="sortable">
-            Seeders
-            <span v-if="sortColumn === 'seeders'">{{
-              sortDirection === "asc" ? "↑" : "↓"
-            }}</span>
-          </th>
-          <th v-if="!isMobile">Status</th>
-          <th>Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="torrent in filteredTorrents"
-          :key="torrent.id"
-          :class="{ processing: torrent.processing }"
-        >
-          <td class="torrent-name" :title="torrent.name">
-            <div class="torrent-name__title">{{ torrent.name }}</div>
-            <div v-if="isMobile" class="torrent-name__meta">
-              <span class="meta-item">{{ torrent.size }}</span>
-              <span class="meta-separator">•</span>
-              <span class="meta-item">{{ torrent.seeders }} seeders</span>
-              <span class="meta-separator">•</span>
-              <span
-                :class="['status-badge', `status-badge--${torrent.status}`]"
-              >
-                {{ torrent.status }}
-              </span>
-            </div>
-          </td>
-          <td v-if="!isMobile">{{ torrent.size }}</td>
-          <td v-if="!isMobile">{{ torrent.seeders }}</td>
-          <td v-if="!isMobile">
-            <span :class="['status-badge', `status-badge--${torrent.status}`]">
-              {{ torrent.status }}
-            </span>
-          </td>
-          <td class="actions">
-            <button
-              v-if="
-                torrent.status === 'seeding' || torrent.status === 'downloading'
-              "
-              class="action-btn"
-              title="Pause"
-              @click="pauseTorrent(torrent)"
-              :disabled="torrent.processing"
-            >
-              <IconStop />
-            </button>
-            <button
-              v-if="torrent.status === 'paused' || torrent.status === 'stopped'"
-              class="action-btn"
-              title="Resume"
-              @click="resumeTorrent(torrent)"
-              :disabled="torrent.processing"
-            >
-              <IconPlay />
-            </button>
-            <button
-              class="action-btn action-btn--danger"
-              title="Delete"
-              @click="deleteTorrent(torrent)"
-              :disabled="torrent.processing"
-            >
-              <IconClose />
-            </button>
-            <button
-              class="action-btn"
-              title="Details"
-              @click="showDetails(torrent)"
-            >
-              <IconInfo />
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-
-    <div class="torrent-management__footer">
-      <span class="torrent-count"
-        >{{ filteredTorrents.length }} of {{ torrents.length }} torrents</span
-      >
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref, computed, onMounted, onUnmounted } from "vue";
-  import IconStop from "@/icons/IconStop.vue";
-  import IconPlay from "@/icons/IconPlay.vue";
-  import IconClose from "@/icons/IconClose.vue";
-  import IconInfo from "@/icons/IconInfo.vue";
-  import IconActivity from "@/icons/IconActivity.vue";
-
-  interface Torrent {
-    id: number;
-    name: string;
-    size: string;
-    seeders: number;
-    leechers: number;
-    uploaded: string;
-    downloaded: string;
-    ratio: number;
-    status: "seeding" | "downloading" | "paused" | "stopped";
-    processing?: boolean;
-  }
-
-  const torrents = ref<Torrent[]>([]);
-  const loading = ref(false);
-  const error = ref("");
-  const searchQuery = ref("");
-  const statusFilter = ref("");
-  const sortColumn = ref<keyof Torrent>("name");
-  const sortDirection = ref<"asc" | "desc">("asc");
-
-  const windowWidth = ref(window.innerWidth);
-  const isMobile = computed(() => windowWidth.value <= 768);
-
-  function handleResize() {
-    windowWidth.value = window.innerWidth;
-  }
-
-  const filteredTorrents = computed(() => {
-    let result = [...torrents.value];
-
-    if (searchQuery.value) {
-      const query = searchQuery.value.toLowerCase();
-      result = result.filter(t => t.name.toLowerCase().includes(query));
-    }
-
-    if (statusFilter.value) {
-      result = result.filter(t => t.status === statusFilter.value);
-    }
-
-    result.sort((a, b) => {
-      const aVal = a[sortColumn.value];
-      const bVal = b[sortColumn.value];
-
-      if (typeof aVal === "string" && typeof bVal === "string") {
-        return sortDirection.value === "asc"
-          ? aVal.localeCompare(bVal)
-          : bVal.localeCompare(aVal);
-      }
-
-      if (typeof aVal === "number" && typeof bVal === "number") {
-        return sortDirection.value === "asc" ? aVal - bVal : bVal - aVal;
-      }
-
-      return 0;
-    });
-
-    return result;
-  });
-
-  function sortBy(column: keyof Torrent) {
-    if (sortColumn.value === column) {
-      sortDirection.value = sortDirection.value === "asc" ? "desc" : "asc";
-    } else {
-      sortColumn.value = column;
-      sortDirection.value = "asc";
-    }
-  }
-
-  async function fetchTorrents() {
-    loading.value = true;
-    error.value = "";
-
-    try {
-      await new Promise(resolve => setTimeout(resolve, 500));
-
-      torrents.value = [
-        {
-          id: 1,
-          name: "Movie.Name.2024.1080p.BluRay.x264",
-          size: "2.4 GB",
-          seeders: 156,
-          leechers: 23,
-          uploaded: "45.2 GB",
-          downloaded: "2.4 GB",
-          ratio: 18.83,
-          status: "seeding"
-        },
-        {
-          id: 2,
-          name: "TV.Show.S01E01.720p.WEB-DL",
-          size: "1.2 GB",
-          seeders: 89,
-          leechers: 12,
-          uploaded: "12.8 GB",
-          downloaded: "1.2 GB",
-          ratio: 10.67,
-          status: "seeding"
-        },
-        {
-          id: 3,
-          name: "Documentary.2024.HDRip",
-          size: "890 MB",
-          seeders: 45,
-          leechers: 8,
-          uploaded: "2.1 GB",
-          downloaded: "650 MB",
-          ratio: 3.31,
-          status: "downloading"
-        },
-        {
-          id: 4,
-          name: "Anime.Series.S02E10.1080p",
-          size: "1.8 GB",
-          seeders: 234,
-          leechers: 56,
-          uploaded: "89.4 GB",
-          downloaded: "1.8 GB",
-          ratio: 49.67,
-          status: "seeding"
-        },
-        {
-          id: 5,
-          name: "Concert.2024.4K.UHD",
-          size: "12.5 GB",
-          seeders: 67,
-          leechers: 5,
-          uploaded: "0 B",
-          downloaded: "0 B",
-          ratio: 0,
-          status: "paused"
-        },
-        {
-          id: 6,
-          name: "Drama.Series.2024.S01E05.1080p",
-          size: "2.1 GB",
-          seeders: 112,
-          leechers: 34,
-          uploaded: "8.9 GB",
-          downloaded: "2.1 GB",
-          ratio: 4.24,
-          status: "seeding"
-        },
-        {
-          id: 7,
-          name: "Action.Movie.2024.BRRip",
-          size: "1.5 GB",
-          seeders: 0,
-          leechers: 0,
-          uploaded: "0 B",
-          downloaded: "0 B",
-          ratio: 0,
-          status: "stopped"
-        }
-      ];
-    } catch (e) {
-      error.value = "Failed to load torrents";
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  async function pauseTorrent(torrent: Torrent) {
-    torrent.processing = true;
-    await new Promise(resolve => setTimeout(resolve, 500));
-    torrent.status = "paused";
-    torrent.processing = false;
-  }
-
-  async function resumeTorrent(torrent: Torrent) {
-    torrent.processing = true;
-    await new Promise(resolve => setTimeout(resolve, 500));
-    torrent.status = "seeding";
-    torrent.processing = false;
-  }
-
-  async function deleteTorrent(torrent: Torrent) {
-    if (!confirm(`Are you sure you want to delete "${torrent.name}"?`)) return;
-
-    torrent.processing = true;
-    await new Promise(resolve => setTimeout(resolve, 500));
-    torrents.value = torrents.value.filter(t => t.id !== torrent.id);
-  }
-
-  function showDetails(torrent: Torrent) {
-    alert(
-      `Torrent Details:\n\nName: ${torrent.name}\nSize: ${torrent.size}\nSeeders: ${torrent.seeders}\nLeechers: ${torrent.leechers}\nUploaded: ${torrent.uploaded}\nDownloaded: ${torrent.downloaded}\nRatio: ${torrent.ratio.toFixed(2)}\nStatus: ${torrent.status}`
-    );
-  }
-
-  onMounted(() => {
-    fetchTorrents();
-    window.addEventListener("resize", handleResize);
-  });
-
-  onUnmounted(() => {
-    window.removeEventListener("resize", handleResize);
-  });
-</script>
-
-<style lang="scss" scoped>
-  @import "scss/variables";
-  @import "scss/media-queries";
-
-  .torrent-management {
-    background-color: var(--background-color-secondary);
-    border-radius: 0.5rem;
-    padding: 1rem;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    max-width: 100%;
-
-    @include mobile-only {
-      background-color: transparent;
-      border-radius: 0;
-      padding: 0;
-      box-shadow: none;
-      width: 100%;
-      overflow-x: auto;
-    }
-
-    &__header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 0.75rem;
-      flex-wrap: wrap;
-      gap: 0.75rem;
-
-      @include mobile-only {
-        gap: 0.6rem;
-        margin-bottom: 0.6rem;
-      }
-    }
-
-    &__title {
-      margin: 0;
-      font-size: 1.1rem;
-      font-weight: 400;
-      color: $text-color;
-      text-transform: uppercase;
-      letter-spacing: 0.8px;
-
-      @include mobile-only {
-        font-size: 0.95rem;
-        width: 100%;
-      }
-    }
-
-    &__controls {
-      display: flex;
-      gap: 0.5rem;
-      align-items: center;
-
-      @include mobile-only {
-        width: 100%;
-        gap: 0.4rem;
-      }
-    }
-
-    &__search {
-      padding: 0.5rem 0.75rem;
-      border: 1px solid var(--background-40);
-      border-radius: 0.25rem;
-      background-color: var(--background-color);
-      color: $text-color;
-      font-size: 0.85rem;
-
-      @include mobile-only {
-        flex: 1;
-        min-width: 0;
-        font-size: 0.8rem;
-        padding: 0.4rem 0.5rem;
-        max-width: calc(50% - 0.2rem - 20px);
-      }
-
-      &:focus {
-        outline: none;
-        border-color: var(--highlight-color);
-      }
-    }
-
-    &__filter {
-      padding: 0.5rem 0.75rem;
-      border: 1px solid var(--background-40);
-      border-radius: 0.25rem;
-      background-color: var(--background-color);
-      color: $text-color;
-      font-size: 0.85rem;
-      cursor: pointer;
-
-      @include mobile-only {
-        flex: 1;
-        font-size: 0.8rem;
-        padding: 0.4rem 0.5rem;
-        max-width: calc(50% - 0.2rem - 20px);
-      }
-
-      &:focus {
-        outline: none;
-        border-color: var(--highlight-color);
-      }
-    }
-
-    &__loading,
-    &__error {
-      padding: 2rem;
-      text-align: center;
-      color: $text-color-70;
-
-      @include mobile-only {
-        padding: 1.5rem;
-        font-size: 0.9rem;
-      }
-    }
-
-    &__error {
-      color: var(--color-error-highlight);
-    }
-
-    &__footer {
-      margin-top: 1rem;
-      padding-top: 0.75rem;
-      border-top: 1px solid var(--background-40);
-
-      @include mobile-only {
-        margin-top: 0.75rem;
-        padding-top: 0.5rem;
-      }
-    }
-
-    &__table {
-      width: 100%;
-      max-width: 100%;
-      border-spacing: 0;
-      border-radius: 0.5rem;
-      overflow: hidden;
-      table-layout: fixed;
-
-      @include mobile-only {
-        table-layout: auto;
-      }
-
-      th,
-      td {
-        padding: 0.75rem 1rem;
-        text-align: left;
-        border-bottom: 1px solid var(--background-40);
-
-        @include mobile-only {
-          padding: 0.5rem 0.4rem;
-          font-size: 0.75rem;
-        }
-      }
-
-      th {
-        background-color: var(--table-background-color);
-        color: var(--table-header-text-color);
-        text-transform: uppercase;
-        font-size: 0.8rem;
-        letter-spacing: 0.5px;
-        font-weight: 400;
-
-        @include mobile-only {
-          font-size: 0.7rem;
-          letter-spacing: 0.3px;
-          white-space: nowrap;
-        }
-
-        &.sortable {
-          cursor: pointer;
-          user-select: none;
-
-          &:hover {
-            background-color: var(--background-80);
-          }
-        }
-      }
-
-      td {
-        font-size: 0.85rem;
-        color: $text-color;
-
-        @include mobile-only {
-          font-size: 0.75rem;
-          white-space: nowrap;
-        }
-      }
-
-      tbody tr {
-        background-color: var(--background-color);
-        transition: background-color 0.2s;
-
-        &:nth-child(even) {
-          background-color: var(--background-70);
-        }
-
-        &:hover {
-          background-color: var(--background-ui);
-        }
-
-        &.processing {
-          opacity: 0.6;
-          pointer-events: none;
-        }
-      }
-    }
-  }
-
-  .torrent-name {
-    max-width: 300px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    @include mobile-only {
-      max-width: none;
-      white-space: normal;
-      overflow: visible;
-    }
-
-    &__title {
-      word-break: break-word;
-      overflow-wrap: break-word;
-
-      @include mobile-only {
-        font-size: 0.85rem;
-        font-weight: 500;
-        margin-bottom: 0.25rem;
-      }
-    }
-
-    &__meta {
-      display: flex;
-      align-items: center;
-      gap: 0.4rem;
-      flex-wrap: wrap;
-      font-size: 0.7rem;
-      color: var(--text-color-60);
-      margin-top: 0.25rem;
-
-      .meta-item {
-        white-space: nowrap;
-      }
-
-      .meta-separator {
-        color: var(--text-color-40);
-      }
-
-      .status-badge {
-        margin: 0;
-      }
-    }
-  }
-
-  .status-badge {
-    display: inline-block;
-    padding: 0.25rem 0.5rem;
-    border-radius: 0.25rem;
-    font-size: 0.7rem;
-    text-transform: uppercase;
-    font-weight: 500;
-
-    @include mobile-only {
-      font-size: 0.6rem;
-      padding: 0.2rem 0.35rem;
-    }
-
-    &--seeding {
-      background-color: var(--color-success);
-      color: var(--color-success-text);
-    }
-
-    &--downloading {
-      background-color: var(--color-warning);
-      color: $black;
-    }
-
-    &--paused {
-      background-color: var(--background-40);
-      color: $text-color-70;
-    }
-
-    &--stopped {
-      background-color: var(--color-error);
-      color: $white;
-    }
-  }
-
-  .actions {
-    display: flex;
-    gap: 0.25rem;
-  }
-
-  .action-btn {
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0.35rem;
-    border-radius: 0.25rem;
-    transition: background-color 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:hover:not(:disabled) {
-      background-color: var(--background-40);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    &--danger:hover:not(:disabled) {
-      background-color: var(--color-error);
-
-      svg {
-        fill: $white;
-      }
-    }
-
-    svg {
-      width: 16px;
-      height: 16px;
-      fill: $text-color;
-    }
-  }
-
-  .refresh-btn {
-    background: none;
-    border: 1px solid var(--background-40);
-    cursor: pointer;
-    padding: 0.5rem;
-    border-radius: 0.25rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s;
-    flex-shrink: 0;
-
-    @include mobile-only {
-      width: 40px;
-      padding: 0.4rem;
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--background-ui);
-      border-color: var(--highlight-color);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    svg {
-      width: 18px;
-      height: 18px;
-      fill: $text-color;
-
-      @include mobile-only {
-        width: 16px;
-        height: 16px;
-      }
-
-      &.spin {
-        animation: spin 1s linear infinite;
-      }
-    }
-  }
-
-  .torrent-count {
-    font-size: 0.8rem;
-    color: $text-color-50;
-  }
-
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-</style>

src/components/header/NavigationHeader.vue

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

src/components/header/NavigationIcon.vue

@@ -42,8 +42,7 @@
   .navigation-link {
     display: grid;
     place-items: center;
-    height: var(--header-size);
-    width: var(--header-size);
+    min-height: var(--header-size);
     list-style: none;
     padding: 1rem 0.15rem;
     text-align: center;

src/components/header/NavigationIcons.vue

@@ -15,13 +15,14 @@
   import { ref, watch } from "vue";
   import { useRoute } from "vue-router";
   import NavigationIcon from "@/components/header/NavigationIcon.vue";
-  import IconInbox from "@/icons/IconInbox.vue";
+  import IconMailboxFull from "@/icons/IconMailboxFull.vue";
   import IconNowPlaying from "@/icons/IconNowPlaying.vue";
   import IconPopular from "@/icons/IconPopular.vue";
   import IconUpcoming from "@/icons/IconUpcoming.vue";
   import IconSettings from "@/icons/IconSettings.vue";
   import IconActivity from "@/icons/IconActivity.vue";
-  import IconBinoculars from "@/icons/IconBinoculars.vue";
+  import IconHelm from "@/icons/IconHelm.vue";
+  import IconDiscover from "@/icons/IconDiscover.vue";
   import type INavigationIcon from "../../interfaces/INavigationIcon";
 
   const route = useRoute();
@@ -30,13 +31,18 @@
     {
       title: "Requests",
       route: "/list/requests",
-      icon: IconInbox
+      icon: IconMailboxFull
     },
     {
       title: "Now Playing",
       route: "/list/now_playing",
       icon: IconNowPlaying
     },
+    {
+      title: "Discover",
+      route: "/discover",
+      icon: IconDiscover
+    },
     {
       title: "Popular",
       route: "/list/popular",
@@ -58,7 +64,7 @@
       title: "Torrents",
       route: "/torrents",
       requiresAuth: true,
-      icon: IconBinoculars
+      icon: IconHelm
     },
     {
       title: "Settings",
@@ -90,18 +96,10 @@
 
     @include desktop {
       grid-template-rows: var(--header-size);
-      grid-auto-flow: row;
     }
 
     @include mobile {
       grid-template-columns: 1fr 1fr;
     }
   }
-
-  :global(.navigation-icons > *:last-child) {
-    margin-top: auto;
-    justify-self: end;
-    align-self: end;
-    background-color: red;
-  }
 </style>

src/components/plex/PlexAuthButton.vue

@@ -9,18 +9,9 @@
     </div>
     <div class="signin-container">
       <button @click="handleAuth" :disabled="loading" class="plex-signin-btn">
-        <svg
-          v-if="!loading"
-          width="20"
-          height="20"
-          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>
         {{ loading ? "Connecting..." : "Sign in with Plex" }}
+
+        <IconPlex v-if="!loading" class="plex-icon" />
       </button>
       <p class="popup-note">A popup window will open for authentication</p>
     </div>
@@ -30,6 +21,7 @@
 <script setup lang="ts">
   import { usePlexAuth } from "@/composables/usePlexAuth";
   import IconInfo from "@/icons/IconInfo.vue";
+  import IconPlex from "@/icons/IconPlex.vue";
 
   const emit = defineEmits<{
     authSuccess: [token: string];
@@ -134,10 +126,12 @@
       cursor: not-allowed;
     }
 
-    svg {
+    .plex-icon {
       flex-shrink: 0;
-      width: 22px;
-      height: 22px;
+      --size: 24px;
+      width: var(--size);
+      height: var(--size);
+      fill: currentColor;
     }
   }
 

src/components/plex/PlexLibraryItem.vue

@@ -6,7 +6,7 @@
     rel="noopener noreferrer"
     class="plex-library-item"
   >
-    <figure class="item-poster">
+    <figure :class="`item-poster ${item.type}`">
       <img
         v-if="item.poster"
         :src="item.poster"
@@ -113,7 +113,7 @@
   }
 </script>
 
-<style scoped>
+<style style="scss" scoped>
   .plex-library-item {
     display: flex;
     flex-direction: column;
@@ -144,6 +144,10 @@
     overflow: hidden;
     background: #333;
     margin: 0;
+
+    &.music {
+      aspect-ratio: 1/1;
+    }
   }
 
   .poster-image {

src/components/plex/PlexLibraryModal.vue

@@ -21,19 +21,33 @@
         <div class="library-stats-overview">
           <div class="overview-stat">
             <span class="overview-label">Total Items</span>
-            <span class="overview-value">{{ details.total }}</span>
+            <span class="overview-value">{{
+              formatNumber(details.total)
+            }}</span>
           </div>
-          <div class="overview-stat" v-if="libraryType === 'shows'">
+
+          <div class="overview-stat" v-if="libraryType === 'tv shows'">
+            <span class="overview-label">Seasons</span>
+            <span class="overview-value">{{
+              formatNumber(details?.childCount)
+            }}</span>
+          </div>
+          <div class="overview-stat" v-if="libraryType === 'tv shows'">
             <span class="overview-label">Episodes</span>
-            <span class="overview-value">{{ details.totalEpisodes }}</span>
+            <span class="overview-value">{{
+              formatNumber(details?.leafCount)
+            }}</span>
           </div>
+
           <div class="overview-stat" v-if="libraryType === 'music'">
             <span class="overview-label">Tracks</span>
-            <span class="overview-value">{{ details.totalTracks }}</span>
+            <span class="overview-value">{{ details?.totalTracks }}</span>
           </div>
           <div class="overview-stat">
             <span class="overview-label">Duration</span>
-            <span class="overview-value">{{ details.totalDuration }}</span>
+            <span class="overview-value">{{
+              convertSecondsToHumanReadable(details?.duration / 1000)
+            }}</span>
           </div>
         </div>
 
@@ -42,10 +56,12 @@
           <h4 class="section-title">Recently Added</h4>
           <div class="recent-items-grid">
             <PlexLibraryItem
-              v-for="(item, index) in details.recentlyAdded"
+              v-for="(item, index) in recentlyAdded"
               :key="index"
               :item="item"
-              :show-extras="libraryType === 'music' || libraryType === 'shows'"
+              :show-extras="
+                libraryType === 'music' || libraryType === 'tv shows'
+              "
             />
           </div>
         </div>
@@ -78,41 +94,70 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, onBeforeUnmount } from "vue";
+  import { computed, onMounted, onBeforeUnmount, ref } from "vue";
   import IconClose from "@/icons/IconClose.vue";
   import IconMovie from "@/icons/IconMovie.vue";
   import IconShow from "@/icons/IconShow.vue";
   import IconMusic from "@/icons/IconMusic.vue";
   import PlexLibraryItem from "@/components/plex/PlexLibraryItem.vue";
   import { getLibraryTitle } from "@/utils/plexHelpers";
+  import { plexRecentlyAddedInLibrary } from "@/api";
+  import { processLibraryItem } from "@/utils/plexHelpers";
+  import { formatNumber, convertSecondsToHumanReadable } from "@/utils";
+  import { usePlexAuth } from "@/composables/usePlexAuth";
+
+  const { getPlexAuthCookie } = usePlexAuth();
+  const authToken = getPlexAuthCookie();
 
   interface LibraryDetails {
+    id: number;
+    title: string;
     total: number;
-    recentlyAdded: any[];
-    genres: { name: string; count: number }[];
-    totalDuration: string;
-    totalEpisodes?: number;
-    totalTracks?: number;
+    childCount?: number;
+    leafCount?: number;
+    duration: number;
+    genres: Array<{
+      name: string;
+      count: number;
+    }>;
   }
 
   interface Props {
     libraryType: string;
     details: LibraryDetails;
+    serverUrl: string;
+    serverMachineId: string;
   }
 
   const props = defineProps<Props>();
 
+  let recentlyAdded = ref([]);
+
   const emit = defineEmits<{
     (e: "close"): void;
   }>();
 
   const libraryIconComponent = computed(() => {
     if (props.libraryType === "movies") return IconMovie;
-    if (props.libraryType === "shows") return IconShow;
+    if (props.libraryType === "tv shows") return IconShow;
     if (props.libraryType === "music") return IconMusic;
     return IconMovie;
   });
 
+  function fetchRecentlyAdded() {
+    plexRecentlyAddedInLibrary(props.details.id).then(added => {
+      recentlyAdded.value = added?.MediaContainer?.Metadata.map(el =>
+        processLibraryItem(
+          el,
+          props.libraryType,
+          authToken,
+          props.serverUrl,
+          props.serverMachineId
+        )
+      );
+    });
+  }
+
   function checkEventForEscapeKey(event: KeyboardEvent) {
     if (event.key !== "Escape") return;
     emit("close");
@@ -120,12 +165,18 @@
 
   window.addEventListener("keyup", checkEventForEscapeKey);
 
+  onMounted(() => {
+    fetchRecentlyAdded();
+  });
+
   onBeforeUnmount(() => {
     window.removeEventListener("keyup", checkEventForEscapeKey);
   });
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  @import "scss/media-queries.scss";
+
   .modal-overlay {
     position: fixed;
     top: 0;
@@ -139,6 +190,10 @@
     justify-content: center;
     z-index: 1000;
     padding: 20px;
+
+    @include mobile {
+      padding: 0;
+    }
   }
 
   .library-modal-content {
@@ -150,6 +205,11 @@
     display: flex;
     flex-direction: column;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+
+    @include mobile {
+      max-height: 100vh;
+      border-radius: unset;
+    }
   }
 
   .library-modal-header {
@@ -198,12 +258,16 @@
     border: none;
     color: #888;
     cursor: pointer;
-    padding: 8px;
+    padding: 0.5rem;
     height: var(--size);
     width: var(--size);
     border-radius: 6px;
     fill: white;
     transition: all 0.2s;
+
+    @include mobile {
+      margin: auto 0;
+    }
   }
 
   .close-btn:hover {

src/components/plex/PlexLibraryStats.vue

@@ -5,18 +5,23 @@
       :key="stat.key"
       class="stat-card"
       :class="{
-        disabled: stat.value === 0 || loading,
+        disabled: stat.value === undefined || stat.value === 0 || loading,
         unclickable: !!!stat.clickable
       }"
       @click="
-        stat.clickable && stat.value > 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">{{ stat.value }}</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,15 +31,24 @@
 
 <script setup lang="ts">
   import { computed } from "vue";
+  import { formatNumber } from "@/utils";
   import IconMovie from "@/icons/IconMovie.vue";
   import IconShow from "@/icons/IconShow.vue";
   import IconMusic from "@/icons/IconMusic.vue";
   import IconClock from "@/icons/IconClock.vue";
 
+  interface LibraryStat {
+    id: number;
+    title: string;
+    total: number;
+    childCount?: number;
+    leafCount?: number;
+  }
+
   interface Props {
-    movies: number;
-    shows: number;
-    music: number;
+    movies: LibraryStat;
+    shows: LibraryStat;
+    music: LibraryStat;
     watchtime: number;
     loading?: boolean;
   }
@@ -54,7 +68,7 @@
       clickable: true
     },
     {
-      key: "shows",
+      key: "tv shows",
       icon: IconShow,
       value: props.shows,
       label: "TV Shows",

src/components/plex/PlexServerInfo.vue

@@ -3,37 +3,14 @@
     <div class="plex-details">
       <div class="detail-row">
         <span class="detail-label">
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-          >
-            <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
-            <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
-          </svg>
-          Server
+          <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">
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-          >
-            <polyline points="23 4 23 10 17 10"></polyline>
-            <polyline points="1 20 1 14 7 14"></polyline>
-            <path
-              d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"
-            ></path>
-          </svg>
+          <IconSync class="label-icon" style="stroke: var(--text-color)" />
           Last Sync
         </span>
         <span class="detail-value">{{ lastSync || "Never" }}</span>
@@ -42,21 +19,7 @@
 
     <div class="plex-actions">
       <seasoned-button @click="$emit('sync')" :disabled="syncing">
-        <svg
-          v-if="!syncing"
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-        >
-          <polyline points="23 4 23 10 17 10"></polyline>
-          <polyline points="1 20 1 14 7 14"></polyline>
-          <path
-            d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"
-          ></path>
-        </svg>
+        <IconSync v-if="!syncing" class="button-icon" />
         {{ syncing ? "Syncing..." : "Sync Library" }}
       </seasoned-button>
       <seasoned-button @click="$emit('unlink')">
@@ -68,6 +31,8 @@
 
 <script setup lang="ts">
   import SeasonedButton from "@/components/ui/SeasonedButton.vue";
+  import IconServer from "@/icons/IconServer.vue";
+  import IconSync from "@/icons/IconSync.vue";
 
   interface Props {
     serverName: string;
@@ -117,9 +82,13 @@
     }
 
     svg {
-      color: var(--text-color-60);
       flex-shrink: 0;
     }
+
+    .label-icon {
+      width: 16px;
+      height: 16px;
+    }
   }
 
   .detail-value {
@@ -147,6 +116,11 @@
       svg {
         flex-shrink: 0;
       }
+
+      .button-icon {
+        width: 16px;
+        height: 16px;
+      }
     }
   }
 </style>

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/profile/ChangePassword.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="change-password">
     <div class="password-card">
-      <p class="password-info">
-        Update your password to keep your account secure. Use a strong password
-        with at least 8 characters.
-      </p>
-
-      <form class="password-form" @submit.prevent="changePassword">
+      <form class="password-form" @submit.prevent>
         <seasoned-input
           v-model="oldPassword"
           placeholder="Current password"
@@ -72,49 +67,8 @@
     newPasswordRepeat.value = password;
   }
 
-  function addWarningMessage(message: string, title?: string) {
-    messages.value.push({
-      message,
-      title,
-      type: ErrorMessageTypes.Warning
-    } as IErrorMessage);
-  }
-
-  function validate() {
-    return;
-    return new Promise((resolve, reject) => {
-      if (!oldPassword.value || oldPassword?.value?.length === 0) {
-        addWarningMessage("Missing old password!", "Validation error");
-        reject();
-      }
-
-      if (!newPassword.value || newPassword?.value?.length === 0) {
-        addWarningMessage("Missing new password!", "Validation error");
-        reject();
-      }
-
-      if (newPassword.value !== newPasswordRepeat.value) {
-        addWarningMessage(
-          "Password and password repeat do not match!",
-          "Validation error"
-        );
-        reject();
-      }
-
-      resolve(true);
-    });
-  }
-
-  async function changePassword() {
+  async function changePassword(event: CustomEvent) {
     try {
-      await validate();
-
-      loading.value = true;
-
-      // API call disabled for now
-      // TODO: Implement actual password change API call
-      // await api.changePassword({ oldPassword, newPassword });
-
       messages.value.push({
         message: "Password change is currently disabled",
         title: "Feature Disabled",
@@ -153,20 +107,6 @@
     gap: 0.65rem;
   }
 
-  .password-info {
-    margin: 0;
-    padding: 0.65rem;
-    background-color: var(--background-ui);
-    border-radius: 0.25rem;
-    font-size: 0.9rem;
-    border-left: 3px solid var(--highlight-color);
-
-    @include mobile-only {
-      padding: 0.6rem;
-      font-size: 0.85rem;
-    }
-  }
-
   .password-form {
     display: flex;
     flex-direction: column;

src/components/settings/DataExport.vue

@@ -1,106 +1,14 @@
 <template>
   <div class="data-export">
-    <!-- Info Header -->
-    <div class="data-export__header">
-      <div class="data-export__info">
-        <IconInfo class="info-icon" />
-        <span>
-          Full transparency and control over your data. Everything is stored
-          locally on your device—no servers, no tracking. You own your data.
-        </span>
-      </div>
-    </div>
-
     <div class="export-options">
-      <!-- Export Data Card -->
-      <div class="export-card">
-        <div class="export-header">
-          <h4>Export Your Data</h4>
-          <p>
-            Download a copy of your account data including requests, watch
-            history, and preferences.
-          </p>
-        </div>
-
-        <div class="export-actions">
-          <button
-            class="export-btn"
-            @click="exportData('json')"
-            :disabled="exporting"
-          >
-            <IconActivity v-if="exporting" class="spin" />
-            <span v-else>Export as JSON</span>
-          </button>
-          <button
-            class="export-btn"
-            @click="exportData('csv')"
-            :disabled="exporting"
-          >
-            <IconActivity v-if="exporting" class="spin" />
-            <span v-else>Export as CSV</span>
-          </button>
-        </div>
-      </div>
-
       <!-- Request History Card -->
-      <div class="export-card">
-        <div class="export-header">
-          <h4>Request History</h4>
-          <p>View and download your complete request history.</p>
-        </div>
+      <RequestHistory :data="requestStats" />
 
-        <div class="stats-grid">
-          <div class="stat-mini">
-            <span class="stat-mini__value">{{ requestStats.total }}</span>
-            <span class="stat-mini__label">Total</span>
-          </div>
-          <div class="stat-mini">
-            <span class="stat-mini__value">{{ requestStats.approved }}</span>
-            <span class="stat-mini__label">Approved</span>
-          </div>
-          <div class="stat-mini">
-            <span class="stat-mini__value">{{ requestStats.pending }}</span>
-            <span class="stat-mini__label">Pending</span>
-          </div>
-        </div>
-
-        <button class="view-btn" @click="viewHistory">View Full History</button>
-      </div>
+      <!-- Export Data Card -->
+      <ExportSection :data="requestStats" />
 
       <!-- Local Storage Items -->
-      <div class="storage-section">
-        <h4 class="storage-section__title">Browser Storage</h4>
-        <div class="storage-items">
-          <div
-            v-for="item in storageItems"
-            :key="item.key"
-            class="storage-item"
-          >
-            <div class="storage-item__info">
-              <h5 class="storage-item__title">{{ item.title }}</h5>
-              <p class="storage-item__description">
-                {{ item.description }} ·
-                <span class="storage-item__size">{{ item.size }}</span>
-              </p>
-            </div>
-            <button
-              class="storage-item__delete"
-              @click="clearItem(item.key, item.title)"
-              :title="`Clear ${item.title}`"
-            >
-              <IconClose />
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Clear All Local Data -->
-      <DangerZoneAction
-        title="Clear All Local Data"
-        description="Remove all locally stored data at once. This includes preferences, history, and cached information."
-        button-text="Clear All Data"
-        @action="clearAllData"
-      />
+      <StorageManager />
 
       <!-- Delete Account -->
       <DangerZoneAction
@@ -110,748 +18,36 @@
         @action="confirmDelete"
       />
     </div>
-
-    <!-- Delete Confirmation Modal -->
-    <div v-if="showDeleteModal" class="modal-overlay" @click="cancelDelete">
-      <div class="modal-content" @click.stop>
-        <div class="modal-header">
-          <h3>Delete Account</h3>
-          <button class="close-btn" @click="cancelDelete">
-            <IconClose />
-          </button>
-        </div>
-        <div class="modal-body">
-          <div class="warning-box">
-            <span class="warning-icon">⚠️</span>
-            <p>
-              <strong>Warning:</strong> This action is permanent and cannot be
-              undone.
-            </p>
-          </div>
-          <p>All of the following will be permanently deleted:</p>
-          <ul>
-            <li>Your account and profile information</li>
-            <li>All request history</li>
-            <li>Watch history and preferences</li>
-            <li>Plex account connection</li>
-          </ul>
-          <p>Type <strong>DELETE</strong> to confirm:</p>
-          <input
-            v-model="deleteConfirmation"
-            type="text"
-            placeholder="Type DELETE"
-            class="confirm-input"
-          />
-        </div>
-        <div class="modal-footer">
-          <button class="cancel-btn" @click="cancelDelete">Cancel</button>
-          <button
-            class="confirm-delete-btn"
-            @click="deleteAccount"
-            :disabled="deleteConfirmation !== 'DELETE'"
-          >
-            Delete Account
-          </button>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, inject } from "vue";
-  import { useRouter } from "vue-router";
-  import { clearCommandHistory } from "@/utils/commandTracking";
-  import IconActivity from "@/icons/IconActivity.vue";
-  import IconClose from "@/icons/IconClose.vue";
-  import IconInfo from "@/icons/IconInfo.vue";
+  import { ref } from "vue";
+  import StorageManager from "./StorageManager.vue";
+  import ExportSection from "./ExportSection.vue";
+  import RequestHistory from "./RequestHistory.vue";
   import DangerZoneAction from "./DangerZoneAction.vue";
 
-  interface StorageItem {
-    key: string;
-    title: string;
-    description: string;
-    size: string;
-  }
-
-  const router = useRouter();
-
-  const notifications: {
-    success: (options: {
-      title: string;
-      description?: string;
-      timeout?: number;
-    }) => void;
-    error: (options: {
-      title: string;
-      description?: string;
-      timeout?: number;
-    }) => void;
-  } = inject("notifications");
-
-  const exporting = ref(false);
-  const showDeleteModal = ref(false);
-  const deleteConfirmation = ref("");
-
   const requestStats = ref({
     total: 45,
     approved: 38,
     pending: 7
   });
 
-  const storageItems = computed<StorageItem[]>(() => {
-    const items: StorageItem[] = [];
-
-    // Command palette stats
-    const commandStats = localStorage.getItem("commandPalette_stats");
-    if (commandStats) {
-      items.push({
-        key: "commandPalette_stats",
-        title: "Command Palette History",
-        description: "Usage statistics for command palette navigation",
-        size: formatBytes(commandStats.length)
-      });
-    }
-
-    // Plex user data
-    const plexData = localStorage.getItem("plex_user_data");
-    if (plexData) {
-      items.push({
-        key: "plex_user_data",
-        title: "Plex User Data",
-        description: "Cached Plex account information",
-        size: formatBytes(plexData.length)
-      });
-    }
-
-    // Theme preference
-    const theme = localStorage.getItem("theme");
-    if (theme) {
-      items.push({
-        key: "theme",
-        title: "Theme Preference",
-        description: "Your selected color theme",
-        size: formatBytes(theme.length)
-      });
-    }
-
-    // Color scheme
-    const colorScheme = localStorage.getItem("color-scheme");
-    if (colorScheme) {
-      items.push({
-        key: "color-scheme",
-        title: "Color Scheme",
-        description: "Light or dark mode preference",
-        size: formatBytes(colorScheme.length)
-      });
-    }
-
-    return items;
-  });
-
-  function formatBytes(bytes: number): string {
-    if (bytes === 0) return "0 Bytes";
-    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];
-  }
-
-  async function exportData(format: "json" | "csv") {
-    exporting.value = true;
-
-    // Mock export
-    await new Promise(resolve => setTimeout(resolve, 1500));
-
-    const data = {
-      username: "user123",
-      requests: requestStats.value,
-      exportDate: new Date().toISOString()
-    };
-
-    const blob = new Blob(
-      [format === "json" ? JSON.stringify(data, null, 2) : convertToCSV(data)],
-      { type: format === "json" ? "application/json" : "text/csv" }
-    );
-
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `seasoned-data-export.${format}`;
-    link.click();
-    URL.revokeObjectURL(url);
-
-    exporting.value = false;
-  }
-
-  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}`;
-  }
-
-  function viewHistory() {
-    router.push({ name: "profile" });
-  }
-
   function confirmDelete() {
-    showDeleteModal.value = true;
-    deleteConfirmation.value = "";
-  }
-
-  function cancelDelete() {
-    showDeleteModal.value = false;
-    deleteConfirmation.value = "";
-  }
-
-  function deleteAccount() {
-    if (deleteConfirmation.value === "DELETE") {
-      alert("Account deletion would be processed here");
-      showDeleteModal.value = false;
-    }
-  }
-
-  function clearItem(key: string, title: string) {
-    try {
-      // Special handling for command history
-      if (key === "commandPalette_stats") {
-        clearCommandHistory();
-      } else {
-        localStorage.removeItem(key);
-      }
-
-      notifications.success({
-        title: "Data Cleared",
-        description: `${title} has been cleared`,
-        timeout: 3000
-      });
-
-      // Force re-render
-      storageItems.value;
-    } catch (error) {
-      notifications.error({
-        title: "Error",
-        description: `Failed to clear ${title}`,
-        timeout: 5000
-      });
-    }
-  }
-
-  function clearAllData() {
     const confirmed = confirm(
-      "Are you sure you want to clear all locally stored data? This action cannot be undone."
+      "Are you sure you want to *permanently delete* your account and all associated data? This action cannot be undone."
     );
 
     if (!confirmed) return;
-
-    try {
-      localStorage.clear();
-      clearCommandHistory();
-
-      notifications.success({
-        title: "All Data Cleared",
-        description: "All locally stored data has been removed",
-        timeout: 3000
-      });
-    } catch (error) {
-      notifications.error({
-        title: "Error",
-        description: "Failed to clear all data",
-        timeout: 5000
-      });
-    }
   }
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables";
-  @import "scss/media-queries";
-
-  .data-export {
-    &__header {
-      margin-bottom: 1rem;
-
-      @include mobile-only {
-        margin-bottom: 0.85rem;
-      }
-    }
-
-    &__info {
-      display: flex;
-      align-items: flex-start;
-      gap: 0.5rem;
-      padding: 0.75rem;
-      background: var(--background-ui);
-      border-radius: 0.375rem;
-      border-left: 3px solid var(--highlight-color);
-
-      .info-icon {
-        width: 18px;
-        height: 18px;
-        flex-shrink: 0;
-        fill: var(--highlight-color);
-        margin-top: 2px;
-      }
-
-      span {
-        font-size: 0.85rem;
-        color: var(--text-color-70);
-        line-height: 1.5;
-      }
-    }
-  }
-
   .export-options {
     display: flex;
     flex-direction: column;
     gap: 0.65rem;
-  }
-
-  .export-card {
-    padding: 0.85rem;
-    background-color: var(--background-ui);
-    border-radius: 0.25rem;
-    border-left: 3px solid var(--highlight-color);
-
-    @include mobile-only {
-      padding: 0.75rem;
-    }
-  }
-
-  .export-header {
-    margin-bottom: 0.85rem;
-
-    @include mobile-only {
-      margin-bottom: 0.7rem;
-    }
-
-    h4 {
-      margin: 0 0 0.25rem 0;
-      font-size: 1rem;
-      font-weight: 500;
-
-      @include mobile-only {
-        font-size: 0.95rem;
-      }
-    }
-
-    p {
-      margin: 0;
-      font-size: 0.85rem;
-
-      @include mobile-only {
-        font-size: 0.8rem;
-      }
-    }
-  }
-
-  .export-actions {
-    display: flex;
-    gap: 0.55rem;
-
-    @include mobile-only {
-      flex-direction: column;
-      gap: 0.5rem;
-    }
-  }
-
-  .export-btn {
-    flex: 1;
-    padding: 0.55rem 0.85rem;
-    background-color: var(--highlight-color);
-    color: $white;
-    border: none;
-    border-radius: 0.25rem;
-    font-size: 0.9rem;
-    cursor: pointer;
-    transition: all 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.35rem;
-
-    &:hover:not(:disabled) {
-      background-color: var(--color-green-90);
-    }
-
-    &:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-
-    svg {
-      width: 16px;
-      height: 16px;
-      fill: $white;
-
-      &.spin {
-        animation: spin 1s linear infinite;
-      }
-    }
-  }
-
-  .stats-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 0.5rem;
-    margin-bottom: 0.65rem;
-  }
-
-  .stat-mini {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 0.5rem 0.4rem;
-    background-color: var(--background-color);
-    border-radius: 0.25rem;
-
-    @include mobile-only {
-      padding: 0.45rem 0.35rem;
-    }
-
-    &__value {
-      font-size: 1.2rem;
-      font-weight: 600;
-      color: var(--highlight-color);
-
-      @include mobile-only {
-        font-size: 1.1rem;
-      }
-    }
-
-    &__label {
-      font-size: 0.7rem;
-      text-transform: uppercase;
-      margin-top: 0.15rem;
-
-      @include mobile-only {
-        font-size: 0.65rem;
-      }
-    }
-  }
-
-  .view-btn {
-    width: 100%;
-    padding: 0.55rem 0.85rem;
-    background-color: var(--background-color);
-    border: 1px solid var(--background-40);
-    border-radius: 0.25rem;
-    font-size: 0.9rem;
-    cursor: pointer;
-    transition: all 0.2s;
-
-    &:hover {
-      background-color: var(--background-40);
-      border-color: var(--highlight-color);
-    }
-  }
-
-  .storage-section {
-    &__title {
-      margin: 0 0 0.65rem 0;
-      font-size: 1rem;
-      font-weight: 500;
-      color: var(--text-color);
-
-      @include mobile-only {
-        font-size: 0.95rem;
-        margin-bottom: 0.6rem;
-      }
-    }
-  }
-
-  .storage-items {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .storage-item {
-    display: flex;
-    align-items: stretch;
-    justify-content: space-between;
-    gap: 0;
-    background: var(--background-color);
-    border-radius: 0.25rem;
-    overflow: hidden;
-    transition: all 0.2s ease;
-
-    &:hover {
-      .storage-item__delete {
-        background: var(--color-error-highlight);
-      }
-    }
-
-    &__info {
-      flex: 1;
-      min-width: 0;
-      padding: 0.85rem;
-
-      @include mobile-only {
-        padding: 0.75rem;
-      }
-    }
-
-    &__title {
-      margin: 0 0 0.25rem 0;
-      font-size: 0.95rem;
-      font-weight: 600;
-      color: var(--text-color);
-
-      @include mobile-only {
-        font-size: 0.9rem;
-      }
-    }
-
-    &__description {
-      margin: 0;
-      font-size: 0.8rem;
-      color: var(--text-color-70);
-      line-height: 1.4;
-
-      @include mobile-only {
-        font-size: 0.75rem;
-      }
-    }
-
-    &__size {
-      color: var(--text-color-50);
-      font-family: monospace;
-    }
-
-    &__delete {
-      flex-shrink: 0;
-      width: 70px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: var(--color-error);
-      border: none;
-      cursor: pointer;
-      transition: all 0.2s ease;
-
-      @include mobile-only {
-        width: 60px;
-      }
-
-      svg {
-        width: 20px;
-        height: 20px;
-        fill: white;
-        transition: transform 0.2s ease;
-
-        @include mobile-only {
-          width: 18px;
-          height: 18px;
-        }
-      }
-
-      &:hover {
-        background: var(--color-error-highlight);
-
-        svg {
-          transform: scale(1.1);
-        }
-      }
-
-      &:active {
-        svg {
-          transform: scale(0.9);
-        }
-      }
-    }
-  }
-
-  .modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.7);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    padding: 1rem;
-
-    @include mobile-only {
-      padding: 0.5rem;
-      align-items: flex-end;
-    }
-  }
-
-  .modal-content {
-    background-color: var(--background-color-secondary);
-    border-radius: 0.5rem;
-    max-width: 500px;
-    width: 100%;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
-
-    @include mobile-only {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-
-  .modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1.5rem;
-    border-bottom: 1px solid var(--background-40);
-
-    @include mobile-only {
-      padding: 1rem;
-    }
-
-    h3 {
-      margin: 0;
-      font-weight: 400;
-
-      @include mobile-only {
-        font-size: 1rem;
-      }
-    }
-  }
-
-  .close-btn {
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0.25rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.25rem;
-    transition: background-color 0.2s;
-
-    &:hover {
-      background-color: var(--background-40);
-    }
-
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  .modal-body {
-    padding: 1.5rem;
-
-    @include mobile-only {
-      padding: 1rem;
-    }
-
-    p {
-      margin: 0 0 1rem 0;
-
-      @include mobile-only {
-        font-size: 0.9rem;
-      }
-    }
-
-    ul {
-      margin: 0 0 1.5rem 0;
-      padding-left: 1.5rem;
-
-      @include mobile-only {
-        font-size: 0.85rem;
-      }
-    }
-  }
-
-  .warning-box {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 1rem;
-    background-color: var(--color-warning);
-    border-radius: 0.5rem;
-    margin-bottom: 1rem;
-
-    @include mobile-only {
-      padding: 0.75rem;
-    }
-
-    .warning-icon {
-      font-size: 1.5rem;
-    }
-
-    p {
-      margin: 0;
-      color: $black;
-      font-size: 0.9rem;
-
-      @include mobile-only {
-        font-size: 0.85rem;
-      }
-    }
-  }
-
-  .confirm-input {
-    width: 100%;
-    padding: 0.75rem;
-    border: 2px solid var(--background-40);
-    border-radius: 0.25rem;
-    background-color: var(--background-color);
-    font-size: 0.9rem;
-
-    &:focus {
-      outline: none;
-      border-color: var(--color-error-highlight);
-    }
-  }
-
-  .modal-footer {
-    padding: 1rem 1.5rem;
-    border-top: 1px solid var(--background-40);
-    display: flex;
-    gap: 0.75rem;
-    justify-content: flex-end;
-
-    @include mobile-only {
-      padding: 1rem;
-      flex-direction: column-reverse;
-    }
-
-    button {
-      padding: 0.65rem 1.25rem;
-      border-radius: 0.25rem;
-      font-size: 0.9rem;
-      cursor: pointer;
-      transition: all 0.2s;
-      border: none;
-    }
-  }
-
-  .cancel-btn {
-    background-color: transparent;
-    border: 1px solid var(--background-40) !important;
-
-    &:hover {
-      background-color: var(--background-ui);
-    }
-  }
-
-  .confirm-delete-btn {
-    background-color: var(--color-error-highlight);
-    color: $white;
-
-    &:hover:not(:disabled) {
-      background-color: var(--color-error);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
+    gap: 2rem;
   }
 </style>

src/components/settings/ExportSection.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="settings-section-card">
+    <div class="settings-section-header">
+      <h2>Export Your Data</h2>
+      <p>
+        Download a copy of your account data including requests, watch history,
+        and preferences.
+      </p>
+    </div>
+
+    <!-- Export to JSON & CSV section -->
+    <div class="export-actions">
+      <button
+        class="export-btn"
+        @click="() => exportData('json')"
+        :disabled="exporting"
+      >
+        <IconActivity v-if="exporting" class="spin" />
+        <span v-else>Export as JSON</span>
+      </button>
+      <button
+        class="export-btn"
+        @click="() => exportData('csv')"
+        :disabled="exporting"
+      >
+        <IconActivity v-if="exporting" class="spin" />
+        <span v-else>Export as CSV</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, defineProps } from "vue";
+  import IconActivity from "@/icons/IconActivity.vue";
+
+  interface Props {
+    data: any;
+  }
+
+  const props = defineProps<Props>();
+
+  const exporting = ref(false);
+
+  async function exportData(format: "json" | "csv") {
+    exporting.value = true;
+
+    // Mock export
+    await new Promise(resolve => setTimeout(resolve, 1500));
+
+    const data = {
+      username: "user123",
+      requests: props?.data,
+      exportDate: new Date().toISOString()
+    };
+
+    const blob = new Blob(
+      [format === "json" ? JSON.stringify(data, null, 2) : convertToCSV(data)],
+      { type: format === "json" ? "application/json" : "text/csv" }
+    );
+
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `seasoned-data-export.${format}`;
+    link.click();
+    URL.revokeObjectURL(url);
+
+    exporting.value = false;
+  }
+
+  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>
+  @import "scss/media-queries";
+  @import "scss/shared-settings";
+
+  .export-actions {
+    display: flex;
+    gap: 0.55rem;
+
+    @include mobile-only {
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+  }
+
+  .export-btn {
+    flex: 1;
+    padding: 0.55rem 0.85rem;
+    background-color: var(--highlight-color);
+    color: white;
+    border: none;
+    border-radius: 0.25rem;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.35rem;
+
+    &:hover:not(:disabled) {
+      background-color: var(--color-green-90);
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      fill: white;
+
+      &.spin {
+        animation: spin 1s linear infinite;
+      }
+    }
+  }
+</style>

src/components/settings/LocalStorageManager.vue

@@ -1,327 +0,0 @@
-<template>
-  <div class="storage-manager">
-    <div class="storage-manager__header">
-      <p class="storage-manager__description">
-        Full transparency and control over your data. Everything listed here is
-        stored locally on your device—no servers, no tracking. You own your
-        data.
-      </p>
-      <div class="storage-manager__info">
-        <IconInfo class="info-icon" />
-        <span
-          >Your browser stores this data to improve your experience. Clear
-          individual items or wipe everything—it's your choice.</span
-        >
-      </div>
-    </div>
-
-    <div class="storage-items">
-      <div v-for="item in storageItems" :key="item.key" class="storage-item">
-        <div class="storage-item__info">
-          <h4 class="storage-item__title">{{ item.title }}</h4>
-          <p class="storage-item__description">
-            {{ item.description }} ·
-            <span class="storage-item__size">{{ item.size }}</span>
-          </p>
-        </div>
-        <button
-          class="storage-item__delete"
-          @click="clearItem(item.key, item.title)"
-          :title="`Clear ${item.title}`"
-        >
-          <IconClose />
-        </button>
-      </div>
-    </div>
-
-    <DangerZoneAction
-      title="Clear Everything"
-      description="Remove all locally stored data at once. This includes preferences, history, and cached information."
-      button-text="Clear All Data"
-      @action="clearAllData"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref, computed, inject } from "vue";
-  import { clearCommandHistory } from "@/utils/commandTracking";
-  import IconInfo from "@/icons/IconInfo.vue";
-  import IconClose from "@/icons/IconClose.vue";
-  import DangerZoneAction from "./DangerZoneAction.vue";
-
-  interface StorageItem {
-    key: string;
-    title: string;
-    description: string;
-    size: string;
-  }
-
-  const notifications: {
-    success: (options: {
-      title: string;
-      description?: string;
-      timeout?: number;
-    }) => void;
-    error: (options: {
-      title: string;
-      description?: string;
-      timeout?: number;
-    }) => void;
-  } = inject("notifications");
-
-  const storageItems = computed<StorageItem[]>(() => {
-    const items: StorageItem[] = [];
-
-    // Command palette stats
-    const commandStats = localStorage.getItem("commandPalette_stats");
-    if (commandStats) {
-      items.push({
-        key: "commandPalette_stats",
-        title: "Command Palette History",
-        description: "Usage statistics for command palette navigation",
-        size: formatBytes(commandStats.length)
-      });
-    }
-
-    // Plex user data
-    const plexData = localStorage.getItem("plex_user_data");
-    if (plexData) {
-      items.push({
-        key: "plex_user_data",
-        title: "Plex User Data",
-        description: "Cached Plex account information",
-        size: formatBytes(plexData.length)
-      });
-    }
-
-    // Theme preference
-    const theme = localStorage.getItem("theme");
-    if (theme) {
-      items.push({
-        key: "theme",
-        title: "Theme Preference",
-        description: "Your selected color theme",
-        size: formatBytes(theme.length)
-      });
-    }
-
-    // Color scheme
-    const colorScheme = localStorage.getItem("color-scheme");
-    if (colorScheme) {
-      items.push({
-        key: "color-scheme",
-        title: "Color Scheme",
-        description: "Light or dark mode preference",
-        size: formatBytes(colorScheme.length)
-      });
-    }
-
-    return items;
-  });
-
-  function formatBytes(bytes: number): string {
-    if (bytes === 0) return "0 Bytes";
-    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];
-  }
-
-  function clearItem(key: string, title: string) {
-    try {
-      // Special handling for command history
-      if (key === "commandPalette_stats") {
-        clearCommandHistory();
-      } else {
-        localStorage.removeItem(key);
-      }
-
-      notifications.success({
-        title: "Data Cleared",
-        description: `${title} has been cleared`,
-        timeout: 3000
-      });
-
-      // Force re-render
-      storageItems.value;
-    } catch (error) {
-      notifications.error({
-        title: "Error",
-        description: `Failed to clear ${title}`,
-        timeout: 5000
-      });
-    }
-  }
-
-  function clearAllData() {
-    const confirmed = confirm(
-      "Are you sure you want to clear all locally stored data? This action cannot be undone."
-    );
-
-    if (!confirmed) return;
-
-    try {
-      localStorage.clear();
-      clearCommandHistory();
-
-      notifications.success({
-        title: "All Data Cleared",
-        description: "All locally stored data has been removed",
-        timeout: 3000
-      });
-    } catch (error) {
-      notifications.error({
-        title: "Error",
-        description: "Failed to clear all data",
-        timeout: 5000
-      });
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  @import "scss/variables";
-  @import "scss/media-queries";
-
-  .storage-manager {
-    &__header {
-      margin-bottom: 1.5rem;
-    }
-
-    &__description {
-      margin: 0 0 0.75rem 0;
-      color: var(--text-color);
-      font-size: 0.95rem;
-      line-height: 1.6;
-      font-weight: 500;
-    }
-
-    &__info {
-      display: flex;
-      align-items: flex-start;
-      gap: 0.5rem;
-      padding: 0.75rem;
-      background: var(--background-ui);
-      border-radius: 0.375rem;
-      border-left: 3px solid var(--highlight-color);
-
-      .info-icon {
-        width: 18px;
-        height: 18px;
-        flex-shrink: 0;
-        fill: var(--highlight-color);
-        margin-top: 2px;
-      }
-
-      span {
-        font-size: 0.85rem;
-        color: var(--text-color-70);
-        line-height: 1.5;
-      }
-    }
-  }
-
-  .storage-items {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    margin-bottom: 1.5rem;
-  }
-
-  .storage-item {
-    display: flex;
-    align-items: stretch;
-    justify-content: space-between;
-    gap: 0;
-    background: var(--background-ui);
-    border-radius: 0.25rem;
-    overflow: hidden;
-    transition: all 0.2s ease;
-
-    &:hover {
-      .storage-item__delete {
-        background: var(--color-error-highlight);
-      }
-    }
-
-    &__info {
-      flex: 1;
-      min-width: 0;
-      padding: 0.85rem;
-
-      @include mobile-only {
-        padding: 0.75rem;
-      }
-    }
-
-    &__title {
-      margin: 0 0 0.3rem 0;
-      font-size: 1.1rem;
-      font-weight: 600;
-      color: var(--text-color);
-
-      @include mobile-only {
-        font-size: 1rem;
-      }
-    }
-
-    &__description {
-      margin: 0;
-      font-size: 0.8rem;
-      color: var(--text-color-70);
-      line-height: 1.4;
-
-      @include mobile-only {
-        font-size: 0.75rem;
-      }
-    }
-
-    &__size {
-      color: var(--text-color-50);
-      font-family: monospace;
-    }
-
-    &__delete {
-      flex-shrink: 0;
-      width: 70px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: var(--color-error);
-      border: none;
-      cursor: pointer;
-      transition: all 0.2s ease;
-
-      @include mobile-only {
-        width: 60px;
-      }
-
-      svg {
-        width: 20px;
-        height: 20px;
-        fill: white;
-        transition: transform 0.2s ease;
-
-        @include mobile-only {
-          width: 18px;
-          height: 18px;
-        }
-      }
-
-      &:hover {
-        background: var(--color-error-highlight);
-
-        svg {
-          transform: scale(1.1);
-        }
-      }
-
-      &:active {
-        svg {
-          transform: scale(0.9);
-        }
-      }
-    }
-  }
-</style>

src/components/settings/PasswordGenerator.vue

@@ -36,7 +36,10 @@
 
         <div class="generator-options">
           <div class="option-row">
-            <label>Number of words: {{ wordCount }}</label>
+            <div class="slider-header">
+              <label>Words</label>
+              <span class="slider-value">{{ wordCount }}</span>
+            </div>
             <input
               v-model.number="wordCount"
               type="range"
@@ -45,7 +48,10 @@
               class="slider"
               @input="generateWordsPassword"
             />
-            <span class="option-value">{{ wordCount }}</span>
+            <div class="slider-labels">
+              <span>3</span>
+              <span>7</span>
+            </div>
           </div>
         </div>
       </div>
@@ -70,7 +76,10 @@
 
         <div class="generator-options">
           <div class="option-row">
-            <label>Length: {{ charLength }}</label>
+            <div class="slider-header">
+              <label>Length</label>
+              <span class="slider-value">{{ charLength }}</span>
+            </div>
             <input
               v-model.number="charLength"
               type="range"
@@ -79,7 +88,10 @@
               class="slider"
               @input="generateCharsPassword"
             />
-            <span class="option-value">{{ charLength }}</span>
+            <div class="slider-labels">
+              <span>12</span>
+              <span>46</span>
+            </div>
           </div>
 
           <div class="option-row checkbox-row">
@@ -133,7 +145,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, watch, onMounted } from "vue";
+  import { ref, watch, onMounted } from "vue";
   import IconActivity from "@/icons/IconActivity.vue";
   import { useRandomWords } from "@/composables/useRandomWords";
 
@@ -360,12 +372,12 @@
   .option-row {
     display: flex;
     flex-direction: column;
-    gap: 0.4rem;
+    gap: 0.75rem;
 
     label {
-      font-size: 0.85rem;
+      font-size: 0.95rem;
       color: $text-color;
-      font-weight: 500;
+      font-weight: 600;
       line-height: 1.2;
     }
 
@@ -396,38 +408,121 @@
     }
   }
 
+  .slider-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.25rem;
+  }
+
+  .slider-value {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--highlight-color);
+    min-width: 2.5rem;
+    text-align: right;
+  }
+
+  .slider-labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.75rem;
+    color: $text-color-50;
+    margin-top: 0.25rem;
+    padding: 0 0.25rem;
+  }
+
   .slider {
     width: 100%;
-    height: 6px;
-    border-radius: 3px;
+    height: 10px;
+    border-radius: 5px;
     background: var(--background-40);
     outline: none;
     appearance: none;
+    cursor: pointer;
+    transition: background 0.2s;
+    margin: 0.5rem 0;
+
+    @include mobile-only {
+      height: 12px;
+    }
+
+    &:hover {
+      background: var(--background-40);
+    }
 
     &::-webkit-slider-thumb {
       appearance: none;
-      width: 18px;
-      height: 18px;
+      width: 24px;
+      height: 24px;
       border-radius: 50%;
       background: var(--highlight-color);
-      cursor: pointer;
+      cursor: grab;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      transition: all 0.2s;
+      margin-top: -7px;
+
+      @include mobile-only {
+        width: 28px;
+        height: 28px;
+        margin-top: -8px;
+      }
+
+      &:hover {
+        transform: scale(1.1);
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+      }
+
+      &:active {
+        cursor: grabbing;
+        transform: scale(1.05);
+      }
     }
 
     &::-moz-range-thumb {
-      width: 18px;
-      height: 18px;
+      width: 24px;
+      height: 24px;
       border-radius: 50%;
       background: var(--highlight-color);
-      cursor: pointer;
+      cursor: grab;
       border: none;
-    }
-  }
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      transition: all 0.2s;
 
-  .option-value {
-    font-size: 0.9rem;
-    font-weight: 600;
-    color: var(--highlight-color);
-    text-align: center;
+      @include mobile-only {
+        width: 28px;
+        height: 28px;
+      }
+
+      &:hover {
+        transform: scale(1.1);
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+      }
+
+      &:active {
+        cursor: grabbing;
+        transform: scale(1.05);
+      }
+    }
+
+    &::-webkit-slider-runnable-track {
+      height: 10px;
+      border-radius: 5px;
+
+      @include mobile-only {
+        height: 12px;
+      }
+    }
+
+    &::-moz-range-track {
+      height: 10px;
+      border-radius: 5px;
+      background: var(--background-40);
+
+      @include mobile-only {
+        height: 12px;
+      }
+    }
   }
 
   .separator-input {

src/components/settings/PlexSettings.vue

@@ -2,7 +2,7 @@
   <div class="plex-settings">
     <!-- Unconnected state -->
     <PlexAuthButton
-      v-if="!isPlexConnected"
+      v-if="!showPlexInformation"
       @auth-success="handleAuthSuccess"
       @auth-error="handleAuthError"
     />
@@ -16,20 +16,20 @@
       />
 
       <PlexLibraryStats
-        :movies="libraryStats.movies"
-        :shows="libraryStats.shows"
-        :music="libraryStats.music"
-        :watchtime="libraryStats.watchtime"
-        :loading="loadingLibraries"
+        :movies="libraryStats?.movies"
+        :shows="libraryStats?.['tv shows']"
+        :music="libraryStats?.music"
+        :watchtime="libraryStats?.watchtime || 0"
+        :loading="syncingLibrary"
         @open-library="showLibraryDetails"
       />
 
       <PlexServerInfo
         :serverName="plexServer"
         :lastSync="lastSync"
-        :syncing="syncing"
+        :syncing="syncingServer"
         @sync="syncLibrary"
-        @unlink="confirmUnlink"
+        @unlink="() => (showUnlinkModal = true)"
       />
     </div>
 
@@ -38,16 +38,18 @@
 
     <!-- Unlink Confirmation Modal -->
     <PlexUnlinkModal
-      v-if="showConfirmModal"
+      v-if="showUnlinkModal"
       @confirm="unauthenticatePlex"
-      @cancel="cancelUnlink"
+      @cancel="() => (showUnlinkModal = false)"
     />
 
     <!-- Library Details Modal -->
     <PlexLibraryModal
       v-if="showLibraryModal && selectedLibrary"
       :libraryType="selectedLibrary"
-      :details="libraryDetails[selectedLibrary]"
+      :details="libraryStats[selectedLibrary]"
+      :serverUrl="plexServerUrl"
+      :serverMachineId="plexMachineId"
       @close="closeLibraryModal"
     />
   </div>
@@ -55,7 +57,6 @@
 
 <script setup lang="ts">
   import { ref, onMounted, onUnmounted } from "vue";
-  import { useStore } from "vuex";
   import SeasonedMessages from "@/components/ui/SeasonedMessages.vue";
   import PlexAuthButton from "@/components/plex/PlexAuthButton.vue";
   import PlexProfileCard from "@/components/plex/PlexProfileCard.vue";
@@ -64,184 +65,167 @@
   import PlexUnlinkModal from "@/components/plex/PlexUnlinkModal.vue";
   import PlexLibraryModal from "@/components/plex/PlexLibraryModal.vue";
   import { usePlexAuth } from "@/composables/usePlexAuth";
-  import { usePlexApi } from "@/composables/usePlexApi";
-  import { usePlexLibraries } from "@/composables/usePlexLibraries";
+  import {
+    fetchPlexServers,
+    fetchPlexUserData,
+    fetchLibraryDetails
+  } from "@/composables/usePlexApi";
   import type { Ref } from "vue";
-  import { linkPlexAccount, unlinkPlexAccount } from "../../api";
   import { ErrorMessageTypes } from "../../interfaces/IErrorMessage";
   import type { IErrorMessage } from "../../interfaces/IErrorMessage";
 
   const messages: Ref<IErrorMessage[]> = ref([]);
-  const loading = ref(false);
-  const syncing = ref(false);
-  const showConfirmModal = ref(false);
+  const syncingServer = ref(false);
+  const syncingLibrary = ref(false);
+  const showUnlinkModal = ref(false);
   const plexUsername = ref<string>("");
   const plexUserData = ref<any>(null);
-  const isPlexConnected = ref<boolean>(false);
+  const showPlexInformation = ref<boolean>(false);
   const hasLocalStorageData = ref<boolean>(false);
-  const hasCookieData = ref<boolean>(false);
   const showLibraryModal = ref<boolean>(false);
   const selectedLibrary = ref<string>("");
-  const loadingLibraries = ref<boolean>(false);
 
   const plexServer = ref("");
   const plexServerUrl = ref("");
   const plexMachineId = ref("");
-  const lastSync = ref("");
+  const lastSync = ref(sessionStorage.getItem("plex_library_last_sync"));
   const libraryStats = ref({
     movies: 0,
     shows: 0,
     music: 0,
     watchtime: 0
   });
-  const libraryDetails = ref<any>({
-    movies: {
-      total: 0,
-      recentlyAdded: [],
-      genres: [],
-      totalDuration: "0 hours"
-    },
-    shows: {
-      total: 0,
-      recentlyAdded: [],
-      genres: [],
-      totalEpisodes: 0,
-      totalDuration: "0 hours"
-    },
-    music: {
-      total: 0,
-      recentlyAdded: [],
-      genres: [],
-      totalTracks: 0
-    }
-  });
 
-  const store = useStore();
   const emit = defineEmits<{
     (e: "reload"): void;
   }>();
 
   // Composables
-  const { getCookie, setPlexAuthCookie, cleanup } = usePlexAuth();
-  const {
-    fetchPlexUserData,
-    fetchPlexServers,
-    fetchLibrarySections,
-    fetchLibraryDetails
-  } = usePlexApi();
-  const { loadLibraries } = usePlexLibraries();
+  const { getPlexAuthCookie, setPlexAuthCookie, cleanup } = usePlexAuth();
 
   // ----- Connection check -----
   function checkPlexConnection() {
-    const cachedData = localStorage.getItem("plex_user_data");
-    const authToken = getCookie("plex_auth_token");
-    const storeHasPlexUserId = store.getters["user/plexUserId"];
-    hasLocalStorageData.value = !!cachedData;
-    hasCookieData.value = !!authToken;
-    isPlexConnected.value = !!(cachedData || authToken || storeHasPlexUserId);
-    return isPlexConnected.value;
+    const authToken = getPlexAuthCookie();
+    showPlexInformation.value = !!authToken;
+    return showPlexInformation.value;
   }
 
   // ----- Library loading -----
-  async function fetchPlexLibraries(authToken: string) {
-    try {
-      loadingLibraries.value = true;
-      const server = await fetchPlexServers(authToken);
-      if (!server) {
-        console.error("No Plex server found");
-        return;
-      }
-
-      plexServer.value = server.name;
-      plexServerUrl.value = server.url;
-      plexMachineId.value = server.machineIdentifier;
-      lastSync.value = new Date().toLocaleString();
-
-      const sections = await fetchLibrarySections(authToken, server.url);
-      if (!sections || sections.length === 0) {
-        console.error("No library sections found");
-        return;
-      }
-
-      const result = await loadLibraries(
-        sections,
-        authToken,
-        server.url,
-        server.machineIdentifier,
-        plexUsername.value,
-        fetchLibraryDetails
-      );
-
-      libraryStats.value = result.stats;
-      libraryDetails.value = result.details;
-    } catch (error) {
-      console.error("[PlexSettings] Error fetching Plex libraries:", error);
-    } finally {
-      loadingLibraries.value = false;
+  async function loadPlexServer() {
+    // return cached value from sessionStorage if exists
+    const cacheKey = "plex_server_data";
+    const cachedData = sessionStorage.getItem(cacheKey);
+    if (cachedData) {
+      const server = JSON.parse(cachedData);
+      plexServer.value = server?.name;
+      plexServerUrl.value = server?.url;
+      plexMachineId.value = server?.machineIdentifier;
+      return;
     }
+
+    // get token from cookie
+    const authToken = getPlexAuthCookie();
+    if (!authToken) return;
+
+    // make api call for data
+    syncingServer.value = true;
+    const server = await fetchPlexServers(authToken);
+
+    if (server) {
+      // set server name & id
+      plexServer.value = server?.name;
+      plexServerUrl.value = server?.url;
+      plexMachineId.value = server?.machineIdentifier;
+      // cache in sessionStorage
+      sessionStorage.setItem(cacheKey, JSON.stringify(server));
+
+      // set last-sync date
+      const now = new Date().toLocaleString();
+      lastSync.value = now;
+      sessionStorage.setItem("plex_library_last_sync", now);
+    } else {
+      console.log("unable to load plex server informmation");
+    }
+
+    syncingServer.value = false;
   }
 
   // ----- User data loading -----
   async function loadPlexUserData() {
-    checkPlexConnection();
-    const cachedData = localStorage.getItem("plex_user_data");
+    // return cached value from sessionStorage if exists
+    const cacheKey = "plex_user_data";
+    const cachedData = sessionStorage.getItem(cacheKey);
     hasLocalStorageData.value = !!cachedData;
     if (cachedData) {
-      try {
-        plexUserData.value = JSON.parse(cachedData);
-        plexUsername.value = plexUserData.value.username;
-        isPlexConnected.value = true;
-      } catch (error) {
-        console.error("[PlexSettings] Error parsing cached Plex data:", error);
-      }
+      plexUserData.value = JSON.parse(cachedData);
+      plexUsername.value = plexUserData.value.username;
+      return;
     }
-    const authToken = getCookie("plex_auth_token");
-    hasCookieData.value = !!authToken;
-    if (authToken) {
-      const userData = await fetchPlexUserData(authToken);
-      if (userData) {
-        plexUserData.value = userData;
-        plexUsername.value = userData.username;
-        isPlexConnected.value = true;
-      } else if (!cachedData) {
-        isPlexConnected.value = false;
-      }
-      if (isPlexConnected.value) {
-        await fetchPlexLibraries(authToken);
-      }
+
+    // get token from cookie
+    const authToken = getPlexAuthCookie();
+    if (!authToken) return;
+
+    // make api call for data
+    const userData = await fetchPlexUserData(authToken);
+
+    if (userData) {
+      // set plex user data
+      plexUserData.value = userData;
+      plexUsername.value = userData?.username;
+
+      // cache in sessionStorage
+      sessionStorage.setItem(cacheKey, JSON.stringify(userData));
     } else {
-      isPlexConnected.value = false;
+      console.log("unable to load user data from plex");
     }
   }
 
+  // ----- Load plex libary details -----
+  async function loadPlexLibraries() {
+    // return cached value from sessionStorage if exists
+    const cacheKey = "plex_library_data";
+    const cachedData = sessionStorage.getItem(cacheKey);
+    hasLocalStorageData.value = !!cachedData;
+    if (cachedData) {
+      libraryStats.value = JSON.parse(cachedData);
+      return;
+    }
+
+    // get token from cookie
+    const authToken = getPlexAuthCookie();
+    if (!authToken) return;
+
+    // make api call for data
+    syncingLibrary.value = true;
+    const library = await fetchLibraryDetails();
+
+    if (library) {
+      libraryStats.value = library;
+      // cache in sessionStorage
+      sessionStorage.setItem(cacheKey, JSON.stringify(library));
+    } else {
+      console.log("unable to load plex library details");
+    }
+
+    syncingLibrary.value = false;
+  }
+
   // ----- OAuth flow (handlers for PlexAuthButton events) -----
   async function handleAuthSuccess(authToken: string) {
-    try {
-      setPlexAuthCookie(authToken);
-      const userData = await fetchPlexUserData(authToken);
-      if (userData) {
-        plexUserData.value = userData;
-        plexUsername.value = userData.username;
-        isPlexConnected.value = true;
-      }
-      const { success, message } = await linkPlexAccount(authToken);
-      if (success) {
-        emit("reload");
-        await fetchPlexLibraries(authToken);
-        messages.value.push({
-          type: ErrorMessageTypes.Success,
-          title: "Authenticated with Plex",
-          message: message || "Successfully connected your Plex account"
-        } as IErrorMessage);
-      } else {
-        messages.value.push({
-          type: ErrorMessageTypes.Error,
-          title: "Authentication failed",
-          message: message || "Could not connect to Plex"
-        } as IErrorMessage);
-      }
-    } catch (error) {
-      console.error("[PlexSettings] Error in handleAuthSuccess:", error);
+    setPlexAuthCookie(authToken);
+    checkPlexConnection();
+    const success = await loadAll();
+
+    if (success) {
+      messages.value.push({
+        type: ErrorMessageTypes.Success,
+        title: "Authenticated with Plex",
+        message: "Successfully connected your Plex account"
+      } as IErrorMessage);
+    } else {
+      console.error("[PlexSettings] Error in handleAuthSuccess:");
+
       messages.value.push({
         type: ErrorMessageTypes.Error,
         title: "Authentication failed",
@@ -259,35 +243,24 @@
   }
 
   // ----- Unlink flow -----
-  function confirmUnlink() {
-    showConfirmModal.value = true;
-  }
-  function cancelUnlink() {
-    showConfirmModal.value = false;
-  }
   async function unauthenticatePlex() {
-    showConfirmModal.value = false;
-    loading.value = true;
-    const response = await unlinkPlexAccount();
-    if (response?.success) {
-      localStorage.removeItem("plex_user_data");
-      document.cookie =
-        "plex_auth_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; SameSite=Strict";
-      plexUserData.value = null;
-      plexUsername.value = "";
-      isPlexConnected.value = false;
-      emit("reload");
-    }
+    showUnlinkModal.value = false;
+    sessionStorage.removeItem("plex_user_data");
+    sessionStorage.removeItem("plex_server_data");
+    sessionStorage.removeItem("plex_library_data");
+    sessionStorage.removeItem("plex_library_last_sync");
+    document.cookie =
+      "plex_auth_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; SameSite=Strict";
+    plexUserData.value = null;
+    plexUsername.value = "";
+    showPlexInformation.value = false;
+    emit("reload");
+
     messages.value.push({
-      type: response.success
-        ? ErrorMessageTypes.Success
-        : ErrorMessageTypes.Error,
-      title: response.success
-        ? "Unlinked Plex account"
-        : "Something went wrong",
-      message: response.message
+      type: ErrorMessageTypes.Success,
+      title: "Unlinked Plex account",
+      message: "All browser storage has been clear of plex account"
     } as IErrorMessage);
-    loading.value = false;
   }
 
   // ----- Library modal -----
@@ -304,39 +277,60 @@
 
   // ----- Sync -----
   async function syncLibrary() {
-    syncing.value = true;
-    const authToken = getCookie("plex_auth_token");
+    const authToken = getPlexAuthCookie();
     if (!authToken) {
       messages.value.push({
         type: ErrorMessageTypes.Error,
         title: "Sync failed",
         message: "No authentication token found"
       } as IErrorMessage);
-      syncing.value = false;
       return;
     }
-    try {
-      await fetchPlexLibraries(authToken);
+
+    sessionStorage.removeItem("plex_user_data");
+    sessionStorage.removeItem("plex_server_data");
+    sessionStorage.removeItem("plex_library_data");
+
+    const success = await loadAll();
+
+    if (success) {
       messages.value.push({
         type: ErrorMessageTypes.Success,
         title: "Library synced",
         message: "Your Plex library has been successfully synced"
       } as IErrorMessage);
-    } catch (error) {
+    } else {
       messages.value.push({
         type: ErrorMessageTypes.Error,
         title: "Sync failed",
         message: "An error occurred while syncing your library"
       } as IErrorMessage);
-    } finally {
-      syncing.value = false;
     }
   }
 
-  onMounted(() => {
+  // ---- Helper load all ----
+  async function loadAll() {
+    let success = false;
+
+    try {
+      await Promise.all([
+        loadPlexServer(),
+        loadPlexUserData(),
+        loadPlexLibraries()
+      ]);
+
+      success = true;
+    } catch (error) {
+      console.log("loadall error, some info might be missing");
+    }
+
     checkPlexConnection();
-    loadPlexUserData();
-  });
+    return success;
+  }
+
+  // ---- Lifecycle functions ----
+  onMounted(loadAll);
+
   onUnmounted(() => {
     cleanup();
   });

src/components/settings/ProfileHero.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="profile-hero">
+    <div class="profile-hero__main">
+      <div class="profile-hero__avatar">
+        <div class="avatar-large">{{ userInitials }}</div>
+      </div>
+      <div class="profile-hero__info">
+        <h1 class="profile-hero__name">{{ username }}</h1>
+        <span :class="['profile-hero__badge', `badge--${userRole}`]">
+          <a v-if="userRole === 'admin'" href="/admin">{{ userRole }}</a>
+          <span v-else>{{ userRole }}</span>
+        </span>
+        <p class="profile-hero__member">Member since {{ memberSince }}</p>
+      </div>
+    </div>
+
+    <div class="profile-hero__stats">
+      <div class="stat-large">
+        <span class="stat-large__value">{{ stats.totalRequests }}</span>
+        <span class="stat-large__label">Requests</span>
+      </div>
+      <div class="stat-divider"></div>
+      <div class="stat-large">
+        <span class="stat-large__value">{{ stats.magnetsAdded }}</span>
+        <span class="stat-large__label">Magnets Added</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from "vue";
+  import { useStore } from "vuex";
+
+  const store = useStore();
+
+  const username = computed(() => store.getters["user/username"] || "User");
+  const userRole = computed(() =>
+    store.getters["user/admin"] ? "admin" : "user"
+  );
+
+  const userInitials = computed(() => {
+    return username.value.slice(0, 2).toUpperCase();
+  });
+
+  const memberSince = computed(() => {
+    const date = new Date();
+    date.setMonth(date.getMonth() - 6);
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      year: "numeric"
+    });
+  });
+
+  const stats = {
+    totalRequests: 45,
+    magnetsAdded: 127
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/media-queries";
+
+  .profile-hero {
+    background-color: var(--background-color-secondary);
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    border: 1px solid var(--background-40);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2rem;
+
+    @include mobile-only {
+      flex-direction: column;
+      padding: 1.5rem 1.25rem;
+      border-radius: 0.5rem;
+      text-align: center;
+      gap: 1rem;
+    }
+
+    &__main {
+      display: flex;
+      align-items: center;
+      gap: 1.5rem;
+
+      @include mobile-only {
+        flex-direction: column;
+        gap: 0.75rem;
+      }
+    }
+
+    &__avatar {
+      flex-shrink: 0;
+    }
+
+    &__info {
+      display: flex;
+      flex-direction: column;
+      gap: 0.35rem;
+
+      @include mobile-only {
+        align-items: center;
+      }
+    }
+
+    &__name {
+      margin: 0;
+      font-size: 1.75rem;
+      font-weight: 600;
+      line-height: 1.1;
+
+      @include mobile-only {
+        font-size: 1.5rem;
+      }
+    }
+
+    &__badge {
+      display: inline-block;
+      padding: 0.25rem 0.7rem;
+      border-radius: 2rem;
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      font-weight: 600;
+      width: fit-content;
+
+      @include mobile-only {
+        padding: 0.2rem 0.6rem;
+        font-size: 0.7rem;
+      }
+
+      &.badge--admin {
+        background-color: var(--color-warning);
+        color: black;
+      }
+
+      &.badge--user {
+        background-color: var(--background-40);
+      }
+    }
+
+    &__member {
+      margin: 0;
+      font-size: 0.85rem;
+      color: var(--text-color-70);
+
+      @include mobile-only {
+        font-size: 0.8rem;
+      }
+    }
+
+    &__stats {
+      display: flex;
+      align-items: center;
+      gap: 1.75rem;
+      padding-left: 1.75rem;
+      border-left: 1px solid var(--background-40);
+
+      @include mobile-only {
+        width: 100%;
+        padding: 1rem 0 0 0;
+        border-left: none;
+        border-top: 1px solid var(--background-40);
+        justify-content: center;
+        gap: 1.25rem;
+      }
+    }
+  }
+
+  .avatar-large {
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    background: linear-gradient(
+      135deg,
+      var(--highlight-color),
+      var(--color-green-70)
+    );
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: white;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+
+    @include mobile-only {
+      width: 80px;
+      height: 80px;
+      font-size: 2rem;
+    }
+  }
+
+  .stat-large {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+
+    &__value {
+      font-size: 1.75rem;
+      font-weight: 700;
+      color: var(--highlight-color);
+      line-height: 1;
+
+      @include mobile-only {
+        font-size: 1.75rem;
+      }
+    }
+
+    &__label {
+      font-size: 0.75rem;
+      color: var(--text-color-70);
+      text-transform: uppercase;
+      font-weight: 500;
+      letter-spacing: 0.5px;
+
+      @include mobile-only {
+        font-size: 0.75rem;
+      }
+    }
+  }
+
+  .stat-divider {
+    width: 1px;
+    height: 45px;
+    background-color: var(--background-40);
+
+    @include mobile-only {
+      height: 45px;
+    }
+  }
+</style>

src/components/settings/RequestHistory.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="export-card">
+    <div class="settings-section-header">
+      <h2>Request History</h2>
+      <p>View and download your complete request history.</p>
+    </div>
+
+    <div class="stats-grid">
+      <div class="stat-mini">
+        <span class="stat-mini__value">{{ data.total }}</span>
+        <span class="stat-mini__label">Total</span>
+      </div>
+      <div class="stat-mini">
+        <span class="stat-mini__value">{{ data.approved }}</span>
+        <span class="stat-mini__label">Approved</span>
+      </div>
+      <div class="stat-mini">
+        <span class="stat-mini__value">{{ data.pending }}</span>
+        <span class="stat-mini__label">Pending</span>
+      </div>
+    </div>
+
+    <button class="view-btn" @click="viewHistory">View Full History</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { defineProps } from "vue";
+  import { useRouter } from "vue-router";
+
+  interface Props {
+    data: any;
+  }
+
+  defineProps<Props>();
+  const router = useRouter();
+
+  function viewHistory() {
+    router.push({ name: "profile" });
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/media-queries";
+  @import "scss/shared-settings";
+
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem;
+    margin-bottom: 0.65rem;
+  }
+
+  .stat-mini {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0.5rem 0.4rem;
+    background-color: var(--background-color);
+    border-radius: 0.25rem;
+
+    @include mobile-only {
+      padding: 0.45rem 0.35rem;
+    }
+
+    &__value {
+      font-size: 1.2rem;
+      font-weight: 600;
+      color: var(--highlight-color);
+
+      @include mobile-only {
+        font-size: 1.1rem;
+      }
+    }
+
+    &__label {
+      font-size: 0.7rem;
+      text-transform: uppercase;
+      margin-top: 0.15rem;
+
+      @include mobile-only {
+        font-size: 0.65rem;
+      }
+    }
+  }
+
+  .view-btn {
+    width: 100%;
+    padding: 0.55rem 0.85rem;
+    background-color: var(--background-color);
+    border: 1px solid var(--background-40);
+    border-radius: 0.25rem;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    color: var(--text-color);
+
+    &:hover {
+      background-color: var(--background-40);
+      border-color: var(--highlight-color);
+    }
+  }
+</style>

src/components/settings/SecuritySettings.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="security-settings">
+    <div class="security-settings__intro">
+      <h2 class="security-settings__title">Security</h2>
+      <p class="security-settings__description">
+        Keep your account safe by using a strong, unique password. We recommend
+        using a passphrase or generated password that's hard to guess.
+      </p>
+    </div>
+
+    <change-password />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import ChangePassword from "@/components/profile/ChangePassword.vue";
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .security-settings {
+    &__intro {
+      margin-bottom: 1rem;
+
+      @include mobile-only {
+        margin-bottom: 0.85rem;
+      }
+    }
+
+    &__title {
+      margin: 0 0 0.5rem 0;
+      font-size: 1.5rem;
+      font-weight: 700;
+      line-height: 1.3;
+    }
+
+    &__description {
+      margin: 0;
+      font-size: 0.95rem;
+      line-height: 1.6;
+      color: var(--text-color-70);
+    }
+  }
+</style>

src/components/settings/StorageManager.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="storage-manager">
+    <StorageSectionBrowser
+      :sections="storageSections"
+      @clear-item="clearItem"
+    />
+
+    <DangerZoneAction
+      title="Clear All Browser Data"
+      description="Remove all locally stored data at once. This includes preferences, history, and cached information."
+      button-text="Clear All Data"
+      @action="clearAllData"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, inject } from "vue";
+  import IconCookie from "@/icons/IconCookie.vue";
+  import IconDatabase from "@/icons/IconDatabase.vue";
+  import IconTimer from "@/icons/IconTimer.vue";
+  import StorageSectionBrowser from "./StorageSectionBrowser.vue";
+  import DangerZoneAction from "./DangerZoneAction.vue";
+  import { formatBytes } from "../../utils";
+
+  interface StorageItem {
+    key: string;
+    description: string;
+    size: string;
+    type: "local" | "session" | "cookie";
+  }
+
+  const notifications: {
+    success: (options: {
+      title: string;
+      description?: string;
+      timeout?: number;
+    }) => void;
+    error: (options: {
+      title: string;
+      description?: string;
+      timeout?: number;
+    }) => void;
+  } = inject("notifications");
+
+  const dict = {
+    commandPalette_stats: "Usage statistics for command palette navigation",
+    "theme-preference": "Your selected color theme",
+    plex_user_data: "Cached Plex account information",
+    plex_library_data: "Cached Plex library details per section",
+    plex_server_data: "Cached Plex server information",
+    plex_library_last_sync: "UTC time string for last synced Plex data",
+    plex_auth_token: "Authorized token from Plex.tv",
+    authorization: "This sites user login token"
+  };
+
+  const storageItems = computed<StorageItem[]>(() => {
+    const items: StorageItem[] = [];
+
+    // local storage
+    Object.keys(localStorage).map(key => {
+      items.push({
+        key,
+        description: dict[key] ?? "",
+        size: formatBytes(localStorage[key]?.length || 0),
+        type: "local"
+      });
+    });
+
+    // session storage
+    Object.keys(sessionStorage).map(key => {
+      items.push({
+        key,
+        description: dict[key] ?? "",
+        size: formatBytes(sessionStorage[key]?.length || 0),
+        type: "session"
+      });
+    });
+
+    // cookies
+    if (document.cookie) {
+      document.cookie.split(";").forEach(cookie => {
+        const [key, _] = cookie.trim().split("=");
+        if (key) {
+          items.push({
+            key,
+            description: dict[key] ?? "",
+            size: formatBytes(cookie.length || 0),
+            type: "cookie"
+          });
+        }
+      });
+    }
+
+    return items;
+  });
+
+  const getTotalSize = (items: StorageItem[]) => {
+    const totalBytes = items.reduce((acc, item) => {
+      const match = item.size.match(/^([\d.]+)\s*(\w+)$/);
+      if (!match) return acc;
+      const value = parseFloat(match[1]);
+      const unit = match[2];
+      return (
+        acc +
+        (unit === "KB"
+          ? value * 1024
+          : unit === "MB"
+            ? value * 1024 * 1024
+            : value)
+      );
+    }, 0);
+    return formatBytes(totalBytes);
+  };
+
+  const storageSections = computed(() => [
+    {
+      type: "local" as const,
+      title: "LocalStorage",
+      iconComponent: IconDatabase,
+      description:
+        "LocalStorage keeps data permanently on your device, even after closing your browser. It's used to remember your preferences and settings between visits.",
+      items: storageItems.value.filter(item => item.type === "local"),
+      get totalSize() {
+        return getTotalSize(this.items);
+      }
+    },
+    {
+      type: "session" as const,
+      title: "SessionStorage",
+      iconComponent: IconTimer,
+      description:
+        "SessionStorage keeps data temporarily while you browse. It's automatically cleared when you close your browser tab or window.",
+      items: storageItems.value.filter(item => item.type === "session"),
+      get totalSize() {
+        return getTotalSize(this.items);
+      }
+    },
+    {
+      type: "cookie" as const,
+      title: "Cookies",
+      iconComponent: IconCookie,
+      description:
+        "Cookies are small text files stored by your browser. They can be temporary (session cookies) or persistent, and are often used for authentication and tracking your activity.",
+      items: storageItems.value.filter(item => item.type === "cookie"),
+      get totalSize() {
+        return getTotalSize(this.items);
+      }
+    }
+  ]);
+
+  function clearItem(key: string, type: "local" | "session" | "cookie") {
+    try {
+      if (type === "local") {
+        localStorage.removeItem(key);
+      } else if (type === "session") {
+        sessionStorage.removeItem(key);
+      } else if (type === "cookie") {
+        document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+      }
+
+      notifications.success({
+        title: "Data Cleared",
+        description: `${key} has been cleared`,
+        timeout: 3000
+      });
+
+      // Force re-render
+      storageItems.value;
+    } catch (error) {
+      notifications.error({
+        title: "Error",
+        description: `Failed to clear ${key}`,
+        timeout: 5000
+      });
+    }
+  }
+
+  function clearAllData() {
+    const confirmed = confirm(
+      "Are you sure you want to clear all locally stored data? This action cannot be undone."
+    );
+
+    if (!confirmed) return;
+
+    try {
+      localStorage.clear();
+      sessionStorage.clear();
+      document.cookie.split(";").forEach(cookie => {
+        const eqPos = cookie.indexOf("=");
+        const name = eqPos > -1 ? cookie.substring(0, eqPos) : cookie;
+        document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
+      });
+
+      notifications.success({
+        title: "All Data Cleared",
+        description: "All locally stored data has been removed",
+        timeout: 3000
+      });
+    } catch (error) {
+      notifications.error({
+        title: "Error",
+        description: "Failed to clear all data",
+        timeout: 5000
+      });
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .storage-manager {
+    display: flex;
+    flex-direction: column;
+  }
+</style>

src/components/settings/StorageSectionBrowser.vue

@@ -0,0 +1,365 @@
+<template>
+  <div class="browser-storage">
+    <div class="settings-section-header">
+      <h2>Browser Storage</h2>
+      <p>
+        Your browser stores data locally to make this site faster and remember
+        your settings. View what's saved on this device and remove items
+        anytime.
+      </p>
+    </div>
+
+    <div class="storage-sections">
+      <div
+        v-for="section in sections"
+        :key="section.type"
+        :class="`storage-section storage-section--${section.type}`"
+      >
+        <button
+          class="storage-section__header"
+          @click="
+            expandedSections[section.type] = !expandedSections[section.type]
+          "
+        >
+          <div class="storage-section__header-content">
+            <component :is="section.iconComponent" class="section-icon" />
+            <h3 class="storage-section__title">{{ section.title }}</h3>
+            <span class="storage-section__count">{{
+              section.items.length
+            }}</span>
+            <span class="storage-section__size">{{ section.totalSize }}</span>
+          </div>
+          <svg
+            class="storage-section__chevron"
+            :class="{
+              'storage-section__chevron--expanded':
+                expandedSections[section.type]
+            }"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </button>
+        <div
+          v-if="expandedSections[section.type]"
+          class="storage-section__content"
+        >
+          <p class="storage-section__description">{{ section.description }}</p>
+          <div class="storage-items">
+            <div
+              v-for="item in section.items"
+              :key="item.key"
+              :class="`storage-item storage-item--${section.type}`"
+            >
+              <component :is="section.iconComponent" class="type-icon" />
+              <div class="storage-item__info">
+                <h4 class="storage-item__title">{{ item.key }}</h4>
+                <p class="storage-item__description">
+                  <span v-if="item.description">{{ item.description }} · </span>
+                  <span class="storage-item__size">{{ item.size }}</span>
+                </p>
+              </div>
+              <button
+                class="storage-item__delete"
+                @click="$emit('clear-item', item.key, section.type)"
+                :title="`Clear ${item.key}`"
+              >
+                <IconClose />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from "vue";
+  import IconClose from "@/icons/IconClose.vue";
+
+  interface StorageItem {
+    key: string;
+    description: string;
+    size: string;
+    type: "local" | "session" | "cookie";
+  }
+
+  interface StorageSection {
+    type: "local" | "session" | "cookie";
+    title: string;
+    description: string;
+    iconComponent: any;
+    items: StorageItem[];
+    totalSize: string;
+  }
+
+  defineProps<{
+    sections: StorageSection[];
+  }>();
+
+  defineEmits<{
+    "clear-item": [key: string, type: "local" | "session" | "cookie"];
+  }>();
+
+  const expandedSections = ref<Record<string, boolean>>({
+    local: false,
+    session: false,
+    cookie: false
+  });
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+  @import "scss/shared-settings";
+
+  .browser-storage {
+    &__intro {
+      margin-bottom: 2rem;
+    }
+  }
+
+  .storage-sections {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .storage-section {
+    border-radius: 0.5rem;
+    background: var(--background-ui);
+    overflow: hidden;
+    border: 2px solid transparent;
+    transition: border-color 0.2s ease;
+
+    &--local {
+      border-color: rgba(139, 92, 246, 0.2);
+      .section-icon,
+      .type-icon {
+        stroke: #8b5cf6;
+      }
+    }
+    &--session {
+      border-color: rgba(245, 158, 11, 0.2);
+      .section-icon,
+      .type-icon {
+        stroke: #f59e0b;
+      }
+    }
+    &--cookie {
+      border-color: rgba(236, 72, 153, 0.2);
+      .section-icon,
+      .type-icon {
+        fill: #ec4899;
+      }
+    }
+
+    &__header {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem 1.25rem;
+      background: none;
+      border: none;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+      &:hover {
+        background: var(--background-40);
+      }
+    }
+
+    &__header-content {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      .section-icon {
+        width: 24px;
+        height: 24px;
+        flex-shrink: 0;
+      }
+    }
+
+    &__title {
+      margin: 0;
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: var(--text-color);
+    }
+    &__count {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 24px;
+      height: 24px;
+      padding: 0 0.5rem;
+      background: var(--background-40);
+      border-radius: 12px;
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: var(--text-color-70);
+    }
+    &__size {
+      font-size: 0.85rem;
+      font-weight: 500;
+      color: var(--text-color-50);
+      font-family: monospace;
+    }
+    &__chevron {
+      width: 20px;
+      height: 20px;
+      stroke: var(--text-color-70);
+      transition: transform 0.2s ease;
+      &--expanded {
+        transform: rotate(180deg);
+      }
+    }
+    &__content {
+      border-top: 1px solid var(--background-40);
+    }
+    &__description {
+      margin: 0;
+      padding: 1rem 1.25rem;
+      font-size: 0.9rem;
+      line-height: 1.6;
+      color: var(--text-color-70);
+      background: var(--background-color);
+      font-style: italic;
+    }
+  }
+
+  .storage-items {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem 1rem 1rem;
+  }
+
+  .storage-item {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    background: var(--background-color);
+    border-radius: 0.25rem;
+    overflow: hidden;
+    transition: all 0.2s ease;
+    border-left: 3px solid;
+
+    &--local {
+      border-color: #8b5cf6;
+      background: linear-gradient(
+        90deg,
+        rgba(139, 92, 246, 0.1),
+        var(--background-color)
+      );
+    }
+    &--session {
+      border-color: #f59e0b;
+      background: linear-gradient(
+        90deg,
+        rgba(245, 158, 11, 0.1),
+        var(--background-color)
+      );
+    }
+    &--cookie {
+      border-color: #ec4899;
+      background: linear-gradient(
+        90deg,
+        rgba(236, 72, 153, 0.1),
+        var(--background-color)
+      );
+    }
+
+    &:hover .storage-item__delete {
+      background: var(--color-error-highlight);
+    }
+    &:hover .type-icon {
+      opacity: 1;
+    }
+
+    .type-icon {
+      width: 1.5rem;
+      height: 1.5rem;
+      opacity: 0.6;
+      transition: opacity 0.2s;
+      margin: auto 1.5rem;
+      @include mobile-only {
+        width: 1.25rem;
+        height: 1.25rem;
+        margin: auto 1rem;
+      }
+    }
+
+    &__info {
+      min-width: 0;
+      padding: 0.85rem 0.85rem 0.85rem 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      @include mobile-only {
+        padding: 0.75rem 0.75rem 0.75rem 0;
+      }
+    }
+
+    &__title {
+      margin: 0 0 0.3rem;
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: var(--text-color);
+      @include mobile-only {
+        font-size: 1rem;
+      }
+    }
+    &__description {
+      margin: 0;
+      font-size: 0.8rem;
+      color: var(--text-color-70);
+      line-height: 1.4;
+      @include mobile-only {
+        font-size: 0.75rem;
+      }
+    }
+    &__size {
+      color: var(--text-color-50);
+      font-family: monospace;
+    }
+
+    &__delete {
+      width: 70px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--color-error);
+      border: none;
+      cursor: pointer;
+      transition: all 0.2s;
+      @include mobile-only {
+        width: 60px;
+      }
+
+      svg {
+        width: 20px;
+        height: 20px;
+        fill: white;
+        transition: transform 0.2s;
+        @include mobile-only {
+          width: 18px;
+          height: 18px;
+        }
+      }
+      &:hover {
+        background: var(--color-error-highlight);
+        svg {
+          transform: scale(1.1);
+        }
+      }
+      &:active svg {
+        transform: scale(0.9);
+      }
+    }
+  }
+</style>

src/components/settings/StorageSectionServer.vue

@@ -0,0 +1,462 @@
+<template>
+  <div class="server-storage">
+    <div class="server-storage__intro">
+      <h2 class="server-storage__title">Server Storage</h2>
+      <p class="server-storage__description">
+        Data stored on our servers to sync across your devices and provide
+        personalized features.
+      </p>
+    </div>
+
+    <div class="server-sections">
+      <div
+        v-for="section in serverSections"
+        :key="section.type"
+        :class="`server-section server-section--${section.type}`"
+      >
+        <button
+          class="server-section__header"
+          @click="
+            expandedSections[section.type] = !expandedSections[section.type]
+          "
+        >
+          <div class="server-section__header-content">
+            <component :is="section.iconComponent" class="section-icon" />
+            <h3 class="server-section__title">{{ section.title }}</h3>
+            <span class="server-section__count">{{
+              section.items.length
+            }}</span>
+            <span class="server-section__size">{{ section.totalSize }}</span>
+          </div>
+          <svg
+            class="server-section__chevron"
+            :class="{
+              'server-section__chevron--expanded':
+                expandedSections[section.type]
+            }"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </button>
+        <div
+          v-if="expandedSections[section.type]"
+          class="server-section__content"
+        >
+          <p class="server-section__description">{{ section.description }}</p>
+          <div class="server-items">
+            <div
+              v-for="item in section.items"
+              :key="item.key"
+              :class="`server-item server-item--${section.type}`"
+            >
+              <component :is="section.iconComponent" class="type-icon" />
+              <div class="server-item__info">
+                <h4 class="server-item__title">{{ item.key }}</h4>
+                <p class="server-item__description">
+                  <span v-if="item.description">{{ item.description }} · </span>
+                  <span class="server-item__size">{{ item.size }}</span>
+                  <span v-if="item.lastSynced" class="server-item__synced">
+                    · Last synced: {{ item.lastSynced }}</span
+                  >
+                </p>
+              </div>
+              <button
+                class="server-item__delete"
+                @click="$emit('clear-item', item.key, section.type)"
+                :title="`Delete ${item.key}`"
+              >
+                <IconClose />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed } from "vue";
+  import IconClose from "@/icons/IconClose.vue";
+  import IconProfile from "@/icons/IconProfile.vue";
+  import IconSettings from "@/icons/IconSettings.vue";
+  import IconActivity from "@/icons/IconActivity.vue";
+
+  interface ServerItem {
+    key: string;
+    description: string;
+    size: string;
+    lastSynced?: string;
+  }
+
+  defineEmits<{
+    "clear-item": [key: string, type: string];
+  }>();
+
+  const expandedSections = ref<Record<string, boolean>>({
+    profile: false,
+    preferences: false,
+    activity: false
+  });
+
+  // Mock server data
+  const serverSections = computed(() => [
+    {
+      type: "profile",
+      title: "Profile Data",
+      iconComponent: IconProfile,
+      description:
+        "Your account information, settings, and preferences stored on our servers.",
+      items: [
+        {
+          key: "user_profile",
+          description: "User account details",
+          size: "2.4 KB",
+          lastSynced: "2 hours ago"
+        },
+        {
+          key: "avatar_image",
+          description: "Profile picture",
+          size: "145 KB",
+          lastSynced: "1 day ago"
+        },
+        {
+          key: "email_preferences",
+          description: "Notification settings",
+          size: "512 Bytes",
+          lastSynced: "3 days ago"
+        }
+      ],
+      totalSize: "147.9 KB"
+    },
+    {
+      type: "preferences",
+      title: "Synced Preferences",
+      iconComponent: IconSettings,
+      description:
+        "Settings that sync across all your devices when you sign in.",
+      items: [
+        {
+          key: "theme_settings",
+          description: "Color theme and appearance",
+          size: "1.1 KB",
+          lastSynced: "5 hours ago"
+        },
+        {
+          key: "playback_settings",
+          description: "Video and audio preferences",
+          size: "856 Bytes",
+          lastSynced: "1 day ago"
+        },
+        {
+          key: "library_filters",
+          description: "Saved filters and sorting",
+          size: "2.3 KB",
+          lastSynced: "2 days ago"
+        }
+      ],
+      totalSize: "4.3 KB"
+    },
+    {
+      type: "activity",
+      title: "Activity History",
+      iconComponent: IconActivity,
+      description:
+        "Your viewing history and watch progress stored on our servers.",
+      items: [
+        {
+          key: "watch_history",
+          description: "Recently watched items",
+          size: "12.5 KB",
+          lastSynced: "1 hour ago"
+        },
+        {
+          key: "watch_progress",
+          description: "Playback positions",
+          size: "8.2 KB",
+          lastSynced: "30 minutes ago"
+        },
+        {
+          key: "favorites",
+          description: "Starred and favorited content",
+          size: "3.7 KB",
+          lastSynced: "6 hours ago"
+        }
+      ],
+      totalSize: "24.4 KB"
+    }
+  ]);
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .server-storage {
+    &__intro {
+      margin-bottom: 2rem;
+    }
+
+    &__title {
+      margin: 0 0 0.5rem 0;
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--text-color);
+    }
+
+    &__description {
+      margin: 0;
+      color: var(--text-color-70);
+      font-size: 0.95rem;
+      line-height: 1.6;
+    }
+  }
+
+  .server-sections {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .server-section {
+    border-radius: 0.5rem;
+    background: var(--background-ui);
+    overflow: hidden;
+    border: 2px solid transparent;
+    transition: border-color 0.2s ease;
+
+    &--profile {
+      border-color: rgba(59, 130, 246, 0.2);
+      .section-icon,
+      .type-icon {
+        fill: #3b82f6;
+      }
+    }
+    &--preferences {
+      border-color: rgba(16, 185, 129, 0.2);
+      .section-icon,
+      .type-icon {
+        fill: #10b981;
+      }
+    }
+    &--activity {
+      border-color: rgba(245, 158, 11, 0.2);
+      .section-icon,
+      .type-icon {
+        fill: #f59e0b;
+      }
+    }
+
+    &__header {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem 1.25rem;
+      background: none;
+      border: none;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+      &:hover {
+        background: var(--background-40);
+      }
+    }
+
+    &__header-content {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      .section-icon {
+        width: 24px;
+        height: 24px;
+        flex-shrink: 0;
+      }
+    }
+
+    &__title {
+      margin: 0;
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: var(--text-color);
+    }
+    &__count {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 24px;
+      height: 24px;
+      padding: 0 0.5rem;
+      background: var(--background-40);
+      border-radius: 12px;
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: var(--text-color-70);
+    }
+    &__size {
+      font-size: 0.85rem;
+      font-weight: 500;
+      color: var(--text-color-50);
+      font-family: monospace;
+    }
+    &__chevron {
+      width: 20px;
+      height: 20px;
+      stroke: var(--text-color-70);
+      transition: transform 0.2s ease;
+      &--expanded {
+        transform: rotate(180deg);
+      }
+    }
+    &__content {
+      border-top: 1px solid var(--background-40);
+    }
+    &__description {
+      margin: 0;
+      padding: 1rem 1.25rem;
+      font-size: 0.9rem;
+      line-height: 1.6;
+      color: var(--text-color-70);
+      background: var(--background-color);
+      font-style: italic;
+    }
+  }
+
+  .server-items {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem 1rem 1rem;
+  }
+
+  .server-item {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    background: var(--background-color);
+    border-radius: 0.25rem;
+    overflow: hidden;
+    transition: all 0.2s ease;
+    border-left: 3px solid;
+
+    &--profile {
+      border-color: #3b82f6;
+      background: linear-gradient(
+        90deg,
+        rgba(59, 130, 246, 0.1),
+        var(--background-color)
+      );
+    }
+    &--preferences {
+      border-color: #10b981;
+      background: linear-gradient(
+        90deg,
+        rgba(16, 185, 129, 0.1),
+        var(--background-color)
+      );
+    }
+    &--activity {
+      border-color: #f59e0b;
+      background: linear-gradient(
+        90deg,
+        rgba(245, 158, 11, 0.1),
+        var(--background-color)
+      );
+    }
+
+    &:hover .server-item__delete {
+      background: var(--color-error-highlight);
+    }
+    &:hover .type-icon {
+      opacity: 1;
+    }
+
+    .type-icon {
+      width: 1.5rem;
+      height: 1.5rem;
+      opacity: 0.6;
+      transition: opacity 0.2s;
+      margin: auto 1.5rem;
+      @include mobile-only {
+        width: 1.25rem;
+        height: 1.25rem;
+        margin: auto 1rem;
+      }
+    }
+
+    &__info {
+      min-width: 0;
+      padding: 0.85rem 0.85rem 0.85rem 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      @include mobile-only {
+        padding: 0.75rem 0.75rem 0.75rem 0;
+      }
+    }
+
+    &__title {
+      margin: 0 0 0.3rem;
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: var(--text-color);
+      @include mobile-only {
+        font-size: 1rem;
+      }
+    }
+    &__description {
+      margin: 0;
+      font-size: 0.8rem;
+      color: var(--text-color-70);
+      line-height: 1.4;
+      @include mobile-only {
+        font-size: 0.75rem;
+      }
+    }
+    &__size {
+      color: var(--text-color-50);
+      font-family: monospace;
+    }
+    &__synced {
+      color: var(--text-color-50);
+      font-style: italic;
+    }
+
+    &__delete {
+      width: 70px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--color-error);
+      border: none;
+      cursor: pointer;
+      transition: all 0.2s;
+      @include mobile-only {
+        width: 60px;
+      }
+
+      svg {
+        width: 20px;
+        height: 20px;
+        fill: white;
+        transition: transform 0.2s;
+        @include mobile-only {
+          width: 18px;
+          height: 18px;
+        }
+      }
+      &:hover {
+        background: var(--color-error-highlight);
+        svg {
+          transform: scale(1.1);
+        }
+      }
+      &:active svg {
+        transform: scale(0.9);
+      }
+    }
+  }
+</style>

src/components/settings/ThemePreferences.vue

@@ -16,10 +16,7 @@
       <button
         v-for="theme in themes"
         :key="theme.value"
-        :class="[
-          'theme-card',
-          { 'theme-card--active': selectedTheme === theme.value }
-        ]"
+        :class="['theme-card', { active: selectedTheme === theme.value }]"
         @click="selectTheme(theme.value)"
       >
         <div class="theme-card__preview" :data-theme="theme.value">
@@ -35,65 +32,31 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, onMounted } from "vue";
+  import { computed, onMounted } from "vue";
+  import { useTheme } from "@/composables/useTheme";
 
-  interface Theme {
-    value: string;
-    label: string;
-  }
-
-  const themes: Theme[] = [
+  const themes = [
     { value: "auto", label: "Auto" },
     { value: "light", label: "Light" },
     { value: "dark", label: "Dark" },
     { value: "ocean", label: "Ocean" },
     { value: "nordic", label: "Nordic" },
     { value: "halloween", label: "Halloween" }
-  ];
+  ] as const;
 
-  const selectedTheme = ref("auto");
+  const { currentTheme, savedTheme, setTheme } = useTheme();
+  const selectedTheme = currentTheme;
 
-  const currentThemeName = computed(() => {
-    const theme = themes.find(t => t.value === selectedTheme.value);
-    return theme ? theme.label : "Auto";
-  });
-
-  function systemDarkModeEnabled() {
-    const computedStyle = window.getComputedStyle(document.body);
-    if (computedStyle?.colorScheme != null) {
-      return computedStyle.colorScheme.includes("dark");
-    }
-    return false;
-  }
+  const currentThemeName = computed(
+    () => themes.find(t => t.value === selectedTheme.value)?.label ?? "Auto"
+  );
 
   function selectTheme(theme: string) {
-    selectedTheme.value = theme;
-
-    if (theme === "auto") {
-      // Use system preference
-      const systemDark = systemDarkModeEnabled();
-      document.body.className = systemDark ? "dark" : "light";
-
-      // Listen for system theme changes
-      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-      mediaQuery.addEventListener("change", e => {
-        if (selectedTheme.value === "auto") {
-          document.body.className = e.matches ? "dark" : "light";
-        }
-      });
-    } else {
-      // Manual theme selection
-      document.body.className = theme;
-    }
-
-    // Save preference to localStorage
-    localStorage.setItem("theme-preference", theme);
+    setTheme(theme as any);
   }
 
   onMounted(() => {
-    // Load saved preference or default to auto
-    const savedTheme = localStorage.getItem("theme-preference") || "auto";
-    selectTheme(savedTheme);
+    selectedTheme.value = savedTheme.value;
   });
 </script>
 
@@ -113,99 +76,91 @@
       padding: 1.5rem;
       border-radius: 0.75rem;
     }
-  }
 
-  .theme-display {
-    display: flex;
-    align-items: center;
-    gap: 1.5rem;
+    .theme-display {
+      display: flex;
+      align-items: center;
+      gap: 1.5rem;
 
-    @include mobile-only {
-      gap: 1.25rem;
-    }
-  }
-
-  .theme-icon {
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    overflow: hidden;
-    flex-shrink: 0;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-
-    @include mobile-only {
-      width: 70px;
-      height: 70px;
+      @include mobile-only {
+        gap: 1.25rem;
+      }
     }
 
-    .icon-inner {
-      width: 100%;
-      height: 100%;
+    .theme-icon {
+      width: 80px;
+      height: 80px;
       border-radius: 50%;
+      overflow: hidden;
+      flex-shrink: 0;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+      @include mobile-only {
+        width: 70px;
+        height: 70px;
+      }
+
+      .icon-inner {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        border: 3px solid;
+      }
+
+      &[data-theme="light"] .icon-inner {
+        background: linear-gradient(135deg, #f8f8f8, #e8e8e8);
+        border-color: #01d277;
+      }
+      &[data-theme="dark"] .icon-inner {
+        background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
+        border-color: #01d277;
+      }
+      &[data-theme="ocean"] .icon-inner {
+        background: linear-gradient(135deg, #0f2027, #2c5364);
+        border-color: #00d4ff;
+      }
+      &[data-theme="nordic"] .icon-inner {
+        background: linear-gradient(135deg, #f5f0e8, #d8cdb9);
+        border-color: #3d6e4e;
+      }
+      &[data-theme="halloween"] .icon-inner {
+        background: linear-gradient(135deg, #1a0e2e, #2d1b3d);
+        border-color: #ff6600;
+      }
+      &[data-theme="auto"] .icon-inner {
+        background: conic-gradient(#f8f8f8 0deg 180deg, #1a1a1a 180deg);
+        border-color: #01d277;
+      }
     }
 
-    &[data-theme="light"] .icon-inner {
-      background: linear-gradient(135deg, #f8f8f8 0%, #e8e8e8 100%);
-      border: 3px solid #01d277;
+    .theme-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 0.35rem;
     }
 
-    &[data-theme="dark"] .icon-inner {
-      background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
-      border: 3px solid #01d277;
+    span {
+      font-size: 0.85rem;
+      color: $text-color-70;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      font-weight: 500;
+
+      @include mobile-only {
+        font-size: 0.75rem;
+      }
     }
 
-    &[data-theme="ocean"] .icon-inner {
-      background: linear-gradient(135deg, #0f2027 0%, #2c5364 100%);
-      border: 3px solid #00d4ff;
-    }
+    h3 {
+      margin: 0;
+      font-size: 1.75rem;
+      font-weight: 700;
+      line-height: 1;
 
-    &[data-theme="nordic"] .icon-inner {
-      background: linear-gradient(135deg, #f5f0e8 0%, #d8cdb9 100%);
-      border: 3px solid #3d6e4e;
-    }
-
-    &[data-theme="halloween"] .icon-inner {
-      background: linear-gradient(135deg, #1a0e2e 0%, #2d1b3d 100%);
-      border: 3px solid #ff6600;
-    }
-
-    &[data-theme="auto"] .icon-inner {
-      background: conic-gradient(
-        from 0deg,
-        #f8f8f8 0deg 180deg,
-        #1a1a1a 180deg 360deg
-      );
-      border: 3px solid #01d277;
-    }
-  }
-
-  .theme-info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 0.35rem;
-  }
-
-  .theme-label {
-    font-size: 0.85rem;
-    color: $text-color-70;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    font-weight: 500;
-
-    @include mobile-only {
-      font-size: 0.75rem;
-    }
-  }
-
-  .theme-name {
-    margin: 0;
-    font-size: 1.75rem;
-    font-weight: 700;
-    line-height: 1;
-
-    @include mobile-only {
-      font-size: 1.4rem;
+      @include mobile-only {
+        font-size: 1.4rem;
+      }
     }
   }
 
@@ -218,251 +173,182 @@
       grid-template-columns: repeat(2, 1fr);
       gap: 1rem;
     }
-  }
 
-  .theme-card {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    padding: 1rem;
-    background-color: var(--background-ui);
-    border-radius: 0.75rem;
-    cursor: pointer;
-    transition: all 0.2s;
-    border: 2px solid transparent;
-    text-align: center;
+    .theme-card {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      padding: 1rem;
+      background-color: var(--background-ui);
+      border-radius: 0.75rem;
+      cursor: pointer;
+      transition: all 0.2s;
+      border: 2px solid transparent;
+      text-align: center;
 
-    @include mobile-only {
-      padding: 0.85rem;
-      border-radius: 0.5rem;
-    }
+      @include mobile-only {
+        padding: 0.85rem;
+        border-radius: 0.5rem;
+        &:hover {
+          transform: none;
+        }
+        &:active {
+          transform: scale(0.97);
+        }
+      }
 
-    &:hover {
-      border-color: var(--highlight-color);
-      transform: translateY(-2px);
-      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
-    }
-
-    &--active {
-      border-color: var(--highlight-color);
-      background-color: var(--background-40);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    }
-
-    @include mobile-only {
       &:hover {
-        transform: none;
+        border-color: var(--highlight-color);
+        transform: translateY(-2px);
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
       }
 
-      &:active {
-        transform: scale(0.97);
-      }
-    }
-
-    &__preview {
-      width: 100%;
-      height: 120px;
-      border-radius: 0.5rem;
-      overflow: hidden;
-      margin-bottom: 0.75rem;
-      position: relative;
-      border: 1px solid var(--background-40);
-
-      @include mobile-only {
-        height: 100px;
-        margin-bottom: 0.6rem;
+      &.active {
+        border-color: var(--highlight-color);
+        background-color: var(--background-40);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
       }
 
-      .preview-circle {
+      &__preview {
+        width: 100%;
+        height: 120px;
+        border-radius: 0.5rem;
+        overflow: hidden;
+        margin-bottom: 0.75rem;
+        position: relative;
+        border: 1px solid var(--background-40);
+
+        @include mobile-only {
+          height: 100px;
+          margin-bottom: 0.6rem;
+        }
+
+        .preview-circle {
+          position: absolute;
+          bottom: 8px;
+          left: 8px;
+          width: 30px;
+          height: 30px;
+          border-radius: 50%;
+        }
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: 8px;
+          left: 8px;
+          right: 8px;
+          height: 20px;
+          border-radius: 4px;
+          border: 1px solid;
+        }
+      }
+
+      &__preview[data-theme="light"] {
+        background: #f8f8f8;
+        .preview-circle {
+          background: #01d277;
+        }
+        &::before {
+          background: #fff;
+          border-color: rgba(8, 28, 36, 0.1);
+        }
+      }
+
+      &__preview[data-theme="dark"] {
+        background: #111;
+        .preview-circle {
+          background: #01d277;
+        }
+        &::before {
+          background: #060708;
+          border-color: rgba(255, 255, 255, 0.1);
+        }
+      }
+
+      &__preview[data-theme="ocean"] {
+        background: #0f2027;
+        .preview-circle {
+          background: #00d4ff;
+        }
+        &::before {
+          background: #203a43;
+          border-color: rgba(0, 212, 255, 0.2);
+        }
+      }
+
+      &__preview[data-theme="nordic"] {
+        background: #f5f0e8;
+        .preview-circle {
+          background: #3d6e4e;
+        }
+        &::before {
+          background: #fffef9;
+          border-color: rgba(61, 110, 78, 0.2);
+        }
+      }
+
+      &__preview[data-theme="halloween"] {
+        background: #1a0e2e;
+        .preview-circle {
+          background: #ff6600;
+        }
+        &::before {
+          background: #2d1b3d;
+          border-color: rgba(255, 102, 0, 0.2);
+        }
+      }
+
+      &__preview[data-theme="auto"] {
+        border-color: black;
+        background: linear-gradient(
+          135deg,
+          #f8f8f8 0%,
+          #f8f8f8 50%,
+          #111 50%,
+          #111 100%
+        );
+        .preview-circle {
+          left: auto;
+          right: 8px;
+          background: #01d277;
+        }
+        &::before {
+          right: auto;
+          width: calc(50% - 10px);
+          background: #fff;
+          border-color: rgba(8, 28, 36, 0.1);
+        }
+      }
+
+      &__name {
+        font-size: 0.9rem;
+        font-weight: 600;
+        line-height: 1;
+        color: var(--text-color);
+        @include mobile-only {
+          font-size: 0.85rem;
+        }
+      }
+
+      &__badge {
         position: absolute;
-        border-radius: 50%;
-      }
-    }
+        top: 0.5rem;
+        right: 0.5rem;
+        padding: 0.25rem 0.5rem;
+        background-color: var(--highlight-color);
+        color: white;
+        border-radius: 1rem;
+        font-size: 0.65rem;
+        font-weight: 600;
+        text-transform: uppercase;
 
-    // Light Theme Preview
-    &__preview[data-theme="light"] {
-      background: #f8f8f8;
-
-      .preview-circle {
-        bottom: 8px;
-        left: 8px;
-        width: 30px;
-        height: 30px;
-        background: #01d277;
-      }
-
-      &::before {
-        content: "";
-        position: absolute;
-        top: 8px;
-        left: 8px;
-        right: 8px;
-        height: 20px;
-        background: #ffffff;
-        border-radius: 4px;
-        border: 1px solid rgba(8, 28, 36, 0.1);
-      }
-    }
-
-    // Dark Theme Preview
-    &__preview[data-theme="dark"] {
-      background: #111111;
-
-      .preview-circle {
-        bottom: 8px;
-        left: 8px;
-        width: 30px;
-        height: 30px;
-        background: #01d277;
-      }
-
-      &::before {
-        content: "";
-        position: absolute;
-        top: 8px;
-        left: 8px;
-        right: 8px;
-        height: 20px;
-        background: rgba(6, 7, 8, 1);
-        border-radius: 4px;
-        border: 1px solid rgba(255, 255, 255, 0.1);
-      }
-    }
-
-    // Ocean Theme Preview
-    &__preview[data-theme="ocean"] {
-      background: #0f2027;
-
-      .preview-circle {
-        bottom: 8px;
-        left: 8px;
-        width: 30px;
-        height: 30px;
-        background: #00d4ff;
-      }
-
-      &::before {
-        content: "";
-        position: absolute;
-        top: 8px;
-        left: 8px;
-        right: 8px;
-        height: 20px;
-        background: #203a43;
-        border-radius: 4px;
-        border: 1px solid rgba(0, 212, 255, 0.2);
-      }
-    }
-
-    // Nordic Theme Preview
-    &__preview[data-theme="nordic"] {
-      background: #f5f0e8;
-
-      .preview-circle {
-        bottom: 8px;
-        left: 8px;
-        width: 30px;
-        height: 30px;
-        background: #3d6e4e;
-      }
-
-      &::before {
-        content: "";
-        position: absolute;
-        top: 8px;
-        left: 8px;
-        right: 8px;
-        height: 20px;
-        background: #fffef9;
-        border-radius: 4px;
-        border: 1px solid rgba(61, 110, 78, 0.2);
-      }
-    }
-
-    // Halloween Theme Preview
-    &__preview[data-theme="halloween"] {
-      background: #1a0e2e;
-
-      .preview-circle {
-        bottom: 8px;
-        left: 8px;
-        width: 30px;
-        height: 30px;
-        background: #ff6600;
-      }
-
-      &::before {
-        content: "";
-        position: absolute;
-        top: 8px;
-        left: 8px;
-        right: 8px;
-        height: 20px;
-        background: #2d1b3d;
-        border-radius: 4px;
-        border: 1px solid rgba(255, 102, 0, 0.2);
-      }
-    }
-
-    // Auto Theme Preview (split)
-    &__preview[data-theme="auto"] {
-      background: linear-gradient(
-        135deg,
-        #f8f8f8 0%,
-        #f8f8f8 50%,
-        #111111 50%,
-        #111111 100%
-      );
-
-      .preview-circle {
-        bottom: 8px;
-        right: 8px;
-        width: 30px;
-        height: 30px;
-        background: #01d277;
-      }
-
-      &::before {
-        content: "";
-        position: absolute;
-        top: 8px;
-        left: 8px;
-        width: calc(50% - 10px);
-        height: 20px;
-        background: #ffffff;
-        border-radius: 4px;
-        border: 1px solid rgba(8, 28, 36, 0.1);
-      }
-    }
-
-    &__name {
-      font-size: 0.9rem;
-      font-weight: 600;
-      line-height: 1;
-      color: var(--text-color);
-
-      @include mobile-only {
-        font-size: 0.85rem;
-      }
-    }
-
-    &__badge {
-      position: absolute;
-      top: 0.5rem;
-      right: 0.5rem;
-      padding: 0.25rem 0.5rem;
-      background-color: var(--highlight-color);
-      color: $white;
-      border-radius: 1rem;
-      font-size: 0.65rem;
-      font-weight: 600;
-      text-transform: uppercase;
-
-      @include mobile-only {
-        top: 0.4rem;
-        right: 0.4rem;
-        padding: 0.2rem 0.4rem;
-        font-size: 0.6rem;
+        @include mobile-only {
+          top: 0.4rem;
+          right: 0.4rem;
+          padding: 0.2rem 0.4rem;
+          font-size: 0.6rem;
+        }
       }
     }
   }

src/components/torrent/TorrentTable.vue

@@ -1,68 +1,69 @@
 <template>
-  <table>
-    <thead class="table__header noselect">
-      <tr>
-        <th
-          v-for="column in visibleColumns"
-          :key="column"
-          :class="column === selectedColumn ? 'active' : null"
-          @click="sortTable(column)"
+  <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)"
         >
-          {{ column }}
-          <span v-if="prevCol === column && direction">↑</span>
-          <span v-if="prevCol === column && !direction">↓</span>
-        </th>
-      </tr>
-    </thead>
+          {{ option.label }}
+        </button>
+      </div>
+    </div>
 
-    <tbody>
-      <tr
-        v-for="torrent in torrents"
-        :key="torrent.magnet"
-        class="table__content"
-      >
-        <td
-          class="torrent-info"
-          @click="expand($event, torrent.name)"
-          @keydown.enter="expand($event, torrent.name)"
+    <table>
+      <thead class="table__header noselect">
+        <tr>
+          <th
+            class="name-header"
+            :class="selectedSort === 'name' ? 'active' : null"
+            @click="changeSort('name')"
+          >
+            Name
+            <span v-if="selectedSort === 'name'">{{
+              direction ? "↑" : "↓"
+            }}</span>
+          </th>
+          <th class="add-header">Add</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr
+          v-for="torrent in sortedTorrents"
+          :key="torrent.magnet"
+          class="table__content"
         >
-          <div class="torrent-title">{{ torrent.name }}</div>
-          <div v-if="isMobile" class="torrent-meta">
-            <span class="meta-item">{{ torrent.size }}</span>
-            <span class="meta-separator">•</span>
-            <span class="meta-item">{{ torrent.seed }} seeders</span>
-          </div>
-        </td>
-        <td
-          v-if="!isMobile"
-          class="torrent-seed"
-          @click="expand($event, torrent.name)"
-          @keydown.enter="expand($event, torrent.name)"
-        >
-          {{ torrent.seed }}
-        </td>
-        <td
-          v-if="!isMobile"
-          class="torrent-size"
-          @click="expand($event, torrent.name)"
-          @keydown.enter="expand($event, torrent.name)"
-        >
-          {{ torrent.size }}
-        </td>
-        <td
-          class="download"
-          @click="() => emit('magnet', torrent)"
-          @keydown.enter="() => emit('magnet', torrent)"
-        >
-          <IconMagnet />
-        </td>
-      </tr>
-    </tbody>
-  </table>
+          <td
+            class="torrent-info"
+            @click="expand($event, torrent.name)"
+            @keydown.enter="expand($event, torrent.name)"
+          >
+            <div class="torrent-title">{{ torrent.name }}</div>
+            <div class="torrent-meta">
+              <span class="meta-item">{{ torrent.size }}</span>
+              <span class="meta-separator">•</span>
+              <span class="meta-item">{{ torrent.seed }} seeders</span>
+            </div>
+          </td>
+          <td
+            class="download"
+            @click="() => emit('magnet', torrent)"
+            @keydown.enter="() => emit('magnet', torrent)"
+          >
+            <IconMagnet />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, onMounted, onUnmounted } from "vue";
+  import { ref, computed } from "vue";
   import IconMagnet from "@/icons/IconMagnet.vue";
   import type { Ref } from "vue";
   import { sortableSize } from "../../utils";
@@ -79,31 +80,55 @@
   const props = defineProps<Props>();
   const emit = defineEmits<Emit>();
 
-  const columns: string[] = ["name", "seed", "size", "add"];
-  const windowWidth = ref(window.innerWidth);
-  const isMobile = computed(() => windowWidth.value <= 768);
-  const visibleColumns = computed(() =>
-    isMobile.value ? ["name", "add"] : columns
-  );
+  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 prevCol: Ref<string> = ref("");
+  const selectedSort: Ref<string> = ref("size");
+  const prevSort: Ref<string> = ref("");
 
-  function handleResize() {
-    windowWidth.value = window.innerWidth;
+  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;
   }
 
-  onMounted(() => {
-    window.addEventListener("resize", handleResize);
-  });
-
-  onUnmounted(() => {
-    window.removeEventListener("resize", handleResize);
-  });
-
   function expand(event: MouseEvent, text: string) {
+    return;
     const elementClicked = event.target as HTMLElement;
     const tableRow = elementClicked.parentElement;
     const scopedStyleDataVariable = Object.keys(tableRow.dataset)[0];
@@ -116,8 +141,6 @@
     if (existingExpandedElement) {
       existingExpandedElement.remove();
 
-      // Clicked the same element twice, remove and return
-      // not recreate and collapse
       if (clickedSameTwice) return;
     }
 
@@ -128,59 +151,11 @@
     expandedRow.className = "expanded";
     expandedCol.innerText = text;
 
-    // Colspan: 2 on mobile (name + add), 4 on desktop (name + seed + size + add)
-    expandedCol.colSpan = isMobile.value ? 2 : 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>
@@ -188,6 +163,58 @@
   @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;
@@ -195,16 +222,11 @@
     max-width: 100%;
     border-radius: 0.5rem;
     overflow: hidden;
-    table-layout: fixed;
-
-    @include mobile {
-      table-layout: auto;
-    }
+    table-layout: auto;
   }
 
   th,
   td {
-    border: 0.5px solid var(--background-color-40);
     overflow: hidden;
     text-overflow: ellipsis;
 
@@ -217,16 +239,16 @@
     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);
+    background-color: var(--highlight-color, var(--highlight-color));
     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));
     }
   }
 
@@ -237,7 +259,7 @@
       padding: 0.5rem 0.6rem;
       cursor: default;
       word-break: break-word;
-      border-left: 1px solid var(--table-background-color);
+      border-left: 1px solid var(--highlight-secondary, var(--highlight-color));
 
       @include mobile {
         width: 100%;
@@ -258,8 +280,8 @@
 
       .torrent-meta {
         font-size: 0.85rem;
-        color: var(--text-color-60);
         display: flex;
+        opacity: 70%;
         align-items: center;
         gap: 0.5rem;
         flex-wrap: wrap;
@@ -275,20 +297,12 @@
       }
     }
 
-    // seed and size columns (desktop only)
-    .torrent-seed,
-    .torrent-size {
-      text-align: center;
-      white-space: nowrap;
-      padding: 0.5rem;
-    }
-
     // last column - action
     tr td:last-of-type {
       vertical-align: middle;
       cursor: pointer;
-      border-right: 1px solid var(--table-background-color);
-      width: 60px;
+      border-right: 1px solid var(--highlight-secondary, var(--highlight-color));
+      max-width: 60px;
       text-align: center;
 
       @include mobile {
@@ -300,7 +314,7 @@
         display: block;
         margin: auto;
         padding: 0.3rem 0;
-        fill: var(--text-color);
+        fill: var(inherit, var(--text-color));
 
         @include mobile {
           width: 18px;
@@ -310,16 +324,30 @@
 
     // 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(even) {
-      background-color: var(--background-70);
+    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;
+      }
     }
 
     // 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 {
@@ -335,15 +363,16 @@
   .expanded {
     padding: 0.25rem 1rem;
     max-width: 100%;
-    border-left: 1px solid $text-color;
-    border-right: 1px solid $text-color;
-    border-bottom: 1px solid $text-color;
+    border-left: 1px solid var(--text-color);
+    border-right: 1px solid var(--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/CommandPalette.vue

@@ -139,7 +139,6 @@
   import IconMovie from "@/icons/IconMovie.vue";
   import IconActivity from "@/icons/IconActivity.vue";
   import IconProfile from "@/icons/IconProfile.vue";
-  import IconRequest from "@/icons/IconRequest.vue";
   import IconInbox from "@/icons/IconInbox.vue";
   import IconSearch from "@/icons/IconSearch.vue";
   import IconEdit from "@/icons/IconEdit.vue";

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>();

src/composables/usePlexApi.ts

@@ -1,200 +1,125 @@
 import { ref } from "vue";
+import { API_HOSTNAME } from "../api";
 
 // Shared constants - generated once and reused
 export const CLIENT_IDENTIFIER = `seasoned-plex-app-${Math.random().toString(36).substring(7)}`;
 export const APP_NAME = window.location.hostname;
 
-export function usePlexApi() {
-  const plexServerUrl = ref("");
-
-  // Fetch Plex user data
-  async function fetchPlexUserData(authToken: string) {
-    try {
-      const response = await fetch("https://plex.tv/api/v2/user", {
-        method: "GET",
-        headers: {
-          accept: "application/json",
-          "X-Plex-Product": APP_NAME,
-          "X-Plex-Client-Identifier": CLIENT_IDENTIFIER,
-          "X-Plex-Token": authToken
-        }
-      });
-
-      if (!response.ok) {
-        throw new Error("Failed to fetch Plex user info");
+async function fetchPlexServers(authToken: string) {
+  try {
+    const url =
+      "https://plex.tv/api/v2/resources?includeHttps=1&includeRelay=1";
+    const options = {
+      method: "GET",
+      headers: {
+        accept: "application/json",
+        "X-Plex-Token": authToken,
+        "X-Plex-Client-Identifier": CLIENT_IDENTIFIER
       }
+    };
 
-      const data = await response.json();
+    const response = await fetch(url, options);
 
-      // Convert Unix timestamp to ISO date string if needed
-      let joinedDate = null;
-      if (data.joinedAt) {
-        if (typeof data.joinedAt === "number") {
-          joinedDate = new Date(data.joinedAt * 1000).toISOString();
-        } else {
-          joinedDate = data.joinedAt;
-        }
-      }
-
-      const userData = {
-        id: data.id,
-        uuid: data.uuid,
-        username: data.username || data.title || "Plex User",
-        email: data.email,
-        thumb: data.thumb,
-        joined_at: joinedDate,
-        two_factor_enabled: data.twoFactorEnabled || false,
-        experimental_features: data.experimentalFeatures || false,
-        subscription: {
-          active: data.subscription?.active,
-          plan: data.subscription?.plan,
-          features: data.subscription?.features
-        },
-        profile: {
-          auto_select_audio: data.profile?.autoSelectAudio,
-          default_audio_language: data.profile?.defaultAudioLanguage,
-          default_subtitle_language: data.profile?.defaultSubtitleLanguage
-        },
-        entitlements: data.entitlements || [],
-        roles: data.roles || [],
-        created_at: new Date().toISOString()
-      };
-
-      localStorage.setItem("plex_user_data", JSON.stringify(userData));
-      return userData;
-    } catch (error) {
-      console.error("[PlexAPI] Error fetching Plex user data:", error);
-      return null;
+    if (!response.ok) {
+      throw new Error("Failed to fetch Plex servers");
     }
-  }
 
-  // Fetch Plex servers
-  async function fetchPlexServers(authToken: string) {
-    try {
-      const response = await fetch(
-        "https://plex.tv/api/v2/resources?includeHttps=1&includeRelay=1",
-        {
-          method: "GET",
-          headers: {
-            accept: "application/json",
-            "X-Plex-Token": authToken,
-            "X-Plex-Client-Identifier": CLIENT_IDENTIFIER
-          }
-        }
-      );
+    const servers = await response.json();
+    const ownedServer = servers.find(
+      (s: any) => s.owned && s.provides === "server"
+    );
 
-      if (!response.ok) {
-        throw new Error("Failed to fetch Plex servers");
-      }
-
-      const servers = await response.json();
-      const ownedServer = servers.find(
-        (s: any) => s.owned && s.provides === "server"
-      );
-
-      if (ownedServer) {
-        const connection =
-          ownedServer.connections?.find((c: any) => c.local === false) ||
-          ownedServer.connections?.[0];
-        if (connection) {
-          plexServerUrl.value = connection.uri;
-        }
-        return {
-          name: ownedServer.name,
-          url: plexServerUrl.value,
-          machineIdentifier: ownedServer.clientIdentifier
-        };
-      }
-
-      return null;
-    } catch (error) {
-      console.error("[PlexAPI] Error fetching Plex servers:", error);
-      return null;
-    }
-  }
-
-  // Fetch library sections
-  async function fetchLibrarySections(authToken: string, serverUrl: string) {
-    if (!serverUrl) return [];
-
-    try {
-      const response = await fetch(`${serverUrl}/library/sections`, {
-        method: "GET",
-        headers: {
-          accept: "application/json",
-          "X-Plex-Token": authToken
-        }
-      });
-
-      if (!response.ok) {
-        throw new Error("Failed to fetch library sections");
-      }
-
-      const data = await response.json();
-      return data.MediaContainer?.Directory || [];
-    } catch (error) {
-      console.error("[PlexAPI] Error fetching library sections:", error);
-      return [];
-    }
-  }
-
-  // Fetch library details
-  async function fetchLibraryDetails(
-    authToken: string,
-    serverUrl: string,
-    sectionKey: string
-  ) {
-    if (!serverUrl) return null;
-
-    try {
-      // Fetch all items
-      const allResponse = await fetch(
-        `${serverUrl}/library/sections/${sectionKey}/all`,
-        {
-          method: "GET",
-          headers: {
-            accept: "application/json",
-            "X-Plex-Token": authToken
-          }
-        }
-      );
-
-      if (!allResponse.ok) throw new Error("Failed to fetch all items");
-      const allData = await allResponse.json();
-
-      // Fetch recently added
-      const size = 20;
-      const recentResponse = await fetch(
-        `${serverUrl}/library/sections/${sectionKey}/recentlyAdded?X-Plex-Container-Start=0&X-Plex-Container-Size=${size}`,
-        {
-          method: "GET",
-          headers: {
-            accept: "application/json",
-            "X-Plex-Token": authToken
-          }
-        }
-      );
-
-      if (!recentResponse.ok) throw new Error("Failed to fetch recently added");
-      const recentData = await recentResponse.json();
+    if (ownedServer) {
+      const connection =
+        ownedServer.connections?.find((c: any) => c.local === false) ||
+        ownedServer.connections?.[0];
 
       return {
-        all: allData,
-        recent: recentData,
-        metadata: allData.MediaContainer?.Metadata || [],
-        recentMetadata: recentData.MediaContainer?.Metadata || []
+        name: ownedServer.name,
+        url: connection?.uri,
+        machineIdentifier: ownedServer.clientIdentifier
       };
-    } catch (error) {
-      console.error("[PlexAPI] Error fetching library details:", error);
-      return null;
     }
-  }
 
-  return {
-    plexServerUrl,
-    fetchPlexUserData,
-    fetchPlexServers,
-    fetchLibrarySections,
-    fetchLibraryDetails
-  };
+    return null;
+  } catch (error) {
+    console.error("[PlexAPI] Error fetching Plex servers:", error);
+    return null;
+  }
 }
+
+async function fetchPlexUserData(authToken: string) {
+  try {
+    const url = "https://plex.tv/api/v2/user";
+    const options = {
+      method: "GET",
+      headers: {
+        accept: "application/json",
+        "X-Plex-Product": APP_NAME,
+        "X-Plex-Client-Identifier": CLIENT_IDENTIFIER,
+        "X-Plex-Token": authToken
+      }
+    };
+
+    const response = await fetch(url, options);
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch Plex user info");
+    }
+
+    const data = await response.json();
+
+    // Convert Unix timestamp to ISO date string if needed
+    let joinedDate = null;
+    if (data.joinedAt) {
+      if (typeof data.joinedAt === "number") {
+        joinedDate = new Date(data.joinedAt * 1000).toISOString();
+      } else {
+        joinedDate = data.joinedAt;
+      }
+    }
+
+    const userData = {
+      id: data.id,
+      uuid: data.uuid,
+      username: data.username || data.title || "Plex User",
+      email: data.email,
+      thumb: data.thumb,
+      joined_at: joinedDate,
+      two_factor_enabled: data.twoFactorEnabled || false,
+      experimental_features: data.experimentalFeatures || false,
+      subscription: {
+        active: data.subscription?.active,
+        plan: data.subscription?.plan,
+        features: data.subscription?.features
+      },
+      profile: {
+        auto_select_audio: data.profile?.autoSelectAudio,
+        default_audio_language: data.profile?.defaultAudioLanguage,
+        default_subtitle_language: data.profile?.defaultSubtitleLanguage
+      },
+      entitlements: data.entitlements || [],
+      roles: data.roles || [],
+      created_at: new Date().toISOString()
+    };
+
+    return userData;
+  } catch (error) {
+    console.error("[PlexAPI] Error fetching Plex user data:", error);
+    return null;
+  }
+}
+
+// Fetch library details
+async function fetchLibraryDetails() {
+  try {
+    const url = `${API_HOSTNAME}/api/v2/plex/library`;
+    const options: RequestInit = { credentials: "include" };
+    return await fetch(url, options).then(resp => resp.json());
+  } catch (error) {
+    console.error("[PlexAPI] error fetching library:", error);
+    return null;
+  }
+}
+
+export { fetchPlexServers, fetchPlexUserData, fetchLibraryDetails };

src/composables/usePlexAuth.ts

@@ -9,15 +9,17 @@ export function usePlexAuth() {
   // Generate a PIN for Plex OAuth
   async function generatePlexPin() {
     try {
-      const response = await fetch("https://plex.tv/api/v2/pins?strong=true", {
+      const url = "https://plex.tv/api/v2/pins?strong=true";
+      const options = {
         method: "POST",
         headers: {
           accept: "application/json",
           "X-Plex-Product": APP_NAME,
           "X-Plex-Client-Identifier": CLIENT_IDENTIFIER
         }
-      });
+      };
 
+      const response = await fetch(url, options);
       if (!response.ok) throw new Error("Failed to generate PIN");
       const data = await response.json();
       return { id: data.id, code: data.code };
@@ -30,15 +32,15 @@ export function usePlexAuth() {
   // Check PIN status
   async function checkPin(pinId: number, pinCode: string) {
     try {
-      const response = await fetch(
-        `https://plex.tv/api/v2/pins/${pinId}?code=${pinCode}`,
-        {
-          headers: {
-            accept: "application/json",
-            "X-Plex-Client-Identifier": CLIENT_IDENTIFIER
-          }
+      const url = `https://plex.tv/api/v2/pins/${pinId}?code=${pinCode}`;
+      const options = {
+        headers: {
+          accept: "application/json",
+          "X-Plex-Client-Identifier": CLIENT_IDENTIFIER
         }
-      );
+      };
+
+      const response = await fetch(url, options);
 
       if (!response.ok) return null;
       const data = await response.json();
@@ -93,9 +95,10 @@ export function usePlexAuth() {
   }
 
   // Get cookie
-  function getCookie(name: string): string | null {
+  function getPlexAuthCookie(): string | null {
+    const key = "plex_auth_token";
     const value = `; ${document.cookie}`;
-    const parts = value.split(`; ${name}=`);
+    const parts = value.split(`; ${key}=`);
     if (parts.length === 2) {
       return parts.pop()?.split(";").shift() || null;
     }
@@ -171,9 +174,10 @@ export function usePlexAuth() {
       if (plexPopup.value && plexPopup.value.closed) {
         clearInterval(popupChecker);
         stopPolling();
+
         if (loading.value) {
           loading.value = false;
-          onError("Plex authentication window was closed");
+          // onError("Plex authentication window was closed");
         }
       }
     }, 500);
@@ -190,7 +194,7 @@ export function usePlexAuth() {
   return {
     loading,
     setPlexAuthCookie,
-    getCookie,
+    getPlexAuthCookie,
     openAuthPopup,
     cleanup
   };

src/composables/usePlexLibraries.ts

@@ -1,169 +0,0 @@
-import {
-  processLibraryItem,
-  calculateGenreStats,
-  calculateDuration
-} from "@/utils/plexHelpers";
-
-export function usePlexLibraries() {
-  async function loadLibraries(
-    sections: any[],
-    authToken: string,
-    serverUrl: string,
-    machineIdentifier: string,
-    username: string,
-    fetchLibraryDetailsFn: any
-  ) {
-    // Reset stats
-    const stats = { movies: 0, shows: 0, music: 0, watchtime: 0 };
-    const details: any = {
-      movies: {
-        total: 0,
-        recentlyAdded: [],
-        genres: [],
-        totalDuration: "0 hours"
-      },
-      shows: {
-        total: 0,
-        recentlyAdded: [],
-        genres: [],
-        totalEpisodes: 0,
-        totalDuration: "0 hours"
-      },
-      music: { total: 0, recentlyAdded: [], genres: [], totalTracks: 0 }
-    };
-
-    try {
-      for (const section of sections) {
-        const { type } = section;
-        const { key } = section;
-
-        if (type === "movie") {
-          await processLibrarySection(
-            authToken,
-            serverUrl,
-            machineIdentifier,
-            key,
-            "movies",
-            stats,
-            details,
-            fetchLibraryDetailsFn
-          );
-        } else if (type === "show") {
-          await processLibrarySection(
-            authToken,
-            serverUrl,
-            machineIdentifier,
-            key,
-            "shows",
-            stats,
-            details,
-            fetchLibraryDetailsFn
-          );
-        } else if (type === "artist") {
-          await processLibrarySection(
-            authToken,
-            serverUrl,
-            machineIdentifier,
-            key,
-            "music",
-            stats,
-            details,
-            fetchLibraryDetailsFn
-          );
-        }
-      }
-
-      // Calculate watchtime from Tautulli if username provided
-      if (username) {
-        try {
-          const TAUTULLI_API_KEY = "28494032b47542278fe76c6ccd1f0619";
-          const TAUTULLI_BASE_URL = "http://plex.schleppe:8181/api/v2";
-          const url = `${TAUTULLI_BASE_URL}?apikey=${TAUTULLI_API_KEY}&cmd=get_history&user=${encodeURIComponent(
-            username
-          )}&length=8000`;
-          const response = await fetch(url);
-          if (response.ok) {
-            const data = await response.json();
-            const history = data.response?.data?.data || [];
-            const totalMs = history.reduce(
-              (sum: number, item: any) => sum + (item.duration || 0) * 1000,
-              0
-            );
-            stats.watchtime = Math.round(totalMs / (1000 * 60 * 60));
-          }
-        } catch (error) {
-          console.error("[PlexLibraries] Error fetching watchtime:", error);
-        }
-      }
-
-      return { stats, details };
-    } catch (error) {
-      console.error("[PlexLibraries] Error loading libraries:", error);
-      throw error;
-    }
-  }
-
-  async function processLibrarySection(
-    authToken: string,
-    serverUrl: string,
-    machineIdentifier: string,
-    sectionKey: string,
-    libraryType: string,
-    stats: any,
-    details: any,
-    fetchLibraryDetailsFn: any
-  ) {
-    try {
-      const data = await fetchLibraryDetailsFn(
-        authToken,
-        serverUrl,
-        sectionKey
-      );
-      if (!data) return;
-
-      const totalCount = data.all.MediaContainer?.size || 0;
-
-      // Update stats
-      if (libraryType === "movies") {
-        stats.movies += totalCount;
-      } else if (libraryType === "shows") {
-        stats.shows += totalCount;
-      } else if (libraryType === "music") {
-        stats.music += totalCount;
-      }
-
-      // Process recently added items
-      const recentItems = data.recentMetadata.map((item: any) =>
-        processLibraryItem(
-          item,
-          libraryType,
-          authToken,
-          serverUrl,
-          machineIdentifier
-        )
-      );
-
-      // Calculate stats
-      const genres = calculateGenreStats(data.metadata);
-      const durations = calculateDuration(data.metadata, libraryType);
-
-      // Update library details
-      details[libraryType] = {
-        total: totalCount,
-        recentlyAdded: recentItems,
-        genres,
-        totalDuration: durations.totalDuration,
-        ...(libraryType === "shows" && {
-          totalEpisodes: durations.totalEpisodes
-        }),
-        ...(libraryType === "music" && { totalTracks: durations.totalTracks })
-      };
-    } catch (error) {
-      console.error(`[PlexLibraries] Error processing ${libraryType}:`, error);
-    }
-  }
-
-  return {
-    loadLibraries
-  };
-}

src/composables/useTautulliStats.ts

@@ -1,12 +1,12 @@
-const TAUTULLI_API_KEY = "28494032b47542278fe76c6ccd1f0619";
-const TAUTULLI_BASE_URL = "http://plex.schleppe:8181/api/v2";
+import { API_HOSTNAME } from "../api";
 
-interface WatchStats {
+export interface WatchStats {
   totalHours: number;
   totalPlays: number;
   moviePlays: number;
   episodePlays: number;
   musicPlays: number;
+  lastWatched: WatchContent[];
 }
 
 interface DayStats {
@@ -29,6 +29,13 @@ interface HomeStatItem {
   media_type?: string;
 }
 
+export interface WatchContent {
+  title: string;
+  plays: number;
+  duration: number;
+  type: string;
+}
+
 interface PlaysGraphData {
   categories: string[];
   series: {
@@ -37,310 +44,256 @@ interface PlaysGraphData {
   }[];
 }
 
-export function useTautulliStats() {
-  // Helper function to make Tautulli API calls
-  async function tautulliRequest(
-    cmd: string,
-    params: Record<string, any> = {}
-  ) {
-    try {
-      const queryParams = new URLSearchParams({
-        apikey: TAUTULLI_API_KEY,
-        cmd,
-        ...params
-      });
+export async function tautulliRequest(
+  resource: string,
+  params: Record<string, any> = {}
+) {
+  try {
+    const queryParams = new URLSearchParams(params);
+    const url = new URL(
+      `/api/v1/user/stats/${resource}?${queryParams}`,
+      API_HOSTNAME
+    );
+    const options: RequestInit = {
+      headers: {
+        "Content-Type": "application/json"
+      },
+      credentials: "include"
+    };
 
-      const url = `${TAUTULLI_BASE_URL}?${queryParams}`;
-      const response = await fetch(url);
+    const resp = await fetch(url, options);
 
-      if (!response.ok) {
-        throw new Error(`Tautulli API request failed: ${response.statusText}`);
-      }
-
-      const data = await response.json();
-      if (data.response?.result !== "success") {
-        throw new Error(data.response?.message || "Unknown API error");
-      }
-
-      return data.response.data;
-    } catch (error) {
-      console.error(`[Tautulli] Error with ${cmd}:`, error);
-      throw error;
+    if (!resp.ok) {
+      throw new Error(`Tautulli API request failed: ${resp.statusText}`);
     }
-  }
 
-  // Fetch home statistics (pre-aggregated by Tautulli!)
-  async function fetchHomeStats(
-    userId?: number,
-    timeRange = 30,
-    statsType: "plays" | "duration" = "plays"
-  ): Promise<WatchStats> {
-    try {
-      const params: Record<string, any> = {
-        time_range: timeRange,
-        stats_type: statsType,
-        grouping: 0
-      };
-
-      if (userId) {
-        params.user_id = userId;
-      }
-
-      const stats = await tautulliRequest("get_home_stats", params);
-
-      // Extract stats from the response
-      let totalPlays = 0;
-      let totalHours = 0;
-      let moviePlays = 0;
-      let episodePlays = 0;
-      let musicPlays = 0;
-
-      // Find the relevant stat sections
-      const topMovies = stats.find((s: any) => s.stat_id === "top_movies");
-      const topTV = stats.find((s: any) => s.stat_id === "top_tv");
-      const topMusic = stats.find((s: any) => s.stat_id === "top_music");
-
-      if (topMovies?.rows) {
-        moviePlays = topMovies.rows.reduce(
-          (sum: number, item: any) => sum + (item.total_plays || 0),
-          0
-        );
-      }
-
-      if (topTV?.rows) {
-        episodePlays = topTV.rows.reduce(
-          (sum: number, item: any) => sum + (item.total_plays || 0),
-          0
-        );
-      }
-
-      if (topMusic?.rows) {
-        musicPlays = topMusic.rows.reduce(
-          (sum: number, item: any) => sum + (item.total_plays || 0),
-          0
-        );
-      }
-
-      totalPlays = moviePlays + episodePlays + musicPlays;
-
-      // Calculate total hours from duration
-      if (statsType === "duration") {
-        const totalDuration = [topMovies, topTV, topMusic].reduce(
-          (sum, stat) => {
-            if (!stat?.rows) return sum;
-            return (
-              sum +
-              stat.rows.reduce(
-                (s: number, item: any) => s + (item.total_duration || 0),
-                0
-              )
-            );
-          },
-          0
-        );
-        totalHours = Math.round(totalDuration / 3600); // Convert seconds to hours
-      }
-
-      return {
-        totalHours,
-        totalPlays,
-        moviePlays,
-        episodePlays,
-        musicPlays
-      };
-    } catch (error) {
-      console.error("[Tautulli] Error fetching home stats:", error);
-      return {
-        totalHours: 0,
-        totalPlays: 0,
-        moviePlays: 0,
-        episodePlays: 0,
-        musicPlays: 0
-      };
+    const response = await resp.json();
+    if (response?.success !== true) {
+      throw new Error(response?.message || "Unknown API error");
     }
+
+    return response.data;
+  } catch (error) {
+    console.error(`[Tautulli] Error with ${resource}:`, error);
+    throw error;
   }
+}
 
-  // Fetch plays by date (already aggregated by Tautulli!)
-  async function fetchPlaysByDate(
-    timeRange = 30,
-    yAxis: "plays" | "duration" = "plays",
-    userId?: number
-  ): Promise<DayStats[]> {
-    try {
-      const params: Record<string, any> = {
-        time_range: timeRange,
-        y_axis: yAxis,
-        grouping: 0
-      };
+// Fetch home statistics (pre-aggregated by Tautulli!)
+export async function fetchHomeStats(
+  timeRange = 30,
+  statsType: "plays" | "duration" = "plays"
+): Promise<WatchStats> {
+  try {
+    const params: Record<string, any> = {
+      days: timeRange,
+      type: statsType,
+      grouping: 0
+    };
 
-      if (userId) {
-        params.user_id = userId;
-      }
+    const stats = await tautulliRequest("home_stats", params);
 
-      const data: PlaysGraphData = await tautulliRequest(
-        "get_plays_by_date",
-        params
+    // Extract stats from the response
+    let totalPlays = 0;
+    let totalHours = 0;
+    let moviePlays = 0;
+    let episodePlays = 0;
+    let musicPlays = 0;
+
+    // Find the relevant stat sections
+    const topMovies = stats.find((s: any) => s.stat_id === "top_movies");
+    const topTV = stats.find((s: any) => s.stat_id === "top_tv");
+    const topMusic = stats.find((s: any) => s.stat_id === "top_music");
+
+    if (topMovies?.rows) {
+      moviePlays = topMovies.rows.reduce(
+        (sum: number, item: any) => sum + (item.total_plays || 0),
+        0
       );
-
-      // Sum all series data for each date
-      return data.categories.map((date, index) => {
-        const totalValue = data.series
-          .filter(s => s.name !== "Total")
-          .reduce((sum, series) => sum + (series.data[index] || 0), 0);
-
-        return {
-          date,
-          plays: yAxis === "plays" ? totalValue : 0,
-          duration: yAxis === "duration" ? totalValue : 0
-        };
-      });
-    } catch (error) {
-      console.error("[Tautulli] Error fetching plays by date:", error);
-      return [];
     }
-  }
 
-  // Fetch plays by day of week (already aggregated!)
-  async function fetchPlaysByDayOfWeek(
-    timeRange = 30,
-    yAxis: "plays" | "duration" = "plays",
-    userId?: number
-  ): Promise<{
-    labels: string[];
-    movies: number[];
-    episodes: number[];
-    music: number[];
-  }> {
-    try {
-      const params: Record<string, any> = {
-        time_range: timeRange,
-        y_axis: yAxis,
-        grouping: 0
-      };
-
-      if (userId) {
-        params.user_id = userId;
-      }
-
-      const data: PlaysGraphData = await tautulliRequest(
-        "get_plays_by_dayofweek",
-        params
+    if (topTV?.rows) {
+      episodePlays = topTV.rows.reduce(
+        (sum: number, item: any) => sum + (item.total_plays || 0),
+        0
       );
-
-      // Map series names to our expected format
-      const movies =
-        data.series.find(s => s.name === "Movies")?.data ||
-        new Array(7).fill(0);
-      const episodes =
-        data.series.find(s => s.name === "TV")?.data || new Array(7).fill(0);
-      const music =
-        data.series.find(s => s.name === "Music")?.data || new Array(7).fill(0);
-
-      return {
-        labels: data.categories,
-        movies,
-        episodes,
-        music
-      };
-    } catch (error) {
-      console.error("[Tautulli] Error fetching plays by day of week:", error);
-      return {
-        labels: [
-          "Sunday",
-          "Monday",
-          "Tuesday",
-          "Wednesday",
-          "Thursday",
-          "Friday",
-          "Saturday"
-        ],
-        movies: new Array(7).fill(0),
-        episodes: new Array(7).fill(0),
-        music: new Array(7).fill(0)
-      };
     }
-  }
 
-  // Fetch plays by hour of day (already aggregated!)
-  async function fetchPlaysByHourOfDay(
-    timeRange = 30,
-    yAxis: "plays" | "duration" = "plays",
-    userId?: number
-  ): Promise<{ labels: string[]; data: number[] }> {
-    try {
-      const params: Record<string, any> = {
-        time_range: timeRange,
-        y_axis: yAxis,
-        grouping: 0
-      };
-
-      if (userId) {
-        params.user_id = userId;
-      }
-
-      const data: PlaysGraphData = await tautulliRequest(
-        "get_plays_by_hourofday",
-        params
+    if (topMusic?.rows) {
+      musicPlays = topMusic.rows.reduce(
+        (sum: number, item: any) => sum + (item.total_plays || 0),
+        0
       );
-
-      // Sum all series data for each hour
-      const hourlyData = data.categories.map((hour, index) =>
-        data.series.reduce((sum, series) => sum + (series.data[index] || 0), 0)
-      );
-
-      return {
-        labels: data.categories.map(h => `${h}:00`),
-        data: hourlyData
-      };
-    } catch (error) {
-      console.error("[Tautulli] Error fetching plays by hour:", error);
-      return {
-        labels: Array.from({ length: 24 }, (_, i) => `${i}:00`),
-        data: new Array(24).fill(0)
-      };
     }
-  }
 
-  // Fetch top watched content from home stats
-  async function fetchTopContent(timeRange = 30, limit = 10, userId?: number) {
-    try {
-      const params: Record<string, any> = {
-        time_range: timeRange,
-        stats_type: "plays",
-        stats_count: limit,
-        grouping: 0
-      };
+    totalPlays = moviePlays + episodePlays + musicPlays;
 
-      if (userId) {
-        params.user_id = userId;
-      }
+    // Calculate total hours from duration
+    if (statsType === "duration") {
+      const totalDuration = [topMovies, topTV, topMusic].reduce((sum, stat) => {
+        if (!stat?.rows) return sum;
+        return (
+          sum +
+          stat.rows.reduce(
+            (s: number, item: any) => s + (item.total_duration || 0),
+            0
+          )
+        );
+      }, 0);
+      totalHours = Math.round(totalDuration / 3600); // Convert seconds to hours
+    }
 
-      const stats = await tautulliRequest("get_home_stats", params);
-
-      // Get "last_watched" stat which contains recent items
-      const lastWatched = stats.find((s: any) => s.stat_id === "last_watched");
-
-      if (!lastWatched?.rows) {
-        return [];
-      }
-
-      return lastWatched.rows.slice(0, limit).map((item: any) => ({
+    // Get "last_watched" stat which contains recent items
+    const limit = 12;
+    const lastWatched = stats
+      .find((s: any) => s.stat_id === "last_watched")
+      .rows.slice(0, limit)
+      .map((item: any) => ({
         title: item.title || item.full_title || "Unknown",
         plays: item.total_plays || 0,
         duration: Math.round((item.total_duration || 0) / 60), // Convert to minutes
         type: item.media_type || "unknown"
       }));
-    } catch (error) {
-      console.error("[Tautulli] Error fetching top content:", error);
-      return [];
-    }
-  }
 
-  return {
-    fetchHomeStats,
-    fetchPlaysByDate,
-    fetchPlaysByDayOfWeek,
-    fetchPlaysByHourOfDay,
-    fetchTopContent
-  };
+    return {
+      totalHours,
+      totalPlays,
+      moviePlays,
+      episodePlays,
+      musicPlays,
+      lastWatched
+    };
+  } catch (error) {
+    console.error("[Tautulli] Error fetching home stats:", error);
+    return {
+      totalHours: 0,
+      totalPlays: 0,
+      moviePlays: 0,
+      episodePlays: 0,
+      musicPlays: 0,
+      lastWatched: []
+    };
+  }
+}
+
+// Fetch plays by date (already aggregated by Tautulli!)
+export async function fetchPlaysByDate(
+  timeRange = 30,
+  yAxis: "plays" | "duration" = "plays"
+): Promise<DayStats[]> {
+  try {
+    const params: Record<string, any> = {
+      days: timeRange,
+      y_axis: yAxis,
+      grouping: 0
+    };
+
+    const data: PlaysGraphData = await tautulliRequest("plays_by_date", params);
+
+    // Sum all series data for each date
+    return data.categories.map((date, index) => {
+      const totalValue = data.series
+        .filter(s => s.name !== "Total")
+        .reduce((sum, series) => sum + (series.data[index] || 0), 0);
+
+      return {
+        date,
+        plays: yAxis === "plays" ? totalValue : 0,
+        duration: yAxis === "duration" ? totalValue : 0
+      };
+    });
+  } catch (error) {
+    console.error("[Tautulli] Error fetching plays by date:", error);
+    return [];
+  }
+}
+
+// Fetch plays by day of week (already aggregated!)
+export async function fetchPlaysByDayOfWeek(
+  timeRange = 30,
+  yAxis: "plays" | "duration" = "plays"
+): Promise<{
+  labels: string[];
+  movies: number[];
+  episodes: number[];
+  music: number[];
+}> {
+  try {
+    const params: Record<string, any> = {
+      days: timeRange,
+      y_axis: yAxis,
+      grouping: 0
+    };
+
+    const data: PlaysGraphData = await tautulliRequest(
+      "plays_by_dayofweek",
+      params
+    );
+
+    // Map series names to our expected format
+    const movies =
+      data.series.find(s => s.name === "Movies")?.data || new Array(7).fill(0);
+    const episodes =
+      data.series.find(s => s.name === "TV")?.data || new Array(7).fill(0);
+    const music =
+      data.series.find(s => s.name === "Music")?.data || new Array(7).fill(0);
+
+    return {
+      labels: data.categories,
+      movies,
+      episodes,
+      music
+    };
+  } catch (error) {
+    console.error("[Tautulli] Error fetching plays by day of week:", error);
+    return {
+      labels: [
+        "Sunday",
+        "Monday",
+        "Tuesday",
+        "Wednesday",
+        "Thursday",
+        "Friday",
+        "Saturday"
+      ],
+      movies: new Array(7).fill(0),
+      episodes: new Array(7).fill(0),
+      music: new Array(7).fill(0)
+    };
+  }
+}
+
+// Fetch plays by hour of day (already aggregated!)
+export async function fetchPlaysByHourOfDay(
+  timeRange = 30,
+  yAxis: "plays" | "duration" = "plays"
+): Promise<{ labels: string[]; data: number[] }> {
+  try {
+    const params: Record<string, any> = {
+      days: timeRange,
+      y_axis: yAxis,
+      grouping: 0
+    };
+
+    const data: PlaysGraphData = await tautulliRequest(
+      "plays_by_hourofday",
+      params
+    );
+
+    // Sum all series data for each hour
+    const hourlyData = data.categories.map((hour, index) =>
+      data.series.reduce((sum, series) => sum + (series.data[index] || 0), 0)
+    );
+
+    return {
+      labels: data.categories.map(h => `${h}:00`),
+      data: hourlyData
+    };
+  } catch (error) {
+    console.error("[Tautulli] Error fetching plays by hour:", error);
+    return {
+      labels: Array.from({ length: 24 }, (_, i) => `${i}:00`),
+      data: new Array(24).fill(0)
+    };
+  }
 }

src/composables/useTheme.ts

@@ -0,0 +1,56 @@
+import { ref, computed } from "vue";
+
+type Theme = "light" | "dark" | "auto";
+
+const currentTheme = ref<Theme>("auto");
+
+function systemDarkModeEnabled(): boolean {
+  const computedStyle = window.getComputedStyle(document.body);
+  if (computedStyle?.colorScheme != null) {
+    return computedStyle.colorScheme.includes("dark");
+  }
+  return false;
+}
+
+function applyTheme(theme: Theme) {
+  if (theme === "auto") {
+    const systemDark = systemDarkModeEnabled();
+    document.body.className = systemDark ? "dark" : "light";
+  } else {
+    document.body.className = theme;
+  }
+}
+
+export function useTheme() {
+  const savedTheme = computed(
+    () => (localStorage.getItem("theme-preference") as Theme) || "auto"
+  );
+
+  function initTheme() {
+    const theme = savedTheme.value;
+    currentTheme.value = theme;
+    applyTheme(theme);
+
+    // Listen for system theme changes when in auto mode
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    mediaQuery.addEventListener("change", e => {
+      const currentSetting = localStorage.getItem("theme-preference") as Theme;
+      if (currentSetting === "auto") {
+        document.body.className = e.matches ? "dark" : "light";
+      }
+    });
+  }
+
+  function setTheme(theme: Theme) {
+    currentTheme.value = theme;
+    localStorage.setItem("theme-preference", theme);
+    applyTheme(theme);
+  }
+
+  return {
+    currentTheme,
+    savedTheme,
+    initTheme,
+    setTheme
+  };
+}

src/icons/IconCalendar.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 768">
+    <path d="M0 32h160v64h-160v-64z" />
+    <path d="M288 32h192v64h-192v-64z" />
+    <path d="M608 32h160v64h-160v-64z" />
+    <path d="M192 0h64v224h-64v-224z" />
+    <path d="M512 0h64v224h-64v-224z" />
+    <path d="M288 128h192v64h-192v-64z" />
+    <path
+      d="M704 128h-96v64h96v512h-640v-512h96v-64h-96c-35.3 0-64 28.7-64 64v512c0 35.3 28.7 64 64 64h640c35.3 0 64-28.7 64-64v-512c0-35.3-28.7-64-64-64z"
+    />
+    <path
+      d="M128 304v320c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-320c0-8.8-7.2-16-16-16h-480c-8.8 0-16 7.2-16 16zM160 480h128v128h-128v-128zM448 480v128h-128v-128h128zM320 448v-128h128v128h-128zM480 608v-128h128v128h-128zM608 448h-128v-128h128v128zM288 320v128h-128v-128h128z"
+    />
+  </svg>
+</template>

src/icons/IconCompass.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 768">
+    <path
+      d="M737.8 234.5c-19.3-45.7-47-86.8-82.3-122-35.3-35.3-76.3-62.9-122-82.3-47.4-20-97.7-30.2-149.5-30.2s-102.1 10.2-149.5 30.2c-45.7 19.3-86.8 47-122 82.3-35.3 35.3-62.9 76.3-82.3 122-20 47.4-30.2 97.7-30.2 149.5s10.2 102.1 30.2 149.5c19.3 45.7 47 86.8 82.3 122 35.3 35.3 76.3 62.9 122 82.3 47.4 20 97.7 30.2 149.5 30.2s102.1-10.2 149.5-30.2c45.7-19.3 86.8-47 122-82.3 35.3-35.3 62.9-76.3 82.3-122 20-47.4 30.2-97.7 30.2-149.5s-10.2-102.1-30.2-149.5zM384 704c-176.4 0-320-143.6-320-320s143.6-320 320-320c176.4 0 320 143.6 320 320s-143.6 320-320 320z"
+    />
+    <path
+      d="M384 96c-76.9 0-149.3 30-203.6 84.4s-84.4 126.7-84.4 203.6 30 149.3 84.4 203.6c54.3 54.4 126.7 84.4 203.6 84.4s149.3-30 203.6-84.4c54.4-54.3 84.4-126.7 84.4-203.6s-30-149.3-84.4-203.6c-54.3-54.4-126.7-84.4-203.6-84.4zM384 640c-141.2 0-256-114.8-256-256s114.8-256 256-256c141.2 0 256 114.8 256 256s-114.8 256-256 256z"
+    />
+    <path
+      d="M520.8 225.7l-192 96c-3.1 1.5-5.6 4.1-7.2 7.2l-96 192c-3.1 6.2-1.9 13.6 3 18.5 3.1 3.1 7.2 4.7 11.3 4.7 2.4 0 4.9-0.6 7.2-1.7l192-96c3.1-1.5 5.6-4.1 7.2-7.2l96-192c3.1-6.2 1.9-13.6-3-18.5s-12.3-6.1-18.5-3zM340.4 363l64.6 64.6-129.2 64.6 64.6-129.2zM427.6 405l-64.6-64.6 129.2-64.6-64.6 129.2z"
+    />
+  </svg>
+</template>

src/icons/IconCookie.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg
+    id="icon-cookie"
+    viewBox="0 0 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    style="transition-duration: 0s"
+    @click="$emit('click')"
+    @keydown="event => $emit('keydown', event)"
+  >
+    <circle cx="10" cy="21" r="2" fill="inherit" />
+    <circle cx="23" cy="20" r="2" fill="inherit" />
+    <circle cx="13" cy="10" r="2" fill="inherit" />
+    <circle cx="14" cy="15" r="1" fill="inherit" />
+    <circle cx="23" cy="5" r="2" fill="inherit" />
+    <circle cx="29" cy="3" r="1" fill="inherit" />
+    <circle cx="16" cy="23" r="1" fill="inherit" />
+    <path
+      fill="inherit"
+      d="M16 30C8.3 30 2 23.7 2 16S8.3 2 16 2c0.1 0 0.2 0 0.3 0l1.4 0.1-0.3 1.2c-0.1 0.4-0.2 0.9-0.2 1.3 0 2.8 2.2 5 5 5 1 0 2-0.3 2.9-0.9l1.3 1.5c-0.4 0.4-0.6 0.9-0.6 1.4 0 1.3 1.3 2.4 2.7 1.9l1.2-0.5 0.2 1.3C30 14.9 30 15.5 30 16c0 7.7-6.3 14-14 14zM15.3 4C9 4.4 4 9.6 4 16c0 6.6 5.4 12 12 12s12-5.4 12-12c0-0.1 0-0.3 0-0.4-2.3 0.1-4.2-1.7-4.2-4 0-0.1 0-0.1 0-0.2-0.5 0.1-1 0.2-1.6 0.2-3.9 0-7-3.1-7-7 0-0.2 0-0.4 0.1-0.6z"
+    />
+  </svg>
+</template>

src/icons/IconDatabase.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    id="icon-database"
+    viewBox="0 0 24 24"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    style="transition-duration: 0s"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    @click="$emit('click')"
+    @keydown="event => $emit('keydown', event)"
+  >
+    <path
+      d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
+    />
+  </svg>
+</template>

src/icons/IconDiscover.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    width="100%"
+    height="100%"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M23.0562 7.3281C22.4531 5.9 21.5875 4.6156 20.4844 3.5156 19.3812 2.4125 18.1 1.55 16.6719 0.9438 15.1906 0.3187 13.6187 0 12 0S8.8094 0.3187 7.3281 0.9438C5.9 1.5469 4.6156 2.4125 3.5156 3.5156 2.4125 4.6188 1.55 5.9 0.9438 7.3281 0.3188 8.8094 0 10.3813 0 12s0.3188 3.1906 0.9438 4.6719c0.6031 1.4281 1.4687 2.7125 2.5718 3.8125C4.6188 21.5875 5.9 22.45 7.3281 23.0562 8.8094 23.6813 10.3813 24 12 24s3.1906-0.3187 4.6719-0.9438c1.4281-0.6031 2.7125-1.4687 3.8125-2.5718 1.1031-1.1032 1.9656-2.3844 2.5718-3.8125C23.6813 15.1906 24 13.6187 24 12s-0.3187-3.1906-0.9438-4.6719zM12 22C6.4875 22 2 17.5125 2 12S6.4875 2 12 2 22 6.4875 22 12 17.5125 22 12 22z"
+    />
+    <path
+      d="M12 3C9.5969 3 7.3344 3.9375 5.6375 5.6375S3 9.5969 3 12s0.9375 4.6656 2.6375 6.3625C7.3344 20.0625 9.5969 21 12 21s4.6656-0.9375 6.3625-2.6375C20.0625 16.6656 21 14.4031 21 12s-0.9375-4.6656-2.6375-6.3625C16.6656 3.9375 14.4031 3 12 3zM12 20c-4.4125 0-8-3.5875-8-8s3.5875-8 8-8 8 3.5875 8 8-3.5875 8-8 8z"
+    />
+    <path
+      d="M16.275 7.0531l-6 3c-0.0969 0.0469-0.175 0.1281-0.225 0.225l-3 6c-0.0969 0.1938-0.0594 0.425 0.0937 0.5782 0.0969 0.0968 0.2251 0.1468 0.3532 0.1468 0.075 0 0.1531-0.0187 0.225-0.0531l6-3c0.0969-0.0469 0.175-0.1281 0.225-0.225l3-6c0.0969-0.1938 0.0594-0.425-0.0938-0.5781C16.7 6.9937 16.4688 6.9563 16.275 7.0531zM10.6375 11.3438l2.0188 2.0187-4.0376 2.0187zM13.3625 12.6563l-2.0187-2.0188 4.0375-2.0187z"
+    />
+  </svg>
+</template>

src/icons/IconPlex.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M16 2c-7.732 0-14 6.268-14 14s6.268 14 14 14 14-6.268 14-14-6.268-14-14-14zM16 28c-6.627 0-12-5.373-12-12s5.373-12 12-12c6.627 0 12 5.373 12 12s-5.373 12-12 12z"
+    />
+    <path
+      d="M13.333 10.667c-0.368 0-0.667 0.299-0.667 0.667v9.333c0 0.245 0.135 0.469 0.349 0.585 0.215 0.117 0.477 0.104 0.683-0.032l6.667-4.667c0.188-0.131 0.301-0.349 0.301-0.583s-0.113-0.452-0.301-0.583l-6.667-4.667c-0.109-0.076-0.239-0.115-0.365-0.115zM14.667 13.115l4.448 3.115-4.448 3.115v-6.229z"
+    />
+  </svg>
+</template>

src/icons/IconServer.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M23 10V6c0-0.4719-0.1656-0.9094-0.4406-1.2531v0l-3.6688-4.5594C18.7969 0.0687 18.6531 0 18.5 0h-13C5.35 0 5.2062 0.0687 5.1094 0.1875L1.4406 4.75C1.1656 5.0906 1 5.5281 1 6v4c0 0.5969 0.2625 1.1344 0.6781 1.5C1.2625 11.8656 1 12.4031 1 13v2c0 0.5969 0.2625 1.1344 0.6781 1.5C1.2625 16.8656 1 17.4031 1 18v4c0 1.1031 0.8969 2 2 2h18c1.1031 0 2-0.8969 2-2v-4c0-0.5969-0.2625-1.1344-0.6781-1.5C22.7375 16.1344 23 15.5969 23 15v-2c0-0.5969-0.2625-1.1344-0.6781-1.5C22.7375 11.1344 23 10.5969 23 10zM5.7406 1h12.5219l2.4125 3H3.325zM21 22H3l-31e-4-4c0 0 0 0 31e-4 0v-1h18zM21.0031 15c0 0-31e-4 0 0 0L21 16H3v-1l-31e-4-2c0 0 0 0 31e-4 0v-1h18v1zM3 11V6h18v5z"
+    />
+    <rect width="3" height="1.000008" x="16.999992" y="7.999992" />
+    <rect width="1.000008" height="1.000008" x="15" y="7.999992" />
+    <rect width="3" height="1.000008" x="16.999992" y="13.000008" />
+    <rect width="1.000008" height="1.000008" x="15" y="13.000008" />
+    <rect width="1.000008" height="1.000008" x="4.000008" y="18" />
+    <rect width="1.000008" height="1.000008" x="6" y="18" />
+    <rect width="1.000008" height="1.000008" x="7.999992" y="18" />
+    <rect width="1.000008" height="1.000008" x="10.000008" y="18" />
+    <rect width="3" height="1.000008" x="16.999992" y="19.999992" />
+    <rect width="1.000008" height="1.000008" x="15" y="19.999992" />
+  </svg>
+</template>

src/icons/IconSpotlights.vue

@@ -0,0 +1,6 @@
+<template>
+<!-- generated by icomoon.io - licensed Lindua icon -->
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
+    <path d="M23.4406 17.9219c-0.1812-0.2375-0.4-0.4563-0.6562-0.6563l-7.2781-6.1562 4.4031-9.6969c0.2031-0.4437 0.0531-0.9687-0.35-1.2437-0.4031-0.2719-0.9469-0.2157-1.2844 0.1375l-6.9375 7.275-8.6906-7.3438c-0.3781-0.3187-0.9313-0.3156-1.3031 94e-4-0.3719 0.325-0.4532 0.8719-0.1875 1.2906l6.3718 10.0469-6.6874 7.0125c-0.1032 0.1031-0.1969 0.2125-0.2844 0.325C0.1938 19.4 0 19.9469 0 20.5c0 0.5532 0.1938 1.1 0.5594 1.5781 0.3094 0.4094 0.7407 0.7657 1.275 1.0625C2.8282 23.6938 4.1313 24 5.5001 24c1.3687 0 2.6718-0.3062 3.6687-0.8594 0.5344-0.2968 0.9625-0.6562 1.275-1.0625 0.1281-0.1687 0.2375-0.3499 0.3219-0.5343v0l1.2843-2.8282 1.3063 2.0625c0.0593 0.1032 0.1281 0.2032 0.2 0.3 0.3093 0.4094 0.7406 0.7657 1.275 1.0625C15.8281 22.6938 17.1313 23 18.5 23c1.3688 0 2.6719-0.3062 3.6688-0.8594 0.5343-0.2969 0.9625-0.6562 1.275-1.0625 0.3656-0.4781 0.5593-1.025 0.5593-1.5781s-0.1968-1.1-0.5625-1.5781zM9.9844 18.4313C9.75 18.2219 9.475 18.0312 9.1688 17.8594 8.1719 17.3063 6.8688 17 5.5 17c-0.1281 0-0.2562 31e-4-0.3812 94e-4l3.5125-3.6844 2.1406 3.375zM11.2656 15.6125 9.3438 12.5813l2.8343-2.975 1.3125 1.1093zM13.9188 9.7688l-1.05-0.8876 2.775-2.9125zM6.3438 5.9812 9.9562 9.0375 8.95 10.0938zM5.5 22C3.3969 22 2 21.0969 2 20.5c0-0.1375 0.075-0.2906 0.2125-0.4469v0l0.0719-0.075C2.7938 19.4844 3.9563 19 5.5 19 7.6031 19 9 19.9031 9 20.5c0 0.0594-0.0125 0.1188-0.0406 0.1813l-0.0156 0.0375C8.6656 21.2937 7.3594 22 5.5 22zM14.6469 13.0031 18.2 16.0062c-1.2563 0.0407-2.4438 0.3407-3.3656 0.8532-0.4282 0.2375-0.7875 0.5125-1.0719 0.8219l-0.7219-1.1375zM18.5 21c-1.7094 0-2.9531-0.5969-3.3594-1.1406l-0.0781-0.1219c-0.0437-0.0813-0.0656-0.1625-0.0656-0.2375 0-0.5969 1.3969-1.5 3.5-1.5s3.5 0.9031 3.5 1.5S20.6031 21 18.5 21z" />
+</svg>
+</template>

src/icons/IconStar.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 768">
+    <path
+      d="M767 312c-3.1-12-12.8-21.1-25-23.4l-231.1-44.3-97.5-225c-5.1-11.7-16.6-19.3-29.4-19.3s-24.3 7.6-29.4 19.3l-97.5 225-231.1 44.3c-12.2 2.3-21.9 11.4-25 23.4s1 24.7 10.5 32.6l176.6 147.1-59.1 236.5c-3.1 12.4 1.5 25.5 11.7 33.3 10.2 7.7 24.1 8.6 35.2 2.3l208.1-118.9 208.1 118.9c4.9 2.8 10.4 4.2 15.9 4.2 6.8 0 13.6-2.2 19.3-6.5 10.2-7.7 14.8-20.8 11.7-33.3l-59.1-236.5 176.6-147.1c9.5-7.9 13.6-20.6 10.5-32.6zM523.5 455.4c-9.4 7.9-13.5 20.4-10.6 32.3l45.9 183.3-158.9-90.8c-4.9-2.8-10.4-4.2-15.9-4.2s-11 1.4-15.9 4.2l-158.9 90.8 45.8-183.2c3-11.9-1.1-24.5-10.6-32.3l-140-116.8 181.3-34.8c10.4-2 19.1-9 23.3-18.7l75-172.7 74.9 172.8c4.2 9.7 12.9 16.7 23.3 18.7l181.3 34.8-140 116.6z"
+    />
+  </svg>
+</template>

src/icons/IconSync.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <polyline points="23 4 23 10 17 10"></polyline>
+    <polyline points="1 20 1 14 7 14"></polyline>
+    <path
+      d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"
+    ></path>
+  </svg>
+</template>

src/icons/IconTheater.vue

@@ -0,0 +1,10 @@
+<template>
+<!-- generated by icomoon.io - licensed Lindua icon -->
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
+    <path d="M22.6031 5.2031c-0.25-0.1875-0.575-0.25-0.8781-0.1625-2.8625 0.8188-5.3187 1.1125-7.8875 0.8875 0.0969-1.0625 0.15-2.2062 0.1625-3.4187 31e-4-0.1625-0.075-0.3156-0.2063-0.4094-0.1312-0.0937-0.3-0.1219-0.4531-0.0687-3.875 1.2906-7.8062 1.2906-11.6843 0-0.1532-0.05-0.3219-0.025-0.4532 0.0687C1.0719 2.1937 0.9969 2.3438 1 2.5062c0.0469 4.4063 0.6375 7.8 1.7594 10.0875 0.5594 1.1407 1.2531 2.0094 2.0625 2.5782C5.6031 15.7219 6.5063 16 7.5 16c0.5313 0 1.0375-0.0813 1.5125-0.2375 0.2344 0.8531 0.5125 1.6156 0.8344 2.2906 0.6219 1.3156 1.425 2.3156 2.3844 2.975C13.1719 21.6719 14.2719 22 15.5 22s2.3281-0.3281 3.2688-0.9719c0.9593-0.6594 1.7625-1.6594 2.3843-2.975C22.3969 15.4312 23 11.4875 23 6c0-0.3125-0.1469-0.6094-0.3969-0.7969zM7.5 15c-0.7844 0-1.4937-0.2187-2.1031-0.6469-0.6719-0.4718-1.2563-1.2125-1.7406-2.2-0.9969-2.0344-1.5469-5.0468-1.6438-8.9656C3.8375 3.725 5.6781 4 7.5 4s3.6625-0.275 5.4875-0.8156c-0.0219 0.9219-0.0719 1.8-0.1437 2.625-1.1407-0.1563-2.3157-0.4156-3.5688-0.7719C8.9719 4.95 8.65 5.0125 8.3969 5.2 8.1469 5.3875 8 5.6844 8 5.9969 8 7.4656 8.0438 8.825 8.1312 10.0781 7.9313 10.025 7.7187 9.9969 7.5 9.9969c-1.3781 0-2.5 1.1219-2.5 2.5 0 0.275 0.225 0.5 0.5 0.5h2.9406c0.0938 0.6312 0.2032 1.225 0.3281 1.7875C8.375 14.9281 7.95 15 7.5 15zM8.3094 12H6.0875c0.2062-0.5812 0.7625-1 1.4156-1 0.2625 0 0.5063 0.0687 0.7219 0.1844 0.0219 0.2781 0.0531 0.55 0.0844 0.8156zM19.3469 17.1969C18.4406 19.1094 17.2188 20 15.5 20c-1.7187 0-2.9406-0.8906-3.8469-2.8031-1.0031-2.1157-1.5531-5.4407-1.6406-9.8938C11.9656 7.775 13.7375 8 15.5 8s3.5344-0.225 5.4875-0.6969c-0.0875 4.4532-0.6406 7.7782-1.6406 9.8938z" />
+    <path d="M17.5 15h-4c-0.275 0-0.5 0.225-0.5 0.5 0 1.3781 1.1219 2.5 2.5 2.5s2.5-1.1219 2.5-2.5c0-0.275-0.225-0.5-0.5-0.5zM15.5 17c-0.6531 0-1.2094-0.4188-1.4156-1h2.8281c-0.2031 0.5812-0.7594 1-1.4125 1z" />
+    <path d="M14.5 12.2062 15.2063 11.5l-1.3532-1.3531c-0.1937-0.1938-0.5125-0.1938-0.7062 0L11.7938 11.5 12.5 12.2062l1-1z" />
+    <path d="M17.5 11.2062l1 1 0.7063-0.7062-1.3532-1.3531c-0.1937-0.1938-0.5125-0.1938-0.7062 0L15.7938 11.5 16.5 12.2062z" />
+    <path d="M5.5 8c0.1281 0 0.2563-0.05 0.3531-0.1469L7.2063 6.5 6.5 5.7938l-1 1-1-1L3.7938 6.5 5.1469 7.8531C5.2437 7.95 5.3719 8 5.5 8z" />
+</svg>
+</template>

src/icons/IconTimer.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    id="icon-timer"
+    viewBox="0 0 24 24"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    style="transition-duration: 0s"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    @click="$emit('click')"
+    @keydown="event => $emit('keydown', event)"
+  >
+    <circle cx="12" cy="12" r="10" />
+    <polyline points="12 6 12 12 16 14" />
+  </svg>
+</template>

src/interfaces/ISection.ts

@@ -3,4 +3,5 @@ import type { IList } from "./IList";
 export default interface ISection {
   title: string;
   apiFunction: (page: number) => Promise<IList>;
+  sectionType?: "list" | "discover";
 }

src/main.ts

@@ -2,42 +2,14 @@ import { createApp } from "vue";
 import router from "./routes";
 import store from "./store";
 import Toast from "./plugins/Toast";
+import { useTheme } from "./composables/useTheme";
 
 import App from "./App.vue";
 
-// Initialize theme from localStorage
-function initTheme() {
-  const savedTheme = localStorage.getItem("theme-preference") || "auto";
-
-  function systemDarkModeEnabled() {
-    const computedStyle = window.getComputedStyle(document.body);
-    if (computedStyle?.colorScheme != null) {
-      return computedStyle.colorScheme.includes("dark");
-    }
-    return false;
-  }
-
-  if (savedTheme === "auto") {
-    const systemDark = systemDarkModeEnabled();
-    document.body.className = systemDark ? "dark" : "light";
-
-    // Listen for system theme changes
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    mediaQuery.addEventListener("change", e => {
-      const currentTheme = localStorage.getItem("theme-preference");
-      if (currentTheme === "auto") {
-        document.body.className = e.matches ? "dark" : "light";
-      }
-    });
-  } else {
-    document.body.className = savedTheme;
-  }
-}
-
 // Initialize theme before mounting
+const { initTheme } = useTheme();
 initTheme();
 
-store.dispatch("darkmodeModule/findAndSetDarkmodeSupported");
 store.dispatch("user/initUserFromCookie");
 
 const app = createApp(App);

src/modules/user.ts

@@ -16,12 +16,13 @@ export interface CookieOptions {
 /**
  * Read a cookie value.
  */
-export function getCookie(name: string): string | null {
+export function getAuthorizationCookie(): string | null {
+  const key = "authorization";
   const array = document.cookie.split(";");
   let match = null;
 
   array.forEach((item: string) => {
-    const query = `${name}=`;
+    const query = `${key}=`;
     if (!item.trim().startsWith(query)) return;
     match = item.trim().substring(query.length);
   });
@@ -132,7 +133,7 @@ const userModule: Module<UserState, RootState> = {
   /* ── Actions ─────────────────────────────────────────────────── */
   actions: {
     async initUserFromCookie({ dispatch }): Promise<boolean | null> {
-      const jwtToken = getCookie("authorization");
+      const jwtToken = getAuthorizationCookie();
       if (!jwtToken) return null;
 
       const token = parseJwt(jwtToken);

src/pages/404Page.vue

@@ -257,6 +257,7 @@
       text-align: center;
       z-index: 10;
       padding: 2rem;
+      margin-top: calc(-1 * var(--header-size));
 
       @include mobile {
         padding: 1rem;

src/pages/ActivityPage.vue

@@ -1,26 +1,9 @@
 <template>
-  <div v-if="plexUserId && plexUsername" class="activity">
+  <div class="activity">
     <h1 class="activity__title">Watch Activity</h1>
 
     <!-- Stats Overview -->
-    <div v-if="watchStats" class="stats-overview">
-      <div class="stat-card">
-        <div class="stat-value">{{ watchStats.totalPlays }}</div>
-        <div class="stat-label">Total Plays</div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-value">{{ watchStats.totalHours }}h</div>
-        <div class="stat-label">Watch Time</div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-value">{{ watchStats.moviePlays }}</div>
-        <div class="stat-label">Movies</div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-value">{{ watchStats.episodePlays }}</div>
-        <div class="stat-label">Episodes</div>
-      </div>
-    </div>
+    <stats-overview :watch-stats="watchStats" />
 
     <div class="controls">
       <div class="control-group">
@@ -50,7 +33,7 @@
 
     <div class="activity__charts">
       <div class="chart-card">
-        <h3 class="chart-card__title">Daily Activity</h3>
+        <h3>Daily Activity</h3>
         <div class="chart-card__graph">
           <Graph
             v-if="playsByDayData"
@@ -65,7 +48,7 @@
       </div>
 
       <div class="chart-card">
-        <h3 class="chart-card__title">Activity by Media Type</h3>
+        <h3>Activity by Media Type</h3>
         <div class="chart-card__graph">
           <Graph
             v-if="playsByDayofweekData"
@@ -80,7 +63,7 @@
       </div>
 
       <div class="chart-card">
-        <h3 class="chart-card__title">Viewing Patterns by Hour</h3>
+        <h3>Viewing Patterns by Hour</h3>
         <div class="chart-card__graph">
           <Graph
             v-if="hourlyData"
@@ -96,80 +79,33 @@
     </div>
 
     <!-- Top Content -->
-    <div v-if="topContent.length > 0" class="activity__top-content">
-      <h3 class="section-title">Most Watched</h3>
-      <div class="top-content-list">
-        <div
-          v-for="(item, index) in topContent"
-          :key="index"
-          class="top-content-item"
-        >
-          <div class="content-rank">{{ index + 1 }}</div>
-          <div class="content-details">
-            <div class="content-title">{{ item.title }}</div>
-            <div class="content-meta">
-              {{ item.type }} • {{ item.plays }} plays • {{ item.duration }}min
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div v-else class="not-authenticated">
-    <h1><IconStop /> Must be authenticated with Plex</h1>
-    <p>Go to Settings to link your Plex account</p>
+    <watch-history :top-content="topContent" />
   </div>
 </template>
 
 <script setup lang="ts">
   import { ref, computed, onMounted } from "vue";
-  import { useStore } from "vuex";
   import Graph from "@/components/Graph.vue";
   import ToggleButton from "@/components/ui/ToggleButton.vue";
-  import IconStop from "@/icons/IconStop.vue";
-  import type { Ref } from "vue";
-  import { useTautulliStats } from "@/composables/useTautulliStats";
+  import StatsOverview from "@/components/activity/StatsOverview.vue";
+  import WatchHistory from "@/components/activity/WatchHistory.vue";
+  import {
+    fetchHomeStats,
+    fetchPlaysByDate,
+    fetchPlaysByDayOfWeek,
+    fetchPlaysByHourOfDay
+  } from "../composables/useTautulliStats";
   import {
     GraphTypes,
     GraphValueTypes,
     IGraphData
   } from "../interfaces/IGraph";
-
-  const store = useStore();
+  import type { Ref } from "vue";
+  import type { WatchStats } from "../composables/useTautulliStats";
 
   const days: Ref<number> = ref(30);
   const graphViewMode: Ref<GraphTypes> = ref(GraphTypes.Plays);
 
-  // Check both Vuex store and localStorage for Plex user
-  const plexUserId = computed(() => {
-    // First try Vuex store
-    const storeId = store.getters["user/plexUserId"];
-    if (storeId) return storeId;
-
-    // Fallback to localStorage
-    const userData = localStorage.getItem("plex_user_data");
-    if (userData) {
-      try {
-        return JSON.parse(userData).id;
-      } catch {
-        return null;
-      }
-    }
-    return null;
-  });
-
-  const plexUsername = computed(() => {
-    const userData = localStorage.getItem("plex_user_data");
-    if (userData) {
-      try {
-        return JSON.parse(userData).username;
-      } catch {
-        return null;
-      }
-    }
-    return null;
-  });
-
   const graphValueViewMode = [
     {
       type: GraphTypes.Plays,
@@ -193,14 +129,6 @@
     graphValueViewMode.find(viewMode => viewMode.type === graphViewMode.value)
   );
 
-  const {
-    fetchHomeStats,
-    fetchPlaysByDate,
-    fetchPlaysByDayOfWeek,
-    fetchPlaysByHourOfDay,
-    fetchTopContent
-  } = useTautulliStats();
-
   function convertDateStringToDayMonth(date: string, short = true): string {
     if (!date.match(/[0-9]{4}-[0-9]{2}-[0-9]{2}/)) {
       return date;
@@ -210,30 +138,8 @@
     return short ? `${month}.${day}` : `${day}.${month}.${year}`;
   }
 
-  async function fetchChartData() {
-    if (!plexUserId.value) return;
-
-    try {
-      const yAxis =
-        graphViewMode.value === GraphTypes.Plays ? "plays" : "duration";
-
-      // Fetch all data in parallel using efficient Tautulli APIs
-      const [homeStats, dayData, weekData, hourData, topContentData] =
-        await Promise.all([
-          fetchHomeStats(plexUserId.value, days.value, "duration"), // Need duration for hours
-          fetchPlaysByDate(days.value, yAxis, plexUserId.value),
-          fetchPlaysByDayOfWeek(days.value, yAxis, plexUserId.value),
-          fetchPlaysByHourOfDay(days.value, yAxis, plexUserId.value),
-          fetchTopContent(days.value, 10, plexUserId.value)
-        ]);
-
-      // Set overall stats
-      watchStats.value = homeStats;
-
-      // Set top content
-      topContent.value = topContentData;
-
-      // Activity per day
+  function activityPerDay(dataPromise: Promise<any>) {
+    dataPromise.then(dayData => {
       playsByDayData.value = {
         labels: dayData.map(d =>
           convertDateStringToDayMonth(d.date, dayData.length < 365)
@@ -248,8 +154,11 @@
           }
         ]
       };
+    });
+  }
 
-      // Activity by day of week (stacked by media type)
+  function playsByDayOfWeek(dataPromise: Promise<any>) {
+    dataPromise.then(weekData => {
       playsByDayofweekData.value = {
         labels: weekData.labels,
         series: [
@@ -258,22 +167,42 @@
           { name: "Music", data: weekData.music }
         ]
       };
+    });
+  }
 
-      // Hourly distribution
+  function hourly(hourlyPromise: Promise<any>) {
+    hourlyPromise.then(hourData => {
       hourlyData.value = {
         labels: hourData.labels,
         series: [{ name: "Plays", data: hourData.data }]
       };
+    });
+  }
+
+  async function fetchChartData() {
+    try {
+      const yAxis =
+        graphViewMode.value === GraphTypes.Plays ? "plays" : "duration";
+
+      // Fetch all data in parallel using efficient Tautulli APIs
+      fetchHomeStats(days.value, "duration").then(
+        (homeStats: WatchStats) => (watchStats.value = homeStats)
+      );
+
+      // Activity per day (line graph of last n days)
+      activityPerDay(fetchPlaysByDate(days.value, yAxis));
+
+      // Activity by day of week (stacked by media type)
+      playsByDayOfWeek(fetchPlaysByDayOfWeek(days.value, yAxis));
+
+      // Hourly distribution
+      hourly(fetchPlaysByHourOfDay(days.value, yAxis));
     } catch (error) {
       console.error("[ActivityPage] Error fetching chart data:", error);
     }
   }
 
-  onMounted(() => {
-    if (plexUsername.value) {
-      fetchChartData();
-    }
-  });
+  onMounted(fetchChartData);
 </script>
 
 <style lang="scss" scoped>
@@ -297,7 +226,7 @@
 
       @include mobile-only {
         font-size: 1.5rem;
-        margin: 0 0 1rem 0;
+        margin: 1rem 0;
       }
     }
 
@@ -310,37 +239,8 @@
         gap: 1rem;
       }
     }
-
-    &__top-content {
-      margin-top: 2rem;
-    }
   }
 
-  // .filter {
-  //   display: flex;
-  //   flex-direction: row;
-  //   flex-wrap: wrap;
-  //   align-items: center;
-  //   margin-bottom: 2rem;
-
-  //   h2 {
-  //     margin-bottom: 0.5rem;
-  //     width: 100%;
-  //     font-weight: 400;
-  //   }
-
-  //   &-item:not(:first-of-type) {
-  //     margin-left: 1rem;
-  //   }
-
-  //   .dayinput {
-  //     font-size: 1.2rem;
-  //     max-width: 3rem;
-  //     background-color: $background-ui;
-  //     color: $text-color;
-  //   }
-  // }
-
   .chart-card {
     background: var(--background-ui);
     border-radius: 12px;
@@ -351,7 +251,7 @@
       padding: 1rem;
     }
 
-    &__title {
+    h3 {
       margin: 0 0 1rem 0;
       font-size: 1.2rem;
       font-weight: 500;
@@ -374,13 +274,6 @@
     }
   }
 
-  .section-title {
-    margin: 0 0 1rem 0;
-    font-size: 1.2rem;
-    font-weight: 500;
-    color: $text-color;
-  }
-
   .controls {
     display: flex;
     gap: 2rem;
@@ -450,144 +343,4 @@
     color: var(--text-color-60);
     user-select: none;
   }
-
-  .stats-overview {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 1.5rem;
-    margin-bottom: 2rem;
-
-    @include mobile-only {
-      grid-template-columns: repeat(2, 1fr);
-      gap: 1rem;
-    }
-  }
-
-  .stat-card {
-    background: var(--background-ui);
-    padding: 1.5rem;
-    border-radius: 12px;
-    text-align: center;
-    transition: transform 0.2s;
-
-    &:hover {
-      transform: translateY(-4px);
-    }
-
-    @include mobile-only {
-      padding: 1rem;
-    }
-  }
-
-  .stat-value {
-    font-size: 2.5rem;
-    font-weight: 700;
-    color: var(--highlight-color);
-    margin-bottom: 0.5rem;
-
-    @include mobile-only {
-      font-size: 2rem;
-    }
-  }
-
-  .stat-label {
-    font-size: 0.9rem;
-    color: var(--text-color-60);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    font-weight: 300;
-
-    @include mobile-only {
-      font-size: 0.8rem;
-    }
-  }
-
-  .top-content-list {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 1rem;
-
-    @include mobile-only {
-      grid-template-columns: 1fr;
-    }
-  }
-
-  .top-content-item {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    background: var(--background-ui);
-    padding: 1rem;
-    border-radius: 8px;
-    border: 1px solid var(--text-color-50);
-    transition: all 0.2s;
-
-    &:hover {
-      border-color: var(--text-color);
-      transform: translateY(-2px);
-    }
-  }
-
-  .content-rank {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--highlight-color);
-    min-width: 2.5rem;
-    text-align: center;
-  }
-
-  .content-details {
-    flex: 1;
-  }
-
-  .content-title {
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--text-color);
-    margin-bottom: 0.25rem;
-  }
-
-  .content-meta {
-    font-size: 0.85rem;
-    color: var(--text-color-60);
-  }
-
-  .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/AdminPage.vue

@@ -1,108 +0,0 @@
-<template>
-  <section class="admin">
-    <h1 class="admin__title">Admin Dashboard</h1>
-
-    <div class="admin__grid">
-      <AdminStats class="admin__stats" />
-      <SystemStatusPanel class="admin__system-status" />
-    </div>
-
-    <div class="admin__torrents">
-      <TorrentManagementGrid />
-    </div>
-
-    <div class="admin__activity">
-      <RecentActivityFeed />
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-  import AdminStats from "@/components/admin/AdminStats.vue";
-  import TorrentManagementGrid from "@/components/admin/TorrentManagementGrid.vue";
-  import SystemStatusPanel from "@/components/admin/SystemStatusPanel.vue";
-  import RecentActivityFeed from "@/components/admin/RecentActivityFeed.vue";
-</script>
-
-<style lang="scss" scoped>
-  @import "scss/variables";
-  @import "scss/media-queries";
-
-  .admin {
-    padding: 3rem;
-    max-width: 100%;
-    overflow-x: hidden;
-
-    @include mobile-only {
-      padding: 0.75rem;
-      width: 100%;
-      box-sizing: border-box;
-    }
-
-    &__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;
-      }
-    }
-
-    &__grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 1.5rem;
-      margin-bottom: 1.5rem;
-
-      @include mobile-only {
-        grid-template-columns: 1fr;
-        gap: 1rem;
-        margin-bottom: 1rem;
-      }
-    }
-
-    &__stats {
-      grid-column: 1;
-      min-width: 0;
-
-      @include mobile-only {
-        width: 100%;
-      }
-    }
-
-    &__system-status {
-      grid-column: 2;
-      min-width: 0;
-
-      @include mobile-only {
-        grid-column: 1;
-        width: 100%;
-      }
-    }
-
-    &__torrents {
-      margin-bottom: 1.5rem;
-      min-width: 0;
-      overflow-x: hidden;
-
-      @include mobile-only {
-        margin-bottom: 1rem;
-        width: 100%;
-      }
-    }
-
-    &__activity {
-      margin-bottom: 1.5rem;
-      min-width: 0;
-
-      @include mobile-only {
-        margin-bottom: 1rem;
-        width: 100%;
-      }
-    }
-  }
-</style>

src/pages/DiscoverPage.vue

@@ -0,0 +1,514 @@
+<template>
+  <section class="discover-page">
+    <div class="hero-section">
+      <div class="hero-collage">
+        <div
+          v-for="(poster, index) in heroPosters"
+          :key="index"
+          class="poster-tile"
+          :style="{ backgroundImage: `url(${poster})` }"
+        ></div>
+      </div>
+      <div class="hero-overlay"></div>
+
+      <div class="hero-content-wrapper">
+        <div class="discover-header">
+          <h1>Discover Movies</h1>
+          <p class="discover-subtitle">
+            Explore curated collections across genres, eras, and moods
+          </p>
+        </div>
+
+        <DiscoverShowcase
+          :active-category="activeCategory"
+          @select="updateCategory"
+        />
+      </div>
+    </div>
+
+    <div class="discover-content">
+      <ResultsSection
+        v-for="list in activeLists"
+        :key="list.id"
+        :api-function="list.apiFunction"
+        :title="list.title"
+        :short-list="true"
+        section-type="discover"
+      />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, onMounted, watch } from "vue";
+  import { useRoute, useRouter } from "vue-router";
+  import ResultsSection from "@/components/ResultsSection.vue";
+  import DiscoverShowcase from "@/components/DiscoverShowcase.vue";
+  import { getTmdbMovieDiscoverByName } from "../api";
+  import type { Ref } from "vue";
+
+  interface DiscoverList {
+    id: string;
+    title: string;
+    apiFunction: (page: number) => Promise<any>;
+    category: string;
+  }
+
+  const route = useRoute();
+  const router = useRouter();
+  const activeCategory: Ref<string> = ref(
+    (route.query.category as string) || "popular"
+  );
+  const heroPosters: Ref<string[]> = ref([]);
+
+  // Update URL when category changes
+  function updateCategory(categoryId: string) {
+    activeCategory.value = categoryId;
+    router.push({ query: { category: categoryId } });
+  }
+
+  // Watch for query parameter changes (e.g., browser back/forward)
+  watch(
+    () => route.query.category,
+    newCategory => {
+      if (newCategory && newCategory !== activeCategory.value) {
+        activeCategory.value = newCategory as string;
+      }
+    }
+  );
+
+  // Fetch popular movies for hero collage
+  onMounted(async () => {
+    // Scroll to top when component mounts - Safari compatible
+    // Use requestAnimationFrame to ensure it runs after render
+    requestAnimationFrame(() => {
+      return;
+      window.scrollTo(0, 0);
+      // Also try scrolling the body element for Safari compatibility
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+    });
+
+    try {
+      const response = await getTmdbMovieDiscoverByName("recent_releases");
+      const IMAGE_BASE_URL = "https://image.tmdb.org/t/p/w500";
+
+      // Take first 12 movies and shuffle them for variety
+      const posters = response.results
+        .slice(0, 12)
+        .map((movie: any) =>
+          movie.poster ? IMAGE_BASE_URL + movie.poster : null
+        )
+        .filter((poster: string | null) => poster !== null);
+
+      heroPosters.value = posters;
+    } catch (error) {
+      console.error("Failed to load hero posters:", error);
+    }
+  });
+
+  const discoverLists: DiscoverList[] = [
+    // Popular
+    {
+      id: "popular_now",
+      title: "Popular Now",
+      apiFunction: () => getTmdbMovieDiscoverByName("popular_now"),
+      category: "popular"
+    },
+    {
+      id: "top_rated",
+      title: "Top Rated",
+      apiFunction: () => getTmdbMovieDiscoverByName("top_rated"),
+      category: "popular"
+    },
+    {
+      id: "critics_choice",
+      title: "Critics' Choice",
+      apiFunction: () => getTmdbMovieDiscoverByName("critics_choice"),
+      category: "popular"
+    },
+    {
+      id: "recent_releases",
+      title: "Recent Releases",
+      apiFunction: () => getTmdbMovieDiscoverByName("recent_releases"),
+      category: "popular"
+    },
+    {
+      id: "crowd_pleasers",
+      title: "Crowd Pleasers",
+      apiFunction: () => getTmdbMovieDiscoverByName("crowd_pleasers"),
+      category: "popular"
+    },
+
+    // Genres
+    {
+      id: "action_packed",
+      title: "Action Packed",
+      apiFunction: () => getTmdbMovieDiscoverByName("action_packed"),
+      category: "genres"
+    },
+    {
+      id: "sci_fi_wonders",
+      title: "Sci-Fi Wonders",
+      apiFunction: () => getTmdbMovieDiscoverByName("sci_fi_wonders"),
+      category: "genres"
+    },
+    {
+      id: "horror_hits",
+      title: "Horror Hits",
+      apiFunction: () => getTmdbMovieDiscoverByName("horror_hits"),
+      category: "genres"
+    },
+    {
+      id: "romantic_favorites",
+      title: "Romantic Favorites",
+      apiFunction: () => getTmdbMovieDiscoverByName("romantic_favorites"),
+      category: "genres"
+    },
+    {
+      id: "laugh_out_loud",
+      title: "Laugh Out Loud",
+      apiFunction: () => getTmdbMovieDiscoverByName("laugh_out_loud"),
+      category: "genres"
+    },
+    {
+      id: "animated_magic",
+      title: "Animated Magic",
+      apiFunction: () => getTmdbMovieDiscoverByName("animated_magic"),
+      category: "genres"
+    },
+    {
+      id: "fantasy_worlds",
+      title: "Fantasy Worlds",
+      apiFunction: () => getTmdbMovieDiscoverByName("fantasy_worlds"),
+      category: "genres"
+    },
+    {
+      id: "thriller_edge",
+      title: "Thriller's Edge",
+      apiFunction: () => getTmdbMovieDiscoverByName("thriller_edge"),
+      category: "genres"
+    },
+    {
+      id: "crime_dramas",
+      title: "Crime Dramas",
+      apiFunction: () => getTmdbMovieDiscoverByName("crime_dramas"),
+      category: "genres"
+    },
+    {
+      id: "westerns",
+      title: "Westerns",
+      apiFunction: () => getTmdbMovieDiscoverByName("westerns"),
+      category: "genres"
+    },
+    {
+      id: "war_epics",
+      title: "War Epics",
+      apiFunction: () => getTmdbMovieDiscoverByName("war_epics"),
+      category: "genres"
+    },
+    {
+      id: "dark_comedy",
+      title: "Dark Comedy",
+      apiFunction: () => getTmdbMovieDiscoverByName("dark_comedy"),
+      category: "genres"
+    },
+    {
+      id: "musical_magic",
+      title: "Musical Magic",
+      apiFunction: () => getTmdbMovieDiscoverByName("musical_magic"),
+      category: "genres"
+    },
+
+    // Moods & Themes
+    {
+      id: "feel_good",
+      title: "Feel Good",
+      apiFunction: () => getTmdbMovieDiscoverByName("feel_good"),
+      category: "moods"
+    },
+    {
+      id: "mind_benders",
+      title: "Mind Benders",
+      apiFunction: () => getTmdbMovieDiscoverByName("mind_benders"),
+      category: "moods"
+    },
+    {
+      id: "epic_movies",
+      title: "Epic Movies",
+      apiFunction: () => getTmdbMovieDiscoverByName("epic_movies"),
+      category: "moods"
+    },
+    {
+      id: "quick_picks",
+      title: "Quick Picks",
+      apiFunction: () => getTmdbMovieDiscoverByName("quick_picks"),
+      category: "moods"
+    },
+    {
+      id: "family_night",
+      title: "Family Night",
+      apiFunction: () => getTmdbMovieDiscoverByName("family_night"),
+      category: "moods"
+    },
+    {
+      id: "true_stories",
+      title: "True Stories",
+      apiFunction: () => getTmdbMovieDiscoverByName("true_stories"),
+      category: "moods"
+    },
+    {
+      id: "coming_of_age",
+      title: "Coming of Age",
+      apiFunction: () => getTmdbMovieDiscoverByName("coming_of_age"),
+      category: "moods"
+    },
+
+    // Decades
+    {
+      id: "golden_age",
+      title: "Golden Age",
+      apiFunction: () => getTmdbMovieDiscoverByName("golden_age"),
+      category: "decades"
+    },
+    {
+      id: "90s_nostalgia",
+      title: "90s Nostalgia",
+      apiFunction: () => getTmdbMovieDiscoverByName("90s_nostalgia"),
+      category: "decades"
+    },
+    {
+      id: "2000s_classics",
+      title: "2000s Classics",
+      apiFunction: () => getTmdbMovieDiscoverByName("2000s_classics"),
+      category: "decades"
+    },
+    {
+      id: "2010s_best",
+      title: "2010s Best",
+      apiFunction: () => getTmdbMovieDiscoverByName("2010s_best"),
+      category: "decades"
+    },
+
+    // Special Collections
+    {
+      id: "blockbusters",
+      title: "Blockbusters",
+      apiFunction: () => getTmdbMovieDiscoverByName("blockbusters"),
+      category: "special"
+    },
+    {
+      id: "hidden_gems",
+      title: "Hidden Gems",
+      apiFunction: () => getTmdbMovieDiscoverByName("hidden_gems"),
+      category: "special"
+    },
+    {
+      id: "modern_classics",
+      title: "Modern Classics",
+      apiFunction: () => getTmdbMovieDiscoverByName("modern_classics"),
+      category: "special"
+    },
+    {
+      id: "indie_darlings",
+      title: "Indie Darlings",
+      apiFunction: () => getTmdbMovieDiscoverByName("indie_darlings"),
+      category: "special"
+    },
+    {
+      id: "international_cinema",
+      title: "International Cinema",
+      apiFunction: () => getTmdbMovieDiscoverByName("international_cinema"),
+      category: "special"
+    },
+    {
+      id: "oscar_winners",
+      title: "Oscar Winners",
+      apiFunction: () => getTmdbMovieDiscoverByName("oscar_winners"),
+      category: "special"
+    },
+    {
+      id: "space_odyssey",
+      title: "Space Odyssey",
+      apiFunction: () => getTmdbMovieDiscoverByName("space_odyssey"),
+      category: "special"
+    },
+    {
+      id: "superhero_saga",
+      title: "Superhero Saga",
+      apiFunction: () => getTmdbMovieDiscoverByName("superhero_saga"),
+      category: "special"
+    },
+    {
+      id: "heist_films",
+      title: "Heist Films",
+      apiFunction: () => getTmdbMovieDiscoverByName("heist_films"),
+      category: "special"
+    },
+    {
+      id: "zombies_apocalypse",
+      title: "Zombies & Apocalypse",
+      apiFunction: () => getTmdbMovieDiscoverByName("zombies_apocalypse"),
+      category: "special"
+    },
+    {
+      id: "time_travel",
+      title: "Time Travel",
+      apiFunction: () => getTmdbMovieDiscoverByName("time_travel"),
+      category: "special"
+    }
+  ];
+
+  const activeLists = computed(() => {
+    return discoverLists.filter(list => list.category === activeCategory.value);
+  });
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .discover-page {
+    background-color: var(--background-color);
+    min-height: 100vh;
+  }
+
+  .hero-section {
+    position: relative;
+    overflow: hidden;
+    min-height: 400px;
+
+    @include mobile {
+      min-height: 350px;
+    }
+  }
+
+  .hero-content-wrapper {
+    position: relative;
+    z-index: 1;
+  }
+
+  .discover-header {
+    padding: 4rem 1.5rem 2rem;
+    text-align: center;
+
+    @include mobile {
+      padding: 3rem 1rem 1.5rem;
+    }
+
+    h1 {
+      margin: 0 0 0.5rem;
+      font-size: 3rem;
+      font-weight: 700;
+      color: #ffffff;
+      text-shadow:
+        0 3px 15px rgba(0, 0, 0, 0.8),
+        0 1px 3px rgba(0, 0, 0, 0.6);
+      letter-spacing: -0.5px;
+
+      @include mobile {
+        font-size: 2rem;
+      }
+    }
+
+    .discover-subtitle {
+      margin: 0;
+      font-size: 1.1rem;
+      color: rgba(255, 255, 255, 0.95);
+      font-weight: 300;
+      text-shadow:
+        0 2px 10px rgba(0, 0, 0, 0.8),
+        0 1px 3px rgba(0, 0, 0, 0.6);
+
+      @include mobile {
+        font-size: 0.95rem;
+      }
+    }
+  }
+
+  .hero-collage {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 10px;
+    padding: 10px;
+    opacity: 0.4;
+    filter: blur(0px);
+
+    @include mobile {
+      grid-template-columns: repeat(4, 1fr);
+      grid-template-rows: repeat(3, 1fr);
+      gap: 8px;
+      padding: 8px;
+    }
+  }
+
+  .poster-tile {
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: 6px;
+    animation: fadeIn 0.8s ease-in-out;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+
+    &:nth-child(even) {
+      animation-delay: 0.1s;
+    }
+
+    &:nth-child(3n) {
+      animation-delay: 0.2s;
+    }
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  .hero-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+      135deg,
+      rgba(var(--background-color-rgb, 18, 18, 18), 0.6) 0%,
+      rgba(var(--background-color-rgb, 18, 18, 18), 0.7) 50%,
+      rgba(var(--background-color-rgb, 18, 18, 18), 0.6) 100%
+    );
+    backdrop-filter: blur(0px);
+  }
+
+  .discover-content {
+    padding: 0;
+    background-color: var(--background-color);
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.1) 50%,
+        transparent 100%
+      );
+    }
+  }
+</style>

src/pages/HomePage.vue

@@ -2,38 +2,40 @@
   <section>
     <LandingBanner />
 
-    <div v-for="list in lists" :key="list.title">
-      <ResultsSection
-        :api-function="list.apiFunction"
-        :title="list.title"
-        :short-list="true"
-      />
-    </div>
+    <ResultsSection
+      :api-function="getRequests"
+      title="Requests"
+      :short-list="true"
+    />
+
+    <ResultsSection
+      :api-function="() => getTmdbMovieListByName('now_playing')"
+      title="Now playing"
+      :short-list="true"
+      section-type="list"
+    />
+
+    <DiscoverMinimal />
+
+    <ResultsSection
+      :api-function="() => getTmdbMovieListByName('upcoming')"
+      title="Upcoming"
+      :short-list="true"
+      section-type="list"
+    />
+
+    <ResultsSection
+      :api-function="() => getTmdbMovieListByName('popular')"
+      title="Popular"
+      :short-list="true"
+      section-type="list"
+    />
   </section>
 </template>
 
 <script setup lang="ts">
   import LandingBanner from "@/components/LandingBanner.vue";
   import ResultsSection from "@/components/ResultsSection.vue";
+  import DiscoverMinimal from "@/components/DiscoverMinimal.vue";
   import { getRequests, getTmdbMovieListByName } from "../api";
-  import type ISection from "../interfaces/ISection";
-
-  const lists: ISection[] = [
-    {
-      title: "Requests",
-      apiFunction: getRequests
-    },
-    {
-      title: "Now playing",
-      apiFunction: () => getTmdbMovieListByName("now_playing")
-    },
-    {
-      title: "Upcoming",
-      apiFunction: () => getTmdbMovieListByName("upcoming")
-    },
-    {
-      title: "Popular",
-      apiFunction: () => getTmdbMovieListByName("popular")
-    }
-  ];
 </script>

src/pages/ListPage.vue

@@ -1,30 +0,0 @@
-<template>
-  <ResultsSection :title="listName" :api-function="_getTmdbMovieListByName" />
-</template>
-
-<script setup lang="ts">
-  import { ref } from "vue";
-  import type { Ref } from "vue";
-  import { useRoute } from "vue-router";
-  import ResultsSection from "@/components/ResultsSection.vue";
-  import { getTmdbMovieListByName } from "../api";
-
-  const route = useRoute();
-  const listName: Ref<string | string[]> = ref(
-    route?.params?.name || "List page"
-  );
-
-  function _getTmdbMovieListByName(page: number) {
-    return getTmdbMovieListByName(listName.value?.toString(), page);
-  }
-</script>
-
-<style lang="scss" scoped>
-  .fullwidth-button {
-    width: 100%;
-    margin: 1rem 0;
-    padding-bottom: 2rem;
-    display: flex;
-    justify-content: center;
-  }
-</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>
-    <h1>Register new user</h1>
+  <div class="register auth-page">
+    <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">
-      <seasoned-input
-        v-model="username"
-        placeholder="username"
-        icon="Email"
-        type="email"
-        @keydown.enter="focusOnNextElement"
-      />
+      <form ref="formElement" class="auth-form" @submit.prevent>
+        <seasoned-input
+          v-model="username"
+          placeholder="Email address"
+          icon="Email"
+          type="email"
+          @keydown.enter="focusOnNextElement"
+        />
 
-      <seasoned-input
-        v-model="password"
-        placeholder="password"
-        icon="Keyhole"
-        type="password"
-        @keydown.enter="focusOnNextElement"
-      />
-      <seasoned-input
-        v-model="passwordRepeat"
-        placeholder="repeat password"
-        icon="Keyhole"
-        type="password"
-        @keydown.enter="submit"
-      />
+        <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-button @click="submit">Register</seasoned-button>
-    </form>
+          <seasoned-input
+            v-model="password"
+            placeholder="Password"
+            icon="Keyhole"
+            type="password"
+            class="password-input"
+            @keydown.enter="focusOnNextElement"
+          />
 
-    <router-link class="link" to="/signin"
-      >Have a user? Sign in here</router-link
-    >
+          <seasoned-input
+            v-model="passwordRepeat"
+            placeholder="Confirm password"
+            icon="Keyhole"
+            type="password"
+            class="password-input"
+            @keydown.enter="submit"
+          />
+        </div>
 
-    <seasoned-messages v-model:messages="messages"></seasoned-messages>
-  </section>
+        <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>
+
+      <div class="auth-footer">
+        <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>
+    </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() {
-    register(username.value, password.value)
-      .then(data => {
-        if (data?.success && store.dispatch("user/login")) {
-          router.push({ name: "profile" });
-        }
+  function addSuccessMessage(message: string, title?: string) {
+    messages.value.push({
+      message,
+      title,
+      type: ErrorMessageTypes.Success
+    });
+  }
+
+  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 => {
-        if (error?.status === 401) {
-          addErrorMessage("Incorrect username or password", "Access denied");
-          return null;
-        }
-
-        addErrorMessage(error?.message, "Unexpected 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 {
-    padding: 1.3rem;
-
-    @include tablet-min {
-      padding: 4rem;
+  .register {
+    // Password inputs use monospace font
+    :deep(.password-input input[type="password"]),
+    :deep(.password-input input[type="text"]) {
+      font-family: "Courier New", monospace;
     }
+  }
 
-    .form > div,
-    input,
-    button {
-      margin-bottom: 1rem;
+  .register__password-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
 
-      &:last-child {
-        margin-bottom: 0px;
+  .password-generator {
+    .generator-toggle {
+      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);
       }
     }
 
-    h1 {
-      margin: 0;
-      line-height: 16px;
+    .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;
-      font-weight: 300;
-      margin-bottom: 20px;
-      text-transform: uppercase;
     }
 
-    .link {
-      display: block;
-      width: max-content;
-      margin-top: 1rem;
+    .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/SectionPage.vue

@@ -0,0 +1,40 @@
+<template>
+  <ResultsSection :title="sectionName" :api-function="_getSectionData" />
+</template>
+
+<script setup lang="ts">
+  import { ref } from "vue";
+  import type { Ref } from "vue";
+  import { useRoute } from "vue-router";
+  import ResultsSection from "@/components/ResultsSection.vue";
+  import { getTmdbMovieListByName, getTmdbMovieDiscoverByName } from "../api";
+
+  const route = useRoute();
+  const sectionName: Ref<string | string[]> = ref(
+    route?.params?.name || "Section page"
+  );
+
+  // Determine if this is a discover section or a list based on the route path
+  const isDiscoverSection = route.path.startsWith("/discover/");
+
+  function _getSectionData(page: number) {
+    const name = sectionName.value?.toString();
+
+    // Use the appropriate API function based on the route type
+    if (isDiscoverSection) {
+      return getTmdbMovieDiscoverByName(name, page);
+    } else {
+      return getTmdbMovieListByName(name, page);
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .fullwidth-button {
+    width: 100%;
+    margin: 1rem 0;
+    padding-bottom: 2rem;
+    display: flex;
+    justify-content: center;
+  }
+</style>

src/pages/SettingsPage.vue

@@ -2,58 +2,30 @@
   <section class="settings">
     <div class="settings__container">
       <!-- Profile Hero Card -->
-      <div class="profile-hero">
-        <div class="profile-hero__main">
-          <div class="profile-hero__avatar">
-            <div class="avatar-large">{{ userInitials }}</div>
-          </div>
-          <div class="profile-hero__info">
-            <h1 class="profile-hero__name">{{ username }}</h1>
-            <span :class="['profile-hero__badge', `badge--${userRole}`]">
-              <a v-if="userRole === 'admin'" href="/admin">{{ userRole }}</a>
-              <span v-else>{{ userRole }}</span>
-            </span>
-            <p class="profile-hero__member">Member since {{ memberSince }}</p>
-          </div>
-        </div>
-
-        <div class="profile-hero__stats">
-          <div class="stat-large">
-            <span class="stat-large__value">{{ stats.totalRequests }}</span>
-            <span class="stat-large__label">Requests</span>
-          </div>
-          <div class="stat-divider"></div>
-          <div class="stat-large">
-            <span class="stat-large__value">{{ stats.magnetsAdded }}</span>
-            <span class="stat-large__label">Magnets Added</span>
-          </div>
-        </div>
-      </div>
+      <ProfileHero />
 
       <!-- Settings Grid -->
       <div class="settings__grid">
-        <!-- Left Column: Quick Settings -->
-        <div class="settings__column settings__column--left">
+        <!-- Left Column -->
+        <div class="settings__column">
           <section class="settings-section settings-section--compact">
-            <h2 class="section-header">Appearance</h2>
+            <div class="settings-section-header"><h2>Appearance</h2></div>
             <theme-preferences />
           </section>
 
           <section class="settings-section settings-section--compact">
-            <h2 class="section-header">Security</h2>
-            <change-password />
+            <security-settings />
           </section>
         </div>
 
-        <!-- Right Column: Data-Heavy Sections -->
-        <div class="settings__column settings__column--right">
+        <!-- Right Column -->
+        <div class="settings__column">
           <section class="settings-section">
-            <h2 class="section-header">Integrations</h2>
+            <div class="settings-section-header"><h2>Integrations</h2></div>
             <plex-settings @reload="reloadSettings" />
           </section>
 
           <section class="settings-section">
-            <h2 class="section-header">Data & Privacy</h2>
             <data-export />
           </section>
         </div>
@@ -63,12 +35,13 @@
 </template>
 
 <script setup lang="ts">
-  import { inject, computed, onMounted } from "vue";
+  import { inject, onMounted } from "vue";
   import { useStore } from "vuex";
   import { useRoute } from "vue-router";
+  import ProfileHero from "@/components/settings/ProfileHero.vue";
   import ThemePreferences from "@/components/settings/ThemePreferences.vue";
   import PlexSettings from "@/components/settings/PlexSettings.vue";
-  import ChangePassword from "@/components/profile/ChangePassword.vue";
+  import SecuritySettings from "@/components/settings/SecuritySettings.vue";
   import DataExport from "@/components/settings/DataExport.vue";
   import { getSettings } from "../api";
 
@@ -78,29 +51,6 @@
     error;
   } = inject("notifications");
 
-  const username = computed(() => store.getters["user/username"] || "User");
-  const userRole = computed(() =>
-    store.getters["user/admin"] ? "admin" : "user"
-  );
-
-  const userInitials = computed(() => {
-    return username.value.slice(0, 2).toUpperCase();
-  });
-
-  const memberSince = computed(() => {
-    const date = new Date();
-    date.setMonth(date.getMonth() - 6);
-    return date.toLocaleDateString("en-US", {
-      month: "short",
-      year: "numeric"
-    });
-  });
-
-  const stats = {
-    totalRequests: 45,
-    magnetsAdded: 127
-  };
-
   function displayWarningIfMissingPlexAccount() {
     if (route.query?.missingPlexAccount === "true") {
       notifications.error({
@@ -127,13 +77,14 @@
 <style lang="scss" scoped>
   @import "scss/variables";
   @import "scss/media-queries";
+  @import "scss/shared-settings";
 
   .settings {
     min-height: calc(100vh - var(--header-size));
     padding: 2rem 1.5rem;
 
     @include mobile-only {
-      padding: 1rem;
+      padding: 0.5rem;
     }
 
     &__container {
@@ -167,184 +118,6 @@
       @include mobile-only {
         gap: 1rem;
       }
-
-      &--left {
-        // Quick settings - lighter, more concise
-      }
-
-      &--right {
-        // Data-heavy sections
-      }
-    }
-  }
-
-  .profile-hero {
-    background-color: var(--background-color-secondary);
-    border-radius: 0.75rem;
-    padding: 1.5rem;
-    border: 1px solid var(--background-40);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 2rem;
-
-    @include mobile-only {
-      flex-direction: column;
-      padding: 1.5rem 1.25rem;
-      border-radius: 0.5rem;
-      text-align: center;
-      gap: 1rem;
-    }
-
-    &__main {
-      display: flex;
-      align-items: center;
-      gap: 1.5rem;
-
-      @include mobile-only {
-        flex-direction: column;
-        gap: 0.75rem;
-      }
-    }
-
-    &__avatar {
-      flex-shrink: 0;
-    }
-
-    &__info {
-      display: flex;
-      flex-direction: column;
-      gap: 0.35rem;
-
-      @include mobile-only {
-        align-items: center;
-      }
-    }
-
-    &__name {
-      margin: 0;
-      font-size: 1.75rem;
-      font-weight: 600;
-      line-height: 1.1;
-
-      @include mobile-only {
-        font-size: 1.5rem;
-      }
-    }
-
-    &__badge {
-      display: inline-block;
-      padding: 0.25rem 0.7rem;
-      border-radius: 2rem;
-      font-size: 0.75rem;
-      text-transform: uppercase;
-      font-weight: 600;
-      width: fit-content;
-
-      @include mobile-only {
-        padding: 0.2rem 0.6rem;
-        font-size: 0.7rem;
-      }
-
-      &.badge--admin {
-        background-color: var(--color-warning);
-        color: $black;
-      }
-
-      &.badge--user {
-        background-color: var(--background-40);
-      }
-    }
-
-    &__member {
-      margin: 0;
-      font-size: 0.85rem;
-      color: $text-color-70;
-
-      @include mobile-only {
-        font-size: 0.8rem;
-      }
-    }
-
-    &__stats {
-      display: flex;
-      align-items: center;
-      gap: 1.75rem;
-      padding-left: 1.75rem;
-      border-left: 1px solid var(--background-40);
-
-      @include mobile-only {
-        width: 100%;
-        padding: 1rem 0 0 0;
-        border-left: none;
-        border-top: 1px solid var(--background-40);
-        justify-content: center;
-        gap: 1.25rem;
-      }
-    }
-  }
-
-  .avatar-large {
-    width: 70px;
-    height: 70px;
-    border-radius: 50%;
-    background: linear-gradient(
-      135deg,
-      var(--highlight-color),
-      var(--color-green-70)
-    );
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.75rem;
-    font-weight: 700;
-    color: $white;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-
-    @include mobile-only {
-      width: 80px;
-      height: 80px;
-      font-size: 2rem;
-    }
-  }
-
-  .stat-large {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.25rem;
-
-    &__value {
-      font-size: 1.75rem;
-      font-weight: 700;
-      color: var(--highlight-color);
-      line-height: 1;
-
-      @include mobile-only {
-        font-size: 1.75rem;
-      }
-    }
-
-    &__label {
-      font-size: 0.75rem;
-      color: $text-color-70;
-      text-transform: uppercase;
-      font-weight: 500;
-      letter-spacing: 0.5px;
-
-      @include mobile-only {
-        font-size: 0.75rem;
-      }
-    }
-  }
-
-  .stat-divider {
-    width: 1px;
-    height: 45px;
-    background-color: var(--background-40);
-
-    @include mobile-only {
-      height: 45px;
     }
   }
 
@@ -355,36 +128,16 @@
     border: 1px solid var(--background-40);
 
     @include mobile-only {
-      padding: 1rem;
+      padding: 0.5rem;
     }
 
     &--compact {
-      // Tighter spacing for quick settings
-      .section-header {
-        font-size: 1.25rem;
-        margin-bottom: 0.85rem;
-        padding-bottom: 0.65rem;
+      // Tighter padding for quick settings, but same header size
+      padding: 1rem;
 
-        @include mobile-only {
-          font-size: 1.2rem;
-          margin-bottom: 0.75rem;
-          padding-bottom: 0.6rem;
-        }
+      @include mobile-only {
+        padding: 0.5rem;
       }
     }
   }
-
-  .section-header {
-    margin: 0 0 1rem 0;
-    font-size: 1.5rem;
-    font-weight: 600;
-    padding-bottom: 0.75rem;
-    border-bottom: 1px solid var(--background-40);
-
-    @include mobile-only {
-      font-size: 1.3rem;
-      margin-bottom: 0.85rem;
-      padding-bottom: 0.65rem;
-    }
-  }
 </style>

src/pages/SigninPage.vue

@@ -1,31 +1,44 @@
 <template>
-  <section>
-    <h1>Sign in</h1>
+  <div class="signin auth-page">
+    <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">
-      <seasoned-input
-        v-model="username"
-        placeholder="username"
-        icon="Email"
-        type="email"
-        @keydown.enter="focusOnNextElement"
-      />
-      <seasoned-input
-        v-model="password"
-        placeholder="password"
-        icon="Keyhole"
-        type="password"
-        @keydown.enter="submit"
-      />
+      <form ref="formElement" class="auth-form">
+        <seasoned-input
+          v-model="username"
+          placeholder="Email address"
+          icon="Email"
+          type="email"
+          @keydown.enter="focusOnNextElement"
+        />
+        <seasoned-input
+          v-model="password"
+          placeholder="Password"
+          icon="Keyhole"
+          type="password"
+          @keydown.enter="submit"
+        />
 
-      <seasoned-button @click="submit">sign in</seasoned-button>
-    </form>
-    <router-link class="link" to="/register"
-      >Don't have a user? Register here</router-link
-    >
+        <seasoned-button class="auth-button" @click="submit">
+          Sign In
+        </seasoned-button>
+      </form>
 
-    <seasoned-messages v-model:messages="messages" />
-  </section>
+      <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" />
+    </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 validate() {
+    const errors = [];
+
+    if (username.value.length === 0) {
+      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() {
-    login(username.value, password.value, true)
-      .then(data => {
-        if (data?.success && store.dispatch("user/login")) {
-          router.push({ name: "profile" });
-        }
+    return login(username.value, password.value)
+      .then(response => {
+        store.dispatch("user/login", response.user);
+        router.push("/");
+        return response;
       })
       .catch(error => {
-        if (error?.status === 401) {
-          addErrorMessage("Incorrect username or password", "Access denied");
+        if (error.error === "Incorrect username or password.") {
+          addErrorMessage(error.error, "Authentication failed");
           return null;
         }
 
@@ -112,28 +120,13 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/variables";
+  @import "scss/shared-auth";
 
-  section {
-    padding: 1.3rem;
-
-    @include tablet-min {
-      padding: 4rem;
-    }
-
-    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;
+  .signin {
+    // Password input uses monospace font
+    :deep(input[type="password"]),
+    :deep(input[type="text"][placeholder="Password"]) {
+      font-family: "Courier New", monospace;
     }
   }
 </style>

src/pages/TorrentsPage.vue

@@ -59,7 +59,7 @@
 
       @include mobile-only {
         font-size: 1.5rem;
-        margin: 0 0 1rem 0;
+        margin: 1rem 0;
       }
     }
 

src/routes.ts

@@ -3,6 +3,9 @@ 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 {
   interface Window {
@@ -36,7 +39,17 @@ const routes: RouteRecordRaw[] = [
   {
     name: "list",
     path: "/list/:name",
-    component: () => import("./pages/ListPage.vue")
+    component: () => import("./pages/SectionPage.vue")
+  },
+  {
+    name: "discover-section",
+    path: "/discover/:name",
+    component: () => import("./pages/SectionPage.vue")
+  },
+  {
+    name: "discover",
+    path: "/discover",
+    component: () => import("./pages/DiscoverPage.vue")
   },
   {
     name: "search",
@@ -78,10 +91,9 @@ const routes: RouteRecordRaw[] = [
     component: () => import("./pages/GenPasswordPage.vue")
   },
   {
-    name: "admin",
-    path: "/admin",
-    meta: { requiresAuth: true },
-    component: () => import("./pages/AdminPage.vue")
+    name: "missing-plex-auth",
+    path: "/missing/plex",
+    component: () => import("./pages/MissingPlexAuthPage.vue")
   },
   {
     path: "/:pathMatch(.*)*",
@@ -102,7 +114,13 @@ const router = createRouter({
   history: createWebHistory("/"),
   // base: "/",
   routes,
-  linkActiveClass: "is-active"
+  linkActiveClass: "is-active",
+  scrollBehavior(to, from, savedPosition) {
+    if (to.name !== "discover") return;
+
+    console.log("scrolling top");
+    return { top: 0 };
+  }
 });
 
 const loggedIn = () => store.getters["user/loggedIn"];
@@ -111,16 +129,8 @@ const hasPlexAccount = () => {
   if (store.getters["user/plexUserId"] !== null) return true;
 
   // Fallback to localStorage
-  const userData = localStorage.getItem("plex_user_data");
-  if (userData) {
-    try {
-      const parsed = JSON.parse(userData);
-      return parsed.id !== null && parsed.id !== undefined;
-    } catch {
-      return false;
-    }
-  }
-  return false;
+  const authToken = getPlexAuthCookie();
+  return !!authToken;
 };
 const hamburgerIsOpen = () => store.getters["hamburger/isOpen"];
 
@@ -136,15 +146,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",
-          query: { missingPlexAccount: true }
+          path: "/missing/plex"
         });
       }
     }

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/shared-settings.scss

@@ -0,0 +1,30 @@
+@import "./media-queries.scss";
+
+.settings-section-card {
+  padding: 0.85rem;
+  background-color: var(--background-ui);
+  border-radius: 0.25rem;
+  border-left: 3px solid var(--highlight-color);
+
+  @include mobile-only {
+    padding: 0.75rem;
+  }
+}
+
+.settings-section-header {
+  margin-bottom: 1rem;
+
+  h2 {
+    margin: 0 0 0.5rem 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+
+  p {
+    margin: 0;
+    color: var(--text-color-70);
+    font-size: 0.95rem;
+    line-height: 1.6;
+  }
+}

src/utils.ts

@@ -89,8 +89,9 @@ 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}` : ""
-    }${window.location.pathname}${params.toString().length ? `?${params}` : ""}`;
+  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);
 }
@@ -129,3 +130,17 @@ export function convertSecondsToHumanReadable(_value, values = null) {
 
   return value;
 }
+
+export function formatNumber(n: number) {
+  if (!n?.toString()) return n;
+
+  return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${Math.round((bytes / k ** i) * 100) / 100} ${sizes[i]}`;
+}

src/utils/plexHelpers.ts

@@ -1,7 +1,7 @@
 export function getLibraryIcon(type: string): string {
   const icons: Record<string, string> = {
     movies: "🎬",
-    shows: "📺",
+    "tv shows": "📺",
     music: "🎵"
   };
   return icons[type] || "📁";
@@ -10,7 +10,7 @@ export function getLibraryIcon(type: string): string {
 export function getLibraryIconComponent(type: string): string {
   const components: Record<string, string> = {
     movies: "IconMovie",
-    shows: "IconShow",
+    "tv shows": "IconShow",
     music: "IconMusic"
   };
   return components[type] || "IconMovie";
@@ -19,7 +19,7 @@ export function getLibraryIconComponent(type: string): string {
 export function getLibraryTitle(type: string): string {
   const titles: Record<string, string> = {
     movies: "Movies",
-    shows: "TV Shows",
+    "tv shows": "TV Shows",
     music: "Music"
   };
   return titles[type] || type;
@@ -62,8 +62,8 @@ export function processLibraryItem(
   // Get poster/thumbnail URL
   let posterUrl = null;
 
-  // For TV shows, prefer grandparentThumb (show poster) over thumb (episode thumbnail)
-  if (libraryType === "shows") {
+  // For TV tv shows, prefer grandparentThumb (show poster) over thumb (episode thumbnail)
+  if (libraryType === "tv shows") {
     if (item.grandparentThumb) {
       posterUrl = `${serverUrl}${item.grandparentThumb}?X-Plex-Token=${authToken}`;
     } else if (item.thumb) {
@@ -92,14 +92,14 @@ export function processLibraryItem(
     plexUrl = `https://app.plex.tv/desktop/#!/server/${machineIdentifier}/details?key=${encodedKey}`;
   }
 
-  // For shows, use grandparent data (show info) instead of episode info
+  // For tv shows, use grandparent data (show info) instead of episode info
   const title =
-    libraryType === "shows" && item.grandparentTitle
+    libraryType === "tv shows" && item.grandparentTitle
       ? item.grandparentTitle
       : item.title;
 
   const year =
-    libraryType === "shows" && item.grandparentYear
+    libraryType === "tv shows" && item.grandparentYear
       ? item.grandparentYear
       : item.year || item.parentYear || new Date().getFullYear();
 
@@ -109,11 +109,12 @@ export function processLibraryItem(
     poster: posterUrl,
     fallbackIcon: getLibraryIcon(libraryType),
     rating: item.rating ? Math.round(item.rating * 10) / 10 : null,
+    type: libraryType,
     ratingKey,
     plexUrl
   };
 
-  if (libraryType === "shows") {
+  if (libraryType === "tv shows") {
     return {
       ...baseItem,
       episodes: item.leafCount || 0
@@ -157,7 +158,7 @@ export function calculateDuration(metadata: any[], libraryType: string) {
       totalDuration += item.duration;
     }
 
-    if (libraryType === "shows" && item.leafCount) {
+    if (libraryType === "tv shows" && item.leafCount) {
       totalEpisodes += item.leafCount;
     } else if (libraryType === "music" && item.leafCount) {
       totalTracks += item.leafCount;