Add admin components: stats, activity feed, system status, torrent management

Add admin page with route configuration
Feat: Misc improvements (#107 )
2026-05-09 23:55:32 +00:00 · 2026-03-09 00:09:45 +01:00 · 2026-03-09 00:09:41 +01:00 · 2026-03-09 00:01:05 +01:00 · 2026-03-08 21:38:22 +01:00 · 2026-03-08 21:29:07 +01:00
17 changed files with 790 additions and 426 deletions
--- a/src/App.vue
+++ b/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;
--- a/src/components/CastListItem.vue
+++ b/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>
--- a/src/components/header/NavigationHeader.vue
+++ b/src/components/header/NavigationHeader.vue
@@ -41,7 +41,7 @@

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

--- a/src/components/plex/PlexLibraryStats.vue
+++ b/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";
--- a/src/components/plex/PlexServerInfo.vue
+++ b/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;
    }

--- a/src/components/popup/Movie.vue
+++ b/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");

--- a/src/components/settings/DataExport.vue
+++ b/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({
--- a/src/components/settings/ExportSection.vue
+++ b/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>
--- a/src/components/settings/StorageSectionBrowser.vue
+++ b/src/components/settings/StorageSectionBrowser.vue
@@ -74,7 +74,6 @@
        </div>
      </div>
    </div>
-
  </div>
 </template>

--- a/src/components/torrent/TorrentTable.vue
+++ b/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>
--- a/src/composables/useTheme.ts
+++ b/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;
--- a/src/modules/user.ts
+++ b/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;

--- a/src/pages/404Page.vue
+++ b/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;
--- a/src/pages/RegisterPage.vue
+++ b/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>
--- a/src/pages/SigninPage.vue
+++ b/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>
--- a/src/scss/shared-auth.scss
+++ b/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;
+  }
+}
--- a/src/utils.ts
+++ b/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]}`;
 }
Author	SHA1	Message	Date
Kevin Midboe	c39dc9dcaf	Add admin components: stats, activity feed, system status, torrent management	2026-03-09 00:09:45 +01:00
Kevin Midboe	de634b87eb	Add admin page with route configuration	2026-03-09 00:09:41 +01:00
Kevin	c8262a3bda	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	2026-03-09 00:01:05 +01:00
Kevin	cb90281e5e	Feat: Activity page enhancements (#106 ) * Add activity page components and Tautulli stats integration - Add StatsOverview component for watch statistics display - Add WatchHistory component for recent watch activity - Add useTautulliStats composable for Tautulli API integration - Components display total plays, watch time, movies/episodes watched - Support for fetching home stats and last watched content * Enhance Graph component with improved styling and options - Add wrapper div for better layout control - Update color scheme with modern palette (Indigo, Amber, Emerald) - Add Filler plugin for filled area charts - Improve bar chart styling with rounded corners - Add proper lifecycle cleanup with onBeforeUnmount - Enhance tooltip formatting for time and number values - Add deep watch for reactive data updates - Better TypeScript type safety with Chart.js types * Refactor ActivityPage with enhanced stats and visualizations - Integrate StatsOverview component for at-a-glance metrics - Add WatchHistory component for recent watch activity - Add hourly viewing patterns chart - Modernize UI with card-based layout - Improve controls styling with better labels and input handling - Remove authentication dependency (now handled by route guards) - Use useTautulliStats composable for data fetching - Add comprehensive watch statistics (total plays, hours, by media type) - Support for both plays and duration view modes * Improve Plex authentication check with cookie fallback - Add usePlexAuth composable import to routes - Enhance hasPlexAccount() to check cookies when Vuex store is empty - Fixes authentication check after page refreshes - Ensures activity page remains accessible with valid Plex auth	2026-03-08 21:38:22 +01:00
Kevin	0cd2a73a8b	Feat: Command palette (#105 ) * Add command palette with smart navigation and usage tracking - Add CommandPalette.vue component with keyboard shortcut (Cmd+K/Ctrl+K) - Implement smart route navigation with parameter input support - Add content search integration via Elasticsearch - Create commandTracking.ts utility for usage analytics - Track command frequency and recency with scoring algorithm - Support for all application routes with metadata and icons - Includes badge system for auth requirements and shortcuts * Integrate CommandPalette into main application - Add CommandPalette component to App.vue - Enable global keyboard shortcut (Cmd+K/Ctrl+K) - Command palette is now accessible from anywhere in the app	2026-03-08 21:29:07 +01:00
Kevin	c309016299	Feat/settings page redesign (#104 ) * include credentials on login fetch requests, allows set header response * Add theme composable and utility improvements - Create useTheme composable for centralized theme management - Update main.ts to use useTheme for initialization - Generalize getCookie utility in user module - Add utility functions for data formatting * Add Plex integration composables and icons - Create usePlexAuth composable for Plex OAuth flow - Create usePlexApi composable for Plex API interactions - Create useRandomWords composable for password generation - Add Plex-related icons (IconPlex, IconServer, IconSync) - Add Plex helper utilities - Update API with Plex-related endpoints * Add storage management components for data & privacy section - Create StorageManager component for browser storage overview - Create StorageSectionBrowser for localStorage/sessionStorage/cookies - Create StorageSectionServer for server-side data (mock) - Create ExportSection for data export functionality - Refactor DataExport component with modular sections - Add storage icons (IconCookie, IconDatabase, IconTimer) - Implement collapsible sections with visual indicators - Add colored borders per storage type - Display item counts and total size in headers * Add theme, password, and security settings components - Create ThemePreferences with visual theme selector - Create PasswordGenerator with passphrase and random modes - Create SecuritySettings wrapper for password management - Update ChangePassword to work with new layout - Implement improved slider UX with visual feedback - Add theme preview cards with gradients - Standardize component styling and typography * Add Plex settings and authentication components - Create PlexSettings component for Plex account management - Create PlexAuthButton with improved OAuth flow - Create PlexServerInfo for server details display - Use icon components instead of inline SVGs - Add sync and unlink functionality - Implement user-friendly authentication flow * Redesign settings page with two-column layout and ProfileHero - Create ProfileHero component with avatar and user info - Create RequestHistory component for Plex requests (placeholder) - Redesign SettingsPage with modern two-column grid layout - Add shared-settings.scss for consistent styling - Organize sections: Appearance, Security, Integrations, Data & Privacy - Implement responsive mobile layout - Standardize typography (h2: 1.5rem, 700 weight) - Add compact modifier for tighter sections	2026-03-08 21:16:36 +01:00