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-05-14 01:55:42 +00:00 · 2026-03-09 00:01:05 +01:00
parent cb90281e5e
commit c8262a3bda
31 changed files with 1878 additions and 601 deletions
--- 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/Popup.vue
+++ b/src/components/Popup.vue
@@ -1,16 +1,26 @@
 <template>
-  <div v-if="isOpen" class="movie-popup" @click="close" @keydown.enter="close">
+  <div
+    v-if="isOpen"
+    ref="popupContainer"
+    class="movie-popup"
+    role="dialog"
+    aria-modal="true"
+    tabindex="-1"
+    @click="close"
+    @keydown.enter="close"
+    @keydown="handleKeydown"
+  >
    <div class="movie-popup__box" @click.stop>
      <person v-if="type === 'person'" :id="id" type="person" />
      <movie v-else :id="id" :type="type"></movie>
-      <button class="movie-popup__close" @click="close"></button>
+      <button class="movie-popup__close" @click="close" tabindex="0"></button>
    </div>
    <i class="loader"></i>
  </div>
 </template>

 <script setup lang="ts">
-  import { ref, onMounted, onBeforeUnmount } from "vue";
+  import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
  import { useStore } from "vuex";
  import Movie from "@/components/popup/Movie.vue";
  import Person from "@/components/popup/Person.vue";
@@ -26,6 +36,8 @@
  const isOpen: Ref<boolean> = ref();
  const id: Ref<string> = ref();
  const type: Ref<MediaTypes> = ref();
