Minor improvements and code cleanup across components

- Refactor PlexSettings component for better organization
- Add utility functions to utils.ts for shared logic
- Update API methods for improved error handling
- Clean up navigation icon components
- Remove unused code from CommandPalette and SeasonedButton
- Fix minor issues in Movie popup component
- Update page component imports (RegisterPage, TorrentsPage)

src/App.vue

@@ -13,7 +13,7 @@
     <!-- Popup that will show above existing rendered content -->
     <popup />
 
-    <!-- Command Palette for quick navigation -->
+    <!-- Command Palette -->
     <command-palette />
   </div>
 </template>
@@ -62,7 +62,6 @@
       grid-column: 2 / 3;
       width: calc(100% - var(--header-size));
       grid-row: 2;
-      z-index: 5;
 
       @include mobile {
         grid-column: 1 / 3;

src/components/CastListItem.vue

@@ -1,25 +1,9 @@
 <template>
-  <li class="cast-card">
+  <li class="card">
-    <a
+    <a @click="openCastItem" @keydown.enter="openCastItem">
-      class="cast-card__link"
+      <img :src="pictureUrl" alt="Movie or person poster image" />
-      role="button"
+      <p class="name">{{ creditItem.name || creditItem.title }}</p>
-      tabindex="0"
+      <p class="meta">{{ creditItem.character || creditItem.year }}</p>
-      :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>
@@ -49,139 +33,85 @@
     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" scoped>
+<style lang="scss">
-  @import "scss/variables";
+  li a p:first-of-type {
+    padding-top: 10px;
+  }
 
-  .cast-card {
+  li.card p {
-    list-style: none;
+    font-size: 1em;
-    margin: 0 10px 10px 0;
+    padding: 0 10px;
-    width: 150px;
+    margin: 0;
-    flex-shrink: 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);
 
     &: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 {
+    .name {
-    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;
-    }
-
-    &: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 {
+    .character {
-    margin: 0;
+      font-size: 0.9em;
-    font-size: 0.85rem;
+    }
-    font-weight: 400;
+
-    line-height: 1.3;
+    .meta {
-    color: var(--highlight-bg, var(--text-color-70));
+      font-size: 0.9em;
+      color: var(--text-color-70);
       display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
       overflow: hidden;
-    text-overflow: ellipsis;
+      -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;
+    }
   }
 </style>

src/components/DiscoverMinimal.vue

@@ -1,277 +0,0 @@
-<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

@@ -1,360 +0,0 @@
-<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/PageHeader.vue

@@ -31,22 +31,12 @@
     info?: string | Array<string>;
     link?: string;
     shortList?: boolean;
-    sectionType?: "list" | "discover";
   }
 
-  const props = withDefaults(defineProps<Props>(), {
+  const props = defineProps<Props>();
-    sectionType: "list"
-  });
 
   const urlify = computed(() => {
-    const normalizedTitle = props.title
+    return `/list/${props.title.toLowerCase().replace(" ", "_")}`;
-      .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,8 +1,6 @@
 <template>
   <div ref="resultSection" class="resultSection">
-    <page-header
+    <page-header v-bind="{ title, info, shortList }" />
-      v-bind="{ title, info, shortList, sectionType: props.sectionType }"
-    />
 
     <div
       v-if="!loadedPages.includes(1) && loading == false"
@@ -42,12 +40,9 @@
     title: string;
     apiFunction: (page: number) => Promise<IList>;
     shortList?: boolean;
-    sectionType?: "list" | "discover";
   }
 
-  const props = withDefaults(defineProps<Props>(), {
+  const props = defineProps<Props>();
-    sectionType: "list"
-  });
 
   const results: Ref<ListResults> = ref([]);
   const page: Ref<number> = ref(1);

src/components/admin/AdminStats.vue

@@ -0,0 +1,503 @@
+<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

@@ -0,0 +1,685 @@
+<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

@@ -0,0 +1,750 @@
+<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

@@ -0,0 +1,723 @@
+<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: "/login",
+    route: "/signin",
     icon: IconProfileLock
   };
 

src/components/header/NavigationIcons.vue

@@ -15,14 +15,13 @@
   import { ref, watch } from "vue";
   import { useRoute } from "vue-router";
   import NavigationIcon from "@/components/header/NavigationIcon.vue";
-  import IconMailboxFull from "@/icons/IconMailboxFull.vue";
+  import IconInbox from "@/icons/IconInbox.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 IconHelm from "@/icons/IconHelm.vue";
+  import IconBinoculars from "@/icons/IconBinoculars.vue";
-  import IconDiscover from "@/icons/IconDiscover.vue";
   import type INavigationIcon from "../../interfaces/INavigationIcon";
 
   const route = useRoute();
@@ -31,18 +30,13 @@
     {
       title: "Requests",
       route: "/list/requests",
-      icon: IconMailboxFull
+      icon: IconInbox
     },
     {
       title: "Now Playing",
       route: "/list/now_playing",
       icon: IconNowPlaying
     },
-    {
-      title: "Discover",
-      route: "/discover",
-      icon: IconDiscover
-    },
     {
       title: "Popular",
       route: "/list/popular",
@@ -64,7 +58,7 @@
       title: "Torrents",
       route: "/torrents",
       requiresAuth: true,
-      icon: IconHelm
+      icon: IconBinoculars
     },
     {
       title: "Settings",

src/components/plex/PlexLibraryStats.vue

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

src/components/plex/PlexServerInfo.vue

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

src/components/popup/Movie.vue

@@ -215,7 +215,8 @@
 
   const props = defineProps<Props>();
   const ASSET_URL = "https://image.tmdb.org/t/p/";
-  const COLORS_API = import.meta.env.VITE_SEASONED_COLORS_API || "";
+  // const COLORS_URL = "https://colors.schleppe.cloud/colors";
+  const COLORS_URL = "http://localhost:8080/colors";
   const ASSET_SIZES = ["w500", "w780", "original"];
 
   const media: Ref<IMovie | IShow> = ref();
@@ -352,7 +353,7 @@
   }
 
   async function colorsFromPoster(posterPath: string) {
-    const url = new URL("/colors", COLORS_API);
+    const url = new URL(COLORS_URL);
     url.searchParams.append("id", posterPath.replace("/", ""));
     url.searchParams.append("size", "w342");
 

src/components/settings/DataExport.vue

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

src/components/settings/ExportSection.vue

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

src/components/settings/StorageSectionBrowser.vue

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

src/components/torrent/TorrentTable.vue

@@ -1,39 +1,23 @@
 <template>
-  <div class="torrent-table">
-    <div class="sort-toggle">
-      <span class="sort-label">Sort by:</span>
-      <div class="sort-options">
-        <button
-          v-for="option in sortOptions"
-          :key="option.value"
-          :class="['sort-btn', { active: selectedSort === option.value }]"
-          @click="changeSort(option.value)"
-        >
-          {{ option.label }}
-        </button>
-      </div>
-    </div>
-
   <table>
     <thead class="table__header noselect">
       <tr>
         <th
-            class="name-header"
+          v-for="column in visibleColumns"
-            :class="selectedSort === 'name' ? 'active' : null"
+          :key="column"
-            @click="changeSort('name')"
+          :class="column === selectedColumn ? 'active' : null"
+          @click="sortTable(column)"
         >
-            Name
+          {{ column }}
-            <span v-if="selectedSort === 'name'">{{
+          <span v-if="prevCol === column && direction">↑</span>
-              direction ? "↑" : "↓"
+          <span v-if="prevCol === column && !direction">↓</span>
-            }}</span>
         </th>
-          <th class="add-header">Add</th>
       </tr>
     </thead>
 
     <tbody>
       <tr
-          v-for="torrent in sortedTorrents"
+        v-for="torrent in torrents"
         :key="torrent.magnet"
         class="table__content"
       >
@@ -43,12 +27,28 @@
           @keydown.enter="expand($event, torrent.name)"
         >
           <div class="torrent-title">{{ torrent.name }}</div>
-            <div class="torrent-meta">
+          <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)"
@@ -59,11 +59,10 @@
       </tr>
     </tbody>
   </table>
-  </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, computed } from "vue";
+  import { ref, computed, onMounted, onUnmounted } from "vue";
   import IconMagnet from "@/icons/IconMagnet.vue";
   import type { Ref } from "vue";
   import { sortableSize } from "../../utils";
@@ -80,55 +79,31 @@
   const props = defineProps<Props>();
   const emit = defineEmits<Emit>();
 
-  const sortOptions = [
+  const columns: string[] = ["name", "seed", "size", "add"];
-    { value: "name", label: "Name" },
+  const windowWidth = ref(window.innerWidth);
-    { value: "size", label: "Size" },
+  const isMobile = computed(() => windowWidth.value <= 768);
-    { value: "seed", label: "Seeders" }
+  const visibleColumns = computed(() =>
-  ];
+    isMobile.value ? ["name", "add"] : columns
+  );
 
   const torrents: Ref<ITorrent[]> = ref(props.torrents);
   const direction: Ref<boolean> = ref(false);
-  const selectedSort: Ref<string> = ref("size");
+  const selectedColumn: Ref<string> = ref(columns[0]);
-  const prevSort: Ref<string> = ref("");
+  const prevCol: Ref<string> = ref("");
 
-  const sortedTorrents = computed(() => {
+  function handleResize() {
-    const sorted = [...torrents.value];
+    windowWidth.value = window.innerWidth;
-
-    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;
+  onMounted(() => {
+    window.addEventListener("resize", handleResize);
   });
 
-  function changeSort(sortBy: string) {
+  onUnmounted(() => {
-    if (prevSort.value === sortBy) {
+    window.removeEventListener("resize", handleResize);
-      direction.value = !direction.value;
+  });
-    } else {
-      direction.value = false;
-      selectedSort.value = sortBy;
-    }
-    prevSort.value = sortBy;
-  }
 
   function expand(event: MouseEvent, text: string) {
-    return;
     const elementClicked = event.target as HTMLElement;
     const tableRow = elementClicked.parentElement;
     const scopedStyleDataVariable = Object.keys(tableRow.dataset)[0];
@@ -141,6 +116,8 @@
     if (existingExpandedElement) {
       existingExpandedElement.remove();
 
+      // Clicked the same element twice, remove and return
+      // not recreate and collapse
       if (clickedSameTwice) return;
     }
 
@@ -151,11 +128,59 @@
     expandedRow.className = "expanded";
     expandedCol.innerText = text;
 
-    expandedCol.colSpan = 2;
+    // Colspan: 2 on mobile (name + add), 4 on desktop (name + seed + size + add)
+    expandedCol.colSpan = isMobile.value ? 2 : 4;
 
     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>
@@ -163,58 +188,6 @@
   @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;
@@ -222,11 +195,16 @@
     max-width: 100%;
     border-radius: 0.5rem;
     overflow: hidden;
+    table-layout: fixed;
+
+    @include mobile {
       table-layout: auto;
     }
+  }
 
   th,
   td {
+    border: 0.5px solid var(--background-color-40);
     overflow: hidden;
     text-overflow: ellipsis;
 
@@ -239,16 +217,16 @@
     position: relative;
     user-select: none;
     -webkit-user-select: none;
-    color: var(--highlight-bg, var(--table-header-text-color));
+    color: var(--table-header-text-color);
     text-transform: uppercase;
     cursor: pointer;
-    background-color: var(--highlight-color, var(--highlight-color));
+    background-color: var(--table-background-color);
+    background-color: var(--highlight-color);
     letter-spacing: 0.8px;
     font-size: 1rem;
 
     th:last-of-type {
-      padding: 0 0.4rem;
+      padding-right: 0.4rem;
-      border-left: 1px solid var(--highlight-bg, var(--background-color));
     }
   }
 
@@ -259,7 +237,7 @@
       padding: 0.5rem 0.6rem;
       cursor: default;
       word-break: break-word;
-      border-left: 1px solid var(--highlight-secondary, var(--highlight-color));
+      border-left: 1px solid var(--table-background-color);
 
       @include mobile {
         width: 100%;
@@ -280,8 +258,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;
@@ -297,12 +275,20 @@
       }
     }
 
+    // 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(--highlight-secondary, var(--highlight-color));
+      border-right: 1px solid var(--table-background-color);
-      max-width: 60px;
+      width: 60px;
       text-align: center;
 
       @include mobile {
@@ -314,7 +300,7 @@
         display: block;
         margin: auto;
         padding: 0.3rem 0;
-        fill: var(inherit, var(--text-color));
+        fill: var(--text-color);
 
         @include mobile {
           width: 18px;
@@ -324,30 +310,16 @@
 
     // alternate background color per row
     tr {
-      background-color: var(--highlight-bg, var(--background-90));
+      background-color: var(--background-color);
-      color: var(--text-color);
-
-      td {
-        border-left: 1px solid
-          var(--highlight-secondary, var(--highlight-color));
-        fill: var(--text-color);
-      }
-    }
-    tr:nth-child(odd) {
-      background-color: var(--highlight-secondary, var(--background-color));
-      color: var(--highlight-bg, var(--text-color));
-
-      td {
-        fill: var(--highlight-bg, var(--text-color)) !important;
     }
+    tr:nth-child(even) {
+      background-color: var(--background-70);
     }
 
     // last element rounded corner border
     tr:last-of-type {
       td {
-        border-bottom: 1px solid
+        border-bottom: 1px solid var(--table-background-color);
-          var(--highlight-secondary, var(--highlight-color));
-        border-left: 1px solid var(--highlight-bg, var(--text-color));
       }
 
       td:first-of-type {
@@ -363,16 +335,15 @@
   .expanded {
     padding: 0.25rem 1rem;
     max-width: 100%;
-    border-left: 1px solid var(--text-color);
+    border-left: 1px solid $text-color;
-    border-right: 1px solid var(--text-color);
+    border-right: 1px solid $text-color;
-    border-bottom: 1px solid var(--text-color);
+    border-bottom: 1px solid $text-color;
 
     td {
       white-space: normal;
       word-break: break-all;
       padding: 0.5rem 0.15rem;
       width: 100%;
-      color: var(--text-color);
     }
   }
 </style>

src/composables/useTheme.ts

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

src/icons/IconCalendar.vue

@@ -1,16 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-<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/IconDiscover.vue

@@ -1,19 +0,0 @@
-<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/IconSpotlights.vue

@@ -1,6 +0,0 @@
-<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

@@ -1,7 +0,0 @@
-<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/IconTheater.vue

@@ -1,10 +0,0 @@
-<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/interfaces/ISection.ts

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

src/modules/user.ts

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

src/pages/404Page.vue

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

src/pages/AdminPage.vue

@@ -0,0 +1,108 @@
+<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

@@ -1,514 +0,0 @@
-<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,40 +2,38 @@
   <section>
     <LandingBanner />
 
+    <div v-for="list in lists" :key="list.title">
       <ResultsSection
-      :api-function="getRequests"
+        :api-function="list.apiFunction"
-      title="Requests"
+        :title="list.title"
         :short-list="true"
       />
-
+    </div>
-    <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

@@ -0,0 +1,30 @@
+<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/RegisterPage.vue

@@ -1,107 +1,40 @@
 <template>
-  <div class="register auth-page">
+  <section>
-    <div class="auth-content auth-content--wide">
+    <h1>Register new user</h1>
-      <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="auth-form" @submit.prevent>
+    <form ref="formElement" class="form">
       <seasoned-input
         v-model="username"
-          placeholder="Email address"
+        placeholder="username"
         icon="Email"
         type="email"
         @keydown.enter="focusOnNextElement"
       />
 
-        <div class="register__password-section">
-          <div class="password-generator">
-            <button
-              type="button"
-              class="generator-toggle"
-              @click="toggleGenerator"
-            >
-              <IconKey class="toggle-icon" />
-              <span>{{
-                showGenerator
-                  ? "Hide Password Generator"
-                  : "Generate Strong Password"
-              }}</span>
-            </button>
-            <div v-if="showGenerator" class="generator-content">
-              <password-generator
-                @password-generated="handlePasswordGenerated"
-              />
-            </div>
-          </div>
-
       <seasoned-input
         v-model="password"
-            placeholder="Password"
+        placeholder="password"
         icon="Keyhole"
         type="password"
-            class="password-input"
         @keydown.enter="focusOnNextElement"
       />
-
       <seasoned-input
         v-model="passwordRepeat"
-            placeholder="Confirm password"
+        placeholder="repeat password"
         icon="Keyhole"
         type="password"
-            class="password-input"
         @keydown.enter="submit"
       />
-        </div>
 
-        <div v-if="password.length > 0" class="register__password-requirements">
+      <seasoned-button @click="submit">Register</seasoned-button>
-          <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">
+    <router-link class="link" to="/login"
-        <p class="auth-footer-text">
+      >Have a user? Sign in here</router-link
-          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>
+  </section>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -111,8 +44,6 @@
   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";
@@ -124,7 +55,6 @@
   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();
@@ -140,198 +70,99 @@
       message,
       title,
       type: ErrorMessageTypes.Error
-    });
+    } as IErrorMessage);
   }
 
-  function addSuccessMessage(message: string, title?: string) {
+  function addWarningMessage(message: string, title?: string) {
     messages.value.push({
       message,
       title,
-      type: ErrorMessageTypes.Success
+      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 validate() {
+  function registerUser() {
-    const errors = [];
+    register(username.value, password.value)
-
+      .then(data => {
-    if (username.value.length === 0) {
+        if (data?.success && store.dispatch("user/login")) {
-      errors.push("Email must not be empty");
+          router.push({ name: "profile" });
         }
-
-    if (password.value.length === 0) {
-      errors.push("Password must not be empty");
-    }
-
-    if (password.value.length < 8) {
-      errors.push("Password must be at least 8 characters");
-    }
-
-    if (!/[A-Z]/.test(password.value)) {
-      errors.push("Password must contain at least one uppercase letter");
-    }
-
-    if (!/[a-z]/.test(password.value)) {
-      errors.push("Password must contain at least one lowercase letter");
-    }
-
-    if (!/[0-9]/.test(password.value)) {
-      errors.push("Password must contain at least one number");
-    }
-
-    if (password.value !== passwordRepeat.value) {
-      errors.push("Passwords do not match");
-    }
-
-    if (errors.length > 0) {
-      errors.forEach(error => addErrorMessage(error, "Validation error"));
-      return Promise.reject();
-    }
-
-    return Promise.resolve(true);
-  }
-
-  function createUser() {
-    return register(username.value, password.value)
-      .then(response => {
-        addSuccessMessage(
-          "Account created successfully! Redirecting to login...",
-          "Success"
-        );
-        setTimeout(() => {
-          router.push("/login");
-        }, 2000);
-        return response;
       })
       .catch(error => {
-        addErrorMessage(error?.message || "Registration failed", "Error");
+        if (error?.status === 401) {
+          addErrorMessage("Incorrect username or password", "Access denied");
+          return null;
+        }
+
+        addErrorMessage(error?.message, "Unexpected error");
         return null;
       });
   }
 
   function submit() {
     clearMessages();
-    validate().then(createUser);
+    validate().then(registerUser);
-  }
-
-  function handlePasswordGenerated(generatedPassword: string) {
-    password.value = generatedPassword;
-    passwordRepeat.value = generatedPassword;
-  }
-
-  function toggleGenerator() {
-    showGenerator.value = !showGenerator.value;
   }
 </script>
 
 <style lang="scss" scoped>
-  @import "scss/shared-auth";
+  @import "scss/variables";
 
-  .register {
+  section {
-    // Password inputs use monospace font
+    padding: 1.3rem;
-    :deep(.password-input input[type="password"]),
+
-    :deep(.password-input input[type="text"]) {
+    @include tablet-min {
-      font-family: "Courier New", monospace;
+      padding: 4rem;
+    }
+
+    .form > div,
+    input,
+    button {
+      margin-bottom: 1rem;
+
+      &:last-child {
+        margin-bottom: 0px;
       }
     }
 
-  .register__password-section {
+    h1 {
-    display: flex;
+      margin: 0;
-    flex-direction: column;
+      line-height: 16px;
-    gap: 1.25rem;
-  }
-
-  .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);
-      }
-    }
-
-    .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;
     }
 
-    .requirements-grid {
+    .link {
-      display: grid;
+      display: block;
-      grid-template-columns: repeat(2, 1fr);
+      width: max-content;
-      gap: 0.75rem;
+      margin-top: 1rem;
-
-      @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

@@ -1,40 +0,0 @@
-<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/SigninPage.vue

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

src/routes.ts

@@ -4,7 +4,6 @@ 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 {
@@ -39,17 +38,7 @@ const routes: RouteRecordRaw[] = [
   {
     name: "list",
     path: "/list/:name",
-    component: () => import("./pages/SectionPage.vue")
+    component: () => import("./pages/ListPage.vue")
-  },
-  {
-    name: "discover-section",
-    path: "/discover/:name",
-    component: () => import("./pages/SectionPage.vue")
-  },
-  {
-    name: "discover",
-    path: "/discover",
-    component: () => import("./pages/DiscoverPage.vue")
   },
   {
     name: "search",
@@ -90,6 +79,12 @@ const routes: RouteRecordRaw[] = [
     path: "/password",
     component: () => import("./pages/GenPasswordPage.vue")
   },
+  {
+    name: "admin",
+    path: "/admin",
+    meta: { requiresAuth: true },
+    component: () => import("./pages/AdminPage.vue")
+  },
   {
     name: "missing-plex-auth",
     path: "/missing/plex",
@@ -114,13 +109,7 @@ 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"];

src/scss/shared-auth.scss

@@ -1,100 +0,0 @@
-// 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/utils.ts

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