From 8a841ab7a7a91c06eb9e6422d6175a2ab242ecc8 Mon Sep 17 00:00:00 2001
From: fingerthief <tmiddleton@middmail.net>
Date: Sat, 12 Apr 2025 15:12:40 -0500
Subject: [PATCH] Removed legacy connection modals, added disconnect button to
 each service tab instead for a more streamlined experience.

---
 package-lock.json                        |   4 +-
 package.json                             |   2 +-
 server/data/README.md                    |  16 -
 server/data/credentials.json.example     |  19 -
 src/App.vue                              |  10 -
 src/components/AISettings.vue            | 245 ++--------
 src/components/JellyfinConnection.vue    | 572 ----------------------
 src/components/PlexConnection.vue        | 531 --------------------
 src/components/RadarrConnection.vue      | 332 -------------
 src/components/RecommendationResults.vue | 319 ++++++------
 src/components/SonarrConnection.vue      | 347 -------------
 src/components/TautulliConnection.vue    | 597 -----------------------
 src/services/PlexService.js              |   2 +-
 src/services/TautulliService.js          |   2 +-
 14 files changed, 231 insertions(+), 2767 deletions(-)
 delete mode 100644 server/data/README.md
 delete mode 100644 server/data/credentials.json.example
 delete mode 100644 src/components/JellyfinConnection.vue
 delete mode 100644 src/components/PlexConnection.vue
 delete mode 100644 src/components/RadarrConnection.vue
 delete mode 100644 src/components/SonarrConnection.vue
 delete mode 100644 src/components/TautulliConnection.vue

diff --git a/package-lock.json b/package-lock.json
index 7e756f8..212e3f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "recommendarr",
-  "version": "1.3.1-beta.12",
+  "version": "1.4.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "recommendarr",
-      "version": "1.3.1-beta.12",
+      "version": "1.4.2",
       "dependencies": {
         "@fortawesome/fontawesome-free": "^6.7.2",
         "axios": "^1.8.1",
diff --git a/package.json b/package.json
index 9cec80d..5c28ee6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "recommendarr",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/server/data/README.md b/server/data/README.md
deleted file mode 100644
index 050f011..0000000
--- a/server/data/README.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Server Data Directory
-
-This directory contains runtime data for the API server, including:
-
-## Credentials
-Credentials are stored in an encrypted format in `credentials.json`. This file is automatically created when the server starts up and is not included in the Git repository.
-
-To set up your credentials:
-1. Start the server once to generate the encryption key and empty credentials file
-2. Use the API endpoints to set your credentials (see API documentation)
-3. Or manually copy and edit the `credentials.json.example` file to `credentials.json`
-
-## Security
-- Both the encryption key (`.key`) and the credentials file are excluded from Git
-- Credentials are encrypted at rest using AES-256-GCM
-- The encryption key is stored in `.key` and should be kept secure
\ No newline at end of file
diff --git a/server/data/credentials.json.example b/server/data/credentials.json.example
deleted file mode 100644
index d4536cb..0000000
--- a/server/data/credentials.json.example
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "radarr": {
-    "baseUrl": "http://your-radarr-url:port",
-    "apiKey": "your-radarr-api-key"
-  },
-  "sonarr": {
-    "baseUrl": "http://your-sonarr-url:port",
-    "apiKey": "your-sonarr-api-key"
-  },
-  "openai": {
-    "apiKey": "your-openai-api-key",
-    "apiUrl": "https://api.openai.com/v1",
-    "model": "gpt-4o",
-    "maxTokens": 4000,
-    "temperature": 0.8,
-    "useSampledLibrary": false,
-    "sampleSize": 20
-  }
-}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index c6d3827..f49a3d7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -296,11 +296,6 @@
 </template>
 
 <script>
-import SonarrConnection from './components/SonarrConnection.vue'
-import RadarrConnection from './components/RadarrConnection.vue'
-import PlexConnection from './components/PlexConnection.vue'
-import JellyfinConnection from './components/JellyfinConnection.vue'
-import TautulliConnection from './components/TautulliConnection.vue'
 import TraktConnection from './components/TraktConnection.vue'
 import TraktCallback from './components/TraktCallback.vue'
 import AppNavigation from './components/Navigation.vue'
