Minor improvements and code cleanup across components

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

src/App.vue

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

src/components/CastListItem.vue

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

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

src/components/plex/PlexLibraryStats.vue

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

src/components/plex/PlexServerInfo.vue

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

src/components/popup/Movie.vue

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

src/components/settings/DataExport.vue

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

src/components/settings/ExportSection.vue

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

src/components/settings/StorageSectionBrowser.vue

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

src/components/torrent/TorrentTable.vue

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

src/composables/useTheme.ts

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

src/modules/user.ts

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

src/pages/404Page.vue

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

src/pages/RegisterPage.vue

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

src/pages/SigninPage.vue

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

src/scss/shared-auth.scss

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

src/utils.ts

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