mirror of
https://github.com/KevinMidboe/seasoned.git
synced 2026-05-14 10:05:42 +00:00
Feat/settings page redesign (#104)
* include credentials on login fetch requests, allows set header response * Add theme composable and utility improvements - Create useTheme composable for centralized theme management - Update main.ts to use useTheme for initialization - Generalize getCookie utility in user module - Add utility functions for data formatting * Add Plex integration composables and icons - Create usePlexAuth composable for Plex OAuth flow - Create usePlexApi composable for Plex API interactions - Create useRandomWords composable for password generation - Add Plex-related icons (IconPlex, IconServer, IconSync) - Add Plex helper utilities - Update API with Plex-related endpoints * Add storage management components for data & privacy section - Create StorageManager component for browser storage overview - Create StorageSectionBrowser for localStorage/sessionStorage/cookies - Create StorageSectionServer for server-side data (mock) - Create ExportSection for data export functionality - Refactor DataExport component with modular sections - Add storage icons (IconCookie, IconDatabase, IconTimer) - Implement collapsible sections with visual indicators - Add colored borders per storage type - Display item counts and total size in headers * Add theme, password, and security settings components - Create ThemePreferences with visual theme selector - Create PasswordGenerator with passphrase and random modes - Create SecuritySettings wrapper for password management - Update ChangePassword to work with new layout - Implement improved slider UX with visual feedback - Add theme preview cards with gradients - Standardize component styling and typography * Add Plex settings and authentication components - Create PlexSettings component for Plex account management - Create PlexAuthButton with improved OAuth flow - Create PlexServerInfo for server details display - Use icon components instead of inline SVGs - Add sync and unlink functionality - Implement user-friendly authentication flow * Redesign settings page with two-column layout and ProfileHero - Create ProfileHero component with avatar and user info - Create RequestHistory component for Plex requests (placeholder) - Redesign SettingsPage with modern two-column grid layout - Add shared-settings.scss for consistent styling - Organize sections: Appearance, Security, Integrations, Data & Privacy - Implement responsive mobile layout - Standardize typography (h2: 1.5rem, 700 weight) - Add compact modifier for tighter sections
This commit is contained in:
GitHub
72
src/components/settings/DangerZoneAction.vue
Normal file
72
src/components/settings/DangerZoneAction.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="danger-zone">
|
||||
<h3 class="danger-zone__title">{{ title }}</h3>
|
||||
<p class="danger-zone__description">
|
||||
{{ description }}
|
||||
</p>
|
||||
<button class="danger-zone__button" @click="$emit('action')">
|
||||
{{ buttonText }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
buttonText: string;
|
||||
}
|
||||
|
||||
interface Emit {
|
||||
(e: "action"): void;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
defineEmits<Emit>();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.danger-zone {
|
||||
padding: 1.25rem;
|
||||
background: rgba(220, 48, 35, 0.1);
|
||||
border: 1px solid var(--color-error-highlight);
|
||||
border-radius: 0.5rem;
|
||||
|
||||
@include mobile-only {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-error-highlight);
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-color-70);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&__button {
|
||||
padding: 0.625rem 1.25rem;
|
||||
background: var(--color-error);
|
||||
color: white;
|
||||
border: 1px solid var(--color-error-highlight);
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-error-highlight);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
53
src/components/settings/DataExport.vue
Normal file
53
src/components/settings/DataExport.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="data-export">
|
||||
<div class="export-options">
|
||||
<!-- Request History Card -->
|
||||
<RequestHistory :data="requestStats" />
|
||||
|
||||
<!-- Export Data Card -->
|
||||
<ExportSection :data="requestStats" />
|
||||
|
||||
<!-- Local Storage Items -->
|
||||
<StorageManager />
|
||||
|
||||
<!-- Delete Account -->
|
||||
<DangerZoneAction
|
||||
title="Delete Account"
|
||||
description="Permanently delete your account and all associated data. This action cannot be undone."
|
||||
button-text="Delete My Account"
|
||||
@action="confirmDelete"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import StorageManager from "./StorageManager.vue";
|
||||
import ExportSection from "./ExportSection.vue"
|
||||
import RequestHistory from "./RequestHistory.vue"
|
||||
import DangerZoneAction from "./DangerZoneAction.vue";
|
||||
|
||||
const requestStats = ref({
|
||||
total: 45,
|
||||
approved: 38,
|
||||
pending: 7
|
||||
});
|
||||
|
||||
function confirmDelete() {
|
||||
const confirmed = confirm(
|
||||
"Are you sure you want to *permanently delete* your account and all associated data? This action cannot be undone."
|
||||
);
|
||||
|
||||
if (!confirmed) return;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.export-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.65rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
</style>
|
||||
127
src/components/settings/ExportSection.vue
Normal file
127
src/components/settings/ExportSection.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="settings-section-card">
|
||||
<div class="settings-section-header">
|
||||
<h2>Export Your Data</h2>
|
||||
<p>
|
||||
Download a copy of your account data including requests, watch history,
|
||||
and preferences.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Export to JSON & CSV section -->
|
||||
<div class="export-actions">
|
||||
<button
|
||||
class="export-btn"
|
||||
@click="() => exportData('json')"
|
||||
:disabled="exporting"
|
||||
>
|
||||
<IconActivity v-if="exporting" class="spin" />
|
||||
<span v-else>Export as JSON</span>
|
||||
</button>
|
||||
<button
|
||||
class="export-btn"
|
||||
@click="() => exportData('csv')"
|
||||
:disabled="exporting"
|
||||
>
|
||||
<IconActivity v-if="exporting" class="spin" />
|
||||
<span v-else>Export as CSV</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineProps } from "vue";
|
||||
import IconActivity from "@/icons/IconActivity.vue";
|
||||
|
||||
interface Props {
|
||||
data: any;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const exporting = ref(false);
|
||||
|
||||
async function exportData(format: "json" | "csv") {
|
||||
exporting.value = true;
|
||||
|
||||
// Mock export
|
||||
await new Promise(resolve => setTimeout(resolve, 1500));
|
||||
|
||||
const data = {
|
||||
username: "user123",
|
||||
requests: props?.data,
|
||||
exportDate: new Date().toISOString()
|
||||
};
|
||||
|
||||
const blob = new Blob(
|
||||
[format === "json" ? JSON.stringify(data, null, 2) : convertToCSV(data)],
|
||||
{ type: format === "json" ? "application/json" : "text/csv" }
|
||||
);
|
||||
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = `seasoned-data-export.${format}`;
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
exporting.value = false;
|
||||
}
|
||||
|
||||
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>
|
||||
@import "scss/media-queries";
|
||||
@import "scss/shared-settings";
|
||||
|
||||
.export-actions {
|
||||
display: flex;
|
||||
gap: 0.55rem;
|
||||
|
||||
@include mobile-only {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
flex: 1;
|
||||
padding: 0.55rem 0.85rem;
|
||||
background-color: var(--highlight-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--color-green-90);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: white;
|
||||
|
||||
&.spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
597
src/components/settings/PasswordGenerator.vue
Normal file
597
src/components/settings/PasswordGenerator.vue
Normal file
@@ -0,0 +1,597 @@
|
||||
<template>
|
||||
<div class="password-generator">
|
||||
<div class="generator-panel">
|
||||
<div class="generator-tabs">
|
||||
<button
|
||||
:class="['tab', { 'tab--active': mode === 'words' }]"
|
||||
@click="mode = 'words'"
|
||||
>
|
||||
Passphrase
|
||||
</button>
|
||||
<button
|
||||
:class="['tab', { 'tab--active': mode === 'chars' }]"
|
||||
@click="mode = 'chars'"
|
||||
>
|
||||
Random
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="mode === 'words'" class="generator-content">
|
||||
<div class="generator-header">
|
||||
<h4>Passphrase Generator</h4>
|
||||
<p>Create a memorable password using random words</p>
|
||||
</div>
|
||||
|
||||
<div class="password-display" @click="copyPassword">
|
||||
<span class="password-text password-text--mono">{{
|
||||
generatedPassword
|
||||
}}</span>
|
||||
<button
|
||||
class="copy-btn"
|
||||
:title="copied ? 'Copied!' : 'Click to copy'"
|
||||
>
|
||||
{{ copied ? "✓" : "📋" }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="generator-options">
|
||||
<div class="option-row">
|
||||
<div class="slider-header">
|
||||
<label>Words</label>
|
||||
<span class="slider-value">{{ wordCount }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model.number="wordCount"
|
||||
type="range"
|
||||
min="3"
|
||||
max="7"
|
||||
class="slider"
|
||||
@input="generateWordsPassword"
|
||||
/>
|
||||
<div class="slider-labels">
|
||||
<span>3</span>
|
||||
<span>7</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="generator-content">
|
||||
<div class="generator-header">
|
||||
<h4>Random Password Generator</h4>
|
||||
<p>Generate a secure random password</p>
|
||||
</div>
|
||||
|
||||
<div class="password-display" @click="copyPassword">
|
||||
<span class="password-text password-text--mono">{{
|
||||
generatedPassword
|
||||
}}</span>
|
||||
<button
|
||||
class="copy-btn"
|
||||
:title="copied ? 'Copied!' : 'Click to copy'"
|
||||
>
|
||||
{{ copied ? "✓" : "📋" }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="generator-options">
|
||||
<div class="option-row">
|
||||
<div class="slider-header">
|
||||
<label>Length</label>
|
||||
<span class="slider-value">{{ charLength }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model.number="charLength"
|
||||
type="range"
|
||||
min="12"
|
||||
max="46"
|
||||
class="slider"
|
||||
@input="generateCharsPassword"
|
||||
/>
|
||||
<div class="slider-labels">
|
||||
<span>12</span>
|
||||
<span>46</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option-row checkbox-row">
|
||||
<label>
|
||||
<input
|
||||
v-model="includeUppercase"
|
||||
type="checkbox"
|
||||
@change="generateCharsPassword"
|
||||
/>
|
||||
Uppercase (A-Z)
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
v-model="includeLowercase"
|
||||
type="checkbox"
|
||||
@change="generateCharsPassword"
|
||||
/>
|
||||
Lowercase (a-z)
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
v-model="includeNumbers"
|
||||
type="checkbox"
|
||||
@change="generateCharsPassword"
|
||||
/>
|
||||
Numbers (0-9)
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
v-model="includeSymbols"
|
||||
type="checkbox"
|
||||
@change="generateCharsPassword"
|
||||
/>
|
||||
Symbols (!@#$)
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="generator-actions">
|
||||
<button class="action-btn action-btn--secondary" @click="regenerate">
|
||||
<IconActivity class="btn-icon" />
|
||||
Regenerate
|
||||
</button>
|
||||
<button class="action-btn action-btn--primary" @click="usePassword">
|
||||
Use This Password
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import IconActivity from "@/icons/IconActivity.vue";
|
||||
import { useRandomWords } from "@/composables/useRandomWords";
|
||||
|
||||
interface Emit {
|
||||
(e: "passwordGenerated", password: string): void;
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emit>();
|
||||
|
||||
const mode = ref<"words" | "chars">("words");
|
||||
const generatedPassword = ref("");
|
||||
const copied = ref(false);
|
||||
|
||||
// Words mode options
|
||||
const wordCount = ref(4);
|
||||
const separator = ref("-");
|
||||
|
||||
// Chars mode options
|
||||
const charLength = ref(16);
|
||||
const includeUppercase = ref(true);
|
||||
const includeLowercase = ref(true);
|
||||
const includeNumbers = ref(true);
|
||||
const includeSymbols = ref(true);
|
||||
|
||||
const { getRandomWords } = useRandomWords();
|
||||
|
||||
async function generateWordsPassword() {
|
||||
const words = await getRandomWords(wordCount.value);
|
||||
const password = words.join(separator.value);
|
||||
generatedPassword.value = password;
|
||||
}
|
||||
|
||||
function generateCharsPassword() {
|
||||
let charset = "";
|
||||
|
||||
if (includeUppercase.value) charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
if (includeLowercase.value) charset += "abcdefghijklmnopqrstuvwxyz";
|
||||
if (includeNumbers.value) charset += "0123456789";
|
||||
if (includeSymbols.value) charset += "!@#$%^&*()_+-=[]{}|;:,.<>?";
|
||||
|
||||
if (charset === "") charset = "abcdefghijklmnopqrstuvwxyz";
|
||||
|
||||
let password = "";
|
||||
for (let i = 0; i < charLength.value; i++) {
|
||||
password += charset.charAt(Math.floor(Math.random() * charset.length));
|
||||
}
|
||||
|
||||
generatedPassword.value = password;
|
||||
}
|
||||
|
||||
async function regenerate() {
|
||||
if (mode.value === "words") {
|
||||
await generateWordsPassword();
|
||||
} else {
|
||||
generateCharsPassword();
|
||||
}
|
||||
}
|
||||
|
||||
async function copyPassword() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(generatedPassword.value);
|
||||
copied.value = true;
|
||||
setTimeout(() => {
|
||||
copied.value = false;
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
console.error("Failed to copy:", err);
|
||||
}
|
||||
}
|
||||
|
||||
function usePassword() {
|
||||
emit("passwordGenerated", generatedPassword.value);
|
||||
// TODO: emit
|
||||
// showGenerator.value = false;
|
||||
}
|
||||
|
||||
watch(mode, async () => {
|
||||
if (mode.value === "words") {
|
||||
await generateWordsPassword();
|
||||
} else {
|
||||
generateCharsPassword();
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(generateWordsPassword);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.password-generator {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.generator-panel {
|
||||
margin-top: 0.75rem;
|
||||
padding: 1rem;
|
||||
background-color: var(--background-ui);
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--background-40);
|
||||
|
||||
@include mobile-only {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.generator-tabs {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
padding: 0.65rem 1rem;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--background-40);
|
||||
border-radius: 0.25rem;
|
||||
color: $text-color-70;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.9rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-40);
|
||||
}
|
||||
|
||||
&--active {
|
||||
background-color: var(--highlight-color);
|
||||
border-color: var(--highlight-color);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.generator-content {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.generator-header {
|
||||
margin-bottom: 0.75rem;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 0.15rem 0;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: $text-color;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
color: $text-color-70;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
.password-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background-color: var(--background-color);
|
||||
border: 2px solid var(--highlight-color);
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-40);
|
||||
}
|
||||
|
||||
@include mobile-only {
|
||||
padding: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.password-text {
|
||||
flex: 1;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
color: var(--highlight-color);
|
||||
user-select: all;
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
&--mono {
|
||||
font-family: "Courier New", monospace;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
transition: transform 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.generator-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.option-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
|
||||
label {
|
||||
font-size: 0.95rem;
|
||||
color: $text-color;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
&.checkbox-row {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
|
||||
@include mobile-only {
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
|
||||
input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.slider-value {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--highlight-color);
|
||||
min-width: 2.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.slider-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.75rem;
|
||||
color: $text-color-50;
|
||||
margin-top: 0.25rem;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
background: var(--background-40);
|
||||
outline: none;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
margin: 0.5rem 0;
|
||||
|
||||
@include mobile-only {
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--background-40);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: var(--highlight-color);
|
||||
cursor: grab;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.2s;
|
||||
margin-top: -7px;
|
||||
|
||||
@include mobile-only {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: var(--highlight-color);
|
||||
cursor: grab;
|
||||
border: none;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.2s;
|
||||
|
||||
@include mobile-only {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
|
||||
@include mobile-only {
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
background: var(--background-40);
|
||||
|
||||
@include mobile-only {
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.separator-input {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--background-40);
|
||||
border-radius: 0.25rem;
|
||||
background-color: var(--background-color);
|
||||
color: $text-color;
|
||||
font-size: 0.85rem;
|
||||
font-family: "Courier New", monospace;
|
||||
text-align: center;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $text-color-50;
|
||||
font-family: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.generator-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
|
||||
@include mobile-only {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
padding: 0.6rem 1rem;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
|
||||
&--secondary {
|
||||
background-color: var(--background-color);
|
||||
color: $text-color;
|
||||
border: 1px solid var(--background-40);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-40);
|
||||
}
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background-color: var(--highlight-color);
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-green-90);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
}
|
||||
</style>
|
||||
349
src/components/settings/PlexSettings.vue
Normal file
349
src/components/settings/PlexSettings.vue
Normal file
@@ -0,0 +1,349 @@
|
||||
<template>
|
||||
<div class="plex-settings">
|
||||
<!-- Unconnected state -->
|
||||
<PlexAuthButton
|
||||
v-if="!showPlexInformation"
|
||||
@auth-success="handleAuthSuccess"
|
||||
@auth-error="handleAuthError"
|
||||
/>
|
||||
|
||||
<!-- Connected state -->
|
||||
<div v-else class="plex-connected">
|
||||
<PlexProfileCard
|
||||
v-if="plexUsername"
|
||||
:username="plexUsername"
|
||||
:userData="plexUserData"
|
||||
/>
|
||||
|
||||
<PlexLibraryStats
|
||||
:movies="libraryStats?.movies"
|
||||
:shows="libraryStats?.['tv shows']"
|
||||
:music="libraryStats?.music"
|
||||
:watchtime="libraryStats?.watchtime || 0"
|
||||
:loading="syncingLibrary"
|
||||
@open-library="showLibraryDetails"
|
||||
/>
|
||||
|
||||
<PlexServerInfo
|
||||
:serverName="plexServer"
|
||||
:lastSync="lastSync"
|
||||
:syncing="syncingServer"
|
||||
@sync="syncLibrary"
|
||||
@unlink="() => (showUnlinkModal = true)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Messages -->
|
||||
<SeasonedMessages v-model:messages="messages" />
|
||||
|
||||
<!-- Unlink Confirmation Modal -->
|
||||
<PlexUnlinkModal
|
||||
v-if="showUnlinkModal"
|
||||
@confirm="unauthenticatePlex"
|
||||
@cancel="() => (showUnlinkModal = false)"
|
||||
/>
|
||||
|
||||
<!-- Library Details Modal -->
|
||||
<PlexLibraryModal
|
||||
v-if="showLibraryModal && selectedLibrary"
|
||||
:libraryType="selectedLibrary"
|
||||
:details="libraryStats[selectedLibrary]"
|
||||
:serverUrl="plexServerUrl"
|
||||
:serverMachineId="plexMachineId"
|
||||
@close="closeLibraryModal"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import SeasonedMessages from "@/components/ui/SeasonedMessages.vue";
|
||||
import PlexAuthButton from "@/components/plex/PlexAuthButton.vue";
|
||||
import PlexProfileCard from "@/components/plex/PlexProfileCard.vue";
|
||||
import PlexLibraryStats from "@/components/plex/PlexLibraryStats.vue";
|
||||
import PlexServerInfo from "@/components/plex/PlexServerInfo.vue";
|
||||
import PlexUnlinkModal from "@/components/plex/PlexUnlinkModal.vue";
|
||||
import PlexLibraryModal from "@/components/plex/PlexLibraryModal.vue";
|
||||
import { usePlexAuth } from "@/composables/usePlexAuth";
|
||||
import {
|
||||
fetchPlexServers,
|
||||
fetchPlexUserData,
|
||||
fetchLibraryDetails
|
||||
} from "@/composables/usePlexApi";
|
||||
import type { Ref } from "vue";
|
||||
import { ErrorMessageTypes } from "../../interfaces/IErrorMessage";
|
||||
import type { IErrorMessage } from "../../interfaces/IErrorMessage";
|
||||
|
||||
const messages: Ref<IErrorMessage[]> = ref([]);
|
||||
const syncingServer = ref(false);
|
||||
const syncingLibrary = ref(false);
|
||||
const showUnlinkModal = ref(false);
|
||||
const plexUsername = ref<string>("");
|
||||
const plexUserData = ref<any>(null);
|
||||
const showPlexInformation = ref<boolean>(false);
|
||||
const hasLocalStorageData = ref<boolean>(false);
|
||||
const showLibraryModal = ref<boolean>(false);
|
||||
const selectedLibrary = ref<string>("");
|
||||
|
||||
const plexServer = ref("");
|
||||
const plexServerUrl = ref("");
|
||||
const plexMachineId = ref("");
|
||||
const lastSync = ref(sessionStorage.getItem("plex_library_last_sync"));
|
||||
const libraryStats = ref({
|
||||
movies: 0,
|
||||
shows: 0,
|
||||
music: 0,
|
||||
watchtime: 0
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "reload"): void;
|
||||
}>();
|
||||
|
||||
// Composables
|
||||
const { getPlexAuthCookie, setPlexAuthCookie, cleanup } = usePlexAuth();
|
||||
|
||||
// ----- Connection check -----
|
||||
function checkPlexConnection() {
|
||||
const authToken = getPlexAuthCookie();
|
||||
showPlexInformation.value = !!authToken;
|
||||
return showPlexInformation.value;
|
||||
}
|
||||
|
||||
// ----- Library loading -----
|
||||
async function loadPlexServer() {
|
||||
// return cached value from sessionStorage if exists
|
||||
const cacheKey = "plex_server_data";
|
||||
const cachedData = sessionStorage.getItem(cacheKey);
|
||||
if (cachedData) {
|
||||
const server = JSON.parse(cachedData);
|
||||
plexServer.value = server?.name;
|
||||
plexServerUrl.value = server?.url;
|
||||
plexMachineId.value = server?.machineIdentifier;
|
||||
return;
|
||||
}
|
||||
|
||||
// get token from cookie
|
||||
const authToken = getPlexAuthCookie();
|
||||
if (!authToken) return;
|
||||
|
||||
// make api call for data
|
||||
syncingServer.value = true;
|
||||
const server = await fetchPlexServers(authToken);
|
||||
|
||||
if (server) {
|
||||
// set server name & id
|
||||
plexServer.value = server?.name;
|
||||
plexServerUrl.value = server?.url;
|
||||
plexMachineId.value = server?.machineIdentifier;
|
||||
// cache in sessionStorage
|
||||
sessionStorage.setItem(cacheKey, JSON.stringify(server));
|
||||
|
||||
// set last-sync date
|
||||
const now = new Date().toLocaleString();
|
||||
lastSync.value = now;
|
||||
sessionStorage.setItem("plex_library_last_sync", now);
|
||||
} else {
|
||||
console.log("unable to load plex server informmation");
|
||||
}
|
||||
|
||||
syncingServer.value = false;
|
||||
}
|
||||
|
||||
// ----- User data loading -----
|
||||
async function loadPlexUserData() {
|
||||
// return cached value from sessionStorage if exists
|
||||
const cacheKey = "plex_user_data";
|
||||
const cachedData = sessionStorage.getItem(cacheKey);
|
||||
hasLocalStorageData.value = !!cachedData;
|
||||
if (cachedData) {
|
||||
plexUserData.value = JSON.parse(cachedData);
|
||||
plexUsername.value = plexUserData.value.username;
|
||||
return;
|
||||
}
|
||||
|
||||
// get token from cookie
|
||||
const authToken = getPlexAuthCookie();
|
||||
if (!authToken) return;
|
||||
|
||||
// make api call for data
|
||||
const userData = await fetchPlexUserData(authToken);
|
||||
|
||||
if (userData) {
|
||||
// set plex user data
|
||||
plexUserData.value = userData;
|
||||
plexUsername.value = userData?.username;
|
||||
|
||||
// cache in sessionStorage
|
||||
sessionStorage.setItem(cacheKey, JSON.stringify(userData));
|
||||
} else {
|
||||
console.log("unable to load user data from plex");
|
||||
}
|
||||
}
|
||||
|
||||
// ----- Load plex libary details -----
|
||||
async function loadPlexLibraries() {
|
||||
// return cached value from sessionStorage if exists
|
||||
const cacheKey = "plex_library_data";
|
||||
const cachedData = sessionStorage.getItem(cacheKey);
|
||||
hasLocalStorageData.value = !!cachedData;
|
||||
if (cachedData) {
|
||||
libraryStats.value = JSON.parse(cachedData);
|
||||
return;
|
||||
}
|
||||
|
||||
// get token from cookie
|
||||
const authToken = getPlexAuthCookie();
|
||||
if (!authToken) return;
|
||||
|
||||
// make api call for data
|
||||
syncingLibrary.value = true;
|
||||
const library = await fetchLibraryDetails();
|
||||
|
||||
if (library) {
|
||||
libraryStats.value = library;
|
||||
// cache in sessionStorage
|
||||
sessionStorage.setItem(cacheKey, JSON.stringify(library));
|
||||
} else {
|
||||
console.log("unable to load plex library details");
|
||||
}
|
||||
|
||||
syncingLibrary.value = false;
|
||||
}
|
||||
|
||||
// ----- OAuth flow (handlers for PlexAuthButton events) -----
|
||||
async function handleAuthSuccess(authToken: string) {
|
||||
setPlexAuthCookie(authToken);
|
||||
checkPlexConnection();
|
||||
const success = await loadAll();
|
||||
|
||||
if (success) {
|
||||
messages.value.push({
|
||||
type: ErrorMessageTypes.Success,
|
||||
title: "Authenticated with Plex",
|
||||
message: "Successfully connected your Plex account"
|
||||
} as IErrorMessage);
|
||||
} else {
|
||||
console.error("[PlexSettings] Error in handleAuthSuccess:");
|
||||
|
||||
messages.value.push({
|
||||
type: ErrorMessageTypes.Error,
|
||||
title: "Authentication failed",
|
||||
message: "An error occurred while connecting to Plex"
|
||||
} as IErrorMessage);
|
||||
}
|
||||
}
|
||||
|
||||
function handleAuthError(errorMessage: string) {
|
||||
messages.value.push({
|
||||
type: ErrorMessageTypes.Error,
|
||||
title: "Authentication failed",
|
||||
message: errorMessage
|
||||
} as IErrorMessage);
|
||||
}
|
||||
|
||||
// ----- Unlink flow -----
|
||||
async function unauthenticatePlex() {
|
||||
showUnlinkModal.value = false;
|
||||
sessionStorage.removeItem("plex_user_data");
|
||||
sessionStorage.removeItem("plex_server_data");
|
||||
sessionStorage.removeItem("plex_library_data");
|
||||
sessionStorage.removeItem("plex_library_last_sync");
|
||||
document.cookie =
|
||||
"plex_auth_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; SameSite=Strict";
|
||||
plexUserData.value = null;
|
||||
plexUsername.value = "";
|
||||
showPlexInformation.value = false;
|
||||
emit("reload");
|
||||
|
||||
messages.value.push({
|
||||
type: ErrorMessageTypes.Success,
|
||||
title: "Unlinked Plex account",
|
||||
message: "All browser storage has been clear of plex account"
|
||||
} as IErrorMessage);
|
||||
}
|
||||
|
||||
// ----- Library modal -----
|
||||
function showLibraryDetails(type: string) {
|
||||
selectedLibrary.value = type;
|
||||
document.getElementsByTagName("body")[0].classList.add("no-scroll");
|
||||
showLibraryModal.value = true;
|
||||
}
|
||||
function closeLibraryModal() {
|
||||
showLibraryModal.value = false;
|
||||
document.getElementsByTagName("body")[0].classList.remove("no-scroll");
|
||||
selectedLibrary.value = "";
|
||||
}
|
||||
|
||||
// ----- Sync -----
|
||||
async function syncLibrary() {
|
||||
const authToken = getPlexAuthCookie();
|
||||
if (!authToken) {
|
||||
messages.value.push({
|
||||
type: ErrorMessageTypes.Error,
|
||||
title: "Sync failed",
|
||||
message: "No authentication token found"
|
||||
} as IErrorMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
sessionStorage.removeItem("plex_user_data");
|
||||
sessionStorage.removeItem("plex_server_data");
|
||||
sessionStorage.removeItem("plex_library_data");
|
||||
|
||||
const success = await loadAll();
|
||||
|
||||
if (success) {
|
||||
messages.value.push({
|
||||
type: ErrorMessageTypes.Success,
|
||||
title: "Library synced",
|
||||
message: "Your Plex library has been successfully synced"
|
||||
} as IErrorMessage);
|
||||
} else {
|
||||
messages.value.push({
|
||||
type: ErrorMessageTypes.Error,
|
||||
title: "Sync failed",
|
||||
message: "An error occurred while syncing your library"
|
||||
} as IErrorMessage);
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Helper load all ----
|
||||
async function loadAll() {
|
||||
let success = false;
|
||||
|
||||
try {
|
||||
await Promise.all([
|
||||
loadPlexServer(),
|
||||
loadPlexUserData(),
|
||||
loadPlexLibraries()
|
||||
]);
|
||||
|
||||
success = true;
|
||||
} catch (error) {
|
||||
console.log("loadall error, some info might be missing");
|
||||
}
|
||||
|
||||
checkPlexConnection();
|
||||
return success;
|
||||
}
|
||||
|
||||
// ---- Lifecycle functions ----
|
||||
onMounted(loadAll);
|
||||
|
||||
onUnmounted(() => {
|
||||
cleanup();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.plex-settings {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.plex-connected {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
</style>
|
||||
233
src/components/settings/ProfileHero.vue
Normal file
233
src/components/settings/ProfileHero.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<div class="profile-hero">
|
||||
<div class="profile-hero__main">
|
||||
<div class="profile-hero__avatar">
|
||||
<div class="avatar-large">{{ userInitials }}</div>
|
||||
</div>
|
||||
<div class="profile-hero__info">
|
||||
<h1 class="profile-hero__name">{{ username }}</h1>
|
||||
<span :class="['profile-hero__badge', `badge--${userRole}`]">
|
||||
<a v-if="userRole === 'admin'" href="/admin">{{ userRole }}</a>
|
||||
<span v-else>{{ userRole }}</span>
|
||||
</span>
|
||||
<p class="profile-hero__member">Member since {{ memberSince }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-hero__stats">
|
||||
<div class="stat-large">
|
||||
<span class="stat-large__value">{{ stats.totalRequests }}</span>
|
||||
<span class="stat-large__label">Requests</span>
|
||||
</div>
|
||||
<div class="stat-divider"></div>
|
||||
<div class="stat-large">
|
||||
<span class="stat-large__value">{{ stats.magnetsAdded }}</span>
|
||||
<span class="stat-large__label">Magnets Added</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
|
||||
const store = useStore();
|
||||
|
||||
const username = computed(() => store.getters["user/username"] || "User");
|
||||
const userRole = computed(() =>
|
||||
store.getters["user/admin"] ? "admin" : "user"
|
||||
);
|
||||
|
||||
const userInitials = computed(() => {
|
||||
return username.value.slice(0, 2).toUpperCase();
|
||||
});
|
||||
|
||||
const memberSince = computed(() => {
|
||||
const date = new Date();
|
||||
date.setMonth(date.getMonth() - 6);
|
||||
return date.toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
year: "numeric"
|
||||
});
|
||||
});
|
||||
|
||||
const stats = {
|
||||
totalRequests: 45,
|
||||
magnetsAdded: 127
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/media-queries";
|
||||
|
||||
.profile-hero {
|
||||
background-color: var(--background-color-secondary);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--background-40);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
|
||||
@include mobile-only {
|
||||
flex-direction: column;
|
||||
padding: 1.5rem 1.25rem;
|
||||
border-radius: 0.5rem;
|
||||
text-align: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
&__main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
|
||||
@include mobile-only {
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
|
||||
@include mobile-only {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
margin: 0;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.7rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
width: fit-content;
|
||||
|
||||
@include mobile-only {
|
||||
padding: 0.2rem 0.6rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
&.badge--admin {
|
||||
background-color: var(--color-warning);
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.badge--user {
|
||||
background-color: var(--background-40);
|
||||
}
|
||||
}
|
||||
|
||||
&__member {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-color-70);
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.75rem;
|
||||
padding-left: 1.75rem;
|
||||
border-left: 1px solid var(--background-40);
|
||||
|
||||
@include mobile-only {
|
||||
width: 100%;
|
||||
padding: 1rem 0 0 0;
|
||||
border-left: none;
|
||||
border-top: 1px solid var(--background-40);
|
||||
justify-content: center;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-large {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--highlight-color),
|
||||
var(--color-green-70)
|
||||
);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
||||
|
||||
@include mobile-only {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-large {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
|
||||
&__value {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--highlight-color);
|
||||
line-height: 1;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-color-70);
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 1px;
|
||||
height: 45px;
|
||||
background-color: var(--background-40);
|
||||
|
||||
@include mobile-only {
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
103
src/components/settings/RequestHistory.vue
Normal file
103
src/components/settings/RequestHistory.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="export-card">
|
||||
<div class="settings-section-header">
|
||||
<h2>Request History</h2>
|
||||
<p>View and download your complete request history.</p>
|
||||
</div>
|
||||
|
||||
<div class="stats-grid">
|
||||
<div class="stat-mini">
|
||||
<span class="stat-mini__value">{{ data.total }}</span>
|
||||
<span class="stat-mini__label">Total</span>
|
||||
</div>
|
||||
<div class="stat-mini">
|
||||
<span class="stat-mini__value">{{ data.approved }}</span>
|
||||
<span class="stat-mini__label">Approved</span>
|
||||
</div>
|
||||
<div class="stat-mini">
|
||||
<span class="stat-mini__value">{{ data.pending }}</span>
|
||||
<span class="stat-mini__label">Pending</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="view-btn" @click="viewHistory">View Full History</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
interface Props {
|
||||
data: any;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
const router = useRouter();
|
||||
|
||||
function viewHistory() {
|
||||
router.push({ name: "profile" });
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/media-queries";
|
||||
@import "scss/shared-settings";
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.stat-mini {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.4rem;
|
||||
background-color: var(--background-color);
|
||||
border-radius: 0.25rem;
|
||||
|
||||
@include mobile-only {
|
||||
padding: 0.45rem 0.35rem;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: var(--highlight-color);
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
margin-top: 0.15rem;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
width: 100%;
|
||||
padding: 0.55rem 0.85rem;
|
||||
background-color: var(--background-color);
|
||||
border: 1px solid var(--background-40);
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
color: var(--text-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-40);
|
||||
border-color: var(--highlight-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
46
src/components/settings/SecuritySettings.vue
Normal file
46
src/components/settings/SecuritySettings.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="security-settings">
|
||||
<div class="security-settings__intro">
|
||||
<h2 class="security-settings__title">Security</h2>
|
||||
<p class="security-settings__description">
|
||||
Keep your account safe by using a strong, unique password. We recommend
|
||||
using a passphrase or generated password that's hard to guess.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<change-password />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ChangePassword from "@/components/profile/ChangePassword.vue";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.security-settings {
|
||||
&__intro {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@include mobile-only {
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
color: var(--text-color-70);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
215
src/components/settings/StorageManager.vue
Normal file
215
src/components/settings/StorageManager.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<div class="storage-manager">
|
||||
<StorageSectionBrowser
|
||||
:sections="storageSections"
|
||||
@clear-item="clearItem"
|
||||
/>
|
||||
|
||||
<DangerZoneAction
|
||||
title="Clear All Browser Data"
|
||||
description="Remove all locally stored data at once. This includes preferences, history, and cached information."
|
||||
button-text="Clear All Data"
|
||||
@action="clearAllData"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, inject } from "vue";
|
||||
import IconCookie from "@/icons/IconCookie.vue";
|
||||
import IconDatabase from "@/icons/IconDatabase.vue";
|
||||
import IconTimer from "@/icons/IconTimer.vue";
|
||||
import StorageSectionBrowser from "./StorageSectionBrowser.vue";
|
||||
import DangerZoneAction from "./DangerZoneAction.vue";
|
||||
import { formatBytes } from "../../utils";
|
||||
|
||||
interface StorageItem {
|
||||
key: string;
|
||||
description: string;
|
||||
size: string;
|
||||
type: "local" | "session" | "cookie";
|
||||
}
|
||||
|
||||
const notifications: {
|
||||
success: (options: {
|
||||
title: string;
|
||||
description?: string;
|
||||
timeout?: number;
|
||||
}) => void;
|
||||
error: (options: {
|
||||
title: string;
|
||||
description?: string;
|
||||
timeout?: number;
|
||||
}) => void;
|
||||
} = inject("notifications");
|
||||
|
||||
const dict = {
|
||||
commandPalette_stats: "Usage statistics for command palette navigation",
|
||||
"theme-preference": "Your selected color theme",
|
||||
plex_user_data: "Cached Plex account information",
|
||||
plex_library_data: "Cached Plex library details per section",
|
||||
plex_server_data: "Cached Plex server information",
|
||||
plex_library_last_sync: "UTC time string for last synced Plex data",
|
||||
plex_auth_token: "Authorized token from Plex.tv",
|
||||
authorization: "This sites user login token"
|
||||
};
|
||||
|
||||
const storageItems = computed<StorageItem[]>(() => {
|
||||
const items: StorageItem[] = [];
|
||||
|
||||
// local storage
|
||||
Object.keys(localStorage).map(key => {
|
||||
items.push({
|
||||
key,
|
||||
description: dict[key] ?? "",
|
||||
size: formatBytes(localStorage[key]?.length || 0),
|
||||
type: "local"
|
||||
});
|
||||
});
|
||||
|
||||
// session storage
|
||||
Object.keys(sessionStorage).map(key => {
|
||||
items.push({
|
||||
key,
|
||||
description: dict[key] ?? "",
|
||||
size: formatBytes(sessionStorage[key]?.length || 0),
|
||||
type: "session"
|
||||
});
|
||||
});
|
||||
|
||||
// cookies
|
||||
if (document.cookie) {
|
||||
document.cookie.split(";").forEach(cookie => {
|
||||
const [key, _] = cookie.trim().split("=");
|
||||
if (key) {
|
||||
items.push({
|
||||
key,
|
||||
description: dict[key] ?? "",
|
||||
size: formatBytes(cookie.length || 0),
|
||||
type: "cookie"
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return items;
|
||||
});
|
||||
|
||||
const getTotalSize = (items: StorageItem[]) => {
|
||||
const totalBytes = items.reduce((acc, item) => {
|
||||
const match = item.size.match(/^([\d.]+)\s*(\w+)$/);
|
||||
if (!match) return acc;
|
||||
const value = parseFloat(match[1]);
|
||||
const unit = match[2];
|
||||
return (
|
||||
acc +
|
||||
(unit === "KB"
|
||||
? value * 1024
|
||||
: unit === "MB"
|
||||
? value * 1024 * 1024
|
||||
: value)
|
||||
);
|
||||
}, 0);
|
||||
return formatBytes(totalBytes);
|
||||
};
|
||||
|
||||
const storageSections = computed(() => [
|
||||
{
|
||||
type: "local" as const,
|
||||
title: "LocalStorage",
|
||||
iconComponent: IconDatabase,
|
||||
description:
|
||||
"LocalStorage keeps data permanently on your device, even after closing your browser. It's used to remember your preferences and settings between visits.",
|
||||
items: storageItems.value.filter(item => item.type === "local"),
|
||||
get totalSize() {
|
||||
return getTotalSize(this.items);
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "session" as const,
|
||||
title: "SessionStorage",
|
||||
iconComponent: IconTimer,
|
||||
description:
|
||||
"SessionStorage keeps data temporarily while you browse. It's automatically cleared when you close your browser tab or window.",
|
||||
items: storageItems.value.filter(item => item.type === "session"),
|
||||
get totalSize() {
|
||||
return getTotalSize(this.items);
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "cookie" as const,
|
||||
title: "Cookies",
|
||||
iconComponent: IconCookie,
|
||||
description:
|
||||
"Cookies are small text files stored by your browser. They can be temporary (session cookies) or persistent, and are often used for authentication and tracking your activity.",
|
||||
items: storageItems.value.filter(item => item.type === "cookie"),
|
||||
get totalSize() {
|
||||
return getTotalSize(this.items);
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
function clearItem(key: string, type: "local" | "session" | "cookie") {
|
||||
try {
|
||||
if (type === "local") {
|
||||
localStorage.removeItem(key);
|
||||
} else if (type === "session") {
|
||||
sessionStorage.removeItem(key);
|
||||
} else if (type === "cookie") {
|
||||
document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
|
||||
}
|
||||
|
||||
notifications.success({
|
||||
title: "Data Cleared",
|
||||
description: `${key} has been cleared`,
|
||||
timeout: 3000
|
||||
});
|
||||
|
||||
// Force re-render
|
||||
storageItems.value;
|
||||
} catch (error) {
|
||||
notifications.error({
|
||||
title: "Error",
|
||||
description: `Failed to clear ${key}`,
|
||||
timeout: 5000
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function clearAllData() {
|
||||
const confirmed = confirm(
|
||||
"Are you sure you want to clear all locally stored data? This action cannot be undone."
|
||||
);
|
||||
|
||||
if (!confirmed) return;
|
||||
|
||||
try {
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
document.cookie.split(";").forEach(cookie => {
|
||||
const eqPos = cookie.indexOf("=");
|
||||
const name = eqPos > -1 ? cookie.substring(0, eqPos) : cookie;
|
||||
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
|
||||
});
|
||||
|
||||
notifications.success({
|
||||
title: "All Data Cleared",
|
||||
description: "All locally stored data has been removed",
|
||||
timeout: 3000
|
||||
});
|
||||
} catch (error) {
|
||||
notifications.error({
|
||||
title: "Error",
|
||||
description: "Failed to clear all data",
|
||||
timeout: 5000
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.storage-manager {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
366
src/components/settings/StorageSectionBrowser.vue
Normal file
366
src/components/settings/StorageSectionBrowser.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<template>
|
||||
<div class="browser-storage">
|
||||
<div class="settings-section-header">
|
||||
<h2>Browser Storage</h2>
|
||||
<p>
|
||||
Your browser stores data locally to make this site faster and remember
|
||||
your settings. View what's saved on this device and remove items
|
||||
anytime.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="storage-sections">
|
||||
<div
|
||||
v-for="section in sections"
|
||||
:key="section.type"
|
||||
:class="`storage-section storage-section--${section.type}`"
|
||||
>
|
||||
<button
|
||||
class="storage-section__header"
|
||||
@click="
|
||||
expandedSections[section.type] = !expandedSections[section.type]
|
||||
"
|
||||
>
|
||||
<div class="storage-section__header-content">
|
||||
<component :is="section.iconComponent" class="section-icon" />
|
||||
<h3 class="storage-section__title">{{ section.title }}</h3>
|
||||
<span class="storage-section__count">{{
|
||||
section.items.length
|
||||
}}</span>
|
||||
<span class="storage-section__size">{{ section.totalSize }}</span>
|
||||
</div>
|
||||
<svg
|
||||
class="storage-section__chevron"
|
||||
:class="{
|
||||
'storage-section__chevron--expanded':
|
||||
expandedSections[section.type]
|
||||
}"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
v-if="expandedSections[section.type]"
|
||||
class="storage-section__content"
|
||||
>
|
||||
<p class="storage-section__description">{{ section.description }}</p>
|
||||
<div class="storage-items">
|
||||
<div
|
||||
v-for="item in section.items"
|
||||
:key="item.key"
|
||||
:class="`storage-item storage-item--${section.type}`"
|
||||
>
|
||||
<component :is="section.iconComponent" class="type-icon" />
|
||||
<div class="storage-item__info">
|
||||
<h4 class="storage-item__title">{{ item.key }}</h4>
|
||||
<p class="storage-item__description">
|
||||
<span v-if="item.description">{{ item.description }} · </span>
|
||||
<span class="storage-item__size">{{ item.size }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="storage-item__delete"
|
||||
@click="$emit('clear-item', item.key, section.type)"
|
||||
:title="`Clear ${item.key}`"
|
||||
>
|
||||
<IconClose />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import IconClose from "@/icons/IconClose.vue";
|
||||
|
||||
interface StorageItem {
|
||||
key: string;
|
||||
description: string;
|
||||
size: string;
|
||||
type: "local" | "session" | "cookie";
|
||||
}
|
||||
|
||||
interface StorageSection {
|
||||
type: "local" | "session" | "cookie";
|
||||
title: string;
|
||||
description: string;
|
||||
iconComponent: any;
|
||||
items: StorageItem[];
|
||||
totalSize: string;
|
||||
}
|
||||
|
||||
defineProps<{
|
||||
sections: StorageSection[];
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
"clear-item": [key: string, type: "local" | "session" | "cookie"];
|
||||
}>();
|
||||
|
||||
const expandedSections = ref<Record<string, boolean>>({
|
||||
local: false,
|
||||
session: false,
|
||||
cookie: false
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
@import "scss/shared-settings";
|
||||
|
||||
.browser-storage {
|
||||
&__intro {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.storage-sections {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.storage-section {
|
||||
border-radius: 0.5rem;
|
||||
background: var(--background-ui);
|
||||
overflow: hidden;
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.2s ease;
|
||||
|
||||
&--local {
|
||||
border-color: rgba(139, 92, 246, 0.2);
|
||||
.section-icon,
|
||||
.type-icon {
|
||||
stroke: #8b5cf6;
|
||||
}
|
||||
}
|
||||
&--session {
|
||||
border-color: rgba(245, 158, 11, 0.2);
|
||||
.section-icon,
|
||||
.type-icon {
|
||||
stroke: #f59e0b;
|
||||
}
|
||||
}
|
||||
&--cookie {
|
||||
border-color: rgba(236, 72, 153, 0.2);
|
||||
.section-icon,
|
||||
.type-icon {
|
||||
fill: #ec4899;
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1.25rem;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
&:hover {
|
||||
background: var(--background-40);
|
||||
}
|
||||
}
|
||||
|
||||
&__header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
.section-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
&__count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
padding: 0 0.5rem;
|
||||
background: var(--background-40);
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color-70);
|
||||
}
|
||||
&__size {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-color-50);
|
||||
font-family: monospace;
|
||||
}
|
||||
&__chevron {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke: var(--text-color-70);
|
||||
transition: transform 0.2s ease;
|
||||
&--expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
&__content {
|
||||
border-top: 1px solid var(--background-40);
|
||||
}
|
||||
&__description {
|
||||
margin: 0;
|
||||
padding: 1rem 1.25rem;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
color: var(--text-color-70);
|
||||
background: var(--background-color);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.storage-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.storage-item {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
background: var(--background-color);
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
border-left: 3px solid;
|
||||
|
||||
&--local {
|
||||
border-color: #8b5cf6;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(139, 92, 246, 0.1),
|
||||
var(--background-color)
|
||||
);
|
||||
}
|
||||
&--session {
|
||||
border-color: #f59e0b;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(245, 158, 11, 0.1),
|
||||
var(--background-color)
|
||||
);
|
||||
}
|
||||
&--cookie {
|
||||
border-color: #ec4899;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(236, 72, 153, 0.1),
|
||||
var(--background-color)
|
||||
);
|
||||
}
|
||||
|
||||
&:hover .storage-item__delete {
|
||||
background: var(--color-error-highlight);
|
||||
}
|
||||
&:hover .type-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.2s;
|
||||
margin: auto 1.5rem;
|
||||
@include mobile-only {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin: auto 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
min-width: 0;
|
||||
padding: 0.85rem 0.85rem 0.85rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@include mobile-only {
|
||||
padding: 0.75rem 0.75rem 0.75rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0 0 0.3rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
@include mobile-only {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
&__description {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-color-70);
|
||||
line-height: 1.4;
|
||||
@include mobile-only {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
&__size {
|
||||
color: var(--text-color-50);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
&__delete {
|
||||
width: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-error);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
@include mobile-only {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: white;
|
||||
transition: transform 0.2s;
|
||||
@include mobile-only {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: var(--color-error-highlight);
|
||||
svg {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
&:active svg {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
462
src/components/settings/StorageSectionServer.vue
Normal file
462
src/components/settings/StorageSectionServer.vue
Normal file
@@ -0,0 +1,462 @@
|
||||
<template>
|
||||
<div class="server-storage">
|
||||
<div class="server-storage__intro">
|
||||
<h2 class="server-storage__title">Server Storage</h2>
|
||||
<p class="server-storage__description">
|
||||
Data stored on our servers to sync across your devices and provide
|
||||
personalized features.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="server-sections">
|
||||
<div
|
||||
v-for="section in serverSections"
|
||||
:key="section.type"
|
||||
:class="`server-section server-section--${section.type}`"
|
||||
>
|
||||
<button
|
||||
class="server-section__header"
|
||||
@click="
|
||||
expandedSections[section.type] = !expandedSections[section.type]
|
||||
"
|
||||
>
|
||||
<div class="server-section__header-content">
|
||||
<component :is="section.iconComponent" class="section-icon" />
|
||||
<h3 class="server-section__title">{{ section.title }}</h3>
|
||||
<span class="server-section__count">{{
|
||||
section.items.length
|
||||
}}</span>
|
||||
<span class="server-section__size">{{ section.totalSize }}</span>
|
||||
</div>
|
||||
<svg
|
||||
class="server-section__chevron"
|
||||
:class="{
|
||||
'server-section__chevron--expanded':
|
||||
expandedSections[section.type]
|
||||
}"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
v-if="expandedSections[section.type]"
|
||||
class="server-section__content"
|
||||
>
|
||||
<p class="server-section__description">{{ section.description }}</p>
|
||||
<div class="server-items">
|
||||
<div
|
||||
v-for="item in section.items"
|
||||
:key="item.key"
|
||||
:class="`server-item server-item--${section.type}`"
|
||||
>
|
||||
<component :is="section.iconComponent" class="type-icon" />
|
||||
<div class="server-item__info">
|
||||
<h4 class="server-item__title">{{ item.key }}</h4>
|
||||
<p class="server-item__description">
|
||||
<span v-if="item.description">{{ item.description }} · </span>
|
||||
<span class="server-item__size">{{ item.size }}</span>
|
||||
<span v-if="item.lastSynced" class="server-item__synced">
|
||||
· Last synced: {{ item.lastSynced }}</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="server-item__delete"
|
||||
@click="$emit('clear-item', item.key, section.type)"
|
||||
:title="`Delete ${item.key}`"
|
||||
>
|
||||
<IconClose />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import IconClose from "@/icons/IconClose.vue";
|
||||
import IconProfile from "@/icons/IconProfile.vue";
|
||||
import IconSettings from "@/icons/IconSettings.vue";
|
||||
import IconActivity from "@/icons/IconActivity.vue";
|
||||
|
||||
interface ServerItem {
|
||||
key: string;
|
||||
description: string;
|
||||
size: string;
|
||||
lastSynced?: string;
|
||||
}
|
||||
|
||||
defineEmits<{
|
||||
"clear-item": [key: string, type: string];
|
||||
}>();
|
||||
|
||||
const expandedSections = ref<Record<string, boolean>>({
|
||||
profile: false,
|
||||
preferences: false,
|
||||
activity: false
|
||||
});
|
||||
|
||||
// Mock server data
|
||||
const serverSections = computed(() => [
|
||||
{
|
||||
type: "profile",
|
||||
title: "Profile Data",
|
||||
iconComponent: IconProfile,
|
||||
description:
|
||||
"Your account information, settings, and preferences stored on our servers.",
|
||||
items: [
|
||||
{
|
||||
key: "user_profile",
|
||||
description: "User account details",
|
||||
size: "2.4 KB",
|
||||
lastSynced: "2 hours ago"
|
||||
},
|
||||
{
|
||||
key: "avatar_image",
|
||||
description: "Profile picture",
|
||||
size: "145 KB",
|
||||
lastSynced: "1 day ago"
|
||||
},
|
||||
{
|
||||
key: "email_preferences",
|
||||
description: "Notification settings",
|
||||
size: "512 Bytes",
|
||||
lastSynced: "3 days ago"
|
||||
}
|
||||
],
|
||||
totalSize: "147.9 KB"
|
||||
},
|
||||
{
|
||||
type: "preferences",
|
||||
title: "Synced Preferences",
|
||||
iconComponent: IconSettings,
|
||||
description:
|
||||
"Settings that sync across all your devices when you sign in.",
|
||||
items: [
|
||||
{
|
||||
key: "theme_settings",
|
||||
description: "Color theme and appearance",
|
||||
size: "1.1 KB",
|
||||
lastSynced: "5 hours ago"
|
||||
},
|
||||
{
|
||||
key: "playback_settings",
|
||||
description: "Video and audio preferences",
|
||||
size: "856 Bytes",
|
||||
lastSynced: "1 day ago"
|
||||
},
|
||||
{
|
||||
key: "library_filters",
|
||||
description: "Saved filters and sorting",
|
||||
size: "2.3 KB",
|
||||
lastSynced: "2 days ago"
|
||||
}
|
||||
],
|
||||
totalSize: "4.3 KB"
|
||||
},
|
||||
{
|
||||
type: "activity",
|
||||
title: "Activity History",
|
||||
iconComponent: IconActivity,
|
||||
description:
|
||||
"Your viewing history and watch progress stored on our servers.",
|
||||
items: [
|
||||
{
|
||||
key: "watch_history",
|
||||
description: "Recently watched items",
|
||||
size: "12.5 KB",
|
||||
lastSynced: "1 hour ago"
|
||||
},
|
||||
{
|
||||
key: "watch_progress",
|
||||
description: "Playback positions",
|
||||
size: "8.2 KB",
|
||||
lastSynced: "30 minutes ago"
|
||||
},
|
||||
{
|
||||
key: "favorites",
|
||||
description: "Starred and favorited content",
|
||||
size: "3.7 KB",
|
||||
lastSynced: "6 hours ago"
|
||||
}
|
||||
],
|
||||
totalSize: "24.4 KB"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.server-storage {
|
||||
&__intro {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 0;
|
||||
color: var(--text-color-70);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
.server-sections {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.server-section {
|
||||
border-radius: 0.5rem;
|
||||
background: var(--background-ui);
|
||||
overflow: hidden;
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.2s ease;
|
||||
|
||||
&--profile {
|
||||
border-color: rgba(59, 130, 246, 0.2);
|
||||
.section-icon,
|
||||
.type-icon {
|
||||
fill: #3b82f6;
|
||||
}
|
||||
}
|
||||
&--preferences {
|
||||
border-color: rgba(16, 185, 129, 0.2);
|
||||
.section-icon,
|
||||
.type-icon {
|
||||
fill: #10b981;
|
||||
}
|
||||
}
|
||||
&--activity {
|
||||
border-color: rgba(245, 158, 11, 0.2);
|
||||
.section-icon,
|
||||
.type-icon {
|
||||
fill: #f59e0b;
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1.25rem;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
&:hover {
|
||||
background: var(--background-40);
|
||||
}
|
||||
}
|
||||
|
||||
&__header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
.section-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
&__count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
padding: 0 0.5rem;
|
||||
background: var(--background-40);
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color-70);
|
||||
}
|
||||
&__size {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-color-50);
|
||||
font-family: monospace;
|
||||
}
|
||||
&__chevron {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke: var(--text-color-70);
|
||||
transition: transform 0.2s ease;
|
||||
&--expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
&__content {
|
||||
border-top: 1px solid var(--background-40);
|
||||
}
|
||||
&__description {
|
||||
margin: 0;
|
||||
padding: 1rem 1.25rem;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
color: var(--text-color-70);
|
||||
background: var(--background-color);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.server-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.server-item {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
background: var(--background-color);
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
border-left: 3px solid;
|
||||
|
||||
&--profile {
|
||||
border-color: #3b82f6;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(59, 130, 246, 0.1),
|
||||
var(--background-color)
|
||||
);
|
||||
}
|
||||
&--preferences {
|
||||
border-color: #10b981;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(16, 185, 129, 0.1),
|
||||
var(--background-color)
|
||||
);
|
||||
}
|
||||
&--activity {
|
||||
border-color: #f59e0b;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(245, 158, 11, 0.1),
|
||||
var(--background-color)
|
||||
);
|
||||
}
|
||||
|
||||
&:hover .server-item__delete {
|
||||
background: var(--color-error-highlight);
|
||||
}
|
||||
&:hover .type-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.2s;
|
||||
margin: auto 1.5rem;
|
||||
@include mobile-only {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin: auto 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
min-width: 0;
|
||||
padding: 0.85rem 0.85rem 0.85rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@include mobile-only {
|
||||
padding: 0.75rem 0.75rem 0.75rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0 0 0.3rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
@include mobile-only {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
&__description {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-color-70);
|
||||
line-height: 1.4;
|
||||
@include mobile-only {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
&__size {
|
||||
color: var(--text-color-50);
|
||||
font-family: monospace;
|
||||
}
|
||||
&__synced {
|
||||
color: var(--text-color-50);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&__delete {
|
||||
width: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-error);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
@include mobile-only {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: white;
|
||||
transition: transform 0.2s;
|
||||
@include mobile-only {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: var(--color-error-highlight);
|
||||
svg {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
&:active svg {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
355
src/components/settings/ThemePreferences.vue
Normal file
355
src/components/settings/ThemePreferences.vue
Normal file
@@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<div class="theme-preferences">
|
||||
<div class="current-theme">
|
||||
<div class="theme-display">
|
||||
<div class="theme-icon" :data-theme="selectedTheme">
|
||||
<div class="icon-inner"></div>
|
||||
</div>
|
||||
<div class="theme-info">
|
||||
<span class="theme-label">Current Theme</span>
|
||||
<h3 class="theme-name">{{ currentThemeName }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="theme-grid">
|
||||
<button
|
||||
v-for="theme in themes"
|
||||
:key="theme.value"
|
||||
:class="['theme-card', { active: selectedTheme === theme.value }]"
|
||||
@click="selectTheme(theme.value)"
|
||||
>
|
||||
<div class="theme-card__preview" :data-theme="theme.value">
|
||||
<div class="preview-circle"></div>
|
||||
</div>
|
||||
<span class="theme-card__name">{{ theme.label }}</span>
|
||||
<div v-if="selectedTheme === theme.value" class="theme-card__badge">
|
||||
Active
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted } from "vue";
|
||||
import { useTheme } from "@/composables/useTheme";
|
||||
|
||||
const themes = [
|
||||
{ value: "auto", label: "Auto" },
|
||||
{ value: "light", label: "Light" },
|
||||
{ value: "dark", label: "Dark" },
|
||||
{ value: "ocean", label: "Ocean" },
|
||||
{ value: "nordic", label: "Nordic" },
|
||||
{ value: "halloween", label: "Halloween" }
|
||||
] as const;
|
||||
|
||||
const { currentTheme, savedTheme, setTheme } = useTheme();
|
||||
const selectedTheme = currentTheme;
|
||||
|
||||
const currentThemeName = computed(
|
||||
() => themes.find(t => t.value === selectedTheme.value)?.label ?? "Auto"
|
||||
);
|
||||
|
||||
function selectTheme(theme: string) {
|
||||
setTheme(theme as any);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
selectedTheme.value = savedTheme.value;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.current-theme {
|
||||
margin-bottom: 2rem;
|
||||
padding: 1rem 2rem;
|
||||
background-color: var(--background-ui);
|
||||
border-radius: 1rem;
|
||||
border: 2px solid var(--background-40);
|
||||
|
||||
@include mobile-only {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.theme-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
|
||||
@include mobile-only {
|
||||
gap: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@include mobile-only {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.icon-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 3px solid;
|
||||
}
|
||||
|
||||
&[data-theme="light"] .icon-inner {
|
||||
background: linear-gradient(135deg, #f8f8f8, #e8e8e8);
|
||||
border-color: #01d277;
|
||||
}
|
||||
&[data-theme="dark"] .icon-inner {
|
||||
background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
|
||||
border-color: #01d277;
|
||||
}
|
||||
&[data-theme="ocean"] .icon-inner {
|
||||
background: linear-gradient(135deg, #0f2027, #2c5364);
|
||||
border-color: #00d4ff;
|
||||
}
|
||||
&[data-theme="nordic"] .icon-inner {
|
||||
background: linear-gradient(135deg, #f5f0e8, #d8cdb9);
|
||||
border-color: #3d6e4e;
|
||||
}
|
||||
&[data-theme="halloween"] .icon-inner {
|
||||
background: linear-gradient(135deg, #1a0e2e, #2d1b3d);
|
||||
border-color: #ff6600;
|
||||
}
|
||||
&[data-theme="auto"] .icon-inner {
|
||||
background: conic-gradient(#f8f8f8 0deg 180deg, #1a1a1a 180deg);
|
||||
border-color: #01d277;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 0.85rem;
|
||||
color: $text-color-70;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 500;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.25rem;
|
||||
|
||||
@include mobile-only {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.theme-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 1rem;
|
||||
background-color: var(--background-ui);
|
||||
border-radius: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: 2px solid transparent;
|
||||
text-align: center;
|
||||
|
||||
@include mobile-only {
|
||||
padding: 0.85rem;
|
||||
border-radius: 0.5rem;
|
||||
&:hover {
|
||||
transform: none;
|
||||
}
|
||||
&:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--highlight-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: var(--highlight-color);
|
||||
background-color: var(--background-40);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&__preview {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.75rem;
|
||||
position: relative;
|
||||
border: 1px solid var(--background-40);
|
||||
|
||||
@include mobile-only {
|
||||
height: 100px;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.preview-circle {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 8px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview[data-theme="light"] {
|
||||
background: #f8f8f8;
|
||||
.preview-circle {
|
||||
background: #01d277;
|
||||
}
|
||||
&::before {
|
||||
background: #fff;
|
||||
border-color: rgba(8, 28, 36, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&__preview[data-theme="dark"] {
|
||||
background: #111;
|
||||
.preview-circle {
|
||||
background: #01d277;
|
||||
}
|
||||
&::before {
|
||||
background: #060708;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&__preview[data-theme="ocean"] {
|
||||
background: #0f2027;
|
||||
.preview-circle {
|
||||
background: #00d4ff;
|
||||
}
|
||||
&::before {
|
||||
background: #203a43;
|
||||
border-color: rgba(0, 212, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&__preview[data-theme="nordic"] {
|
||||
background: #f5f0e8;
|
||||
.preview-circle {
|
||||
background: #3d6e4e;
|
||||
}
|
||||
&::before {
|
||||
background: #fffef9;
|
||||
border-color: rgba(61, 110, 78, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&__preview[data-theme="halloween"] {
|
||||
background: #1a0e2e;
|
||||
.preview-circle {
|
||||
background: #ff6600;
|
||||
}
|
||||
&::before {
|
||||
background: #2d1b3d;
|
||||
border-color: rgba(255, 102, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&__preview[data-theme="auto"] {
|
||||
border-color: black;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#f8f8f8 0%,
|
||||
#f8f8f8 50%,
|
||||
#111 50%,
|
||||
#111 100%
|
||||
);
|
||||
.preview-circle {
|
||||
left: auto;
|
||||
right: 8px;
|
||||
background: #01d277;
|
||||
}
|
||||
&::before {
|
||||
right: auto;
|
||||
width: calc(50% - 10px);
|
||||
background: #fff;
|
||||
border-color: rgba(8, 28, 36, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: var(--text-color);
|
||||
@include mobile-only {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__badge {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background-color: var(--highlight-color);
|
||||
color: white;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mobile-only {
|
||||
top: 0.4rem;
|
||||
right: 0.4rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user