Skip to content

refactor(settings): align settings copy and status feedback #620

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lklynet merged 2 commits into from
Aug 17, 2026
Merged

refactor(settings): align settings copy and status feedback #620

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
da732c7
refactor(settings): align settings copy and status feedback
lklynet Aug 17, 2026
5bcdc3f
fix(settings): address review feedback
lklynet Aug 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 0 additions & 28 deletions frontend/src/components/SettingsMetadataSponsorSection.jsx
View file
Open in desktop

This file was deleted.

53 changes: 9 additions & 44 deletions frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9145,16 +9145,6 @@ button.native-library-genre-row:focus-visible {
line-height: 1.5;
}

.settings-page__modal-reminder {
margin: 0;
padding: 0.5rem 0.75rem;
color: var(--aurral-text-muted);
font-size: 0.75rem;
line-height: 1.45;
background: color-mix(in srgb, var(--aurral-text) 4%, transparent);
border-radius: var(--aurral-radius-sm);
}

.settings-page__advanced-toggle-row {
display: flex;
justify-content: flex-start;
Expand Down Expand Up @@ -9605,34 +9595,6 @@ button.native-library-genre-row:focus-visible {
height: 0.9rem;
}

.settings-page__section--sponsor {
padding: 1rem 1.125rem;
margin-bottom: 2rem;
border-radius: var(--aurral-radius-sm);
background: var(--aurral-surface-raised);
}

.settings-page__section--sponsor .settings-page__section-header {
margin-bottom: 0.5rem;
}

.settings-page__sponsor-icon {
width: 1rem;
height: 1rem;
color: var(--aurral-text-muted);
}

.settings-page__sponsor-copy {
margin: 0 0 0.875rem;
color: var(--aurral-text-muted);
font-size: 0.875rem;
line-height: 1.55;
}

.settings-page__sponsor-cta {
width: fit-content;
}

.settings-page__link {
color: var(--aurral-text-muted);
text-decoration: underline;
Expand Down Expand Up @@ -9685,11 +9647,6 @@ button.native-library-genre-row:focus-visible {
padding: 1rem 1.125rem 0;
}

.settings-page__modal--integration .settings-page__modal-reminder {
flex-shrink: 0;
margin: 0.625rem 1.125rem 0;
}

.settings-page__modal-body {
flex: 1;
min-height: 0;
Expand Down Expand Up @@ -12475,6 +12432,7 @@ button.native-library-genre-row:focus-visible {
}

.profile-page__header {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
Expand All @@ -12489,10 +12447,17 @@ button.native-library-genre-row:focus-visible {
}

.profile-page__save-state {
position: absolute;
top: 0.25rem;
right: 0;
flex-shrink: 0;
padding-top: 0.25rem;
color: var(--aurral-text-subtle);
font-size: 0.75rem;
visibility: hidden;
}

.profile-page__save-state.is-saving {
visibility: visible;
}

.profile-settings {
Expand Down
9 changes: 7 additions & 2 deletions frontend/src/pages/ProfilePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,13 @@ function ProfilePage() {
<h1 className="page-title">Profile</h1>
<p className="page-subtitle">Personal listening history and library defaults</p>
</div>
<span className="profile-page__save-state" aria-live="polite">
{account.saving ? "Saving…" : "Saved automatically"}
<span
className={`profile-page__save-state${account.saving ? " is-saving" : ""}`}
aria-live="polite"
aria-busy={account.saving}
aria-hidden={!account.saving}
>
{account.saving ? "Saving…" : null}
</span>
</div>

Expand Down
29 changes: 18 additions & 11 deletions frontend/src/pages/Settings/SettingsPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { Navigate, useParams } from "react-router-dom";
import { useToast } from "../../contexts/ToastContext";
import { useAuth } from "../../contexts/AuthContext";
import { useDocumentTitle } from "../../hooks/useDocumentTitle";
import SettingsMetadataSponsorSection from "../../components/SettingsMetadataSponsorSection";
import { useSettingsData } from "./hooks/useSettingsData";
import { useSettingsTabs } from "./hooks/useSettingsTabs";
import { useSettingsUsers } from "./hooks/useSettingsUsers";
Expand Down Expand Up @@ -207,16 +206,13 @@ function SettingsPage() {
);
case "metadata":
return (
<>
<SettingsMetadataSponsorSection />
<SettingsMetadataTab
settings={data.settings}
updateSettings={data.updateSettings}
health={data.health}
handleSaveSettings={data.handleSaveSettings}
hidePanelHeader
/>
</>
<SettingsMetadataTab
settings={data.settings}
updateSettings={data.updateSettings}
health={data.health}
handleSaveSettings={data.handleSaveSettings}
hidePanelHeader
/>
);
case "users":
return (
Expand Down Expand Up @@ -303,6 +299,17 @@ function SettingsPage() {
activeTab={tabs.activeTab}
onSelectTab={handleTabSelect}
/>
{tabs.activeTab !== "tasks" ? (
<div
className={`settings-arr__save-state${data.saving ? " is-saving" : ""}`}
role="status"
aria-live="polite"
aria-busy={data.saving}
aria-hidden={!data.saving}
>
{data.saving ? "Saving…" : null}
</div>
) : null}

{renderTabContent()}
</div>
Expand Down
9 changes: 4 additions & 5 deletions frontend/src/pages/Settings/components/CommunityGuideModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@ export function CommunityGuideModal({ show, onClose, onApply }) {
tabIndex={-1}
>
<h3 id={titleId} className="settings-page__modal-title">
Apply Davo&apos;s Recommended Settings
Apply recommended settings
</h3>
<p className="settings-page__modal-copy">
This will apply Davo&apos;s Community Lidarr Guide settings to your Lidarr instance:
Apply Davo&apos;s Community Lidarr Guide settings to your Lidarr instance:
</p>
<ul className="settings-page__modal-list">
<li>Update quality definitions for FLAC and FLAC 24bit</li>
Expand All @@ -41,15 +41,14 @@ export function CommunityGuideModal({ show, onClose, onApply }) {
className="settings-page__link"
>
Read the full guide
</a>{" "}
for more details on these settings.
</a>
</p>
<div className="settings-page__modal-actions">
<button type="button" onClick={onClose} className="btn btn-secondary">
Cancel
</button>
<button type="button" onClick={onApply} className="btn btn-primary">
Apply Settings
Apply settings
</button>
</div>
</div>
Expand Down
60 changes: 34 additions & 26 deletions frontend/src/pages/Settings/components/LidarrSettingsModalContent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export function LidarrSettingsSection({
showInfo,
}) {
const [lidarrTestLatencyMs, setLidarrTestLatencyMs] = useState(null);
const [lidarrTestStatus, setLidarrTestStatus] = useState(null);

const safeLidarrRootFolders = Array.isArray(lidarrRootFolders) ? lidarrRootFolders : [];
const safeLidarrProfiles = Array.isArray(lidarrProfiles) ? lidarrProfiles : [];
Expand All @@ -65,16 +66,19 @@ export function LidarrSettingsSection({
const url = settings.integrations?.lidarr?.url;
const apiKey = settings.integrations?.lidarr?.apiKey;
if (!url || !apiKey) {
setLidarrTestStatus({ tone: "error", message: "Enter the URL and API key." });
showError("Please enter both URL and API key");
return;
}
setTestingLidarr(true);
setLidarrTestLatencyMs(null);
setLidarrTestStatus(null);
const startTime = performance.now();
try {
const result = await testLidarrConnection(url, apiKey);
setLidarrTestLatencyMs(Math.round(performance.now() - startTime));
if (result.success) {
setLidarrTestStatus({ tone: "success", message: "Connected." });
showSuccess(`Lidarr connection successful! (${result.instanceName || "Lidarr"})`);
setLoadingLidarrRootFolders(true);
setLoadingLidarrProfiles(true);
Expand Down Expand Up @@ -115,12 +119,14 @@ export function LidarrSettingsSection({
setLoadingLidarrTags(false);
}
} else {
setLidarrTestStatus({ tone: "error", message: "Connection failed. Check the URL and API key, then retry." });
showError(
`Connection failed: ${result.message || result.error}${result.details ? `\n${result.details}` : ""}`,
);
}
} catch (err) {
setLidarrTestLatencyMs(Math.round(performance.now() - startTime));
setLidarrTestStatus({ tone: "error", message: "Connection failed. Check the URL and API key, then retry." });
const errorMsg = err.response?.data?.message || err.response?.data?.error || err.message;
showError(`Connection failed: ${errorMsg}`);
} finally {
Expand Down Expand Up @@ -192,9 +198,6 @@ export function LidarrSettingsSection({
<div className="settings-page__section-header">
<div className="settings-page__section-intro">
<h3 className="settings-page__section-title">Lidarr</h3>
<p className="settings-page__section-note">
Connect Aurral to your Lidarr instance and configure library defaults.
</p>
</div>
</div>
</div>
Expand Down Expand Up @@ -230,11 +233,19 @@ export function LidarrSettingsSection({
>
{testingLidarr ? "Testing..." : "Test connection"}
</button>
{lidarrTestStatus ? (
<span
className={`arr-test-result arr-test-result--${lidarrTestStatus.tone}`}
role={lidarrTestStatus.tone === "error" ? "alert" : "status"}
>
{lidarrTestStatus.message}
</span>
) : null}
</>
}
>
<div className="arr-info">
Music library manager. File access, mounts, and path mappings are checked in{" "}
Music library manager. Path access and mappings are checked in{" "}
<Link to="/settings/system" className="arr-link">
System
</Link>
Expand All @@ -250,13 +261,14 @@ export function LidarrSettingsSection({
value={settings.integrations?.lidarr?.url || ""}
onChange={(e) => {
setLidarrTestLatencyMs(null);
setLidarrTestStatus(null);
updateLidarr({ url: e.target.value });
}}
/>
</SettingsArrFormGroup>

<SettingsArrFormGroup
label="API Key"
label="API key"
labelFor="lidarr-api-key"
help={
<>
Expand All @@ -275,6 +287,7 @@ export function LidarrSettingsSection({
value={settings.integrations?.lidarr?.apiKey || ""}
onChange={(e) => {
setLidarrTestLatencyMs(null);
setLidarrTestStatus(null);
updateLidarr({ apiKey: e.target.value });
}}
/>
Expand All @@ -297,7 +310,10 @@ export function LidarrSettingsSection({
</SettingsArrFieldSet>

<SettingsArrFieldSet legend="Defaults">
<SettingsArrFormGroup label="Default Root Folder" labelFor="lidarr-root-folder">
<p className="arr-form-help">
Users can override the root folder and quality profile in Profile.
</p>
<SettingsArrFormGroup label="Default root folder" labelFor="lidarr-root-folder">
<SettingsSelect
id="lidarr-root-folder"
value={settings.integrations?.lidarr?.rootFolderPath || ""}
Expand All @@ -319,13 +335,9 @@ export function LidarrSettingsSection({
</option>
))}
</SettingsSelect>
<p className="settings-page__section-note">
Users can set their own default in Profile → Library Defaults, which overrides
this instance-wide setting.
</p>
</SettingsArrFormGroup>

<SettingsArrFormGroup label="Default Quality Profile" labelFor="lidarr-quality-profile">
<SettingsArrFormGroup label="Default quality profile" labelFor="lidarr-quality-profile">
<SettingsSelect
id="lidarr-quality-profile"
value={
Expand Down Expand Up @@ -353,13 +365,9 @@ export function LidarrSettingsSection({
</option>
))}
</SettingsSelect>
<p className="settings-page__section-note">
Users can set their own default in Profile → Library Defaults, which overrides
this instance-wide setting.
</p>
</SettingsArrFormGroup>

<SettingsArrFormGroup label="Default Metadata Profile" labelFor="lidarr-metadata-profile">
<SettingsArrFormGroup label="Default metadata profile" labelFor="lidarr-metadata-profile">
<SettingsSelect
id="lidarr-metadata-profile"
value={
Expand Down Expand Up @@ -417,23 +425,23 @@ export function LidarrSettingsSection({
</SettingsSelect>
</SettingsArrFormGroup>

<SettingsArrFormGroup label="Default Monitoring Option" labelFor="lidarr-monitor-option">
<SettingsArrFormGroup label="Default monitoring option" labelFor="lidarr-monitor-option">
<SettingsSelect
id="lidarr-monitor-option"
value={settings.integrations?.lidarr?.defaultMonitorOption || "none"}
onChange={(e) => updateLidarr({ defaultMonitorOption: e.target.value })}
>
<option value="none">None (Artist Only)</option>
<option value="existing">Existing Albums</option>
<option value="all">All Albums</option>
<option value="future">Future Albums</option>
<option value="missing">Missing Albums</option>
<option value="latest">Latest Album</option>
<option value="first">First Album</option>
<option value="none">None (artist only)</option>
<option value="existing">Existing albums</option>
<option value="all">All albums</option>
<option value="future">Future albums</option>
<option value="missing">Missing albums</option>
<option value="latest">Latest album</option>
<option value="first">First album</option>
</SettingsSelect>
</SettingsArrFormGroup>

<SettingsArrFormGroup label="Search on Add">
<SettingsArrFormGroup label="Search on add">
<PillToggle
className="settings-toggle"
checked={settings.integrations?.lidarr?.searchOnAdd || false}
Expand All @@ -456,7 +464,7 @@ export function LidarrSettingsSection({
disabled={applyingCommunityGuide || !health?.lidarrConfigured}
className="arr-btn arr-btn--primary"
>
{applyingCommunityGuide ? "Applying..." : "Apply Davo's Recommended Settings"}
{applyingCommunityGuide ? "Applying..." : "Apply recommended settings"}
</button>
<p className="arr-form-help arr-form-help--spaced">
Creates quality profile, updates quality definitions, adds custom formats, and updates
Expand Down
Loading
Loading