feat(settings): add a Compact buttons appearance toggle (#1189)

* feat(ui): prototype compact hero and toolbar buttons (Large/Small appearance setting)

* feat(settings): rename action-button size toggle to "Compact buttons"

Promote the hero-button prototype to a real, app-wide setting.

- rename heroButtonSize → buttonSize, data-hero-buttons → data-button-size,
  hero-action-bar/hero-btn-label → compact-action-bar/compact-btn-label
- relabel "Hero buttons" → "Compact buttons" and broaden the description
  (action + toolbar buttons across detail pages and browse views) in all 11 locales
- move the feature CSS out of cover-lightbox.css into its own compact-buttons.css
- add tests: themeStore buttonSize toggle, SelectionToggleButton

* docs(changelog): compact buttons appearance toggle (#1189)

* docs(credits): compact buttons appearance toggle (#1189)

src/components/settings/AppearanceTab.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { invoke } from '@tauri-apps/api/core';
-import { LayoutGrid, Palette, Sliders, Type, ZoomIn } from 'lucide-react';
+import { LayoutGrid, Maximize2, Palette, Sliders, Type, ZoomIn } from 'lucide-react';
 import { useAuthStore } from '../../store/authStore';
 import {
   LIBRARY_GRID_MAX_COLUMNS_MAX,
@@ -308,6 +308,34 @@ export function AppearanceTab() {
           </SettingsGroup>
         </div>
       </SettingsSubSection>
+
+      <SettingsSubSection
+        title={t('settings.buttonSizeTitle')}
+        icon={<Maximize2 size={16} />}
+      >
+        <div className="settings-card">
+          <SettingsGroup>
+            <SettingsSubCard>
+              <SettingsField
+                label={t('settings.buttonSizeLabel')}
+                desc={t('settings.buttonSizeDesc')}
+              >
+                <div style={{ display: 'flex', gap: 8 }}>
+                  {(['large', 'small'] as const).map(size => (
+                    <button
+                      key={size}
+                      className={`btn ${theme.buttonSize === size ? 'btn-primary' : 'btn-ghost'}`}
+                      onClick={() => theme.setButtonSize(size)}
+                    >
+                      {t(`settings.buttonSize_${size}`)}
+                    </button>
+                  ))}
+                </div>
+              </SettingsField>
+            </SettingsSubCard>
+          </SettingsGroup>
+        </div>
+      </SettingsSubSection>
     </>
   );
 }