@@ -323,11 +318,6 @@ import databaseStorageUtils from './utils/DatabaseStorageUtils'
 export default {
   name: 'App',
   components: {
-    SonarrConnection,
-    RadarrConnection,
-    PlexConnection,
-    JellyfinConnection,
-    TautulliConnection,
     TraktConnection,
     TraktCallback,
     AppNavigation,
diff --git a/src/components/AISettings.vue b/src/components/AISettings.vue
index 4a5faa5..05c1315 100644
--- a/src/components/AISettings.vue
+++ b/src/components/AISettings.vue
@@ -82,188 +82,7 @@
       >
         TMDB
       </button>
-      <button 
-        v-if="isAdmin && (sonarrConnected || radarrConnected || plexConnected || jellyfinConnected || tautulliConnected || traktConnected)"
-        @click="activeTab = 'connections'" 
-        :class="{ active: activeTab === 'connections' }" 
-        class="tab-button"
-      >
-        Connections
-      </button>
     </div>
-    <!-- Connections Tab -->
-    <div v-if="activeTab === 'connections' && isAdmin" class="settings-section">
-      <div class="settings-intro">
-        <p>Manage your connected services. You can disconnect any service you no longer want to use.</p>
-      </div>
-      
-      <div class="connected-services-wrapper section-card">
-        <div class="collapsible-header" @click="toggleConnectionsPanel">
-          <div class="header-content">
-            <h3>Manage Connected Services</h3>
-            <p class="section-description">You can disconnect any service you no longer want to use.</p>
-          </div>
-          <button class="collapse-toggle" @click.stop="toggleConnectionsPanel">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" :class="{ rotate: !connectionsCollapsed }">
-              <path d="M6 9l6 6 6-6"></path>
-            </svg>
-          </button>
-        </div>
-        <div class="collapsible-content" v-show="!connectionsCollapsed">
-          <div class="connected-services">
-          <button v-if="plexConnected" class="connection-button plex-button" @click="showPlexConnectModal">
-            <span class="connection-name">Plex</span>
-            <span class="connection-action">Manage Connection</span>
-          </button>
-          <button v-if="jellyfinConnected" class="connection-button jellyfin-button" @click="showJellyfinConnectModal">
-            <span class="connection-name">Jellyfin</span>
-            <span class="connection-action">Manage Connection</span>
-          </button>
-          <button v-if="tautulliConnected" class="connection-button tautulli-button" @click="showTautulliConnectModal">
-            <span class="connection-name">Tautulli</span>
-            <span class="connection-action">Manage Connection</span>
-          </button>
-          <button v-if="sonarrConnected" class="connection-button sonarr-button" @click="showSonarrConnectModal">
-            <span class="connection-name">Sonarr</span>
-            <span class="connection-action">Manage Connection</span>
-          </button>
-          <button v-if="radarrConnected" class="connection-button radarr-button" @click="showRadarrConnectModal">
-            <span class="connection-name">Radarr</span>
-            <span class="connection-action">Manage Connection</span>
-          </button>
-          <button v-if="traktConnected" class="connection-button trakt-button" @click="showTraktConnectModal">
-            <span class="connection-name">Trakt</span>
-            <span class="connection-action">Manage Connection</span>
-          </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    
-    <!-- Connection Management Modals - These remain fixed position overlays -->
-    <teleport to="body">
-      <!-- Plex Connection Management Modal -->
-      <div v-if="showPlexConnect" class="connection-modal-overlay" @click.self="closePlexModal">
-        <div class="connection-modal">
-          <div class="modal-header">
-            <h3>Manage Plex Connection</h3>
-            <button class="modal-close-x" @click="closePlexModal">&times;</button>
-          </div>
-          <div class="modal-body">
-            <PlexConnection 
-              :connected="plexConnected" 
-              @connected="handlePlexConnected" 
-              @disconnected="handlePlexDisconnected" 
-            />
-          </div>
-          <div class="modal-footer">
-            <button class="modal-close-button" @click="closePlexModal">Close</button>
-          </div>
-        </div>
-      </div>
-      
-      <!-- Jellyfin Connection Management Modal -->
-      <div v-if="showJellyfinConnect" class="connection-modal-overlay" @click.self="closeJellyfinModal">
-        <div class="connection-modal">
-          <div class="modal-header">
-            <h3>Manage Jellyfin Connection</h3>
-            <button class="modal-close-x" @click="closeJellyfinModal">&times;</button>
-          </div>
-          <div class="modal-body">
-            <JellyfinConnection 
-              :connected="jellyfinConnected" 
-              @connected="handleJellyfinConnected" 
-              @disconnected="handleJellyfinDisconnected" 
-            />
-          </div>
-          <div class="modal-footer">
-            <button class="modal-close-button" @click="closeJellyfinModal">Close</button>
-          </div>
-        </div>
-      </div>
-      
-      <!-- Sonarr Connection Management Modal -->
-      <div v-if="showSonarrConnect" class="connection-modal-overlay" @click.self="closeSonarrModal">
-        <div class="connection-modal">
-          <div class="modal-header">
-            <h3>Manage Sonarr Connection</h3>
-            <button class="modal-close-x" @click="closeSonarrModal">&times;</button>
-          </div>
-          <div class="modal-body">
-            <SonarrConnection 
-              :connected="sonarrConnected" 
-              @connected="handleSonarrConnected" 
-              @disconnected="handleSonarrDisconnected" 
-            />
-          </div>
-          <div class="modal-footer">
-            <button class="modal-close-button" @click="closeSonarrModal">Close</button>
-          </div>
-        </div>
-      </div>
-      
-      <!-- Radarr Connection Management Modal -->
-      <div v-if="showRadarrConnect" class="connection-modal-overlay" @click.self="closeRadarrModal">
-        <div class="connection-modal">
-          <div class="modal-header">
-            <h3>Manage Radarr Connection</h3>
-            <button class="modal-close-x" @click="closeRadarrModal">&times;</button>
-          </div>
-          <div class="modal-body">
-            <RadarrConnection 
-              :connected="radarrConnected" 
-              @connected="handleRadarrConnected" 
-              @disconnected="handleRadarrDisconnected" 
-            />
-          </div>
-          <div class="modal-footer">
-            <button class="modal-close-button" @click="closeRadarrModal">Close</button>
-          </div>
-        </div>
-      </div>
-      
-      <!-- Tautulli Connection Management Modal -->
-      <div v-if="showTautulliConnect" class="connection-modal-overlay" @click.self="closeTautulliModal">
-        <div class="connection-modal">
-          <div class="modal-header">
-            <h3>Manage Tautulli Connection</h3>
-            <button class="modal-close-x" @click="closeTautulliModal">&times;</button>
-          </div>
-          <div class="modal-body">
-            <TautulliConnection 
-              :connected="tautulliConnected" 
-              @connected="handleTautulliConnected" 
-              @disconnected="handleTautulliDisconnected" 
-              @limitChanged="handleTautulliLimitChanged"
-            />
-          </div>
-          <div class="modal-footer">
-            <button class="modal-close-button" @click="closeTautulliModal">Close</button>
-          </div>
-        </div>
-      </div>
-      
-      <!-- Trakt Connection Management Modal -->
-      <div v-if="showTraktConnect" class="connection-modal-overlay" @click.self="closeTraktConnectModal">
-        <div class="connection-modal">
-          <div class="modal-header">
-            <h3>Manage Trakt Connection</h3>
-            <button class="modal-close-x" @click="closeTraktConnectModal">&times;</button>
-          </div>
-          <div class="modal-body">
-            <TraktConnection 
-              :connected="traktConnected" 
-              @connected="onTraktConnectionSuccessful" 
-              @disconnected="disconnectTrakt" 
-              @limitChanged="onTraktLimitChange"
-            />
-          </div>
-          <div class="modal-footer">
-            <button class="modal-close-button" @click="closeTraktConnectModal">Close</button>
-          </div>
-        </div>
-      </div>
-    </teleport>
     
     <!-- User Management Tab (Admin Only) -->
     <div v-if="activeTab === 'users' && isAdmin" class="settings-section">
@@ -545,6 +364,9 @@
           <button type="button" @click="saveSonarrSettings" class="save-button" :disabled="testingSonarr">
             Save Sonarr Settings
           </button>
+          <button type="button" @click="clearStoredCredentials('sonarr')" class="disconnect-button" :disabled="testingSonarr">
+            Disconnect
+          </button>
         </div>
         
         <div v-if="sonarrConnectionMessage" class="connection-message" :class="{ 'success': sonarrConnectionStatus, 'error': !sonarrConnectionStatus }">
@@ -607,6 +429,10 @@
           <button type="button" @click="saveRadarrSettings" class="save-button" :disabled="testingRadarr">
             Save Radarr Settings
           </button>
+          <button type="button" @click="clearStoredCredentials('radarr')" class="disconnect-button" :disabled="testingRadarr">
+            Disconnect
+          </button>
+          
         </div>
         
         <div v-if="radarrConnectionMessage" class="connection-message" :class="{ 'success': radarrConnectionStatus, 'error': !radarrConnectionStatus }">
@@ -686,6 +512,9 @@
           <button type="button" @click="savePlexSettings" class="save-button" :disabled="testingPlex">
             Save Plex Settings
           </button>
+          <button type="button" @click="clearStoredCredentials('plex')" class="disconnect-button" :disabled="testingPlex">
+            Disconnect
+          </button>
         </div>
         
         <div v-if="plexConnectionMessage" class="connection-message" :class="{ 'success': plexConnectionStatus, 'error': !plexConnectionStatus }">
@@ -779,6 +608,9 @@
           <button type="button" @click="saveJellyfinSettings" class="save-button" :disabled="testingJellyfin">
             Save Jellyfin Settings
           </button>
+          <button type="button" @click="clearStoredCredentials('jellyfin')" class="disconnect-button" :disabled="testingJellyfin">
+            Disconnect
+          </button>
         </div>
         
         <div v-if="jellyfinConnectionMessage" class="connection-message" :class="{ 'success': jellyfinConnectionStatus, 'error': !jellyfinConnectionStatus }">
@@ -857,6 +689,9 @@
           <button type="button" @click="saveTautulliSettings" class="save-button" :disabled="testingTautulli">
             Save Tautulli Settings
           </button>
+          <button type="button" @click="clearStoredCredentials('tautulli')" class="disconnect-button" :disabled="testingTautulli">
+            Disconnect
+          </button>
         </div>
         
         <div v-if="tautulliConnectionMessage" class="connection-message" :class="{ 'success': tautulliConnectionStatus, 'error': !tautulliConnectionStatus }">
@@ -1005,11 +840,6 @@ import credentialsService from '../services/CredentialsService';
 import authService from '../services/AuthService';
 import apiService from '../services/ApiService';
 import databaseStorageUtils from '../utils/DatabaseStorageUtils';
-import PlexConnection from './PlexConnection.vue';
-import JellyfinConnection from './JellyfinConnection.vue';
-import TautulliConnection from './TautulliConnection.vue';
-import SonarrConnection from './SonarrConnection.vue';
-import RadarrConnection from './RadarrConnection.vue';
 import TraktConnection from './TraktConnection.vue';
 import TMDBConnection from './TMDBConnection.vue';
 import UserManagement from './UserManagement.vue';
@@ -1017,11 +847,6 @@ import UserManagement from './UserManagement.vue';
 export default {
   name: 'AIServiceSettings',
   components: {
-    PlexConnection,
-    JellyfinConnection,
-    TautulliConnection,
-    SonarrConnection,
-    RadarrConnection,
     TraktConnection,
     TMDBConnection,
     UserManagement
@@ -1232,8 +1057,30 @@ export default {
     }
   },
   methods: {
-    // Collapsible Panel Methods
-    // Collapsible Panel Methods
+    async clearStoredCredentials(serviceName) {
+      // Delete credentials from server instead of localStorage
+      await credentialsService.deleteCredentials(serviceName);
+
+      switch (serviceName) {
+        case 'sonarr':
+          this.handleSonarrDisconnected();
+          break;
+        case 'radarr':
+          this.handleRadarrDisconnected();
+          break;
+        case 'plex':
+          this.handlePlexDisconnected();
+          break;
+        case 'jellyfin':
+          this.handleJellyfinDisconnected();
+          break;
+        case 'tautulli':
+          this.handleTautulliDisconnected();
+          break;
+        default:
+          console.warn(`Unknown service: ${serviceName}`);
+      }
+    },
     toggleConnectionsPanel() {
       this.connectionsCollapsed = !this.connectionsCollapsed;
     },
@@ -1500,7 +1347,7 @@ export default {
         if (plexService.isConfigured()) {
           this.plexSettings.baseUrl = plexService.baseUrl;
           this.plexSettings.token = plexService.token;
-          this.plexSettings.recentLimit = databaseStorageUtils.getSync('plexRecentLimit');
+          this.plexSettings.recentLimit = await databaseStorageUtils.get('plexRecentLimit');
           return;
         }
         
@@ -1508,7 +1355,7 @@ export default {
         const credentials = await credentialsService.getCredentials('plex');
         if (credentials) {
           this.plexSettings.token = credentials.token || '';
-          this.plexSettings.recentLimit = databaseStorageUtils.getSync('plexRecentLimit');
+          this.plexSettings.recentLimit = await databaseStorageUtils.get('plexRecentLimit');
         }
       } catch (error) {
         console.error('Error loading Plex settings:', error);
@@ -1525,7 +1372,7 @@ export default {
           this.jellyfinSettings.apiKey = jellyfinService.apiKey;
           this.jellyfinSettings.userId = jellyfinService.userId;
           this.jellyfinSettings.username = jellyfinService.username; // Load username directly from service
-          this.jellyfinSettings.recentLimit = databaseStorageUtils.getSync('jellyfinRecentLimit');
+          this.jellyfinSettings.recentLimit = await databaseStorageUtils.get('jellyfinRecentLimit');
           return;
         }
         
@@ -1536,7 +1383,7 @@ export default {
           this.jellyfinSettings.apiKey = credentials.apiKey || '';
           this.jellyfinSettings.username = credentials.username || ''; // Load username from credentials
           this.jellyfinSettings.userId = credentials.userId || ''; // Keep loading userId for potential future use
-          this.jellyfinSettings.recentLimit = databaseStorageUtils.getSync('jellyfinRecentLimit');
+          this.jellyfinSettings.recentLimit = await databaseStorageUtils.get('jellyfinRecentLimit');
         }
       } catch (error) {
         console.error('Error loading Jellyfin settings:', error);
@@ -1549,7 +1396,7 @@ export default {
         if (tautulliService.isConfigured()) {
           this.tautulliSettings.baseUrl = tautulliService.baseUrl;
           this.tautulliSettings.apiKey = tautulliService.apiKey;
-          this.tautulliSettings.recentLimit = databaseStorageUtils.getSync('tautulliRecentLimit', 50);
+          this.tautulliSettings.recentLimit = await databaseStorageUtils.get('tautulliRecentLimit', 50);
           return;
         }
         
@@ -1558,7 +1405,7 @@ export default {
         if (credentials) {
           this.tautulliSettings.baseUrl = credentials.baseUrl || '';
           this.tautulliSettings.apiKey = credentials.apiKey || '';
-          this.tautulliSettings.recentLimit = databaseStorageUtils.getSync('tautulliRecentLimit', 50);
+          this.tautulliSettings.recentLimit = await databaseStorageUtils.get('tautulliRecentLimit', 50);
         }
       } catch (error) {
         console.error('Error loading Tautulli settings:', error);
diff --git a/src/components/JellyfinConnection.vue b/src/components/JellyfinConnection.vue
deleted file mode 100644
index 448a25f..0000000
--- a/src/components/JellyfinConnection.vue
+++ /dev/null
@@ -1,572 +0,0 @@
-<template>
-  <div class="jellyfin-connection">
-    <h2>Connect to Jellyfin</h2>
-    
-    <div v-if="jellyfinConnected" class="connection-status">
-      <p class="success">Connected successfully!</p>
-    </div>
-    
-    <form @submit.prevent="saveSettings">
-      <div class="form-group">
-        <label for="jellyfinUrl">Jellyfin URL:</label>
-        <input
-          id="jellyfinUrl"
-          v-model="jellyfinUrl"
-          type="text"
-          placeholder="http://your-jellyfin-server:8096"
-          :disabled="loading"
-          required
-        />
-        <p class="help-text">Example: http://192.168.1.100:8096 or http://jellyfin.local:8096</p>
-      </div>
-      
-      <div class="form-group">
-        <label for="jellyfinApiKey">API Key:</label>
-        <input
-          id="jellyfinApiKey"
-          v-model="jellyfinApiKey"
-          type="password"
-          placeholder="Your Jellyfin API Key"
-          :disabled="loading"
-          required
-        />
-        <p class="help-text">
-          You can generate an API key in Jellyfin under your profile → Advanced → API Keys
-        </p>
-      </div>
-      
-      <div class="form-group">
-        <label for="jellyfinUsername">Username:</label>
-        <input
-          id="jellyfinUsername"
-          v-model="jellyfinUsername"
-          type="text"
-          placeholder="Your Jellyfin Username"
-          :disabled="loading"
-          required
-        />
-        <p class="help-text">
-          Enter your Jellyfin username (the name you use to log in)
-        </p>
-      </div>
-      
-      <div class="form-group">
-        <label for="jellyfinHistoryLimit">History Limit:</label>
-        <div class="limit-control">
-          <input
-            id="jellyfinHistoryLimit"
-            v-model.number="jellyfinHistoryLimit"
-            type="number"
-            min="1"
-            max="10000"
-            :disabled="loading"
-          />
-          <div class="limit-buttons">
-            <button type="button" @click="decreaseLimit" class="limit-btn">-</button>
-            <button type="button" @click="increaseLimit" class="limit-btn">+</button>
-          </div>
-        </div>
-        <p class="help-text">Number of recently watched items to fetch</p>
-      </div>
-      
-      <div class="form-actions">
-        <button
-          type="submit"
-          class="primary-button"
-          :disabled="loading"
-        >
-          <span v-if="loading" class="spinner small"></span>
-          {{ loading ? 'Connecting...' : 'Save & Test Connection' }}
-        </button>
-      </div>
-    </form>
-    
-    <div v-if="message" class="connection-status">
-      <p :class="messageSuccess ? 'success' : 'error'">
-        {{ message }}
-      </p>
-    </div>
-    
-    <div v-if="jellyfinConnected" class="disconnection-section">
-      <button type="button" @click="disconnect" class="disconnect-btn">
-        Disconnect Jellyfin
-      </button>
-    </div>
-  </div>
-</template>
-
-<script>
-import JellyfinService from '@/services/JellyfinService.js';
-import credentialsService from '@/services/CredentialsService.js';
-import databaseStorageUtils from '@/utils/DatabaseStorageUtils';
-import apiService from '@/services/ApiService';
-
-export default {
-  name: 'JellyfinConnection',
-  props: {
-    connected: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      jellyfinUrl: '',
-      jellyfinApiKey: '',
-      jellyfinUserId: '',
-      jellyfinUsername: '',
-      jellyfinHistoryLimit: 50, // Default value, will be updated in created()
-      loading: false,
-      message: '',
-      messageSuccess: false,
-      jellyfinConnected: this.connected
-    };
-  },
-  async created() {
-    // Load history limit from database
-    try {
-      const historyLimit = await databaseStorageUtils.getSync('jellyfinHistoryLimit');
-      if (historyLimit !== null) {
-        this.jellyfinHistoryLimit = historyLimit;
-      }
-    } catch (error) {
-      console.error('Error loading Jellyfin history limit from database:', error);
-      // Use default value if there's an error
-      this.jellyfinHistoryLimit = 50;
-    }
-    
-    // If already connected, load current values from service
-    if (this.connected) {
-      this.jellyfinUrl = JellyfinService.baseUrl;
-      this.jellyfinApiKey = JellyfinService.apiKey;
-      this.jellyfinUserId = JellyfinService.userId;
-      
-      // Try to get the username for the current userId
-      if (this.jellyfinUserId) {
-        try {
-          const users = await JellyfinService.getUsers();
-          const user = users.find(u => u.id === this.jellyfinUserId);
-          if (user) {
-            this.jellyfinUsername = user.name;
-          }
-        } catch (error) {
-          console.error('Error retrieving username for current user ID:', error);
-        }
-      }
-    }
-    
-    // Try to load credentials from server if not set
-    if (!this.jellyfinUrl || !this.jellyfinApiKey) {
-      try {
-        const credentials = await credentialsService.getCredentials('jellyfin');
-        if (credentials) {
-          this.jellyfinUrl = credentials.baseUrl || '';
-          this.jellyfinApiKey = credentials.apiKey || '';
-          this.jellyfinUserId = credentials.userId || '';
-          
-          // Try to get the username for the saved userId
-          if (this.jellyfinUserId && this.jellyfinUrl && this.jellyfinApiKey) {
-            try {
-              // We need to configure the service first
-              await JellyfinService.configure(
-                this.jellyfinUrl,
-                this.jellyfinApiKey,
-                this.jellyfinUserId
-              );
-              
-              const users = await JellyfinService.getUsers();
-              const user = users.find(u => u.id === this.jellyfinUserId);
-              if (user) {
-                this.jellyfinUsername = user.name;
-              }
-            } catch (error) {
-              console.error('Error retrieving username for loaded user ID:', error);
-            }
-          }
-        }
-      } catch (error) {
-        console.error('Error loading saved Jellyfin credentials:', error);
-      }
-    }
-  },
-  watch: {
-    connected(newVal) {
-      this.jellyfinConnected = newVal;
-    }
-  },
-  methods: {
-    decreaseLimit() {
-      if (this.jellyfinHistoryLimit > 1) {
-        this.jellyfinHistoryLimit--;
-      }
-    },
-    
-    increaseLimit() {
-      if (this.jellyfinHistoryLimit < 10000) {
-        this.jellyfinHistoryLimit++;
-      }
-    },
-    
-    
-    async saveSettings() {
-      this.loading = true;
-      this.message = '';
-
-      // Validate input
-      if (!this.jellyfinUrl || !this.jellyfinApiKey || !this.jellyfinUsername) {
-        this.message = 'Please enter all required fields';
-        this.messageSuccess = false;
-        this.loading = false;
-        return;
-      }
-
-      // Save the history limit to database
-      await databaseStorageUtils.set('jellyfinHistoryLimit', this.jellyfinHistoryLimit);
-      
-      // Save to user settings in database
-      try {
-        const userData = await apiService.getSettings();
-        userData.jellyfinHistoryLimit = this.jellyfinHistoryLimit;
-        await apiService.saveSettings(userData);
-      } catch (settingsError) {
-        console.error('Error saving Jellyfin limit to user settings:', settingsError);
-        // Continue even if settings save fails
-      }
-      
-      this.$emit('limitChanged', this.jellyfinHistoryLimit);
-
-      try {
-        // First configure just the URL and API key to be able to call getUserIdByUsername
-        await JellyfinService.configure(
-          this.jellyfinUrl,
-          this.jellyfinApiKey,
-          '' // Temporarily empty userId
-        );
-
-        // Try to look up the user ID from the username
-        const userId = await JellyfinService.getUserIdByUsername(this.jellyfinUsername);
-        
-        if (!userId) {
-          this.message = `Could not find a user with the username "${this.jellyfinUsername}"`;
-          this.messageSuccess = false;
-          this.loading = false;
-          return;
-        }
-        
-        // Save the found userId for future reference
-        this.jellyfinUserId = userId;
-
-        // Configure the Jellyfin service with the looked-up userId
-        await JellyfinService.configure(
-          this.jellyfinUrl,
-          this.jellyfinApiKey,
-          userId
-        );
-      } catch (error) {
-        this.message = `Error looking up username: ${error.message || 'Unknown error occurred'}`;
-        this.messageSuccess = false;
-        this.loading = false;
-        return;
-      }
-
-      // Test the connection
-      try {
-        const result = await JellyfinService.testConnection();
-        this.message = result.message;
-        this.messageSuccess = result.success;
-        
-        if (result.success) {
-          this.jellyfinConnected = true;
-          this.$emit('connected', true);
-        } else {
-          this.jellyfinConnected = false;
-          this.$emit('connected', false);
-        }
-      } catch (error) {
-        this.message = `Error: ${error.message || 'Unknown error occurred'}`;
-        this.messageSuccess = false;
-        this.jellyfinConnected = false;
-        this.$emit('connected', false);
-      }
-
-      this.loading = false;
-    },
-    
-    async clearStoredCredentials() {
-      // Delete credentials from server
-      await credentialsService.deleteCredentials('jellyfin');
-    },
-    
-    disconnect() {
-      this.clearStoredCredentials();
-      
-      // Reset component state
-      this.jellyfinUrl = '';
-      this.jellyfinApiKey = '';
-      this.jellyfinUserId = '';
-      this.jellyfinUsername = '';
-      this.jellyfinConnected = false;
-      this.message = 'Disconnected from Jellyfin.';
-      this.messageSuccess = true;
-      
-      // Notify parent components
-      this.$emit('connected', false);
-      this.$emit('disconnected');
-    }
-  }
-};
-</script>
-
-<style scoped>
-.jellyfin-connection {
-  max-width: 500px;
-  margin: 0 auto;
-  padding: 20px;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  background-color: var(--card-bg-color);
-  box-shadow: var(--card-shadow);
-  transition: background-color var(--transition-speed), 
-              border-color var(--transition-speed),
-              box-shadow var(--transition-speed);
-}
-
-h2 {
-  margin-top: 0;
-  color: var(--header-color);
-  transition: color var(--transition-speed);
-}
-
-.form-group {
-  margin-bottom: 15px;
-}
-
-label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: bold;
-  color: var(--text-color);
-  transition: color var(--transition-speed);
-}
-
-input {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid var(--input-border);
-  border-radius: 4px;
-  box-sizing: border-box;
-  background-color: var(--input-bg);
-  color: var(--input-text);
-  transition: background-color var(--transition-speed), 
-              border-color var(--transition-speed),
-              color var(--transition-speed);
-}
-
-input[type="number"] {
-  width: 60px;
-  text-align: center;
-}
-
-.help-text {
-  font-size: 12px;
-  margin-top: 5px;
-  color: var(--text-muted);
-  transition: color var(--transition-speed);
-}
-
-button {
-  background-color: var(--button-primary-bg);
-  color: var(--button-primary-text);
-  padding: 8px 15px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: bold;
-  transition: background-color var(--transition-speed), 
-              color var(--transition-speed),
-              filter 0.2s;
-}
-
-button:hover:not(:disabled) {
-  filter: brightness(1.1);
-}
-
-button:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
-.form-actions {
-  margin-top: 20px;
-}
-
-.primary-button {
-  width: 100%;
-  padding: 10px 15px;
-  background-color: var(--button-primary-bg);
-  color: white;
-}
-
-.secondary-button {
-  background-color: #6c757d;
-  color: white;
-  font-size: 14px;
-  margin-top: 10px;
-}
-
-.connection-status {
-  margin-top: 15px;
-  padding: 10px;
-  border-radius: 4px;
-  text-align: center;
-}
-
-.success {
-  color: #4caf50;
-  transition: color var(--transition-speed);
-}
-
-.error {
-  color: #f44336;
-  transition: color var(--transition-speed);
-}
-
-/* User selection styling */
-.user-selection {
-  margin-top: 10px;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  padding: 10px;
-}
-
-.loading-users {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-}
-
-.spinner {
-  width: 20px;
-  height: 20px;
-  border: 2px solid rgba(0, 0, 0, 0.1);
-  border-top-color: var(--button-primary-bg);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-right: 10px;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.spinner.small {
-  width: 16px;
-  height: 16px;
-  border-width: 2px;
-}
-
-.no-users-warning {
-  background-color: #fff3cd;
-  color: #856404;
-  padding: 10px;
-  border-radius: 4px;
-  margin-bottom: 10px;
-}
-
-.users-list {
-  max-height: 200px;
-  overflow-y: auto;
-  margin-bottom: 10px;
-}
-
-.user-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: var(--input-bg);
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  padding: 8px 12px;
-  margin-bottom: 5px;
-  text-align: left;
-  width: 100%;
-  transition: all 0.2s;
-}
-
-.user-item:hover {
-  border-color: var(--button-primary-bg);
-}
-
-.user-item.selected {
-  border-color: #4caf50;
-  background-color: rgba(76, 175, 80, 0.1);
-}
-
-.user-badges {
-  display: flex;
-  gap: 5px;
-}
-
-.badge {
-  font-size: 11px;
-  font-weight: bold;
-  padding: 3px 6px;
-  border-radius: 10px;
-}
-
-.selected-badge {
-  background-color: #4caf50;
-  color: white;
-}
-
-.admin-badge {
-  background-color: #6c757d;
-  color: white;
-}
-
-/* Limit control styling */
-.limit-control {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.limit-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.limit-btn {
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  font-size: 14px;
-}
-
-.disconnection-section {
-  margin-top: 20px;
-  padding-top: 15px;
-  border-top: 1px solid var(--border-color);
-}
-
-.disconnect-btn {
-  background-color: #f44336;
-  width: 100%;
-  color: white;
-  margin-top: 10px;
-  font-weight: bold;
-  padding: 12px;
-}
-
-.disconnect-btn:hover {
-  background-color: #d32f2f;
-  filter: brightness(1.1);
-}
-
-</style>
diff --git a/src/components/PlexConnection.vue b/src/components/PlexConnection.vue
deleted file mode 100644
index bfddc10..0000000
--- a/src/components/PlexConnection.vue
+++ /dev/null
@@ -1,531 +0,0 @@
-<template>
-  <div class="plex-connection">
-    <h2>Connect to Plex</h2>
-    
-    <form @submit.prevent="connect">
-      <div class="form-group">
-        <label for="baseUrl">Plex URL:</label>
-        <input 
-          id="baseUrl" 
-          v-model="baseUrl" 
-          type="text" 
-          placeholder="http://localhost:32400"
-          required
-        />
-        <p class="help-text">Enter your Plex server address, including port (usually 32400)</p>
-      </div>
-      
-      <div class="form-group">
-        <label for="token">Plex Token:</label>
-        <input 
-          id="token" 
-          v-model="token" 
-          type="password" 
-          placeholder="Your Plex token"
-          required
-        />
-        <p class="help-text">Your Plex authentication token - <a href="https://support.plex.tv/articles/204059436-finding-an-authentication-token-x-plex-token/" target="_blank">How to find your Plex token</a></p>
-      </div>
-      
-      <button type="submit" :disabled="connecting">
-        {{ connecting ? 'Connecting...' : 'Connect' }}
-      </button>
-    </form>
-    
-    <div v-if="connectionStatus" class="connection-status">
-      <p v-if="connectionStatus === 'success'" class="success">
-        Connected successfully!
-      </p>
-      <p v-else-if="connectionStatus === 'error'" class="error">
-        Connection failed. Please check your URL and token.
-      </p>
-    </div>
-
-    <div v-if="connectionStatus === 'success'" class="recently-watched-options">
-      <div class="disconnection-section">
-        <button type="button" @click="disconnect" class="disconnect-btn">
-          Disconnect Plex
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import plexService from '../services/PlexService';
-import credentialsService from '../services/CredentialsService';
-import databaseStorageUtils from '../utils/DatabaseStorageUtils';
-import apiService from '../services/ApiService';
-
-export default {
-  name: 'PlexConnection',
-  props: {
-    connected: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      baseUrl: '',
-      token: '',
-      connectionStatus: null,
-      connecting: false,
-      recentLimit: 50, // Default limit for recently watched items
-      loading: false
-    };
-  },
-  async created() {
-    // Load recent limit from database
-    try {
-      const recentLimit = await databaseStorageUtils.getSync('plexRecentLimit');
-      if (recentLimit !== null) {
-        this.recentLimit = recentLimit;
-      }
-    } catch (error) {
-      console.error('Error loading Plex recent limit from database:', error);
-      // Use default value if there's an error
-      this.recentLimit = 50;
-    }
-    
-    // If connected prop is true, set connection status right away
-    if (this.connected) {
-      this.connectionStatus = 'success';
-      
-      // Load current values from service
-      this.baseUrl = plexService.baseUrl;
-      this.token = plexService.token;
-    }
-    
-    // Try to load credentials from server
-    if (!this.baseUrl || !this.token) {
-      try {
-        const credentials = await credentialsService.getCredentials('plex');
-        if (credentials && credentials.baseUrl && credentials.token) {
-          this.baseUrl = credentials.baseUrl;
-          this.token = credentials.token;
-          
-          // Try to automatically connect with loaded credentials
-          if (!this.connected) {
-            this.autoConnect();
-          }
-        }
-      } catch (error) {
-        console.error('Error loading saved Plex credentials:', error);
-      }
-    }
-  },
-  methods: {
-    async autoConnect() {
-      this.connecting = true;
-      
-      try {
-        // Validate and normalize the URL
-        if (!this.validateUrl()) {
-          // Clear invalid credentials
-          this.clearStoredCredentials();
-          return;
-        }
-        
-        // Configure the service with saved details
-        await plexService.configure(this.baseUrl, this.token);
-        
-        // Test the connection
-        const success = await plexService.testConnection();
-        
-        // Only emit event if successful
-        if (success) {
-          this.connectionStatus = 'success';
-          this.$emit('connected');
-        } else {
-          // Clear invalid credentials
-          await this.clearStoredCredentials();
-        }
-      } catch (error) {
-        console.error('Error auto-connecting to Plex:', error);
-        // Clear invalid credentials
-        this.clearStoredCredentials();
-      } finally {
-        this.connecting = false;
-      }
-    },
-    async connect() {
-      this.connecting = true;
-      this.connectionStatus = null;
-      
-      try {
-        // Validate and normalize the URL
-        if (!this.validateUrl()) {
-          this.connectionStatus = 'error';
-          return;
-        }
-        
-        // Configure the service with provided details
-        await plexService.configure(this.baseUrl, this.token);
-        
-        // Test the connection
-        const success = await plexService.testConnection();
-        
-        // Update status based on response
-        this.connectionStatus = success ? 'success' : 'error';
-        
-        // If successful, emit event
-        if (success) {
-          this.$emit('connected');
-        }
-      } catch (error) {
-        console.error('Error connecting to Plex:', error);
-        this.connectionStatus = 'error';
-      } finally {
-        this.connecting = false;
-      }
-    },
-    
-    validateUrl() {
-      try {
-        // Validate URL format
-        if (!this.baseUrl) {
-          return false;
-        }
-        
-        // Make sure URL starts with http:// or https://
-        if (!this.baseUrl.match(/^https?:\/\//)) {
-          this.baseUrl = 'http://' + this.baseUrl;
-        }
-        
-        // Normalize URL by removing trailing slashes
-        this.baseUrl = this.baseUrl.replace(/\/+$/, '');
-        
-        // Basic validation that it looks like a URL
-        new URL(this.baseUrl);
-        return true;
-      } catch (e) {
-        console.error('Invalid URL format:', e);
-        return false;
-      }
-    },
-    
-    async clearStoredCredentials() {
-      // Delete credentials from server
-      await credentialsService.deleteCredentials('plex');
-    },
-    
-    disconnect() {
-      // Clear stored credentials
-      this.clearStoredCredentials();
-      
-      // Reset component state
-      this.connectionStatus = null;
-      this.baseUrl = '';
-      this.token = '';
-      
-      // Notify parent components
-      this.$emit('disconnected');
-    },
-    increaseLimit() {
-      if (this.recentLimit < 10000) {
-        this.recentLimit++;
-        this.saveRecentLimit();
-      }
-    },
-    decreaseLimit() {
-      if (this.recentLimit > 1) {
-        this.recentLimit--;
-        this.saveRecentLimit();
-      }
-    },
-    async saveRecentLimit() {
-      // Ensure limit is within bounds
-      if (this.recentLimit < 1) this.recentLimit = 1;
-      if (this.recentLimit > 10000) this.recentLimit = 10000;
-      
-      // Save to database
-      await databaseStorageUtils.set('plexRecentLimit', this.recentLimit);
-      
-      // Save to user settings in database
-      try {
-        const userData = await apiService.getSettings();
-        userData.plexRecentLimit = this.recentLimit;
-        await apiService.saveSettings(userData);
-      } catch (settingsError) {
-        console.error('Error saving Plex limit to user settings:', settingsError);
-        // Continue even if settings save fails
-      }
-      
-      this.$emit('limitChanged', this.recentLimit);
-    },
-    
-  }
-};
-</script>
-
-<style scoped>
-.plex-connection {
-  max-width: 500px;
-  margin: 0 auto;
-  padding: 20px;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  background-color: var(--card-bg-color);
-  box-shadow: var(--card-shadow);
-  transition: background-color var(--transition-speed), 
-              border-color var(--transition-speed),
-              box-shadow var(--transition-speed);
-}
-
-h2, h3 {
-  color: var(--header-color);
-  transition: color var(--transition-speed);
-}
-
-h2 {
-  margin-top: 0;
-}
-
-h3 {
-  font-size: 1.2em;
-  margin-top: 20px;
-  margin-bottom: 15px;
-  padding-top: 15px;
-  border-top: 1px solid var(--border-color);
-}
-
-.form-group {
-  margin-bottom: 15px;
-}
-
-label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: bold;
-  color: var(--text-color);
-  transition: color var(--transition-speed);
-}
-
-input {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid var(--input-border);
-  border-radius: 4px;
-  box-sizing: border-box;
-  background-color: var(--input-bg);
-  color: var(--input-text);
-  transition: background-color var(--transition-speed), 
-              border-color var(--transition-speed),
-              color var(--transition-speed);
-}
-
-input[type="number"] {
-  width: 60px;
-  text-align: center;
-}
-
-.help-text {
-  font-size: 12px;
-  margin-top: 5px;
-  color: var(--text-muted);
-  transition: color var(--transition-speed);
-}
-
-.help-text a {
-  color: var(--button-primary-bg);
-  text-decoration: none;
-}
-
-.help-text a:hover {
-  text-decoration: underline;
-}
-
-button {
-  background-color: var(--button-primary-bg);
-  color: var(--button-primary-text);
-  padding: 10px 15px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: bold;
-  transition: background-color var(--transition-speed), 
-              color var(--transition-speed),
-              filter 0.2s;
-}
-
-button:hover:not(:disabled) {
-  filter: brightness(1.1);
-}
-
-button:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
-.connection-status {
-  margin-top: 15px;
-  padding: 10px;
-  border-radius: 4px;
-}
-
-.success {
-  color: var(--button-primary-bg);
-  transition: color var(--transition-speed);
-}
-
-.error {
-  color: #f44336;
-  transition: color var(--transition-speed);
-}
-
-.limit-control {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.limit-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.limit-btn {
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  font-size: 14px;
-}
-
-.recently-watched-options {
-  margin-top: 15px;
-}
-
-.disconnection-section {
-  margin-top: 20px;
-  padding-top: 15px;
-  border-top: 1px solid var(--border-color);
-}
-
-.disconnect-btn {
-  background-color: #f44336;
-  width: 100%;
-  color: white;
-  margin-top: 10px;
-  font-weight: bold;
-  padding: 12px;
-}
-
-.disconnect-btn:hover {
-  background-color: #d32f2f;
-  filter: brightness(1.1);
-}
-
-/* User selection styling */
-.user-selection {
-  margin-top: 10px;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  padding: 10px;
-}
-
-.loading-users {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-}
-
-.spinner {
-  width: 20px;
-  height: 20px;
-  border: 2px solid rgba(0, 0, 0, 0.1);
-  border-top-color: var(--button-primary-bg);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-right: 10px;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.no-users-warning {
-  background-color: #fff3cd;
-  color: #856404;
-  padding: 10px;
-  border-radius: 4px;
-  margin-bottom: 10px;
-}
-
-.users-list {
-  max-height: 200px;
-  overflow-y: auto;
-  margin-bottom: 10px;
-}
-
-.user-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: var(--input-bg);
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  padding: 8px 12px;
-  margin-bottom: 5px;
-  text-align: left;
-  width: 100%;
-  transition: all 0.2s;
-}
-
-.user-item:hover {
-  border-color: var(--button-primary-bg);
-}
-
-.user-item.selected {
-  border-color: #4caf50;
-  background-color: rgba(76, 175, 80, 0.1);
-}
-
-.user-badges {
-  display: flex;
-  gap: 5px;
-}
-
-.badge {
-  font-size: 11px;
-  font-weight: bold;
-  padding: 3px 6px;
-  border-radius: 10px;
-}
-
-.selected-badge {
-  background-color: #4caf50;
-  color: white;
-}
-
-.admin-badge {
-  background-color: #6c757d;
-  color: white;
-}
-
-.owner-badge {
-  background-color: #3f51b5;
-  color: white;
-}
-
-.secondary-button {
-  background-color: #6c757d;
-  color: white;
-  font-size: 14px;
-  margin-top: 10px;
-}
-
-.selected-user-info {
-  margin-bottom: 10px;
-  padding: 8px;
-  background-color: var(--input-bg);
-  border-radius: 4px;
-  border: 1px solid var(--border-color);
-}
-</style>
diff --git a/src/components/RadarrConnection.vue b/src/components/RadarrConnection.vue
deleted file mode 100644
index a1e59ef..0000000
--- a/src/components/RadarrConnection.vue
+++ /dev/null
@@ -1,332 +0,0 @@
-<template>
-  <div class="radarr-connection">
-    <h2>Connect to Radarr</h2>
-    
-    <form @submit.prevent="connect">
-      <div class="form-group">
-        <label for="baseUrl">Radarr URL:</label>
-        <input 
-          id="baseUrl" 
-          v-model="baseUrl" 
-          type="text" 
-          placeholder="http://localhost:7878"
-          required
-        />
-      </div>
-      
-      <div class="form-group">
-        <label for="apiKey">API Key:</label>
-        <input 
-          id="apiKey" 
-          v-model="apiKey" 
-          type="password" 
-          placeholder="Your Radarr API key"
-          required
-        />
-      </div>
-      
-      <button type="submit" :disabled="connecting">
-        {{ connecting ? 'Connecting...' : 'Connect' }}
-      </button>
-    </form>
-    
-    <div v-if="connectionStatus" class="connection-status">
-      <p v-if="connectionStatus === 'success'" class="success">
-        {{ connectionMessage || 'Connected successfully!' }}
-      </p>
-      <p v-else-if="connectionStatus === 'error'" class="error">
-        {{ connectionMessage || 'Connection failed. Please check your URL and API key.' }}
-      </p>
-    </div>
-    
-    <div v-if="connectionStatus === 'success'" class="disconnection-section">
-      <button type="button" @click="disconnect" class="disconnect-btn">
-        Disconnect Radarr
-      </button>
-    </div>
-  </div>
-</template>
-
-<script>
-import radarrService from '../services/RadarrService';
-import credentialsService from '../services/CredentialsService';
-
-export default {
-  name: 'RadarrConnection',
-  props: {
-    connected: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      baseUrl: '',
-      apiKey: '',
-      connectionStatus: null,
-      connectionMessage: '',
-      connecting: false
-    };
-  },
-  async created() {
-    // If connected prop is true, set connection status right away
-    if (this.connected) {
-      this.connectionStatus = 'success';
-      
-      // Load current values from service
-      this.baseUrl = radarrService.baseUrl;
-      this.apiKey = radarrService.apiKey;
-    }
-    
-    // Try to load credentials from server
-    if (!this.baseUrl || !this.apiKey) {
-      try {
-        const credentials = await credentialsService.getCredentials('radarr');
-        if (credentials && credentials.baseUrl && credentials.apiKey) {
-          this.baseUrl = credentials.baseUrl;
-          this.apiKey = credentials.apiKey;
-          
-          // Try to automatically connect with loaded credentials
-          if (!this.connected) {
-            this.autoConnect();
-          }
-        }
-      } catch (error) {
-        console.error('Error loading saved Radarr credentials:', error);
-      }
-    }
-  },
-  methods: {
-    async autoConnect() {
-      this.connecting = true;
-      
-      try {
-        // Validate and normalize the URL
-        if (!this.validateUrl()) {
-          console.warn('Invalid Radarr URL format during auto-connect, keeping credentials');
-          return;
-        }
-        
-        // Configure the service with saved details
-        const configSuccess = await radarrService.configure(this.baseUrl, this.apiKey);
-        
-        if (!configSuccess) {
-          console.warn('Failed to configure Radarr service during auto-connect, keeping credentials');
-          return;
-        }
-        
-        // Test the connection
-        const result = await radarrService.testConnection();
-        
-        // Only emit event if successful
-        if (result.success) {
-          
-          this.$emit('connected');
-        } else {
-          // Log the error but KEEP the credentials
-          console.warn('Radarr connection test failed during auto-connect:', result.message);
-          console.warn('Keeping credentials despite connection failure');
-        }
-      } catch (error) {
-        console.error('Error auto-connecting to Radarr:', error);
-        // Log the error but KEEP the credentials
-        console.warn('Exception during Radarr auto-connect, keeping credentials');
-      } finally {
-        this.connecting = false;
-      }
-    },
-    async connect() {
-      this.connecting = true;
-      this.connectionStatus = null;
-      
-      try {
-        // Validate and normalize the URL
-        if (!this.validateUrl()) {
-          this.connectionStatus = 'error';
-          return;
-        }
-        
-        // Configure the service with provided details
-        const configSuccess = await radarrService.configure(this.baseUrl, this.apiKey);
-        
-        if (!configSuccess) {
-          console.error('Failed to configure Radarr service with provided credentials');
-          this.connectionStatus = 'error';
-          return;
-        }
-        
-        // Test the connection
-        const result = await radarrService.testConnection();
-        
-        // Update status and message based on response
-        this.connectionStatus = result.success ? 'success' : 'error';
-        this.connectionMessage = result.message;
-        
-        // Log the message for debugging
-        if (result.success) {
-          console.log("Radarr connection successful");
-        } else {
-          console.error('Radarr connection failed:', result.message);
-        }
-        
-        // If successful, emit connected event
-        if (result.success) {
-          this.$emit('connected');
-        }
-      } catch (error) {
-        console.error('Error connecting to Radarr:', error);
-        this.connectionStatus = 'error';
-      } finally {
-        this.connecting = false;
-      }
-    },
-    
-    validateUrl() {
-      try {
-        // Validate URL format
-        if (!this.baseUrl) {
-          return false;
-        }
-        
-        // Make sure URL starts with http:// or https://
-        if (!this.baseUrl.match(/^https?:\/\//)) {
-          this.baseUrl = 'http://' + this.baseUrl;
-        }
-        
-        // Normalize URL by removing trailing slashes
-        this.baseUrl = this.baseUrl.replace(/\/+$/, '');
-        
-        // Basic validation that it looks like a URL
-        new URL(this.baseUrl);
-        return true;
-      } catch (e) {
-        console.error('Invalid URL format:', e);
-        return false;
-      }
-    },
-    
-    async clearStoredCredentials() {
-      // Delete credentials from server
-      await credentialsService.deleteCredentials('radarr');
-    },
-    
-    disconnect() {
-      // Clear stored credentials
-      this.clearStoredCredentials();
-      
-      // Reset component state
-      this.connectionStatus = null;
-      this.connectionMessage = '';
-      this.baseUrl = '';
-      this.apiKey = '';
-      
-      // Notify parent components
-      this.$emit('disconnected');
-    }
-  }
-};
-</script>
-
-<style scoped>
-.radarr-connection {
-  max-width: 500px;
-  margin: 0 auto;
-  padding: 20px;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  background-color: var(--card-bg-color);
-  box-shadow: var(--card-shadow);
-  transition: background-color var(--transition-speed), 
-              border-color var(--transition-speed),
-              box-shadow var(--transition-speed);
-}
-
-h2 {
-  margin-top: 0;
-  color: var(--header-color);
-  transition: color var(--transition-speed);
-}
-
-.form-group {
-  margin-bottom: 15px;
-}
-
-label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: bold;
-  color: var(--text-color);
-  transition: color var(--transition-speed);
-}
-
-input {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid var(--input-border);
-  border-radius: 4px;
-  box-sizing: border-box;
-  background-color: var(--input-bg);
-  color: var(--input-text);
-  transition: background-color var(--transition-speed), 
-              border-color var(--transition-speed),
-              color var(--transition-speed);
-}
-
-button {
-  background-color: var(--button-primary-bg);
-  color: var(--button-primary-text);
-  padding: 10px 15px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: bold;
-  transition: background-color var(--transition-speed), 
-              color var(--transition-speed),
-              filter 0.2s;
-}
-
-button:hover:not(:disabled) {
-  filter: brightness(1.1);
-}
-
-button:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
-.connection-status {
-  margin-top: 15px;
-  padding: 10px;
-  border-radius: 4px;
-}
-
-.success {
-  color: var(--button-primary-bg);
-  transition: color var(--transition-speed);
-}
-
-.error {
-  color: #f44336;
-  transition: color var(--transition-speed);
-}
-
-.disconnection-section {
-  margin-top: 20px;
-  padding-top: 15px;
-  border-top: 1px solid var(--border-color);
-}
-
-.disconnect-btn {
-  background-color: #f44336;
-  width: 100%;
-  color: white;
-  margin-top: 10px;
-  font-weight: bold;
-  padding: 12px;
-}
-
-.disconnect-btn:hover {
-  background-color: #d32f2f;
-  filter: brightness(1.1);
-}
-</style>
diff --git a/src/components/RecommendationResults.vue b/src/components/RecommendationResults.vue
index 748fdcc..15bf6ce 100644
--- a/src/components/RecommendationResults.vue
+++ b/src/components/RecommendationResults.vue
@@ -1,166 +1,168 @@
 <template>
-  <div v-if="!error && recommendations.length > 0" class="recommendation-list" :style="gridStyle">
-    <div v-for="(rec, index) in recommendations" :key="index" class="recommendation-card" :class="{ 'compact-mode': shouldUseCompactMode, 'expanded': expandedCards.has(index) }">
-      <!-- Whole card content is clickable for TMDB -->
-      <div class="card-content" 
-        @click="openTMDBDetailModal(rec)" 
-        :class="{ 'clickable': isTMDBAvailable, 'compact-layout': shouldUseCompactMode, 'horizontal-layout': !shouldUseCompactMode }"
-        :title="isTMDBAvailable ? 'Click for more details' : ''"
-      >
-        <!-- Poster container -->
-        <div class="poster-container" :class="{ 'poster-left': !shouldUseCompactMode }">
-          <div 
-            class="poster" 
-            :style="getPosterStyle(rec.title)"
-            @click.stop="openTMDBDetailModal(rec)"
-            :class="{ 'clickable-poster': isTMDBAvailable }"
-          >
-            <div v-if="!hasPoster(rec.title)" class="title-fallback" @click.stop="openTMDBDetailModal(rec)">
-              {{ getInitials(rec.title) }}
-            </div>
-            
-            <button 
-              v-if="isPosterFallback(rec.title)" 
-              class="retry-poster-button" 
-              :class="{ 'loading': loadingPosters.get(cleanTitle(rec.title)) }"
-              @click.stop.prevent="retryPoster(rec.title)"
-              title="Retry loading poster"
+  <div class="recommendations-container">
+    <div v-if="!error && recommendations.length > 0" class="recommendation-list" :style="gridStyle">
+      <div v-for="(rec, index) in recommendations" :key="index" class="recommendation-card" :class="{ 'compact-mode': shouldUseCompactMode, 'expanded': expandedCards.has(index) }">
+        <!-- Whole card content is clickable for TMDB -->
+        <div class="card-content" 
+          @click="openTMDBDetailModal(rec)" 
+          :class="{ 'clickable': isTMDBAvailable, 'compact-layout': shouldUseCompactMode, 'horizontal-layout': !shouldUseCompactMode }"
+          :title="isTMDBAvailable ? 'Click for more details' : ''"
+        >
+          <!-- Poster container -->
+          <div class="poster-container" :class="{ 'poster-left': !shouldUseCompactMode }">
+            <div 
+              class="poster" 
+              :style="getPosterStyle(rec.title)"
+              @click.stop="openTMDBDetailModal(rec)"
+              :class="{ 'clickable-poster': isTMDBAvailable }"
             >
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11z"/>
-                <path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z"/>
-                <path d="M12 8v4l3 3"/>
-                <path d="M7 6.7l1.5 1.5M17 6.7L15.5 8.2M7 17.3l1.5-1.5M17 17.3l-1.5-1.5"/>
-              </svg>
-            </button>
-          </div>
-        </div>
-        
-        <div class="details-container">
-          <div class="card-header">
-            <h3>{{ rec.title }}</h3>
-            <div class="card-actions">
-              <div class="like-dislike-buttons">
-                <button 
-                  @click.stop="likeRecommendation(rec.title)" 
-                  class="action-btn like-btn"
-                  :class="{'active': isLiked(rec.title)}"
-                  title="Like this recommendation">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
-                  </svg>
-                </button>
-                <button 
-                  @click.stop="dislikeRecommendation(rec.title)" 
-                  class="action-btn dislike-btn"
-                  :class="{'active': isDisliked(rec.title)}"
-                  title="Dislike this recommendation">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm10-13h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3"></path>
-                  </svg>
-                </button>
+              <div v-if="!hasPoster(rec.title)" class="title-fallback" @click.stop="openTMDBDetailModal(rec)">
+                {{ getInitials(rec.title) }}
               </div>
+              
               <button 
-                @click.stop="requestSeries(rec.title)" 
-                class="request-button"
-                :class="{'loading': requestingSeries === rec.title, 'requested': requestStatus[rec.title]?.success}"
-                :disabled="requestingSeries || requestStatus[rec.title]?.success"
-                :title="isMovieMode ? 'Add to Radarr' : 'Add to Sonarr'">
-                <span v-if="requestingSeries === rec.title">
-                  <div class="small-spinner"></div>
-                </span>
-                <span v-else-if="requestStatus[rec.title]?.success">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <polyline points="20 6 9 17 4 12"></polyline>
-                  </svg>
-                </span>
-                <span v-else class="add-button-content">
-                  <span class="add-text">
-                    Add</span>
-                </span>
+                v-if="isPosterFallback(rec.title)" 
+                class="retry-poster-button" 
+                :class="{ 'loading': loadingPosters.get(cleanTitle(rec.title)) }"
+                @click.stop.prevent="retryPoster(rec.title)"
+                title="Retry loading poster"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11z"/>
+                  <path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z"/>
+                  <path d="M12 8v4l3 3"/>
+                  <path d="M7 6.7l1.5 1.5M17 6.7L15.5 8.2M7 17.3l1.5-1.5M17 17.3l-1.5-1.5"/>
+                </svg>
               </button>
             </div>
           </div>
           
-          <div class="content-container">
-            <div v-if="rec.description" class="description">
-              <p>{{ rec.description }}</p>
+          <div class="details-container">
+            <div class="card-header">
+              <h3>{{ rec.title }}</h3>
+              <div class="card-actions">
+                <div class="like-dislike-buttons">
+                  <button 
+                    @click.stop="likeRecommendation(rec.title)" 
+                    class="action-btn like-btn"
+                    :class="{'active': isLiked(rec.title)}"
+                    title="Like this recommendation">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                      <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
+                    </svg>
+                  </button>
+                  <button 
+                    @click.stop="dislikeRecommendation(rec.title)" 
+                    class="action-btn dislike-btn"
+                    :class="{'active': isDisliked(rec.title)}"
+                    title="Dislike this recommendation">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                      <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm10-13h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3"></path>
+                    </svg>
+                  </button>
+                </div>
+                <button 
+                  @click.stop="requestSeries(rec.title)" 
+                  class="request-button"
+                  :class="{'loading': requestingSeries === rec.title, 'requested': requestStatus[rec.title]?.success}"
+                  :disabled="requestingSeries || requestStatus[rec.title]?.success"
+                  :title="isMovieMode ? 'Add to Radarr' : 'Add to Sonarr'">
+                  <span v-if="requestingSeries === rec.title">
+                    <div class="small-spinner"></div>
+                  </span>
+                  <span v-else-if="requestStatus[rec.title]?.success">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                      <polyline points="20 6 9 17 4 12"></polyline>
+                    </svg>
+                  </span>
+                  <span v-else class="add-button-content">
+                    <span class="add-text">
+                      Add</span>
+                  </span>
+                </button>
+              </div>
             </div>
             
-            <div v-if="rec.reasoning" class="reasoning">
-              <div class="reasoning-header">
-                <div class="reasoning-icon">✨</div>
-                <span class="reasoning-label">Why you might like it</span>
+            <div class="content-container">
+              <div v-if="rec.description" class="description">
+                <p>{{ rec.description }}</p>
               </div>
-              <div class="reasoning-content">
-                <p>{{ rec.reasoning }}</p>
+              
+              <div v-if="rec.reasoning" class="reasoning">
+                <div class="reasoning-header">
+                  <div class="reasoning-icon">✨</div>
+                  <span class="reasoning-label">Why you might like it</span>
+                </div>
+                <div class="reasoning-content">
+                  <p>{{ rec.reasoning }}</p>
+                </div>
               </div>
-            </div>
-            
-            <!-- Updated v-if to check rec.rating OR the presence of any rating in rec.ratings -->
-            <div v-if="rec.rating || (rec.ratings && (rec.ratings.imdb || rec.ratings.rottenTomatoes || rec.ratings.metacritic || rec.ratings.tmdb))" class="rating-info">
-              <div class="ratings-container">
-                <!-- Recommendarr Rating -->
-                <div v-if="rec.rating" class="rating-item recommendarr-rating">
-                  <div class="rating-service-icon recommendarr-icon">
-                    <span>RR</span>
+              
+              <!-- Updated v-if to check rec.rating OR the presence of any rating in rec.ratings -->
+              <div v-if="rec.rating || (rec.ratings && (rec.ratings.imdb || rec.ratings.rottenTomatoes || rec.ratings.metacritic || rec.ratings.tmdb))" class="rating-info">
+                <div class="ratings-container">
+                  <!-- Recommendarr Rating -->
+                  <div v-if="rec.rating" class="rating-item recommendarr-rating">
+                    <div class="rating-service-icon recommendarr-icon">
+                      <span>RR</span>
+                    </div>
+                    <span class="rating-text">{{ extractScore(rec.rating) }}%</span>
                   </div>
-                  <span class="rating-text">{{ extractScore(rec.rating) }}%</span>
-                </div>
-                
-                <!-- IMDB Rating - Now checks rec.ratings.imdb -->
-                <div v-if="rec.ratings && rec.ratings.imdb" class="rating-item imdb-rating">
-                  <div class="rating-service-icon imdb-icon">
-                    <span>IMDb</span>
+                  
+                  <!-- IMDB Rating - Now checks rec.ratings.imdb -->
+                  <div v-if="rec.ratings && rec.ratings.imdb" class="rating-item imdb-rating">
+                    <div class="rating-service-icon imdb-icon">
+                      <span>IMDb</span>
+                    </div>
+                    <span class="rating-text">{{ rec.ratings.imdb.value }}</span>
                   </div>
-                  <span class="rating-text">{{ rec.ratings.imdb.value }}</span>
-                </div>
-                
-                <!-- Rotten Tomatoes Rating - Now checks rec.ratings.rottenTomatoes -->
-                <div v-if="rec.ratings && rec.ratings.rottenTomatoes" class="rating-item rt-rating">
-                  <div class="rating-service-icon rt-icon">
-                    <span>RT</span>
+                  
+                  <!-- Rotten Tomatoes Rating - Now checks rec.ratings.rottenTomatoes -->
+                  <div v-if="rec.ratings && rec.ratings.rottenTomatoes" class="rating-item rt-rating">
+                    <div class="rating-service-icon rt-icon">
+                      <span>RT</span>
+                    </div>
+                    <span class="rating-text">{{ rec.ratings.rottenTomatoes.value }}%</span> <!-- Assuming RT value is percentage -->
                   </div>
-                  <span class="rating-text">{{ rec.ratings.rottenTomatoes.value }}%</span> <!-- Assuming RT value is percentage -->
-                </div>
 
-                <!-- Metacritic Rating - New -->
-                <div v-if="rec.ratings && rec.ratings.metacritic" class="rating-item metacritic-rating">
-                  <div class="rating-service-icon metacritic-icon">
-                    <span>MC</span>
+                  <!-- Metacritic Rating - New -->
+                  <div v-if="rec.ratings && rec.ratings.metacritic" class="rating-item metacritic-rating">
+                    <div class="rating-service-icon metacritic-icon">
+                      <span>MC</span>
+                    </div>
+                    <span class="rating-text">{{ rec.ratings.metacritic.value }}</span>
                   </div>
-                  <span class="rating-text">{{ rec.ratings.metacritic.value }}</span>
-                </div>
 
-                <!-- TMDB Rating - New -->
-                <div v-if="rec.ratings && rec.ratings.tmdb" class="rating-item tmdb-rating">
-                  <div class="rating-service-icon tmdb-icon">
-                    <span>TMDB</span>
+                  <!-- TMDB Rating - New -->
+                  <div v-if="rec.ratings && rec.ratings.tmdb" class="rating-item tmdb-rating">
+                    <div class="rating-service-icon tmdb-icon">
+                      <span>TMDB</span>
+                    </div>
+                    <span class="rating-text">{{ rec.ratings.tmdb.value }}</span>
                   </div>
-                  <span class="rating-text">{{ rec.ratings.tmdb.value }}</span>
                 </div>
               </div>
+              
+              <div v-if="!rec.description && !rec.reasoning" class="full-text">
+                <p>{{ rec.fullText }}</p>
+              </div>
             </div>
             
-            <div v-if="!rec.description && !rec.reasoning" class="full-text">
-              <p>{{ rec.fullText }}</p>
-            </div>
+            <!-- Full-width expand button at bottom of card for compact mode -->
+            <button v-if="shouldUseCompactMode" 
+                    class="full-width-expand-button" 
+                    @click.stop="toggleCardExpansion(index)"
+                    :title="expandedCards.has(index) ? 'Hide details' : 'Show more details'"
+                    :class="{ 'expanded': expandedCards.has(index) }">
+              <span>{{ expandedCards.has(index) ? 'Show Less' : 'Show More' }}</span>
+              <svg v-if="!expandedCards.has(index)" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="7 13 12 18 17 13"></polyline>
+              </svg>
+              <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="7 11 12 6 17 11"></polyline>
+              </svg>
+            </button>
           </div>
-          
-          <!-- Full-width expand button at bottom of card for compact mode -->
-          <button v-if="shouldUseCompactMode" 
-                  class="full-width-expand-button" 
-                  @click.stop="toggleCardExpansion(index)"
-                  :title="expandedCards.has(index) ? 'Hide details' : 'Show more details'"
-                  :class="{ 'expanded': expandedCards.has(index) }">
-            <span>{{ expandedCards.has(index) ? 'Show Less' : 'Show More' }}</span>
-            <svg v-if="!expandedCards.has(index)" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <polyline points="7 13 12 18 17 13"></polyline>
-            </svg>
-            <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <polyline points="7 11 12 6 17 11"></polyline>
-            </svg>
-          </button>
         </div>
       </div>
     </div>
@@ -559,6 +561,45 @@ export default {
 </script>
 
 <style scoped>
+/* Add these styles at the top of your existing <style> section */
+.recommendations-container {
+  height: calc(100vh - 100px); /* Adjust 100px based on your header/navigation height */
+  overflow-y: auto;
+  padding: 20px;
+  /* Improve scrolling experience */
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Update existing .recommendation-list styles */
+.recommendation-list {
+  display: grid;
+  width: 100%;
+  gap: 30px;
+  align-items: start;
+  /* Remove any existing margin-top/bottom */
+  margin: 0;
+}
+
+/* Add custom scrollbar styles */
+.recommendations-container::-webkit-scrollbar {
+  width: 8px;
+}
+
+.recommendations-container::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+}
+
+.recommendations-container::-webkit-scrollbar-thumb {
+  background: rgba(var(--primary-color-rgb), 0.3);
+  border-radius: 4px;
+}
+
+.recommendations-container::-webkit-scrollbar-thumb:hover {
+  background: rgba(var(--primary-color-rgb), 0.5);
+}
+
 /* Recommendation list grid layout */
 .recommendation-list {
   display: grid;
diff --git a/src/components/SonarrConnection.vue b/src/components/SonarrConnection.vue
deleted file mode 100644
index 8a9f65f..0000000
--- a/src/components/SonarrConnection.vue
+++ /dev/null
@@ -1,347 +0,0 @@
-<template>
-  <div class="sonarr-connection">
-    <h2>Connect to Sonarr</h2>
-    
-    <form @submit.prevent="connect">
-      <div class="form-group">
-        <label for="baseUrl">Sonarr URL:</label>
-        <input 
-          id="baseUrl" 
-          v-model="baseUrl" 
-          type="text" 
-          placeholder="http://localhost:8989"
-          required
-        />
-        <small>Enter your Sonarr URL using the internal network IP (e.g., http://192.168.0.x:8989) for best results, especially for external access.</small>
-      </div>
-      
-      <div class="form-group">
-        <label for="apiKey">API Key:</label>
-        <input 
-          id="apiKey" 
-          v-model="apiKey" 
-          type="password" 
-          placeholder="Your Sonarr API key"
-          required
-        />
-      </div>
-      
-      <button type="submit" :disabled="connecting">
-        {{ connecting ? 'Connecting...' : 'Connect' }}
-      </button>
-    </form>
-    
-    <div v-if="connectionStatus" class="connection-status">
-      <p v-if="connectionStatus === 'success'" class="success">
-        Connected successfully!
-      </p>
-      <p v-else-if="connectionStatus === 'error'" class="error">
-        Connection failed. Please check your URL and API key.
-      </p>
-    </div>
-    
-    <div v-if="connectionStatus === 'success'" class="disconnection-section">
-      <button type="button" @click="disconnect" class="disconnect-btn">
-        Disconnect Sonarr
-      </button>
-    </div>
-  </div>
-</template>
-
-<script>
-import sonarrService from '../services/SonarrService';
-import credentialsService from '../services/CredentialsService';
-import axios from 'axios';
-
-export default {
-  name: 'SonarrConnection',
-  props: {
-    connected: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      baseUrl: '',
-      apiKey: '',
-      connectionStatus: null,
-      connecting: false
-    };
-  },
-  async created() {
-    // If connected prop is true, set connection status right away
-    if (this.connected) {
-      this.connectionStatus = 'success';
-      
-      // Load current values from service
-      this.baseUrl = sonarrService.baseUrl;
-      this.apiKey = sonarrService.apiKey;
-    }
-    
-    // Try to load credentials from server
-    if (!this.baseUrl || !this.apiKey) {
-      try {
-        const credentials = await credentialsService.getCredentials('sonarr');
-        if (credentials && credentials.baseUrl && credentials.apiKey) {
-          this.baseUrl = credentials.baseUrl;
-          this.apiKey = credentials.apiKey;
-          
-          // Try to automatically connect with loaded credentials
-          if (!this.connected) {
-            this.autoConnect();
-          }
-        }
-      } catch (error) {
-        console.error('Error loading saved Sonarr credentials:', error);
-      }
-    }
-  },
-  methods: {
-    async autoConnect() {
-      this.connecting = true;
-      
-      try {
-        // Validate and normalize the URL
-        if (!this.validateUrl()) {
-          console.warn('Invalid Sonarr URL format during auto-connect, keeping credentials');
-          return;
-        }
-        
-        // Configure the service with saved details
-        sonarrService.configure(this.baseUrl, this.apiKey);
-        
-        // Test the connection
-        const success = await sonarrService.testConnection();
-        
-        // Only emit event if successful
-        if (success) {
-          // Update credentials in service
-          await sonarrService.configure(this.baseUrl, this.apiKey);
-          this.$emit('connected');
-        } else {
-          // Log the error but KEEP the credentials
-          console.warn('Sonarr connection test failed during auto-connect, keeping credentials');
-        }
-      } catch (error) {
-        console.error('Error auto-connecting to Sonarr:', error);
-        // Log the error but KEEP the credentials
-        console.warn('Exception during Sonarr auto-connect, keeping credentials');
-        
-        // No need to show alerts during auto-connect
-      } finally {
-        this.connecting = false;
-      }
-    },
-    async connect() {
-      this.connecting = true;
-      this.connectionStatus = null;
-      
-      try {
-        // Validate and normalize the URL
-        if (!this.validateUrl()) {
-          this.connectionStatus = 'error';
-          return;
-        }
-        
-        // Configure the service with provided details
-        await sonarrService.configure(this.baseUrl, this.apiKey);
-        
-        // Test the connection
-        const success = await sonarrService.testConnection();
-        
-        // Update status based on response
-        this.connectionStatus = success ? 'success' : 'error';
-        
-        // If successful, emit event
-        if (success) {
-          this.$emit('connected');
-        }
-      } catch (error) {
-        console.error('Error connecting to Sonarr:', error);
-        this.connectionStatus = 'error';
-        
-        // Try to diagnose connection issue
-        const sonarrUrl = new URL(this.baseUrl);
-        this.diagnoseConnection(sonarrUrl.hostname, sonarrUrl.port);
-        
-        // Display more helpful error message based on the error
-        if (error.message) {
-          // Show the message from the server if available
-          alert(`Connection error: ${error.message}`);
-        } else if (error.code === 'ECONNREFUSED' || error.code === 'ENOTFOUND') {
-          alert('Cannot connect to Sonarr. Please ensure the service is running and the URL is correct.');
-        } else if (error.status === 0) {
-          alert('Cannot connect to the API server. Please check your network connection.');
-        }
-      } finally {
-        this.connecting = false;
-      }
-    },
-    
-    // Diagnostic helper to test network connectivity
-    async diagnoseConnection(host, port) {
-      try {
-        
-        // Check if the API server can reach the Sonarr host
-        await axios.get(`/api/net-test?target=${host}&port=${port}`);
-        
-      } catch (error) {
-        console.error('Error running connection diagnostics:', error);
-      }
-    },
-    
-    validateUrl() {
-      try {
-        // Validate URL format
-        if (!this.baseUrl) {
-          return false;
-        }
-        
-        // Make sure URL starts with http:// or https://
-        if (!this.baseUrl.match(/^https?:\/\//)) {
-          this.baseUrl = 'http://' + this.baseUrl;
-        }
-        
-        // Normalize URL by removing trailing slashes
-        this.baseUrl = this.baseUrl.replace(/\/+$/, '');
-        
-        // Basic validation that it looks like a URL
-        new URL(this.baseUrl);
-        return true;
-      } catch (e) {
-        console.error('Invalid URL format:', e);
-        return false;
-      }
-    },
-    
-    // No longer needed - credentials are stored server-side now
-    async clearStoredCredentials() {
-      // Delete credentials from server instead of localStorage
-      await credentialsService.deleteCredentials('sonarr');
-    },
-    
-    disconnect() {
-      // Clear stored credentials
-      this.clearStoredCredentials();
-      
-      // Reset component state
-      this.connectionStatus = null;
-      this.baseUrl = '';
-      this.apiKey = '';
-      
-      // Notify parent components
-      this.$emit('disconnected');
-    }
-  }
-};
-</script>
-
-<style scoped>
-.sonarr-connection {
-  max-width: 500px;
-  margin: 0 auto;
-  padding: 20px;
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius-md);
-  background-color: var(--card-bg-color);
-  box-shadow: var(--card-shadow);
-  transition: background-color var(--transition-speed), 
-              border-color var(--transition-speed),
-              box-shadow var(--transition-speed);
-}
-
-h2 {
-  margin-top: 0;
-  color: var(--header-color);
-  transition: color var(--transition-speed);
-}
-
-.form-group {
-  margin-bottom: 15px;
-}
-
-label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: bold;
-  color: var(--text-color);
-  transition: color var(--transition-speed);
-}
-
-input {
-  width: 100%;
-  padding: 8px 10px;
-  border: 1px solid var(--input-border);
-  border-radius: var(--border-radius-sm);
-  box-sizing: border-box;
-  background-color: var(--input-bg);
-  color: var(--input-text);
-  transition: background-color var(--transition-speed), 
-              border-color var(--transition-speed),
-              color var(--transition-speed);
-  font-size: 14px;
-}
-
-button {
-  background-color: var(--button-primary-bg);
-  color: var(--button-primary-text);
-  padding: 8px 15px;
-  border: none;
-  border-radius: var(--border-radius-sm);
-  cursor: pointer;
-  font-weight: 500;
-  transition: background-color var(--transition-speed), 
-              color var(--transition-speed),
-              filter 0.2s;
-  font-size: 14px;
-  letter-spacing: 0.2px;
-}
-
-button:hover:not(:disabled) {
-  filter: brightness(1.1);
-}
-
-button:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
-.connection-status {
-  margin-top: 15px;
-  padding: 10px;
-  border-radius: 4px;
-}
-
-.success {
-  color: var(--button-primary-bg);
-  transition: color var(--transition-speed);
-}
-
-.error {
-  color: #f44336;
-  transition: color var(--transition-speed);
-}
-
-.disconnection-section {
-  margin-top: 20px;
-  padding-top: 15px;
-  border-top: 1px solid var(--border-color);
-}
-
-.disconnect-btn {
-  background-color: #f44336;
-  width: 100%;
-  color: white;
-  margin-top: 10px;
-  font-weight: 500;
-  padding: 8px 15px;
-  border-radius: var(--border-radius-sm);
-  font-size: 14px;
-  letter-spacing: 0.2px;
-}
-
-.disconnect-btn:hover {
-  filter: brightness(1.1);
-}
-</style>
diff --git a/src/components/TautulliConnection.vue b/src/components/TautulliConnection.vue
deleted file mode 100644
index 8c7468c..0000000
--- a/src/components/TautulliConnection.vue
+++ /dev/null
@@ -1,597 +0,0 @@
-<template>
-  <div class="service-connection">
-    <div v-if="!connected" class="connection-form">
-      <h2>Connect to Tautulli</h2>
-      <p class="connection-description">
-        Connect to your Tautulli server to access watch history statistics.
-      </p>
-      
-      <div class="form-group">
-        <label for="baseUrl">Tautulli URL:</label>
-        <input 
-          id="baseUrl" 
-          v-model="baseUrl" 
-          type="text" 
-          placeholder="http://localhost:8181"
-          required
-          @keyup.enter="connectToTautulli"
-        />
-        <div class="field-hint">The URL to your Tautulli server (e.g., http://localhost:8181)</div>
-      </div>
-      
-      <div class="form-group">
-        <label for="apiKey">API Key:</label>
-        <div class="api-key-input">
-          <input 
-            id="apiKey" 
-            v-model="apiKey" 
-            :type="showApiKey ? 'text' : 'password'" 
-            placeholder="Your Tautulli API key"
-            required
-            @keyup.enter="connectToTautulli"
-          />
-          <button type="button" class="toggle-button" @click="showApiKey = !showApiKey">
-            {{ showApiKey ? 'Hide' : 'Show' }}
-          </button>
-        </div>
-        <div class="field-hint">
-          Found in Tautulli Settings > Web Interface > API
-        </div>
-      </div>
-      
-      <div class="form-group">
-        <label for="recentLimit">Number of recent items to fetch:</label>
-        <div class="limit-input">
-          <input 
-            id="recentLimit" 
-            v-model.number="recentLimit" 
-            type="number" 
-            min="1" 
-            max="10000" 
-            @keyup.enter="connectToTautulli"
-          />
-        </div>
-      </div>
-      
-      <div class="actions">
-        <button 
-          @click="connectToTautulli" 
-          :disabled="isConnecting || !baseUrl || !apiKey"
-          class="primary-button"
-        >
-          <span v-if="isConnecting" class="loading-spinner"></span>
-          {{ isConnecting ? 'Connecting...' : 'Connect' }}
-        </button>
-      </div>
-      
-      <div v-if="errorMessage" class="error-message">
-        {{ errorMessage }}
-      </div>
-    </div>
-    
-    <div v-else class="connection-info">
-      <div class="connection-header">
-        <h2>Tautulli Connection</h2>
-        <div class="connection-status connected">
-          <span class="status-icon">✓</span>
-          Connected
-        </div>
-      </div>
-      
-      <div class="server-info">
-        <div class="info-row">
-          <span class="info-label">Server URL:</span>
-          <span class="info-value">{{ baseUrl }}</span>
-        </div>
-        
-        <div class="info-row">
-          <span class="info-label">Recent History Limit:</span>
-          <span class="info-value">{{ recentLimit }} items</span>
-          <button class="edit-button" @click="editLimit = true" v-if="!editLimit">Edit</button>
-          
-          <div v-if="editLimit" class="edit-limit">
-            <input 
-              type="number" 
-              v-model.number="newLimit" 
-              min="1" 
-              max="10000"
-            />
-            <div class="edit-actions">
-              <button class="save-button" @click="updateLimit">Save</button>
-              <button class="cancel-button" @click="cancelEditLimit">Cancel</button>
-            </div>
-          </div>
-        </div>
-      </div>
-      
-      
-      <div class="actions">
-        <button @click="disconnectTautulli" class="disconnect-button">
-          Disconnect from Tautulli
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import tautulliService from '../services/TautulliService';
-import databaseStorageUtils from '../utils/DatabaseStorageUtils';
-import apiService from '../services/ApiService';
-import credentialsService from '../services/CredentialsService';
-
-export default {
-  name: 'TautulliConnection',
-  props: {
-    connected: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      baseUrl: '',
-      apiKey: '',
-      recentLimit: 50,
-      showApiKey: false,
-      isConnecting: false,
-      errorMessage: '',
-      editLimit: false,
-      newLimit: 50
-    };
-  },
-  async created() {
-    // If we're already connected, populate with existing credentials
-    if (this.connected) {
-      // Make sure credentials are loaded
-      if (!tautulliService.isConfigured()) {
-        await tautulliService.loadCredentials();
-      }
-      
-      if (tautulliService.isConfigured()) {
-        this.baseUrl = tautulliService.baseUrl;
-        this.apiKey = tautulliService.apiKey;
-        
-        // Load recent limit from database
-        try {
-          const recentLimit = await databaseStorageUtils.getSync('tautulliRecentLimit');
-          if (recentLimit !== null) {
-            this.recentLimit = recentLimit;
-            this.newLimit = this.recentLimit;
-          }
-        } catch (error) {
-          console.error('Error loading Tautulli recent limit from database:', error);
-          // Use default value if there's an error
-          this.recentLimit = 50;
-          this.newLimit = 50;
-        }
-      }
-    }
-  },
-  methods: {
-    async connectToTautulli() {
-      if (!this.baseUrl || !this.apiKey) {
-        this.errorMessage = 'Please enter both Tautulli URL and API key';
-        return;
-      }
-      
-      this.isConnecting = true;
-      this.errorMessage = '';
-      
-      try {
-        // First, try to get existing credentials to get the recentLimit
-        let recentLimitToUse = this.recentLimit;
-        try {
-          const existingCredentials = await credentialsService.getCredentials('tautulli');
-          if (existingCredentials && existingCredentials.recentLimit !== undefined) {
-            recentLimitToUse = existingCredentials.recentLimit;
-            
-          }
-        } catch (credError) {
-          console.error(credError);
-        }
-        
-        // Configure the Tautulli service with the credentials and recentLimit
-        await tautulliService.configure(this.baseUrl, this.apiKey, '', recentLimitToUse);
-        
-        // Test the connection
-        const success = await tautulliService.testConnection();
-        
-        if (success) {
-          // Save the recent limit to database
-          await databaseStorageUtils.set('tautulliRecentLimit', this.recentLimit);
-          
-          // Save to user settings in database using individual setting API
-          try {
-            await apiService.saveSetting('tautulliRecentLimit', this.recentLimit);
-            
-          } catch (settingsError) {
-            console.error('Error saving tautulliRecentLimit to database:', settingsError);
-            // Continue even if settings save fails
-          }
-          
-          // Emit connected event
-          this.$emit('connected');
-          
-          // Emit limit changed event
-          this.$emit('limitChanged', this.recentLimit);
-        } else {
-          this.errorMessage = 'Could not connect to Tautulli. Please verify your credentials.';
-        }
-      } catch (error) {
-        console.error('Error connecting to Tautulli:', error);
-        this.errorMessage = error.response?.data?.message || 'Failed to connect to Tautulli';
-      } finally {
-        this.isConnecting = false;
-      }
-    },
-    
-    async disconnectTautulli() {
-      if (confirm('Are you sure you want to disconnect from Tautulli?')) {
-        await tautulliService.disconnect();
-        this.$emit('disconnected');
-      }
-    },
-    
-    async updateLimit() {
-      if (this.newLimit < 1) {
-        this.newLimit = 1;
-      } else if (this.newLimit > 10000) {
-        this.newLimit = 10000;
-      }
-      
-      this.recentLimit = this.newLimit;
-      
-      // Save to database
-      await databaseStorageUtils.set('tautulliRecentLimit', this.recentLimit);
-      this.editLimit = false;
-      
-      // Save to user settings in database using individual setting API
-      try {
-        await apiService.saveSetting('tautulliRecentLimit', this.recentLimit);
-        
-      } catch (settingsError) {
-        console.error('Error saving tautulliRecentLimit to database:', settingsError);
-        // Continue even if settings save fails
-      }
-      
-      // Update the credentials in the database with the new limit
-      try {
-        // Get current credentials
-        const credentials = await credentialsService.getCredentials('tautulli');
-        if (credentials) {
-          // Update the recentLimit
-          credentials.recentLimit = this.recentLimit;
-          // Store updated credentials
-          await credentialsService.storeCredentials('tautulli', credentials);
-        }
-      } catch (credError) {
-        console.error('Error updating Tautulli credentials with new limit:', credError);
-        // Continue even if credentials update fails
-      }
-      
-      // Emit the limit changed event
-      this.$emit('limitChanged', this.recentLimit);
-    },
-    
-    cancelEditLimit() {
-      this.newLimit = this.recentLimit;
-      this.editLimit = false;
-    }
-  }
-};
-</script>
-
-<style scoped>
-.service-connection {
-  max-width: 500px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-h2 {
-  margin-top: 0;
-  margin-bottom: 15px;
-  color: var(--header-color);
-  text-align: center;
-  transition: color var(--transition-speed);
-}
-
-.connection-description {
-  margin-bottom: 20px;
-  text-align: center;
-  color: var(--text-color);
-  line-height: 1.5;
-  transition: color var(--transition-speed);
-}
-
-.form-group {
-  margin-bottom: 20px;
-}
-
-label {
-  display: block;
-  margin-bottom: 8px;
-  font-weight: 500;
-  color: var(--text-color);
-  transition: color var(--transition-speed);
-}
-
-input[type="text"],
-input[type="password"],
-input[type="number"] {
-  width: 100%;
-  padding: 10px;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  background-color: var(--input-bg);
-  color: var(--input-text);
-  transition: background-color var(--transition-speed), 
-              border-color var(--transition-speed),
-              color var(--transition-speed);
-}
-
-input[type="number"] {
-  width: 80px;
-  text-align: center;
-}
-
-.api-key-input {
-  display: flex;
-  gap: 10px;
-}
-
-.api-key-input input {
-  flex: 1;
-}
-
-.toggle-button {
-  background-color: var(--button-secondary-bg);
-  color: var(--button-secondary-text);
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  padding: 0 10px;
-  cursor: pointer;
-  transition: background-color var(--transition-speed), 
-              color var(--transition-speed),
-              border-color var(--transition-speed);
-}
-
-.toggle-button:hover {
-  background-color: var(--nav-hover-bg);
-}
-
-.field-hint {
-  font-size: 12px;
-  margin-top: 5px;
-  color: var(--text-color);
-  opacity: 0.7;
-  transition: color var(--transition-speed);
-}
-
-.limit-input {
-  display: flex;
-  align-items: center;
-}
-
-.actions {
-  margin-top: 25px;
-  display: flex;
-  justify-content: center;
-}
-
-.primary-button {
-  background-color: #7c3aed; /* Tautulli purple color */
-  color: white;
-  border: none;
-  border-radius: 4px;
-  padding: 10px 20px;
-  font-size: 16px;
-  font-weight: 500;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  min-width: 150px;
-  transition: background-color 0.2s;
-}
-
-.primary-button:hover:not(:disabled) {
-  background-color: #6d28d9; /* Darker purple on hover */
-}
-
-.primary-button:disabled {
-  background-color: #c4b5fd; /* Light purple when disabled */
-  cursor: not-allowed;
-}
-
-.loading-spinner {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-radius: 50%;
-  border-top-color: white;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.error-message {
-  margin-top: 15px;
-  padding: 10px;
-  background-color: rgba(255, 59, 48, 0.1);
-  border-left: 3px solid #FF3B30;
-  color: var(--text-color);
-  border-radius: 4px;
-  transition: color var(--transition-speed);
-}
-
-/* Connected state styling */
-.connection-info {
-  background-color: var(--card-bg-color);
-  border-radius: 8px;
-  box-shadow: var(--card-shadow);
-  padding: 20px;
-  transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
-}
-
-.connection-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 20px;
-}
-
-.connection-status {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.status-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background-color: #34C759;
-  color: white;
-  font-size: 10px;
-}
-
-.server-info {
-  margin-bottom: 25px;
-  padding: 15px;
-  background-color: var(--bg-color);
-  border-radius: 6px;
-  transition: background-color var(--transition-speed);
-}
-
-.info-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  margin-bottom: 12px;
-  position: relative;
-}
-
-.info-row:last-child {
-  margin-bottom: 0;
-}
-
-.info-label {
-  font-weight: 500;
-  width: 140px;
-  color: var(--text-color);
-  transition: color var(--transition-speed);
-}
-
-.info-value {
-  flex: 1;
-  color: var(--text-color);
-  font-family: monospace;
-  word-break: break-all;
-  transition: color var(--transition-speed);
-}
-
-.edit-button {
-  background: none;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  padding: 2px 8px;
-  font-size: 12px;
-  cursor: pointer;
-  color: var(--text-color);
-  margin-left: 10px;
-  transition: all 0.2s;
-}
-
-.edit-button:hover {
-  background-color: var(--nav-hover-bg);
-  border-color: var(--button-primary-bg);
-}
-
-.edit-limit {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 8px;
-  width: 100%;
-}
-
-.edit-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.save-button, .cancel-button {
-  padding: 4px 12px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 12px;
-  transition: all 0.2s;
-}
-
-.save-button {
-  background-color: var(--button-primary-bg);
-  border: none;
-  color: white;
-}
-
-.cancel-button {
-  background-color: var(--button-secondary-bg);
-  border: 1px solid var(--border-color);
-  color: var(--text-color);
-}
-
-.save-button:hover {
-  filter: brightness(1.1);
-}
-
-.cancel-button:hover {
-  background-color: var(--nav-hover-bg);
-}
-
-.user-selection {
-  margin-bottom: 25px;
-  text-align: center;
-}
-
-.select-user-button {
-  background-color: var(--card-bg-color);
-  border: 1px solid #7c3aed; /* Tautulli purple color */
-  color: #7c3aed;
-  border-radius: 4px;
-  padding: 8px 16px;
-  cursor: pointer;
-  font-weight: 500;
-  transition: all 0.2s;
-}
-
-.select-user-button:hover {
-  background-color: rgba(124, 58, 237, 0.1);
-}
-
-.disconnect-button {
-  background-color: rgba(255, 59, 48, 0.1);
-  color: #FF3B30;
-  border: 1px solid #FF3B30;
-  border-radius: 4px;
-  padding: 10px 20px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.disconnect-button:hover {
-  background-color: rgba(255, 59, 48, 0.2);
-}
-</style>
diff --git a/src/services/PlexService.js b/src/services/PlexService.js
index 19c2525..7671fe4 100644
--- a/src/services/PlexService.js
+++ b/src/services/PlexService.js
@@ -23,7 +23,7 @@ constructor() {
    */
   async initSelectedUserId() {
     try {
-      this.selectedUserId = await databaseStorageUtils.getSync('selectedPlexUserId') || '';
+      this.selectedUserId = await databaseStorageUtils.get('selectedPlexUserId') || '';
     } catch (error) {
       console.error('Error initializing selectedPlexUserId:', error);
       this.selectedUserId = '';
diff --git a/src/services/TautulliService.js b/src/services/TautulliService.js
index 558ccb6..8d7b5c6 100644
--- a/src/services/TautulliService.js
+++ b/src/services/TautulliService.js
@@ -26,7 +26,7 @@ constructor() {
    */
   async initSelectedUserId() {
     try {
-      this.selectedUserId = await databaseStorageUtils.getSync('selectedTautulliUserId') || '';
+      this.selectedUserId = await databaseStorageUtils.get('selectedTautulliUserId') || '';
     } catch (error) {
       console.error('Error initializing selectedTautulliUserId:', error);
       this.selectedUserId = '';