Enhance Plex integration with real API data and interactive library modal

Major improvements to Plex integration:
- Replace Vuex store dependency with localStorage-based connection detection
- Fetch and display real Plex user data (username, email, subscription, 2FA status)
- Add user badges: Plex Pass, member years, 2FA, experimental features
- Properly format Unix timestamp joined dates
- Remove success message box, add elegant checkmark icon next to username
- Add Plex connection badge to main user profile

Real-time Plex API integration:
- Fetch actual library counts from Plex server (movies, shows, music)
- Display real server name from user's Plex account
- Load recently added items with actual titles, years, and ratings
- Calculate real genre statistics from library metadata
- Compute actual duration totals from item metadata
- Count actual episodes (TV shows) and tracks (music)
- Sync library on demand with fresh data from Plex API

Interactive library modal:
- Replace toast messages with rich modal showing library details
- Display recently added items with poster images
- Show genre distribution with animated bar charts
- Add loading states with animated dots
- Disable empty library cards
- Modal appears above header with proper z-index
- Blur backdrop for better focus
- Fully responsive mobile design

Store Plex data in localStorage:
- Cache user profile data including subscription info
- Store auth token in secure cookie (30 day expiration)
- Load from cache for instant display on page load
- Refresh data on authentication and manual sync

Add Plex connection indicator to user profile:
- Orange Plex badge in settings profile header
- Shows 'Connected as [username]' below member info
- Loads username from localStorage on mount
This commit is contained in:
2026-02-27 17:34:38 +01:00
parent 9c7e0bd3b3
commit 77c89fa520
6 changed files with 1676 additions and 258 deletions

View File

@@ -0,0 +1,25 @@
<template>
<section class="admin">
<h1 class="admin__title">Password gen</h1>
<div class="form">
<password-generator />
</div>
</section>
</template>
<script setup lang="ts">
import PasswordGenerator from "@/components/settings/PasswordGenerator.vue";
function handleGeneratedPassword() {
return;
}
</script>
<style lang="scss" scoped>
.form {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
</style>