feat(settings): collapse Discord sub-options under one header

"Fetch covers from Apple Music" and "Custom text templates" are now both
tucked into a single collapsible "Advanced Discord options" block (default
collapsed) that only appears when Discord Rich Presence is enabled.
Reduces vertical noise in Settings → General for the common case where
users just flip Rich Presence on and leave the defaults.

Uses the same chevron-rotate pattern as the font picker and contributors
list. Adds `settings.discordOptions` key in all 8 locales.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
2026-04-17 21:52:16 +02:00
parent 34b4445c13
commit 02c7a3fe22
9 changed files with 80 additions and 42 deletions
+1
View File
@@ -540,6 +540,7 @@ export const deTranslation = {
useCustomTitlebarDesc: 'Ersetzt die System-Titelleiste durch eine eingebaute, die zum App-Theme passt. Deaktivieren, um die native GNOME/GTK-Titelleiste zu verwenden.', useCustomTitlebarDesc: 'Ersetzt die System-Titelleiste durch eine eingebaute, die zum App-Theme passt. Deaktivieren, um die native GNOME/GTK-Titelleiste zu verwenden.',
discordAppleCovers: 'Cover über Apple Music für Discord laden', discordAppleCovers: 'Cover über Apple Music für Discord laden',
discordAppleCoversDesc: 'Sendet Künstler- und Albumname an die Apple-Such-API, um Cover für dein Discord-Profil zu finden. Standardmäßig aus Datenschutzgründen deaktiviert.', discordAppleCoversDesc: 'Sendet Künstler- und Albumname an die Apple-Such-API, um Cover für dein Discord-Profil zu finden. Standardmäßig aus Datenschutzgründen deaktiviert.',
discordOptions: 'Erweiterte Discord-Optionen',
discordTemplates: 'Benutzerdefinierte Textvorlagen', discordTemplates: 'Benutzerdefinierte Textvorlagen',
discordTemplatesDesc: 'Passen Sie an, welche Informationen in Ihrem Discord-Profil angezeigt werden. Variablen: {title}, {artist}, {album}', discordTemplatesDesc: 'Passen Sie an, welche Informationen in Ihrem Discord-Profil angezeigt werden. Variablen: {title}, {artist}, {album}',
discordTemplateDetails: 'Primäre Zeile (details)', discordTemplateDetails: 'Primäre Zeile (details)',
+1
View File
@@ -542,6 +542,7 @@ export const enTranslation = {
useCustomTitlebarDesc: 'Replace the system title bar with a built-in one that matches the app theme. Disable to use the native GNOME/GTK title bar.', useCustomTitlebarDesc: 'Replace the system title bar with a built-in one that matches the app theme. Disable to use the native GNOME/GTK title bar.',
discordAppleCovers: 'Fetch covers from Apple Music for Discord', discordAppleCovers: 'Fetch covers from Apple Music for Discord',
discordAppleCoversDesc: 'Sends the artist and album name to Apple\'s search API to find cover art for your Discord profile. Disabled by default for privacy.', discordAppleCoversDesc: 'Sends the artist and album name to Apple\'s search API to find cover art for your Discord profile. Disabled by default for privacy.',
discordOptions: 'Advanced Discord options',
discordTemplates: 'Custom text templates', discordTemplates: 'Custom text templates',
discordTemplatesDesc: 'Customize what information is shown on your Discord profile. Variables: {title}, {artist}, {album}', discordTemplatesDesc: 'Customize what information is shown on your Discord profile. Variables: {title}, {artist}, {album}',
discordTemplateDetails: 'Primary line (details)', discordTemplateDetails: 'Primary line (details)',
+1
View File
@@ -543,6 +543,7 @@ export const esTranslation = {
useCustomTitlebarDesc: 'Reemplaza la barra de título del sistema con una integrada que coincide con el tema de la app. Desactiva para usar la barra nativa de GNOME/GTK.', useCustomTitlebarDesc: 'Reemplaza la barra de título del sistema con una integrada que coincide con el tema de la app. Desactiva para usar la barra nativa de GNOME/GTK.',
discordAppleCovers: 'Obtener portadas de Apple Music para Discord', discordAppleCovers: 'Obtener portadas de Apple Music para Discord',
discordAppleCoversDesc: 'Envía el artista y nombre del álbum a la API de búsqueda de Apple para encontrar portadas para tu perfil de Discord. Desactivado por defecto por privacidad.', discordAppleCoversDesc: 'Envía el artista y nombre del álbum a la API de búsqueda de Apple para encontrar portadas para tu perfil de Discord. Desactivado por defecto por privacidad.',
discordOptions: 'Opciones avanzadas de Discord',
discordTemplates: 'Plantillas de texto personalizadas', discordTemplates: 'Plantillas de texto personalizadas',
discordTemplatesDesc: 'Personaliza qué información se muestra en tu perfil de Discord. Variables: {title}, {artist}, {album}', discordTemplatesDesc: 'Personaliza qué información se muestra en tu perfil de Discord. Variables: {title}, {artist}, {album}',
discordTemplateDetails: 'Línea principal (details)', discordTemplateDetails: 'Línea principal (details)',
+1
View File
@@ -538,6 +538,7 @@ export const frTranslation = {
discordRichPresenceDesc: 'Affiche le titre en cours de lecture sur votre profil Discord. Discord doit être ouvert.', discordRichPresenceDesc: 'Affiche le titre en cours de lecture sur votre profil Discord. Discord doit être ouvert.',
discordAppleCovers: 'Récupérer les pochettes via Apple Music pour Discord', discordAppleCovers: 'Récupérer les pochettes via Apple Music pour Discord',
discordAppleCoversDesc: 'Envoie le nom de l\'artiste et de l\'album à l\'API Apple pour trouver une pochette pour votre profil Discord. Désactivé par défaut pour des raisons de confidentialité.', discordAppleCoversDesc: 'Envoie le nom de l\'artiste et de l\'album à l\'API Apple pour trouver une pochette pour votre profil Discord. Désactivé par défaut pour des raisons de confidentialité.',
discordOptions: 'Options Discord avancées',
discordTemplates: 'Modèles de texte personnalisés', discordTemplates: 'Modèles de texte personnalisés',
discordTemplatesDesc: 'Personnalisez les informations affichées sur votre profil Discord. Variables : {title}, {artist}, {album}', discordTemplatesDesc: 'Personnalisez les informations affichées sur votre profil Discord. Variables : {title}, {artist}, {album}',
discordTemplateDetails: 'Ligne principale (details)', discordTemplateDetails: 'Ligne principale (details)',
+1
View File
@@ -537,6 +537,7 @@ export const nbTranslation = {
discordRichPresenceDesc: 'Vis sporet som spilles i din Discord-profil. Krever at Discord kjører.', discordRichPresenceDesc: 'Vis sporet som spilles i din Discord-profil. Krever at Discord kjører.',
discordAppleCovers: 'Hent covere fra Apple Music til Discord', discordAppleCovers: 'Hent covere fra Apple Music til Discord',
discordAppleCoversDesc: 'Sender artist- og albumnavn til Apples søke-API for å finne cover til Discord-profilen din. Deaktivert som standard av personvernhensyn.', discordAppleCoversDesc: 'Sender artist- og albumnavn til Apples søke-API for å finne cover til Discord-profilen din. Deaktivert som standard av personvernhensyn.',
discordOptions: 'Avanserte Discord-alternativer',
discordTemplates: 'Egendefinerte tekstmaler', discordTemplates: 'Egendefinerte tekstmaler',
discordTemplatesDesc: 'Tilpass hvilken informasjon som vises på Discord-profilen din. Variabler: {title}, {artist}, {album}', discordTemplatesDesc: 'Tilpass hvilken informasjon som vises på Discord-profilen din. Variabler: {title}, {artist}, {album}',
discordTemplateDetails: 'Primær linje (details)', discordTemplateDetails: 'Primær linje (details)',
+1
View File
@@ -537,6 +537,7 @@ export const nlTranslation = {
discordRichPresenceDesc: 'Toont het huidige nummer op je Discord-profiel. Discord moet daarvoor geopend zijn.', discordRichPresenceDesc: 'Toont het huidige nummer op je Discord-profiel. Discord moet daarvoor geopend zijn.',
discordAppleCovers: 'Hoezen ophalen via Apple Music voor Discord', discordAppleCovers: 'Hoezen ophalen via Apple Music voor Discord',
discordAppleCoversDesc: 'Stuurt artiest- en albumnaam naar de Apple-zoek-API om een hoes te vinden voor je Discord-profiel. Standaard uitgeschakeld vanwege privacy.', discordAppleCoversDesc: 'Stuurt artiest- en albumnaam naar de Apple-zoek-API om een hoes te vinden voor je Discord-profiel. Standaard uitgeschakeld vanwege privacy.',
discordOptions: 'Geavanceerde Discord-opties',
discordTemplates: 'Aangepaste tekstsjablonen', discordTemplates: 'Aangepaste tekstsjablonen',
discordTemplatesDesc: 'Pas aan welke informatie wordt weergegeven op je Discord-profiel. Variabelen: {title}, {artist}, {album}', discordTemplatesDesc: 'Pas aan welke informatie wordt weergegeven op je Discord-profiel. Variabelen: {title}, {artist}, {album}',
discordTemplateDetails: 'Primaire regel (details)', discordTemplateDetails: 'Primaire regel (details)',
+1
View File
@@ -560,6 +560,7 @@ export const ruTranslation = {
'Показывать текущий трек в профиле и статусе Discord. Нужен запущенный клиент Discord.', 'Показывать текущий трек в профиле и статусе Discord. Нужен запущенный клиент Discord.',
discordAppleCovers: 'Загружать обложки через Apple Music для Discord', discordAppleCovers: 'Загружать обложки через Apple Music для Discord',
discordAppleCoversDesc: 'Отправляет имя исполнителя и альбома в Apple Music API для поиска обложки для профиля Discord. По умолчанию отключено из соображений конфиденциальности.', discordAppleCoversDesc: 'Отправляет имя исполнителя и альбома в Apple Music API для поиска обложки для профиля Discord. По умолчанию отключено из соображений конфиденциальности.',
discordOptions: 'Расширенные параметры Discord',
discordTemplates: 'Пользовательские шаблоны текста', discordTemplates: 'Пользовательские шаблоны текста',
discordTemplatesDesc: 'Настройте, какая информация отображается в профиле Discord. Переменные: {title}, {artist}, {album}', discordTemplatesDesc: 'Настройте, какая информация отображается в профиле Discord. Переменные: {title}, {artist}, {album}',
discordTemplateDetails: 'Основная строка (details)', discordTemplateDetails: 'Основная строка (details)',
+1
View File
@@ -533,6 +533,7 @@ export const zhTranslation = {
discordRichPresenceDesc: '在 Discord 个人资料上显示当前播放的曲目。需要 Discord 处于运行状态。', discordRichPresenceDesc: '在 Discord 个人资料上显示当前播放的曲目。需要 Discord 处于运行状态。',
discordAppleCovers: '通过 Apple Music 为 Discord 获取封面', discordAppleCovers: '通过 Apple Music 为 Discord 获取封面',
discordAppleCoversDesc: '将艺术家和专辑名称发送至 Apple 搜索 API,以为 Discord 个人资料查找封面图片。出于隐私考虑,默认禁用。', discordAppleCoversDesc: '将艺术家和专辑名称发送至 Apple 搜索 API,以为 Discord 个人资料查找封面图片。出于隐私考虑,默认禁用。',
discordOptions: 'Discord 高级选项',
discordTemplates: '自定义文本模板', discordTemplates: '自定义文本模板',
discordTemplatesDesc: '自定义在 Discord 个人资料上显示的信息。变量:{title}, {artist}, {album}', discordTemplatesDesc: '自定义在 Discord 个人资料上显示的信息。变量:{title}, {artist}, {album}',
discordTemplateDetails: '主行 (details)', discordTemplateDetails: '主行 (details)',
+32 -2
View File
@@ -412,6 +412,7 @@ export default function Settings() {
const [clearing, setClearing] = useState(false); const [clearing, setClearing] = useState(false);
const [contributorsOpen, setContributorsOpen] = useState(false); const [contributorsOpen, setContributorsOpen] = useState(false);
const [fontPickerOpen, setFontPickerOpen] = useState(false); const [fontPickerOpen, setFontPickerOpen] = useState(false);
const [discordOptionsOpen, setDiscordOptionsOpen] = useState(false);
useEffect(() => { useEffect(() => {
if (!auth.lastfmSessionKey || !auth.lastfmUsername) { setLfmUserInfo(null); return; } if (!auth.lastfmSessionKey || !auth.lastfmUsername) { setLfmUserInfo(null); return; }
@@ -1160,7 +1161,33 @@ export default function Settings() {
{auth.discordRichPresence && ( {auth.discordRichPresence && (
<> <>
<div className="settings-section-divider" /> <div className="settings-section-divider" />
<div className="settings-toggle-row" style={{ paddingLeft: 16 }}> <div style={{ paddingLeft: 16, paddingTop: 8, paddingBottom: 8 }}>
<button
type="button"
onClick={() => setDiscordOptionsOpen(v => !v)}
style={{
background: 'none', border: 'none', padding: 0, width: '100%',
display: 'flex', alignItems: 'center', gap: 8,
cursor: 'pointer', color: 'inherit', textAlign: 'left',
}}
aria-expanded={discordOptionsOpen}
>
<ChevronDown
size={14}
style={{
color: 'var(--text-muted)',
transform: discordOptionsOpen ? 'rotate(180deg)' : 'none',
transition: 'transform 0.2s',
flexShrink: 0,
}}
/>
<div style={{ flex: 1, fontWeight: 500, fontSize: 13 }}>
{t('settings.discordOptions')}
</div>
</button>
{discordOptionsOpen && (
<div style={{ marginTop: 12 }}>
<div className="settings-toggle-row" style={{ paddingLeft: 0 }}>
<div> <div>
<div style={{ fontWeight: 500 }}>{t('settings.discordAppleCovers')}</div> <div style={{ fontWeight: 500 }}>{t('settings.discordAppleCovers')}</div>
<div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.discordAppleCoversDesc')}</div> <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.discordAppleCoversDesc')}</div>
@@ -1171,7 +1198,7 @@ export default function Settings() {
</label> </label>
</div> </div>
<div className="settings-section-divider" /> <div className="settings-section-divider" />
<div style={{ paddingLeft: 16, paddingTop: 8, paddingBottom: 8 }}> <div style={{ paddingTop: 8 }}>
<div style={{ fontWeight: 500, fontSize: 13, marginBottom: 8 }}>{t('settings.discordTemplates')}</div> <div style={{ fontWeight: 500, fontSize: 13, marginBottom: 8 }}>{t('settings.discordTemplates')}</div>
<div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 12 }}>{t('settings.discordTemplatesDesc')}</div> <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 12 }}>{t('settings.discordTemplatesDesc')}</div>
<div className="form-group" style={{ marginBottom: '0.75rem' }}> <div className="form-group" style={{ marginBottom: '0.75rem' }}>
@@ -1205,6 +1232,9 @@ export default function Settings() {
/> />
</div> </div>
</div> </div>
</div>
)}
</div>
</> </>
)} )}
<div className="settings-section-divider" /> <div className="settings-section-divider" />