From 61e948f6a44c324003e742d7265dee4da8ff38aa Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 6 Oct 2025 20:55:56 +0100
Subject: [PATCH] refactor: use icon toggle buttons for highlight visibility
 settings

- Replace checkboxes with IconButton components matching existing UI pattern
- Use faNetworkWired, faUserGroup, and faUser icons
- Maintain consistent visual style with other settings toggles
---
 src/components/Settings.tsx | 58 +++++++++++++++----------------------
 1 file changed, 23 insertions(+), 35 deletions(-)

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 01c4e84d..b9ab8390 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { faTimes, faList, faThLarge, faImage, faUnderline, faHighlighter, faUndo } from '@fortawesome/free-solid-svg-icons'
+import { faTimes, faList, faThLarge, faImage, faUnderline, faHighlighter, faUndo, faNetworkWired, faUserGroup, faUser } from '@fortawesome/free-solid-svg-icons'
 import { UserSettings } from '../services/settingsService'
 import IconButton from './IconButton'
 import ColorPicker from './ColorPicker'
@@ -260,43 +260,31 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
               </label>
             </div>
 
-            <div className="setting-group">
-              <label htmlFor="highlightVisibilityNostrverse" className="checkbox-label">
-                <input
-                  id="highlightVisibilityNostrverse"
-                  type="checkbox"
-                  checked={localSettings.defaultHighlightVisibilityNostrverse !== false}
-                  onChange={(e) => setLocalSettings({ ...localSettings, defaultHighlightVisibilityNostrverse: e.target.checked })}
-                  className="setting-checkbox"
+            <div className="setting-group setting-inline">
+              <label>Default Highlight Visibility</label>
+              <div className="setting-buttons">
+                <IconButton 
+                  icon={faNetworkWired} 
+                  onClick={() => setLocalSettings({ ...localSettings, defaultHighlightVisibilityNostrverse: !(localSettings.defaultHighlightVisibilityNostrverse !== false) })} 
+                  title="Nostrverse highlights" 
+                  ariaLabel="Toggle nostrverse highlights by default" 
+                  variant={(localSettings.defaultHighlightVisibilityNostrverse !== false) ? 'primary' : 'ghost'} 
                 />
-                <span>Show nostrverse highlights by default</span>
-              </label>
-            </div>
-
-            <div className="setting-group">
-              <label htmlFor="highlightVisibilityFriends" className="checkbox-label">
-                <input
-                  id="highlightVisibilityFriends"
-                  type="checkbox"
-                  checked={localSettings.defaultHighlightVisibilityFriends !== false}
-                  onChange={(e) => setLocalSettings({ ...localSettings, defaultHighlightVisibilityFriends: e.target.checked })}
-                  className="setting-checkbox"
+                <IconButton 
+                  icon={faUserGroup} 
+                  onClick={() => setLocalSettings({ ...localSettings, defaultHighlightVisibilityFriends: !(localSettings.defaultHighlightVisibilityFriends !== false) })} 
+                  title="Friends highlights" 
+                  ariaLabel="Toggle friends highlights by default" 
+                  variant={(localSettings.defaultHighlightVisibilityFriends !== false) ? 'primary' : 'ghost'} 
                 />
-                <span>Show friends highlights by default</span>
-              </label>
-            </div>
-
-            <div className="setting-group">
-              <label htmlFor="highlightVisibilityMine" className="checkbox-label">
-                <input
-                  id="highlightVisibilityMine"
-                  type="checkbox"
-                  checked={localSettings.defaultHighlightVisibilityMine !== false}
-                  onChange={(e) => setLocalSettings({ ...localSettings, defaultHighlightVisibilityMine: e.target.checked })}
-                  className="setting-checkbox"
+                <IconButton 
+                  icon={faUser} 
+                  onClick={() => setLocalSettings({ ...localSettings, defaultHighlightVisibilityMine: !(localSettings.defaultHighlightVisibilityMine !== false) })} 
+                  title="My highlights" 
+                  ariaLabel="Toggle my highlights by default" 
+                  variant={(localSettings.defaultHighlightVisibilityMine !== false) ? 'primary' : 'ghost'} 
                 />
-                <span>Show my highlights by default</span>
-              </label>
+              </div>
             </div>
           </div>
       </div>