KevinMidboe/seasoned
1
0
Fork 0
mirror of https://github.com/KevinMidboe/seasoned.git synced 2026-03-11 11:55:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Misc improvements (#107)

Browse Source 
* 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
This commit is contained in:
Kevin
2026-03-09 00:01:05 +01:00
committed by GitHub
parent cb90281e5e
commit c8262a3bda
31 changed files with 1878 additions and 601 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.vue
View File

@@ -15,8 +15,6 @@
<!-- Command Palette for quick navigation -->
<command-palette />
<darkmode-toggle />
</div>
</template>
@@ -26,7 +24,6 @@
import NavigationIcons from "@/components/header/NavigationIcons.vue";
import Popup from "@/components/Popup.vue";
import CommandPalette from "@/components/ui/CommandPalette.vue";
import DarkmodeToggle from "@/components/ui/DarkmodeToggle.vue";
const router = useRouter();
</script>

206
src/components/CastListItem.vue
View File

@@ -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);
}
.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%;
.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;
}
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>

91
src/components/Popup.vue
View File

@@ -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;

3
src/components/header/AutocompleteDropdown.vue
View File

@@ -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> = [];

2
src/components/header/NavigationHeader.vue
View File

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

11
src/components/plex/PlexLibraryStats.vue
View File

@@ -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";

5
src/components/plex/PlexServerInfo.vue
View File

@@ -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;
}

14
src/components/popup/ActionButton.vue
View File

@@ -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);

6
src/components/popup/Movie.vue
View File

@@ -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);
}
}
}

2
src/components/popup/Person.vue
View File

@@ -51,7 +51,7 @@
</Detail>
<Detail
v-if="creditedShows.length"
v-if="creditedMovies.length"
title="movies"
:detail="`Credited in ${creditedMovies.length} movies`"
>

4
src/components/settings/DataExport.vue
View File

