From 01987372dc5c3795c7006d22dd846ffdc1d1d4e9 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Fri, 27 Feb 2026 18:58:38 +0100
Subject: [PATCH] Merge LocalStorageManager into DataExport component

- Combine 'Local Storage' and 'Data & Privacy' into single section
- Add info header with transparency messaging
- Include browser storage items with individual delete controls
- Integrate export functionality (JSON/CSV)
- Add request history stats and view button
- Implement two danger zones: Clear All Local Data and Delete Account
- Reduce bundle size by eliminating duplicate component (-7.42 KB CSS)
- Maintain delete account modal with confirmation flow
---
 src/components/settings/DataExport.vue | 356 +++++++++++++++++++++++--
 1 file changed, 330 insertions(+), 26 deletions(-)

diff --git a/src/components/settings/DataExport.vue b/src/components/settings/DataExport.vue
index 3e7cd49..66e192f 100644
--- a/src/components/settings/DataExport.vue
+++ b/src/components/settings/DataExport.vue
@@ -1,6 +1,18 @@
 <template>
   <div class="data-export">
+    <!-- Info Header -->
+    <div class="data-export__header">
+      <div class="data-export__info">
+        <IconInfo class="info-icon" />
+        <span>
+          Full transparency and control over your data. Everything is stored
+          locally on your device—no servers, no tracking. You own your data.
+        </span>
+      </div>
+    </div>
+
     <div class="export-options">
+      <!-- Export Data Card -->
       <div class="export-card">
         <div class="export-header">
           <h4>Export Your Data</h4>
@@ -30,6 +42,7 @@
         </div>
       </div>
 
+      <!-- Request History Card -->
       <div class="export-card">
         <div class="export-header">
           <h4>Request History</h4>
@@ -54,19 +67,48 @@
         <button class="view-btn" @click="viewHistory">View Full History</button>
       </div>
 
-      <div class="export-card export-card--danger">
-        <div class="export-header">
-          <h4>Delete Account</h4>
-          <p>
-            Permanently delete your account and all associated data. This action
-            cannot be undone.
-          </p>
+      <!-- Local Storage Items -->
+      <div class="storage-section">
+        <h4 class="storage-section__title">Browser Storage</h4>
+        <div class="storage-items">
+          <div
+            v-for="item in storageItems"
+            :key="item.key"
+            class="storage-item"
+          >
+            <div class="storage-item__info">
+              <h5 class="storage-item__title">{{ item.title }}</h5>
+              <p class="storage-item__description">
+                {{ item.description }} ·
+                <span class="storage-item__size">{{ item.size }}</span>
+              </p>
+            </div>
+            <button
+              class="storage-item__delete"
+              @click="clearItem(item.key, item.title)"
+              :title="`Clear ${item.title}`"
+            >
+              <IconClose />
+            </button>
+          </div>
         </div>
-
-        <button class="delete-btn" @click="confirmDelete">
-          Delete My Account
-        </button>
       </div>
+
+      <!-- Clear All Local Data -->
+      <DangerZoneAction
+        title="Clear All Local Data"
+        description="Remove all locally stored data at once. This includes preferences, history, and cached information."
+        button-text="Clear All Data"
+        @action="clearAllData"
+      />
+
+      <!-- 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>
 
     <!-- Delete Confirmation Modal -->
@@ -117,13 +159,36 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from "vue";
+  import { ref, computed, inject } from "vue";
   import { useRouter } from "vue-router";
+  import { clearCommandHistory } from "@/utils/commandTracking";
   import IconActivity from "@/icons/IconActivity.vue";
   import IconClose from "@/icons/IconClose.vue";
+  import IconInfo from "@/icons/IconInfo.vue";
+  import DangerZoneAction from "./DangerZoneAction.vue";
+
+  interface StorageItem {
+    key: string;
+    title: string;
+    description: string;
+    size: string;
+  }
 
   const router = useRouter();
 
+  const notifications: {
+    success: (options: {
+      title: string;
+      description?: string;
+      timeout?: number;
+    }) => void;
+    error: (options: {
+      title: string;
+      description?: string;
+      timeout?: number;
+    }) => void;
+  } = inject("notifications");
+
   const exporting = ref(false);
   const showDeleteModal = ref(false);
   const deleteConfirmation = ref("");
@@ -134,6 +199,64 @@
     pending: 7
   });
 
