Final interface cleanup and improvements

Interface updates:
- Removed 'Open Image Folders' button - functionality wasn't implemented
- Updated Storage Info to show desktop vs web-specific information
- Desktop mode now shows unlimited storage info with file system details
- Web mode shows traditional browser storage limitations

Storage Info improvements:
- Shows image counts by category (tasks/consequences)
- Desktop version highlights unlimited storage benefits
- Clearer information about native file system vs browser storage
- Better visual organization with emojis and sections

.gitignore updates:
- Added comprehensive image file exclusions (jpg, png, gif, webp, etc.)
- Added audio file exclusions (mp3, wav, ogg, m4a, etc.)
- Excluded user imported images directories (images/tasks/*, images/consequences/*)
- Prevents user content from being committed to repo

Benefits:
- Cleaner interface with fewer non-functional buttons
- Context-aware storage information based on platform
- Better repository hygiene by excluding user content files

.gitignore

@@ -25,6 +25,27 @@ node_modules/
 # images/cached/*.jpeg
 # images/cached/*.webp
 
+# User imported images and audio files
+images/tasks/*
+images/consequences/*
+*.jpg
+*.jpeg
+*.png
+*.gif
+*.webp
+*.bmp
+*.tiff
+*.tif
+*.svg
+*.ico
+*.mp3
+*.wav
+*.ogg
+*.m4a
+*.aac
+*.flac
+*.wma
+
 # Backup files
 *.bak
 *~

game.js

@@ -937,7 +937,6 @@ class TaskChallengeGame {
         // Desktop-specific buttons
         const importTaskBtn = document.getElementById('import-task-images-btn');
         const importConsequenceBtn = document.getElementById('import-consequence-images-btn');
-        const openFoldersBtn = document.getElementById('open-image-folders-btn');
         
         // Clone and replace to remove existing listeners
         if (backBtn) {
@@ -973,18 +972,6 @@ class TaskChallengeGame {
             });
         }
         
-        if (openFoldersBtn) {
-            const newOpenFoldersBtn = openFoldersBtn.cloneNode(true);
-            openFoldersBtn.parentNode.replaceChild(newOpenFoldersBtn, openFoldersBtn);
-            newOpenFoldersBtn.addEventListener('click', async () => {
-                if (this.fileManager) {
-                    await this.fileManager.openImageDirectory('task');
-                    await this.fileManager.openImageDirectory('consequence');
-                } else {
-                    this.showNotification('Desktop file manager not available', 'warning');
-                }
-            });
-        }
         
         // Original web upload button (fallback)
         if (uploadBtn) {
@@ -1440,75 +1427,81 @@ class TaskChallengeGame {
 
     showStorageInfo() {
         try {
-            const storageData = localStorage.getItem(this.dataManager.storageKey);
-            const storageSize = storageData ? storageData.length : 0;
+            const isDesktop = window.electronAPI !== undefined;
             const customImages = this.dataManager.get('customImages') || { task: [], consequence: [] };
             
-            // Count cached vs old format images
-            let cachedImages = 0;
-            let legacyImages = 0;
             let totalCustomImages = 0;
+            let taskCount = 0;
+            let consequenceCount = 0;
             
             if (Array.isArray(customImages)) {
                 // Old format
-                customImages.forEach(img => {
-                    if (typeof img === 'string') {
-                        legacyImages++;
-                    } else {
-                        cachedImages++;
-                    }
-                });
                 totalCustomImages = customImages.length;
+                taskCount = customImages.length;
+                consequenceCount = 0;
             } else {
                 // New format - count both categories
-                ['task', 'consequence'].forEach(category => {
-                    const images = customImages[category] || [];
-                    images.forEach(img => {
-                        if (typeof img === 'string') {
-                            legacyImages++;
-                        } else {
-                            cachedImages++;
-                        }
-                    });
-                    totalCustomImages += images.length;
-                });
+                taskCount = (customImages.task || []).length;
+                consequenceCount = (customImages.consequence || []).length;
+                totalCustomImages = taskCount + consequenceCount;
             }
             
-            // Estimate sizes
-            const storageMB = (storageSize / (1024 * 1024)).toFixed(2);
-            const maxMB = 6; // Our limit (mainly for metadata now)
-            const usagePercent = ((storageSize / (maxMB * 1024 * 1024)) * 100).toFixed(1);
+            let message;
             
-            const message = `
-📊 Storage Usage Information:
+            if (isDesktop) {
+                message = `
+📊 Desktop Application Storage:
+
+🖼️ Image Library:
+├─ Task Images: ${taskCount}
+└─ Consequence Images: ${consequenceCount}
+Total Images: ${totalCustomImages}
+
+💾 Storage Type: Native File System
+📁 Storage Location: images/ folder in app directory
+💡 Storage Capacity: Unlimited (depends on available disk space)
+
+✅ Desktop Benefits:
+• No browser storage limitations
+• Full-resolution image support
+• Native file system performance
+• Automatic directory organization
+• Cross-platform file compatibility
+
+🎯 Image Management:
+• Import images using native file dialogs
+• Images automatically organized by category
+• No compression or size restrictions
+• Direct file system access for best performance
+
+${totalCustomImages === 0 ? '📷 No custom images imported yet. Use the Import buttons to add your images!' : ''}
+                `.trim();
+            } else {
+                // Original web version info
+                const storageData = localStorage.getItem(this.dataManager.storageKey);
+                const storageSize = storageData ? storageData.length : 0;
+                const storageMB = (storageSize / (1024 * 1024)).toFixed(2);
+                const maxMB = 6;
+                const usagePercent = ((storageSize / (maxMB * 1024 * 1024)) * 100).toFixed(1);
+                
+                message = `
+📊 Browser Storage Information:
 
 LocalStorage Used: ${storageMB} MB / ~${maxMB} MB (${usagePercent}%)
 Total Custom Images: ${totalCustomImages}
-├─ High-Quality Images: ${cachedImages} (optimized compression)
-└─ Legacy Images: ${legacyImages} (older format)
 
 ${usagePercent > 85 ? '⚠️ Storage getting full - consider deleting some images' : 
   usagePercent > 70 ? '⚡ Storage usage is moderate' : 
   '✅ Storage usage is healthy'}
 
-💡 Improved Image System:
-- Better compression with higher quality (1600x1200, 95% quality)
-- Separate Task and Consequence image categories
-- Enhanced image processing with category support
-- Larger file support (up to 20MB uploads)
-- Image limit: 50 total images to prevent storage issues
+💡 Browser Limitations:
+- Limited to ~6MB total storage
+- Image compression required
+- 50 image limit to prevent storage issues
 
-${totalCustomImages >= 40 ? '⚠️ Approaching image limit - consider deleting unused images' : ''}
-${totalCustomImages >= 50 ? '🚫 Image limit reached - delete some images to upload more' : ''}
-
-💡 Storage Tips:
-- Delete unused images to free space
-- Use "Select All" and "Delete Selected" for bulk cleanup
-- Each image uses ~200-500KB of storage
-- More efficient storage format
-- Enhanced image processing
-- Larger file support (up to 20MB uploads)
-            `.trim();
+💡 Consider upgrading to the desktop version for unlimited storage!
+                `.trim();
+            }
             
             alert(message);
         } catch (error) {

index.html

@@ -148,7 +148,6 @@
                         <span class="upload-info web-feature" style="display: none;">Web: Limited browser upload</span>
                     </div>
                     <div class="directory-controls">
-                        <button id="open-image-folders-btn" class="btn btn-outline desktop-only">📂 Open Image Folders</button>
                         <button id="storage-info-btn" class="btn btn-outline">📊 Storage Info</button>
                         <span class="scan-info">Images automatically scanned on startup</span>
                     </div>