@@ -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({

2
src/components/settings/ExportSection.vue
View File

@@ -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>

1
src/components/settings/StorageSectionBrowser.vue
View File

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

221
src/components/settings/UserProfile.vue Normal file
View File

@@ -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>

313
src/components/torrent/TorrentTable.vue
View File

@@ -1,43 +1,53 @@
<template>
<div class="torrent-table">
<div class="sort-toggle">
<span class="sort-label">Sort by:</span>
<div class="sort-options">
<button
v-for="option in sortOptions"
:key="option.value"
:class="['sort-btn', { active: selectedSort === option.value }]"
@click="changeSort(option.value)"
>
{{ option.label }}
</button>
</div>
</div>
<table>
<thead class="table__header noselect">
<tr>
<th
v-for="column in columns"
:key="column"
:class="column === selectedColumn ? 'active' : null"
@click="sortTable(column)"
class="name-header"
:class="selectedSort === 'name' ? 'active' : null"
@click="changeSort('name')"
>
{{ column }}
<span v-if="prevCol === column && direction">↑</span>
<span v-if="prevCol === column && !direction">↓</span>
Name
<span v-if="selectedSort === 'name'">{{
direction ? "↑" : "↓"
}}</span>
</th>
<th class="add-header">Add</th>
</tr>
</thead>
<tbody>
<tr
v-for="torrent in torrents"
v-for="torrent in sortedTorrents"
:key="torrent.magnet"
class="table__content"
>
<td
class="torrent-info"
@click="expand($event, torrent.name)"
@keydown.enter="expand($event, torrent.name)"
>
{{ 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 }}
<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"
@@ -49,10 +59,11 @@
</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;
}
}
// all columns except first
tr td:not(td:first-of-type) {
text-align: center;
.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;
}
// last column
.meta-separator {
color: var(--text-color-40);
}
}
}
// 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(odd) {
background-color: var(--highlight-secondary, var(--background-color));
color: var(--highlight-bg, var(--text-color));
td {
fill: var(--highlight-bg, var(--text-color)) !important;
}
tr:nth-child(even) {
background-color: var(--background-70);
}
// last element rounded corner border
tr:last-of-type {
td {
border-bottom: 1px solid 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>

48
src/components/ui/DarkmodeToggle.vue
View File

@@ -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>

5
src/components/ui/SeasonedButton.vue
View File

@@ -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;

1
src/components/ui/SeasonedInput.vue
View File

@@ -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);

6
src/composables/useTheme.ts
View File

@@ -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;

2
src/modules/user.ts
View File

@@ -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;

332
src/pages/404Page.vue
View File

@@ -1,20 +1,28 @@
<template>
<div>
<section class="not-found" :style="backgroundImageCSS">
<h1 class="not-found__title">Page Not Found</h1>
<section class="not-found">
<div class="not-found__content">
<h1 class="not-found__title">404</h1>
<p class="not-found__subtitle">Page Not Found</p>
<div v-if="quote.text" class="quote">
&ldquo;{{ quote.text }}&rdquo;
<span v-if="quote.movie" class="quote__movie">
- {{ quote.movie }} {{ quote.year }}
</span>
</div>
<seasoned-button class="button" @click="goBack">
go back to previous page
Go Back
</seasoned-button>
</div>
</section>
</div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import { useStore } from "vuex";
import SeasonedButton from "@/components/ui/SeasonedButton.vue";
const backgroundImageCSS =
'background-image: url("/assets/pulp-fiction.jpg")';
import { ref } from "vue";
const store = useStore();
@@ -22,55 +30,311 @@
store.dispatch("popup/close");
}
const isMounted = ref(false);
const quotes = [
// --- Disney / Pixar 90s & early ---
{ text: "Hakuna Matata", movie: "The Lion King", year: "1994" },
{ text: "To infinity and beyond!", movie: "Toy Story", year: "1995" },
{ text: "You're my favorite deputy.", movie: "Toy Story", year: "1995" },
{
text: "I have a brilliant beyond brilliant idea!",
movie: "The Parent Trap",
year: "1998"
},
{
text: "I'm not bad, I'm just drawn that way.",
movie: "Who Framed Roger Rabbit",
year: "1988"
},
// --- Classic 90s movies ---
{
text: "Life was like a box of chocolates.",
movie: "Forrest Gump",
year: "1994"
},
{
text: "Hasta la vista, baby.",
movie: "Terminator 2: Judgment Day",
year: "1991"
},
{
text: "There's no crying in baseball!",
movie: "A League of Their Own",
year: "1992"
},
{
text: "Get busy livin’ or get busy dyin’",
movie: "The Shawshank Redemption",
year: "1994"
},
{ text: "I’m the king of the world!", movie: "Titanic", year: "1997" },
{ text: "You had me at hello.", movie: "Jerry Maguire", year: "1996" },
{ text: "Show me the money!", movie: "Jerry Maguire", year: "1996" },
{
text: "Yippee-ki-yay …",
movie: "Die Hard with a Vengeance",
year: "1995"
},
{ text: "You’re gonna need a bigger boat.", movie: "Jaws", year: "1975" },
{ text: "I see dead people.", movie: "The Sixth Sense", year: "1999" },
{ text: "Why so serious?", movie: "The Dark Knight", year: "2008" },
{ text: "Just keep swimming.", movie: "Finding Nemo", year: "2003" },
{ text: "I’ll be back.", movie: "The Terminator", year: "1984" },
// --- Cult comedy quotes ---
{
text: "Stay classy, San Diego.",
movie: "Anchorman: The Legend of Ron Burgundy",
year: "2004"
},
{
text: "Milk was a bad choice.",
movie: "Anchorman: The Legend of Ron Burgundy",
year: "2004"
},
{
text: "60% of the time, it works every time.",
movie: "Anchorman: The Legend of Ron Burgundy",
year: "2004"
},
{
text: "I love lamp.",
movie: "Anchorman: The Legend of Ron Burgundy",
year: "2004"
},
{
text: "Well that escalated quickly.",
movie: "Anchorman: The Legend of Ron Burgundy",
year: "2004"
},
// --- A24 & Modern Indie ---
{
text: "In another life, I would have really liked just doing laundry and taxes with you.",
movie: "Everything Everywhere All at Once",
year: "2022"
},
{
text: "Every rejection, every disappointment has led you here.",
movie: "Everything Everywhere All at Once",
year: "2022"
},
{
text: "Whatever you plan on happening, never happens.",
movie: "C’mon C’mon",
year: "2021"
},
{ text: "We made promises, Harper.", movie: "Men", year: "2022" },
// (A24 quotes are harder to find officially listed, so these are standout lines from fans and quote compilations.) :contentReference[oaicite:1]{index=1}
// --- Grand iconic movie quotes ---
{ text: "May the Force be with you.", movie: "Star Wars", year: "1977" },
{
text: "Frankly, my dear, I don't give a damn.",
movie: "Gone with the Wind",
year: "1939"
},
{
text: "I love the smell of napalm in the morning.",
movie: "Apocalypse Now",
year: "1979"
},
{
text: "Toto, I've a feeling we're not in Kansas anymore.",
movie: "The Wizard of Oz",
year: "1939"
},
{ text: "Here's looking at you, kid.", movie: "Casablanca", year: "1942" },
{
text: "You can't handle the truth!",
movie: "A Few Good Men",
year: "1992"
},
{ text: "Bond. James Bond.", movie: "Dr. No", year: "1962" },
{ text: "Houston, we have a problem.", movie: "Apollo 13", year: "1995" },
{ text: "I see dead people.", movie: "The Sixth Sense", year: "1999" },
{ text: "Rosebud.", movie: "Citizen Kane", year: "1941" },
{ text: "Plastics.", movie: "The Graduate", year: "1967" },
{ text: "You talkin’ to me?", movie: "Taxi Driver", year: "1976" },
{
text: "Fasten your seatbelts. It's going to be a bumpy night.",
movie: "All About Eve",
year: "1950"
},
{ text: "Go ahead, make my day.", movie: "Sudden Impact", year: "1983" },
// --- More quotable modern lines ---
{
text: "With great power comes great responsibility.",
movie: "Spider‑Man",
year: "2002"
},
{
text: "You’re a wizard, Harry.",
movie: "Harry Potter and the Sorcerer’s Stone",
year: "2001"
},
{
text: "I am your father.",
movie: "Star Wars: The Empire Strikes Back",
year: "1980"
},
{ text: "Wakanda Forever!", movie: "Black Panther", year: "2018" },
{ text: "I am Iron Man.", movie: "Iron Man", year: "2008" },
{ text: "Avengers, assemble!", movie: "Avengers: Endgame", year: "2019" },
{ text: "We’ll always have Paris.", movie: "Casablanca", year: "1942" },
{
text: "Just when I thought I was out, they pull me back in.",
movie: "The Godfather Part III",
year: "1990"
},
{
text: "I drink your milkshake!",
movie: "There Will Be Blood",
year: "2007"
},
// --- Crowd‑sourced favorite 90s lines ---
{
text: "The greatest trick the Devil ever pulled …",
movie: "The Usual Suspects",
year: "1995"
},
{ text: "English, motherfucker …", movie: "Pulp Fiction", year: "1994" },
{
text: "As far back as I can remember …",
movie: "Goodfellas",
year: "1990"
},
{ text: "Run, Forrest, run!", movie: "Forrest Gump", year: "1994" }
];
const quote = ref({
text: "404 - Page Not Found",
movie: "",
year: ""
});
onMounted(() => {
isMounted.value = true;
quote.value = quotes[Math.floor(Math.random() * quotes.length)];
});
function goBack() {
window.history.go(-2);
window.history.go(-1);
}
</script>
<style lang="scss" scoped>
@import "scss/variables.scss";
@import "scss/media-queries";
.button {
font-size: 1.2rem;
z-index: 10;
@include mobile {
font-size: 1rem;
width: content;
}
}
@import "scss/media-queries.scss";
.not-found {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: calc(100vh - var(--header-size));
min-height: calc(100vh - var(--header-size));
background:
linear-gradient(135deg, #1a1a2e 0%, rgba(0, 0, 0, 0.5) 100%),
url("/assets/pulp-fiction.jpg");
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;
background-position: center;
background-blend-mode: multiply;
color: white;
overflow: hidden;
&::before {
content: "";
position: absolute;
height: calc(100vh - var(--header-size));
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(
circle at 50% 50%,
rgba(120, 65, 255, 0.1) 0%,
transparent 70%
);
pointer-events: none;
background: var(--background-40);
}
&__content {
text-align: center;
z-index: 10;
padding: 2rem;
margin-top: calc(-1 * var(--header-size));
@include mobile {
padding: 1rem;
}
}
&__title {
font-size: 2.5rem;
font-weight: 500;
padding: 0 1rem;
color: var(--text-color);
position: relative;
background-color: var(--background-90);
@include tablet-min {
font-size: 3.5rem;
font-size: clamp(4rem, 10vw, 8rem);
font-weight: 800;
margin: 0;
line-height: 1;
letter-spacing: -0.02em;
color: white;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
&__subtitle {
font-size: clamp(1.2rem, 3vw, 1.8rem);
font-weight: 300;
margin: 0.5rem 0 2rem;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 0.05em;
}
}
.quote {
font-family: "Georgia", serif;
font-style: italic;
font-size: clamp(1.2rem, 3vw, 1.8rem);
margin: 1.5rem 0;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
max-width: 600px;
text-align: center;
padding: 0 1rem;
@include mobile {
font-size: clamp(1rem, 2.5vw, 1.4rem);
}
}
.quote__movie {
display: block;
font-size: clamp(0.9rem, 1.8vw, 1.2rem);
margin-top: 0.5rem;
color: rgba(255, 255, 255, 0.7);
font-style: normal;
opacity: 0.8;
font-family: "Arial", sans-serif;
font-weight: 400;
@include mobile {
font-size: clamp(0.8rem, 1.5vw, 1rem);
}
}
.button {
font-size: clamp(1rem, 2vw, 1.4rem);
font-weight: 600;
padding: 1rem 2.5rem;
background: rgba(255, 255, 255, 0.9);
color: #1a1a2e;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
&:hover {
background: white;
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}
@include mobile {
padding: 0.8rem 2rem;
font-size: 1rem;
}
}
</style>

50
src/pages/GenPasswordPage.vue Normal file
View File

@@ -0,0 +1,50 @@
<template>
<div class="password">
<h1 class="password__title">Password Generator</h1>
<div class="password__content">
<password-generator />
</div>
</div>
</template>
<script setup lang="ts">
import PasswordGenerator from "@/components/settings/PasswordGenerator.vue";
function handleGeneratedPassword() {
return;
}
</script>
<style lang="scss" scoped>
@import "scss/variables";
@import "scss/media-queries";
.password {
padding: 3rem;
max-width: 100%;
@include mobile-only {
padding: 0.75rem;
}
&__title {
margin: 0 0 2rem 0;
font-size: 2rem;
font-weight: 300;
color: $text-color;
line-height: 1;
@include mobile-only {
font-size: 1.5rem;
margin: 0 0 1rem 0;
}
}
&__content {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
}
</style>

53
src/pages/MissingPlexAuthPage.vue Normal file
View File

@@ -0,0 +1,53 @@
<template>
<div class="not-authenticated">
<h1><IconStop /> Must be authenticated with Plex</h1>
<p>Go to Settings to link your Plex account</p>
</div>
</template>
<script setup lang="ts">
import IconStop from "@/icons/IconStop.vue";
</script>
<style lang="scss" scoped>
@import "scss/media-queries";
.not-authenticated {
padding: 2rem;
text-align: center;
h1 {
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
margin-bottom: 1rem;
svg {
margin-right: 1rem;
height: 3rem;
width: 3rem;
}
}
p {
font-size: 1.2rem;
color: var(--text-color-60);
}
@include mobile {
padding: 1rem;
padding-right: 0;
h1 {
font-size: 1.65rem;
svg {
margin-right: 1rem;
height: 2rem;
width: 2rem;
}
}
}
}
</style>

333
src/pages/RegisterPage.vue
View File

@@ -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">
<form ref="formElement" class="auth-form" @submit.prevent>
<seasoned-input
v-model="username"
placeholder="username"
placeholder="Email address"
icon="Email"
type="email"
@keydown.enter="focusOnNextElement"
/>
<div class="register__password-section">
<div class="password-generator">
<button
type="button"
class="generator-toggle"
@click="toggleGenerator"
>
<IconKey class="toggle-icon" />
<span>{{
showGenerator
? "Hide Password Generator"
: "Generate Strong Password"
}}</span>
</button>
<div v-if="showGenerator" class="generator-content">
<password-generator
@password-generated="handlePasswordGenerated"
/>
</div>
</div>
<seasoned-input
v-model="password"
placeholder="password"
placeholder="Password"
icon="Keyhole"
type="password"
class="password-input"
@keydown.enter="focusOnNextElement"
/>
<seasoned-input
v-model="passwordRepeat"
placeholder="repeat password"
placeholder="Confirm password"
icon="Keyhole"
type="password"
class="password-input"
@keydown.enter="submit"
/>
</div>
<seasoned-button @click="submit">Register</seasoned-button>
<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>
<router-link class="link" to="/signin"
>Have a user? Sign in here</router-link
>
<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>
</section>
</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" });
}
})
.catch(error => {
if (error?.status === 401) {
addErrorMessage("Incorrect username or password", "Access denied");
return null;
function addSuccessMessage(message: string, title?: string) {
messages.value.push({
message,
title,
type: ErrorMessageTypes.Success
});
}
addErrorMessage(error?.message, "Unexpected error");
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 => {
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;
}
.form > div,
input,
button {
margin-bottom: 1rem;
&:last-child {
margin-bottom: 0px;
.register {
// Password inputs use monospace font
:deep(.password-input input[type="password"]),
:deep(.password-input input[type="text"]) {
font-family: "Courier New", monospace;
}
}
h1 {
margin: 0;
line-height: 16px;
color: $text-color;
font-weight: 300;
margin-bottom: 20px;
text-transform: uppercase;
.register__password-section {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.link {
display: block;
width: max-content;
.password-generator {
.generator-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.875rem 1rem;
background: var(--background-ui);
border: 1px solid var(--text-color-10);
border-radius: 8px;
color: var(--text-color);
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
&:hover {
background: var(--background-color-secondary);
border-color: var(--text-color-20);
}
.toggle-icon {
width: 18px;
height: 18px;
color: var(--highlight-color);
}
}
.generator-content {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--text-color-10);
}
}
.register__password-requirements {
background: var(--background-ui);
border: 1px solid var(--text-color-10);
border-radius: 8px;
padding: 1.25rem;
margin-top: -0.25rem;
.requirements-title {
margin: 0 0 1rem 0;
font-size: 0.95rem;
font-weight: 500;
color: $text-color;
}
.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>

117
src/pages/SigninPage.vue
View File

@@ -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">
<form ref="formElement" class="auth-form">
<seasoned-input
v-model="username"
placeholder="username"
placeholder="Email address"
icon="Email"
type="email"
@keydown.enter="focusOnNextElement"
/>
<seasoned-input
v-model="password"
placeholder="password"
placeholder="Password"
icon="Keyhole"
type="password"
@keydown.enter="submit"
/>
<seasoned-button @click="submit">sign in</seasoned-button>
<seasoned-button class="auth-button" @click="submit">
Sign In
</seasoned-button>
</form>
<router-link class="link" to="/register"
>Don't have a user? Register here</router-link
>
<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" />
</section>
</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 signin() {
login(username.value, password.value, true)
.then(data => {
if (data?.success && store.dispatch("user/login")) {
router.push({ name: "profile" });
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)
.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>

43
src/pages/TorrentsPage.vue
View File

@@ -1,8 +1,7 @@
<template>
<div>
<page-header title="Torrent search page" />
<div class="torrents">
<h1 class="torrents__title">Torrent Search</h1>
<section>
<div class="search-input-group">
<seasoned-input
v-model="query"
@@ -16,13 +15,11 @@
<active-torrents />
<TorrentList :query="torrentQuery" />
</section>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import PageHeader from "@/components/PageHeader.vue";
import SeasonedInput from "@/components/ui/SeasonedInput.vue";
import SeasonedButton from "@/components/ui/SeasonedButton.vue";
import TorrentList from "@/components/torrent/TorrentSearchResults.vue";
@@ -42,16 +39,44 @@
</script>
<style lang="scss" scoped>
section {
padding: 1.25rem;
@import "scss/variables";
@import "scss/media-queries";
.torrents {
padding: 3rem;
max-width: 100%;
@include mobile-only {
padding: 0.75rem;
}
&__title {
margin: 0 0 2rem 0;
font-size: 2rem;
font-weight: 300;
color: $text-color;
line-height: 1;
@include mobile-only {
font-size: 1.5rem;
margin: 1rem 0;
}
}
.search-input-group {
display: flex;
gap: 0.5rem;
margin-bottom: 2rem;
@include mobile-only {
flex-direction: column;
gap: 0.75rem;
}
button {
margin-left: 0.5rem;
@include mobile-only {
width: 100%;
}
}
}
}

185
src/plugins/Toast/ToastComponent.vue
View File

@@ -3,22 +3,19 @@
<transition name="slide">
<div v-if="show" class="toast" :class="type || 'info'" @click="clicked">
<div class="toast--content">
<div class="toast--icon">
<i v-if="image"
><img class="toast--icon-image" :src="image" alt="Toast icon"
/></i>
</div>
<div v-if="description" class="toast--text">
<span class="toast--text__title">{{ title }}</span>
<br /><span
class="toast--text__description"
v-html="description"
></span>
<span class="toast--text__description" v-html="description"></span>
</div>
<div v-else class="toast--text">
<span class="toast--text__title-large">{{ title }}</span>
</div>
<div class="toast--dismiss" @click.stop="dismiss">
<i class="fas fa-times"></i>
</div>
<div class="toast--dismiss" @click="dismiss">
<i class="fas fa-times"></i>
</div>
@@ -65,107 +62,161 @@
</script>
<style lang="scss" scoped>
// @import '@/scss/variables.scss';
/* ------------------------------
Transition
------------------------------ */
.slide-enter-active {
transition: all 0.3s ease;
.slide-enter-active,
.slide-leave-active {
transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.slide-enter,
.slide-enter-from,
.slide-leave-to {
transform: translateY(100vh);
transform: translateY(40px);
opacity: 0;
}
.slide-leave-active {
transition: all 2s ease;
}
.toast--icon-image {
height: 100%;
width: 100%;
max-height: 45px;
max-width: 45px;
}
/* ------------------------------
Toast
------------------------------ */
.toast {
position: fixed;
bottom: 0.5rem;
right: 1.25rem;
bottom: 1.25rem;
z-index: 1000;
cursor: pointer;
z-index: 100;
background-color: white;
border-radius: 3px;
box-shadow:
0 4px 8px 0 rgba(0, 0, 0, 0.17),
0 2px 4px 0 rgba(0, 0, 0, 0.08);
padding: 0.5rem;
margin: 1rem 2rem 1rem 0.71rem;
// max-width: calc(100% - 3rem);
min-width: 320px;
min-width: 340px;
max-width: 460px;
width: calc(100vw - 2rem);
// If small screen we have a min-width that is related to the screen size.
// else large screens we want a max-width that only uses the space in bottom right
padding: 1.1rem 1.25rem;
right: 0;
line-height: 22.5px;
border-radius: 16px;
/* System-based surface */
background: var(--background-color-secondary);
/* Subtle separation */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
/* Clear state indicator */
border-left: 5px solid transparent;
/* Base text tone */
color: var(--text-color, #1f2937);
line-height: 1.5;
/* ------------------------------
Content Layout
------------------------------ */
&--content {
display: flex;
align-items: center;
}
&--icon {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
align-items: flex-start;
gap: 1rem;
}
&--text {
margin-left: 0.5rem;
// color: $bt-brown;
color: black;
word-wrap: break-word;
flex: 1;
display: flex;
flex-direction: column;
}
&__title {
text-transform: capitalize;
/* ------------------------------
Typography Hierarchy
------------------------------ */
/* Context label */
&--text__title {
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.3px;
text-transform: uppercase;
/* Softer than body but not faded */
color: color-mix(in srgb, currentColor 75%, transparent);
}
/* Primary message */
&--text__description {
margin-top: 0.3rem;
font-size: 0.98rem;
font-weight: 400;
&-large {
font-size: 2rem;
}
line-height: 1.5;
color: currentColor;
}
&__description {
font-weight: 300;
}
&--text__title-large {
font-size: 1.15rem;
font-weight: 500;
}
/* ------------------------------
Dismiss Button
------------------------------ */
&--dismiss {
align-self: flex-end;
flex-shrink: 0;
img {
width: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
transition: background 0.2s ease;
&:hover {
background: var(--background-color);
}
i {
font-size: 0.75rem;
}
}
/* ------------------------------
State Colors
------------------------------ */
&.success {
border-left: 6px solid #38c172;
border-left-color: #22c55e;
}
&.info {
border-left: 6px solid #ffd300;
border-left-color: #facc15;
}
&.warning {
border-left: 6px solid #f6993f;
border-left-color: #f97316;
}
&.error {
border-left: 6px solid #e3342f;
border-left-color: #ef4444;
}
&.simple {
border-left: unset;
border-left-color: transparent;
}
}
/* ------------------------------
Mobile
------------------------------ */
@media (max-width: 480px) {
.toast {
right: 1rem;
left: 1rem;
width: auto;
min-width: unset;
}
}
</style>

25
src/routes.ts
View File

@@ -4,6 +4,7 @@ import type { RouteRecordRaw, RouteLocationNormalized } from "vue-router";
/* eslint-disable-next-line import-x/no-cycle */
import store from "./store";
import { usePlexAuth } from "./composables/usePlexAuth";
const { getPlexAuthCookie } = usePlexAuth();
declare global {
@@ -58,8 +59,7 @@ const routes: RouteRecordRaw[] = [
},
{
name: "signin",
path: "/signin",
alias: "/login",
path: "/login",
component: () => import("./pages/SigninPage.vue")
},
{
@@ -76,8 +76,18 @@ const routes: RouteRecordRaw[] = [
// }
// },
{
name: "404",
path: "/404",
name: "password-gen",
path: "/password",
component: () => import("./pages/GenPasswordPage.vue")
},
{
name: "missing-plex-auth",
path: "/missing/plex",
component: () => import("./pages/MissingPlexAuthPage.vue")
},
{
path: "/:pathMatch(.*)*",
name: "NotFound",
component: () => import("./pages/404Page.vue")
}
// {
@@ -102,7 +112,7 @@ const hasPlexAccount = () => {
// Check Vuex store first
if (store.getters["user/plexUserId"] !== null) return true;
// Fallback to localStorage/cookie for page refreshes
// Fallback to localStorage
const authToken = getPlexAuthCookie();
return !!authToken;
};
@@ -120,15 +130,14 @@ router.beforeEach(
// send user to signin page.
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!loggedIn()) {
next({ path: "/signin" });
next({ path: "/login" });
}
}
if (to.matched.some(record => record.meta.requiresPlexAccount)) {
if (!hasPlexAccount()) {
next({
path: "/settings",
query: { missingPlexAccount: true }
path: "/missing/plex"
});
}
}

100
src/scss/shared-auth.scss Normal file
View File

@@ -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;
}
}

128
src/scss/variables.scss
View File

@@ -114,10 +114,35 @@ $color-error: var(--color-error) !default;
$color-error-highlight: var(--color-error-highlight) !default;
.halloween {
--text-color: #6a318c;
--text-color-secondary: #fb5a33;
--background-color: #80c350;
--background-color-secondary: #ff9234;
--text-color: #f5f5f5;
--text-color-90: rgba(245, 245, 245, 0.9);
--text-color-70: rgba(245, 245, 245, 0.7);
--text-color-50: rgba(245, 245, 245, 0.5);
--text-color-10: rgba(245, 245, 245, 0.1);
--text-color-5: rgba(245, 245, 245, 0.05);
--text-color-secondary: #ff6600;
--background-color: #1a0e2e;
--background-color-secondary: #2d1b3d;
--background-ui: #3d2550;
--background-95: rgba(26, 14, 46, 0.95);
--background-90: rgba(26, 14, 46, 0.9);
--background-80: rgba(26, 14, 46, 0.8);
--background-70: rgba(45, 27, 61, 0.7);
--background-40: rgba(61, 37, 80, 0.4);
--background-0: rgba(26, 14, 46, 0);
--highlight-color: #ff6600;
--color-green: #ff6600;
--color-green-90: rgba(255, 102, 0, 0.9);
--color-green-70: rgba(255, 102, 0, 0.7);
--table-background-color: #0d0618;
--table-header-text-color: #ff6600;
--color-success: rgba(138, 43, 226, 0.8);
--color-success-text: #f5f5f5;
--color-success-highlight: #8a2be2;
--color-warning: rgba(255, 140, 0, 0.7);
--color-warning-highlight: #ff8c00;
--color-error: rgba(220, 20, 60, 0.8);
--color-error-highlight: #dc143c;
}
.dark {
@@ -158,3 +183,98 @@ $color-error-highlight: var(--color-error-highlight) !default;
--table-background-color: #081c24;
--table-header-text-color: white;
}
.ocean {
--text-color: #e0f7ff;
--text-color-90: rgba(224, 247, 255, 0.9);
--text-color-70: rgba(224, 247, 255, 0.7);
--text-color-50: rgba(224, 247, 255, 0.5);
--text-color-10: rgba(224, 247, 255, 0.1);
--text-color-5: rgba(224, 247, 255, 0.05);
--text-color-secondary: #00d4ff;
--background-color: #0f2027;
--background-color-secondary: #203a43;
--background-ui: #2c5364;
--background-95: rgba(15, 32, 39, 0.95);
--background-90: rgba(15, 32, 39, 0.9);
--background-80: rgba(15, 32, 39, 0.8);
--background-70: rgba(32, 58, 67, 0.7);
--background-40: rgba(44, 83, 100, 0.4);
--background-0: rgba(15, 32, 39, 0);
--highlight-color: #00d4ff;
--color-green: #00d4ff;
--color-green-90: rgba(0, 212, 255, 0.9);
--color-green-70: rgba(0, 212, 255, 0.7);
--table-background-color: #0a1519;
--table-header-text-color: #00d4ff;
}
.nordic {
--text-color: #2c3e2e;
--text-color-90: rgba(44, 62, 46, 0.9);
--text-color-70: rgba(44, 62, 46, 0.7);
--text-color-50: rgba(44, 62, 46, 0.5);
--text-color-10: rgba(44, 62, 46, 0.1);
--text-color-5: rgba(44, 62, 46, 0.05);
--text-color-secondary: #5a8a68;
--background-color: #f5f0e8;
--background-color-secondary: #fffef9;
--background-ui: #e8dfc8;
--background-95: rgba(245, 240, 232, 0.95);
--background-90: rgba(245, 240, 232, 0.9);
--background-80: rgba(245, 240, 232, 0.8);
--background-70: rgba(232, 223, 200, 0.7);
--background-40: rgba(232, 223, 200, 0.4);
--background-0: rgba(245, 240, 232, 0);
--highlight-color: #3d6e4e;
--color-green: #3d6e4e;
--color-green-90: rgba(61, 110, 78, 0.95);
--color-green-70: rgba(61, 110, 78, 0.7);
--table-background-color: #6d5a47;
--table-header-text-color: #fffef9;
--color-success: rgba(61, 110, 78, 0.85);
--color-success-text: #fffef9;
--color-success-highlight: #2d5e3e;
--color-warning: rgba(184, 134, 11, 0.75);
--color-warning-highlight: #d4a017;
--color-error: rgba(165, 42, 42, 0.85);
--color-error-highlight: #a52a2a;
--background-nav-logo: #2c3e2e;
--white: #fff;
--white-70: rgba(255, 255, 255, 0.7);
}
.seed {
--text-color: #fcfcf7;
--text-color-90: rgba(252, 252, 247, 0.9);
--text-color-70: rgba(252, 252, 247, 0.7);
--text-color-50: rgba(252, 252, 247, 0.5);
--text-color-10: rgba(252, 252, 247, 0.1);
--text-color-5: rgba(252, 252, 247, 0.05);
--text-color-secondary: #e9f0ca;
--background-color: #1c3a13;
--background-color-secondary: #334e2b;
--background-ui: #45663c;
--background-95: rgba(28, 58, 19, 0.95);
--background-90: rgba(28, 58, 19, 0.9);
--background-80: rgba(28, 58, 19, 0.8);
--background-70: rgba(51, 78, 43, 0.7);
--background-40: rgba(69, 102, 60, 0.4);
--background-0: rgba(28, 58, 19, 0);
--highlight-color: #e9f0ca;
--color-green: #e9f0ca;
--color-green-90: rgba(233, 240, 202, 0.9);
--color-green-70: rgba(233, 240, 202, 0.7);
--table-background-color: #142f0c;
--table-header-text-color: #e9f0ca;
--color-success: rgba(208, 217, 185, 0.85);
--color-success-text: #1c3a13;
--color-success-highlight: #d0d9b9;
--color-warning: rgba(233, 240, 202, 0.75);
--color-warning-highlight: #e9f0ca;
--color-error: rgba(185, 99, 94, 0.85);
--color-error-highlight: #b9635e;
--background-nav-logo: #fcfcf7;
--white: #fcfcf7;
--white-70: rgba(252, 252, 247, 0.7);
}

5
src/utils.ts
View File

@@ -89,7 +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}${window.location.port ? `:${window.location.port}` : ""
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]}`;
}