+  const storageItems = computed<StorageItem[]>(() => {
+    const items: StorageItem[] = [];
+
+    // Command palette stats
+    const commandStats = localStorage.getItem("commandPalette_stats");
+    if (commandStats) {
+      items.push({
+        key: "commandPalette_stats",
+        title: "Command Palette History",
+        description: "Usage statistics for command palette navigation",
+        size: formatBytes(commandStats.length)
+      });
+    }
+
+    // Plex user data
+    const plexData = localStorage.getItem("plex_user_data");
+    if (plexData) {
+      items.push({
+        key: "plex_user_data",
+        title: "Plex User Data",
+        description: "Cached Plex account information",
+        size: formatBytes(plexData.length)
+      });
+    }
+
+    // Theme preference
+    const theme = localStorage.getItem("theme");
+    if (theme) {
+      items.push({
+        key: "theme",
+        title: "Theme Preference",
+        description: "Your selected color theme",
+        size: formatBytes(theme.length)
+      });
+    }
+
+    // Color scheme
+    const colorScheme = localStorage.getItem("color-scheme");
+    if (colorScheme) {
+      items.push({
+        key: "color-scheme",
+        title: "Color Scheme",
+        description: "Light or dark mode preference",
+        size: formatBytes(colorScheme.length)
+      });
+    }
+
+    return items;
+  });
+
+  function formatBytes(bytes: number): string {
+    if (bytes === 0) return "0 Bytes";
+    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];
+  }
+
   async function exportData(format: "json" | "csv") {
     exporting.value = true;
 
@@ -185,12 +308,97 @@
       showDeleteModal.value = false;
     }
   }
+
+  function clearItem(key: string, title: string) {
+    try {
+      // Special handling for command history
+      if (key === "commandPalette_stats") {
+        clearCommandHistory();
+      } else {
+        localStorage.removeItem(key);
+      }
+
+      notifications.success({
+        title: "Data Cleared",
+        description: `${title} has been cleared`,
+        timeout: 3000
+      });
+
+      // Force re-render
+      storageItems.value;
+    } catch (error) {
+      notifications.error({
+        title: "Error",
+        description: `Failed to clear ${title}`,
+        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();
+      clearCommandHistory();
+
+      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>
   @import "scss/variables";
   @import "scss/media-queries";
 
+  .data-export {
+    &__header {
+      margin-bottom: 1rem;
+
+      @include mobile-only {
+        margin-bottom: 0.85rem;
+      }
+    }
+
+    &__info {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.5rem;
+      padding: 0.75rem;
+      background: var(--background-ui);
+      border-radius: 0.375rem;
+      border-left: 3px solid var(--highlight-color);
+
+      .info-icon {
+        width: 18px;
+        height: 18px;
+        flex-shrink: 0;
+        fill: var(--highlight-color);
+        margin-top: 2px;
+      }
+
+      span {
+        font-size: 0.85rem;
+        color: var(--text-color-70);
+        line-height: 1.5;
+      }
+    }
+  }
+
   .export-options {
     display: flex;
     flex-direction: column;
@@ -206,10 +414,6 @@
     @include mobile-only {
       padding: 0.75rem;
     }
-
-    &--danger {
-      border-left-color: var(--color-error-highlight);
-    }
   }
 
   .export-header {
@@ -340,19 +544,119 @@
     }
   }
 
-  .delete-btn {
-    width: 100%;
-    padding: 0.55rem 0.85rem;
-    background-color: var(--color-error-highlight);
-    color: $white;
-    border: none;
+  .storage-section {
+    &__title {
+      margin: 0 0 0.65rem 0;
+      font-size: 1rem;
+      font-weight: 500;
+      color: var(--text-color);
+
+      @include mobile-only {
+        font-size: 0.95rem;
+        margin-bottom: 0.6rem;
+      }
+    }
+  }
+
+  .storage-items {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .storage-item {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+    gap: 0;
+    background: var(--background-color);
     border-radius: 0.25rem;
-    font-size: 0.9rem;
-    cursor: pointer;
-    transition: all 0.2s;
+    overflow: hidden;
+    transition: all 0.2s ease;
 
     &:hover {
-      background-color: var(--color-error);
+      .storage-item__delete {
+        background: var(--color-error-highlight);
+      }
+    }
+
+    &__info {
+      flex: 1;
+      min-width: 0;
+      padding: 0.85rem;
+
+      @include mobile-only {
+        padding: 0.75rem;
+      }
+    }
+
+    &__title {
+      margin: 0 0 0.25rem 0;
+      font-size: 0.95rem;
+      font-weight: 600;
+      color: var(--text-color);
+
+      @include mobile-only {
+        font-size: 0.9rem;
+      }
+    }
+
+    &__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 {
+      flex-shrink: 0;
+      width: 70px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--color-error);
+      border: none;
+      cursor: pointer;
+      transition: all 0.2s ease;
+
+      @include mobile-only {
+        width: 60px;
+      }
+
+      svg {
+        width: 20px;
+        height: 20px;
+        fill: white;
+        transition: transform 0.2s ease;
+
+        @include mobile-only {
+          width: 18px;
+          height: 18px;
+        }
+      }
+
+      &:hover {
+        background: var(--color-error-highlight);
+
+        svg {
+          transform: scale(1.1);
+        }
+      }
+
+      &:active {
+        svg {
+          transform: scale(0.9);
+        }
+      }
     }
   }