feat: Show 4 color squares in preset theme previews

- Change from 2 vertical bars to 4 horizontal squares
- Use grid-cols-4 for even distribution
- Show 4 key colors from the theme:
  1. Primary background
  2. Secondary background
  3. Primary text
  4. Inverse background
- Better representation of theme's color palette
- More visual information at a glance
- Users can see background + text + accent colors
- Still compact at h-8

Before: 2 colors (primary + secondary background)
After: 4 colors (backgrounds + text + inverse)

Richer preview with more theme information!

ui/desktop/src/components/settings/app/ThemeColorEditor/ThemeSelector/PresetGallery.tsx

@@ -135,16 +135,20 @@ export function PresetGallery({ onApply }: PresetGalleryProps) {
             key={preset.id}
             className="border border-border-primary rounded-lg p-4 space-y-3 hover:border-border-secondary transition-colors"
           >
-            {/* Theme Preview Colors - Show only current mode */}
-            <div className="h-8 rounded border border-border-primary overflow-hidden">
+            {/* Theme Preview Colors - Show only current mode (4 colors) */}
+            <div className="grid grid-cols-4 h-8 rounded border border-border-primary overflow-hidden">
               <div 
-                className="h-1/2" 
                 style={{ backgroundColor: preset.colors[resolvedTheme]['color-background-primary'] }}
               />
               <div 
-                className="h-1/2" 
                 style={{ backgroundColor: preset.colors[resolvedTheme]['color-background-secondary'] }}
               />
+              <div 
+                style={{ backgroundColor: preset.colors[resolvedTheme]['color-text-primary'] }}
+              />
+              <div 
+                style={{ backgroundColor: preset.colors[resolvedTheme]['color-background-inverse'] }}
+              />
             </div>
 
             {/* Theme Info */}