+  const popupContainer = ref<HTMLElement | null>(null);
+  let previouslyFocusedElement: HTMLElement | null = null;

  const unsubscribe = store.subscribe((mutation, state) => {
    if (!mutation.type.includes("popup")) return;
@@ -76,6 +88,75 @@
    close();
  }

+  function getFocusableElements(): HTMLElement[] {
+    if (!popupContainer.value) return [];
+
+    const focusableSelectors = [
+      "button:not([disabled])",
+      "a[href]",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])'
+    ].join(", ");
+
+    return Array.from(
+      popupContainer.value.querySelectorAll(focusableSelectors)
+    ) as HTMLElement[];
+  }
+
+  function trapFocus(event: KeyboardEvent) {
+    if (event.key !== "Tab") return;
+
+    const focusableElements = getFocusableElements();
+    if (focusableElements.length === 0) return;
+
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    if (event.shiftKey) {
+      // Shift + Tab
+      if (document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      }
+    } else {
+      // Tab
+      if (document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    trapFocus(event);
+  }
+
+  function setInitialFocus() {
+    nextTick(() => {
+      // Focus the popup container itself instead of a specific element
+      // This allows tab to start fresh without any element being focused
+      if (popupContainer.value) {
+        popupContainer.value.focus();
+      }
+    });
+  }
+
+  watch(isOpen, newValue => {
+    if (newValue) {
+      // Store the previously focused element
+      previouslyFocusedElement = document.activeElement as HTMLElement;
+      // Set focus to popup
+      setInitialFocus();
+    } else {
+      // Restore focus to previously focused element
+      if (previouslyFocusedElement) {
+        previouslyFocusedElement.focus();
+      }
+    }
+  });
+
  window.addEventListener("keyup", checkEventForEscapeKey);

  onMounted(() => {
@@ -104,6 +185,10 @@
    -webkit-overflow-scrolling: touch;
    overflow: auto;

+    &:focus {
+      outline: none;
+    }
+
    &__box {
      max-width: 768px;
      position: relative;
--- a/src/components/header/AutocompleteDropdown.vue
+++ b/src/components/header/AutocompleteDropdown.vue
@@ -95,7 +95,8 @@
  }

  function parseElasticResponse(elasticResponse: IAutocompleteSearchResults) {
-    const data = elasticResponse.hits.hits;
+    const { hits } = elasticResponse.hits;
+    const data = hits.length > 0 ? hits : (searchResults.value ?? []);

    const results: Array<IAutocompleteResult> = [];

--- 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/ActionButton.vue
+++ b/src/components/popup/ActionButton.vue
@@ -2,8 +2,12 @@
  <li
    class="sidebar-list-element"
    :class="{ active, disabled }"
+    :tabindex="disabled ? -1 : 0"
+    role="button"
+    :aria-disabled="disabled"
    @click="emit('click')"
-    @keydown.enter="emit('click')"
+    @keydown.enter.prevent="emit('click')"
+    @keydown.space.prevent="emit('click')"
  >
    <slot></slot>
  </li>
@@ -53,8 +57,10 @@
    }

    &:hover,
+    &:focus,
    &.active {
      color: var(--text-color);
+      outline: none;

      div > svg,
      svg {
@@ -63,6 +69,12 @@
      }
    }

+    &:focus-visible {
+      outline: 2px solid var(--highlight-color);
+      outline-offset: 2px;
+      border-radius: 4px;
+    }
+
    &.active > div > svg,
    &.active > svg {
      fill: var(--highlight-color);
--- a/src/components/popup/Movie.vue
+++ b/src/components/popup/Movie.vue
@@ -215,7 +215,7 @@

  const props = defineProps<Props>();
  const ASSET_URL = "https://image.tmdb.org/t/p/";
-  const COLORS_URL = "https://colors.schleppe.cloud/colors";
+  const COLORS_API = import.meta.env.VITE_SEASONED_COLORS_API || "";
  const ASSET_SIZES = ["w500", "w780", "original"];

  const media: Ref<IMovie | IShow> = ref();
@@ -352,7 +352,7 @@
  }

  async function colorsFromPoster(posterPath: string) {
-    const url = new URL(COLORS_URL);
+    const url = new URL("/colors", COLORS_API);
    url.searchParams.append("id", posterPath.replace("/", ""));
    url.searchParams.append("size", "w342");

@@ -435,7 +435,7 @@

      > img {
        width: 100%;
-        border-radius: inherit;
+        border-radius: calc(1.6rem - 1px);
      }
    }
  }
--- a/src/components/popup/Person.vue
+++ b/src/components/popup/Person.vue
@@ -51,7 +51,7 @@
      </Detail>

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

-  const columns: string[] = ["name", "seed", "size", "add"];
+  const sortOptions = [
+    { value: "name", label: "Name" },
+    { value: "size", label: "Size" },
+    { value: "seed", label: "Seeders" }
+  ];

  const torrents: Ref<ITorrent[]> = ref(props.torrents);
  const direction: Ref<boolean> = ref(false);
-  const selectedColumn: Ref<string> = ref(columns[0]);
-  const prevCol: Ref<string> = ref("");
+  const selectedSort: Ref<string> = ref("size");
+  const prevSort: Ref<string> = ref("");
+
+  const sortedTorrents = computed(() => {
+    const sorted = [...torrents.value];
+
+    if (selectedSort.value === "name") {
+      sorted.sort((a, b) =>
+        direction.value
+          ? a.name.localeCompare(b.name)
+          : b.name.localeCompare(a.name)
+      );
+    } else if (selectedSort.value === "size") {
+      sorted.sort((a, b) =>
+        direction.value
+          ? sortableSize(a.size) - sortableSize(b.size)
+          : sortableSize(b.size) - sortableSize(a.size)
+      );
+    } else if (selectedSort.value === "seed") {
+      sorted.sort((a, b) =>
+        direction.value
+          ? parseInt(a.seed, 10) - parseInt(b.seed, 10)
+          : parseInt(b.seed, 10) - parseInt(a.seed, 10)
+      );
+    }
+
+    return sorted;
+  });
+
+  function changeSort(sortBy: string) {
+    if (prevSort.value === sortBy) {
+      direction.value = !direction.value;
+    } else {
+      direction.value = false;
+      selectedSort.value = sortBy;
+    }
+    prevSort.value = sortBy;
+  }

  function expand(event: MouseEvent, text: string) {
+    return;
    const elementClicked = event.target as HTMLElement;
    const tableRow = elementClicked.parentElement;
    const scopedStyleDataVariable = Object.keys(tableRow.dataset)[0];
@@ -89,8 +141,6 @@
    if (existingExpandedElement) {
      existingExpandedElement.remove();

-      // Clicked the same element twice, remove and return
-      // not recreate and collapse
      if (clickedSameTwice) return;
    }

@@ -100,58 +150,12 @@
    expandedCol.dataset[scopedStyleDataVariable] = "";
    expandedRow.className = "expanded";
    expandedCol.innerText = text;
-    expandedCol.colSpan = 4;
+
+    expandedCol.colSpan = 2;

    expandedRow.appendChild(expandedCol);
    tableRow.insertAdjacentElement("afterend", expandedRow);
  }
-
-  function sortName() {
-    const torrentsCopy = [...torrents.value];
-    if (direction.value) {
-      torrents.value = torrentsCopy.sort((a, b) => (a.name < b.name ? 1 : -1));
-    } else {
-      torrents.value = torrentsCopy.sort((a, b) => (a.name > b.name ? 1 : -1));
-    }
-  }
-
-  function sortSeed() {
-    const torrentsCopy = [...torrents.value];
-    if (direction.value) {
-      torrents.value = torrentsCopy.sort(
-        (a, b) => parseInt(a.seed, 10) - parseInt(b.seed, 10)
-      );
-    } else {
-      torrents.value = torrentsCopy.sort(
-        (a, b) => parseInt(b.seed, 10) - parseInt(a.seed, 10)
-      );
-    }
-  }
-
-  function sortSize() {
-    const torrentsCopy = [...torrents.value];
-    if (direction.value) {
-      torrents.value = torrentsCopy.sort((a, b) =>
-        sortableSize(a.size) > sortableSize(b.size) ? 1 : -1
-      );
-    } else {
-      torrents.value = torrentsCopy.sort((a, b) =>
-        sortableSize(a.size) < sortableSize(b.size) ? 1 : -1
-      );
-    }
-  }
-
-  function sortTable(col, sameDirection = false) {
-    if (prevCol.value === col && sameDirection === false) {
-      direction.value = !direction.value;
-    }
-
-    if (col === "name") sortName();
-    else if (col === "seed") sortSeed();
-    else if (col === "size") sortSize();
-
-    prevCol.value = col;
-  }
 </script>

 <style lang="scss" scoped>
@@ -159,20 +163,74 @@
  @import "scss/media-queries";
  @import "scss/elements";

+  .torrent-table {
+    width: 100%;
+  }
+
+  .sort-toggle {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+    flex-wrap: wrap;
+
+    .sort-label {
+      font-size: 0.85rem;
+      color: var(--text-color-70);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .sort-options {
+      display: flex;
+      gap: 0.25rem;
+    }
+
+    .sort-btn {
+      border: 1px solid var(--highlight-bg, var(--background-color-40));
+      color: var(--text-color-70);
+      padding: 0.35rem 0.65rem;
+      font-size: 0.8rem;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+
+      &:hover {
+        background: var(--highlight-bg, var(--background-color));
+        color: var(--text-color);
+      }
+
+      &.active {
+        background: var(--highlight-color);
+        color: var(--text-color);
+        border-color: var(--highlight-color, $green);
+      }
+
+      @include mobile {
+        padding: 0.4rem 0.6rem;
+        font-size: 0.75rem;
+      }
+    }
+  }
+
  table {
    border-spacing: 0;
    margin-top: 0.5rem;
    width: 100%;
-    // border-collapse: collapse;
+    max-width: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
+    table-layout: auto;
  }

  th,
  td {
-    border: 0.5px solid var(--background-color-40);
+    overflow: hidden;
+    text-overflow: ellipsis;
+
    @include mobile {
-      white-space: nowrap;
      padding: 0;
    }
  }
@@ -181,69 +239,115 @@
    position: relative;
    user-select: none;
    -webkit-user-select: none;
-    color: var(--table-header-text-color);
+    color: var(--highlight-bg, var(--table-header-text-color));
    text-transform: uppercase;
    cursor: pointer;
-    background-color: var(--table-background-color);
-    background-color: var(--highlight-color);
-    // background-color: black;
-    // color: var(--color-green);
+    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));
    }
  }

  tbody {
-    // first column
-    tr td:first-of-type {
+    // first column - torrent info
+    .torrent-info {
      position: relative;
-      padding: 0 0.3rem;
+      padding: 0.5rem 0.6rem;
      cursor: default;
-      word-break: break-all;
-      border-left: 1px solid var(--table-background-color);
+      word-break: break-word;
+      border-left: 1px solid var(--highlight-secondary, var(--highlight-color));

      @include mobile {
-        max-width: 40vw;
-        overflow-x: hidden;
+        width: 100%;
+        padding: 0.75rem 0.5rem;
+      }
+
+      .torrent-title {
+        font-weight: 500;
+        margin-bottom: 0.25rem;
+        line-height: 1.3;
+        word-break: break-word;
+        overflow-wrap: break-word;
+
+        @include mobile {
+          font-size: 0.95rem;
+        }
+      }
+
+      .torrent-meta {
+        font-size: 0.85rem;
+        display: flex;
+        opacity: 70%;
+        align-items: center;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+        margin-top: 0.25rem;
+
+        .meta-item {
+          white-space: nowrap;
+        }
+
+        .meta-separator {
+          color: var(--text-color-40);
+        }
      }
    }

-    // all columns except first
-    tr td:not(td:first-of-type) {
-      text-align: center;
-      white-space: nowrap;
-    }
-
-    // last column
+    // last column - action
    tr td:last-of-type {
      vertical-align: middle;
      cursor: pointer;
-      border-right: 1px solid var(--table-background-color);
+      border-right: 1px solid var(--highlight-secondary, var(--highlight-color));
+      max-width: 60px;
+      text-align: center;
+
+      @include mobile {
+        width: 50px;
+      }

      svg {
        width: 21px;
        display: block;
        margin: auto;
        padding: 0.3rem 0;
-        fill: var(--text-color);
+        fill: var(inherit, var(--text-color));
+
+        @include mobile {
+          width: 18px;
+        }
      }
    }

    // alternate background color per row
    tr {
-      background-color: var(--background-color);
+      background-color: var(--highlight-bg, var(--background-90));
+      color: var(--text-color);
+
+      td {
+        border-left: 1px solid
+          var(--highlight-secondary, var(--highlight-color));
+        fill: var(--text-color);
+      }
    }
-    tr:nth-child(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 {
@@ -259,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/components/ui/DarkmodeToggle.vue
+++ b/src/components/ui/DarkmodeToggle.vue
@@ -1,48 +0,0 @@
-<template>
-  <div class="darkToggle">
-    <span @click="toggleDarkmode" @keydown.enter="toggleDarkmode">{{
-      darkmodeToggleIcon
-    }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref, computed } from "vue";
-
-  function systemDarkModeEnabled() {
-    const computedStyle = window.getComputedStyle(document.body);
-    if (computedStyle?.colorScheme != null) {
-      return computedStyle.colorScheme.includes("dark");
-    }
-    return false;
-  }
-
-  const darkmode = ref(systemDarkModeEnabled());
-  const darkmodeToggleIcon = computed(() => {
-    return darkmode.value ? "🌝" : "🌚";
-  });
-
-  function toggleDarkmode() {
-    darkmode.value = !darkmode.value;
-    document.body.className = darkmode.value ? "dark" : "light";
-  }
-</script>
-
-<style lang="scss" scoped>
-  .darkToggle {
-    height: 25px;
-    width: 25px;
-    cursor: pointer;
-    position: fixed;
-    margin-bottom: 1.5rem;
-    margin-right: 2px;
-    bottom: 0;
-    right: 0;
-    z-index: 10;
-
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-</style>
--- a/src/components/ui/SeasonedButton.vue
+++ b/src/components/ui/SeasonedButton.vue
@@ -2,7 +2,7 @@
  <button
    type="button"
    :class="{ active: active, fullwidth: fullWidth }"
-    @click="emit('click')"
+    @click="event => emit('click', event)"
  >
    <slot></slot>
  </button>
@@ -15,7 +15,7 @@
  }

  interface Emit {
-    (e: "click");
+    (e: "click", event?: MouseEvent);
  }

  defineProps<Props>();
@@ -37,7 +37,6 @@
    min-height: 45px;
    padding: 5px 10px 4px 10px;
    margin: 0;
-    margin-right: 0.3rem;
    color: $text-color;
    background: $background-color-secondary;
    cursor: pointer;
--- a/src/components/ui/SeasonedInput.vue
+++ b/src/components/ui/SeasonedInput.vue
@@ -81,7 +81,6 @@
    display: flex;
    width: 100%;
    position: relative;
-    max-width: 35rem;
    border: 1px solid var(--text-color-50);
    background-color: var(--background-color-secondary);