Refactor: Complete PlexSettings modularization with modal components

- Create PlexLibraryModal.vue (365 lines) for detailed library view
  - Stats overview (total items, episodes/tracks, duration)
  - Recently added items with posters and metadata
  - Top genres with visual bar charts
  - Fully responsive modal design

- Create PlexUnlinkModal.vue (138 lines) for account unlinking
  - Confirmation dialog with feature loss warnings
  - Clean modal UI with cancel/confirm actions

- Refactor PlexSettings.vue: 2094 lines → 498 lines (76% reduction)
  - Replace inline UI with PlexAuthButton component
  - Replace profile card with PlexProfileCard component
  - Replace stats grid with PlexLibraryStats component
  - Replace server info with PlexServerInfo component
  - Use PlexLibraryModal and PlexUnlinkModal for overlays
  - Integrate usePlexAuth, usePlexApi, usePlexLibraries composables
  - Remove 1596 lines of duplicate template and logic
  - Maintain all functionality with cleaner architecture

Total extraction: 2031 lines from monolithic file into 10 modular components
Build verified successfully ✓
This commit is contained in:
2026-02-27 17:43:38 +01:00
parent 37ad9ecb7b
commit ac591cbebe
4 changed files with 642 additions and 1701 deletions

View File

@@ -52,7 +52,7 @@
</template>
<script setup lang="ts">
import { inject, computed } from "vue";
import { inject, computed, onMounted } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import ThemePreferences from "@/components/settings/ThemePreferences.vue";
@@ -110,7 +110,7 @@
}
// Functions called on component load
displayWarningIfMissingPlexAccount();
onMounted(() => displayWarningIfMissingPlexAccount());
</script>
<style lang="scss" scoped>