Feat: Misc improvements (#107)

* Expand SCSS variables for improved theming

* Redesign 404 page with dynamic movie quotes

* Add password generator page

* Add missing Plex authentication page

* Improve torrent table and torrents page

* Enhance toast notification component

* Enhance popup components

* Refine UI components and remove DarkmodeToggle

* Add user profile component for settings

* Update autocomplete dropdown component

* Update register page

* Redesign signin and register pages with improved UX

* Improve torrent table with sort toggle and highlight colors

* eslint & prettier fixes

src/App.vue

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

src/components/CastListItem.vue

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

src/components/admin/AdminStats.vue

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

src/components/admin/RecentActivityFeed.vue

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

src/components/admin/SystemStatusPanel.vue

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

src/components/admin/TorrentManagementGrid.vue

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

src/components/header/NavigationHeader.vue

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

src/components/plex/PlexLibraryStats.vue

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

src/components/plex/PlexServerInfo.vue

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

src/components/popup/Movie.vue

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

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 RequestHistory from "./RequestHistory.vue"
+  import ExportSection from "./ExportSection.vue";
+  import RequestHistory from "./RequestHistory.vue";
   import DangerZoneAction from "./DangerZoneAction.vue";
 
   const requestStats = ref({

src/components/settings/ExportSection.vue

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

src/components/settings/StorageSectionBrowser.vue

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

src/components/torrent/TorrentTable.vue

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

src/composables/useTheme.ts

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

src/modules/user.ts

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

src/pages/404Page.vue

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

src/pages/AdminPage.vue

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

src/pages/RegisterPage.vue

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

src/pages/SigninPage.vue

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

src/routes.ts

@@ -4,6 +4,7 @@ import type { RouteRecordRaw, RouteLocationNormalized } from "vue-router";
 /* eslint-disable-next-line import-x/no-cycle */
 import store from "./store";
 import { usePlexAuth } from "./composables/usePlexAuth";
+
 const { getPlexAuthCookie } = usePlexAuth();
 
 declare global {
@@ -79,12 +80,6 @@ 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",

src/scss/shared-auth.scss

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

src/utils.ts

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