From a2e410252ab0be9a65160d5be746f3eb6b623430 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Thu, 9 Oct 2025 17:26:13 +0100
Subject: [PATCH] refactor: condense cache settings to single line

- Combine all cache settings into one horizontal line
- Shorten 'Cache images for offline viewing' to 'Cache images'
- Shorten 'Max cache size (MB):' to 'Max (MB):'
- Simplify current stats display with parentheses
- Use flexbox with wrap for responsive layout
---
 .../Settings/OfflineModeSettings.tsx          | 114 +++++++++---------
 1 file changed, 56 insertions(+), 58 deletions(-)

diff --git a/src/components/Settings/OfflineModeSettings.tsx b/src/components/Settings/OfflineModeSettings.tsx
index 7756241d..c6739021 100644
--- a/src/components/Settings/OfflineModeSettings.tsx
+++ b/src/components/Settings/OfflineModeSettings.tsx
@@ -64,8 +64,8 @@ const OfflineModeSettings: React.FC<OfflineModeSettingsProps> = ({ settings, onU
         </label>
       </div>
 
-      <div className="setting-group">
-        <label htmlFor="enableImageCache" className="checkbox-label">
+      <div className="setting-group" style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
+        <label htmlFor="enableImageCache" className="checkbox-label" style={{ marginBottom: 0 }}>
           <input
             id="enableImageCache"
             type="checkbox"
@@ -73,65 +73,63 @@ const OfflineModeSettings: React.FC<OfflineModeSettingsProps> = ({ settings, onU
             onChange={(e) => onUpdate({ enableImageCache: e.target.checked })}
             className="setting-checkbox"
           />
-          <span>Cache images for offline viewing</span>
+          <span>Cache images</span>
         </label>
+
+        {(settings.enableImageCache ?? true) && (
+          <>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+              <label htmlFor="imageCacheSizeMB" style={{ fontSize: '0.9rem', whiteSpace: 'nowrap' }}>
+                Max (MB):
+              </label>
+              <input
+                id="imageCacheSizeMB"
+                type="number"
+                min="10"
+                max="500"
+                value={settings.imageCacheSizeMB ?? 50}
+                onChange={(e) => onUpdate({ imageCacheSizeMB: parseInt(e.target.value) || 50 })}
+                style={{
+                  width: '70px',
+                  padding: '0.25rem 0.5rem',
+                  background: 'var(--surface-secondary)',
+                  border: '1px solid var(--border-color, #333)',
+                  borderRadius: '4px',
+                  color: 'var(--text-primary)',
+                  fontSize: '0.9rem'
+                }}
+              />
+            </div>
+
+            <div style={{ 
+              fontSize: '0.85rem',
+              color: 'var(--text-secondary)',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '0.5rem'
+            }}>
+              <span>
+                ({cacheStats.totalSizeMB.toFixed(1)} MB, {cacheStats.itemCount} images)
+              </span>
+              <button
+                onClick={handleClearCache}
+                title="Clear cache"
+                style={{
+                  padding: '0.25rem 0.5rem',
+                  background: 'transparent',
+                  color: 'var(--danger, #ef4444)',
+                  border: 'none',
+                  cursor: 'pointer',
+                  fontSize: '0.9rem'
+                }}
+              >
+                <FontAwesomeIcon icon={faTrash} />
+              </button>
+            </div>
+          </>
+        )}
       </div>
 
-      {(settings.enableImageCache ?? true) && (
-        <>
-          <div className="setting-group" style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
-            <label htmlFor="imageCacheSizeMB" style={{ marginBottom: 0 }}>
-              <span>Max cache size (MB):</span>
-            </label>
-            <input
-              id="imageCacheSizeMB"
-              type="number"
-              min="10"
-              max="500"
-              value={settings.imageCacheSizeMB ?? 50}
-              onChange={(e) => onUpdate({ imageCacheSizeMB: parseInt(e.target.value) || 50 })}
-              style={{
-                width: '80px',
-                padding: '0.25rem 0.5rem',
-                background: 'var(--surface-secondary)',
-                border: '1px solid var(--border-color, #333)',
-                borderRadius: '4px',
-                color: 'var(--text-primary)',
-                fontSize: '0.9rem'
-              }}
-            />
-          </div>
-
-          <div style={{ 
-            marginTop: '0.5rem',
-            marginLeft: '1.75rem',
-            fontSize: '0.85rem',
-            color: 'var(--text-secondary)',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '0.5rem'
-          }}>
-            <span>
-              Current: {cacheStats.totalSizeMB.toFixed(2)} MB ({cacheStats.itemCount} images)
-            </span>
-            <button
-              onClick={handleClearCache}
-              title="Clear cache"
-              style={{
-                padding: '0.25rem 0.5rem',
-                background: 'transparent',
-                color: 'var(--danger, #ef4444)',
-                border: 'none',
-                cursor: 'pointer',
-                fontSize: '0.9rem'
-              }}
-            >
-              <FontAwesomeIcon icon={faTrash} />
-            </button>
-          </div>
-        </>
-      )}
-
       <div style={{ 
         marginTop: '1.5rem', 
         padding: '1rem',