audio streaming app
plyr.fm
fix: move aura into theme button row — 4th button next to dark/light/auto (#1129)
the aura was incorrectly placed as a separate section below appearance.
now it's a 4th button in the theme selector row where it belongs.
locked state: dashed border, dark circle, "?" label.
active state: solid border, weather orb, "aura" label.
selecting any other theme disables ambient mode.
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
authored by
nate nowack
Claude Opus 4.6
and committed by
GitHub
ffc7b5dd
e4b4179d
+38
-137
+38
-137
frontend/src/routes/settings/+page.svelte
+38
-137
frontend/src/routes/settings/+page.svelte
···
448
448
{#each themes as theme}
449
449
<button
450
450
class="theme-btn"
451
-
class:active={currentTheme === theme.value}
452
-
onclick={() => selectTheme(theme.value)}
451
+
class:active={currentTheme === theme.value && !ambientEnabled}
452
+
onclick={() => { if (ambientEnabled) ambient.disable(); selectTheme(theme.value); }}
453
453
title={theme.label}
454
454
>
455
455
{#if theme.icon === 'moon'}
···
471
471
<span>{theme.label}</span>
472
472
</button>
473
473
{/each}
474
+
<button
475
+
class="theme-btn aura-btn"
476
+
class:active={ambientEnabled}
477
+
class:aura-loading={ambientLoading}
478
+
onclick={() => ambientEnabled ? ambient.disable() : toggleAmbient(true)}
479
+
title={ambientEnabled ? ambientCondition ?? 'aura' : '?'}
480
+
>
481
+
{#if ambientEnabled && ambientGradient}
482
+
<div class="aura-orb-inline" style="background: {ambientGradient}"></div>
483
+
{:else if ambientLoading}
484
+
<div class="aura-orb-inline aura-orb-loading"></div>
485
+
{:else}
486
+
<svg viewBox="0 0 24 24" fill="currentColor" opacity="0.3">
487
+
<circle cx="12" cy="12" r="9" />
488
+
</svg>
489
+
{/if}
490
+
<span>{ambientEnabled ? 'aura' : '?'}</span>
491
+
</button>
474
492
</div>
475
493
</div>
494
+
495
+
{#if ambientError}
496
+
<div class="aura-error-row">
497
+
<span>{ambientError}</span>
498
+
</div>
499
+
{/if}
476
500
477
501
<div class="setting-row">
478
502
<div class="setting-info">
···
536
560
<span class="toggle-slider"></span>
537
561
</label>
538
562
</div>
539
-
</div>
540
-
</section>
541
-
542
-
<section class="settings-section">
543
-
<h2>aura</h2>
544
-
<div class="settings-card aura-card" class:aura-active={ambientEnabled}>
545
-
{#if !ambientEnabled && !ambientLoading && !ambientError}
546
-
<button class="aura-unlock" onclick={() => toggleAmbient(true)}>
547
-
<div class="aura-silhouette">
548
-
<svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor" opacity="0.4">
549
-
<circle cx="12" cy="12" r="10" />
550
-
</svg>
551
-
<span class="aura-question">?</span>
552
-
</div>
553
-
</button>
554
-
{:else if ambientLoading}
555
-
<div class="aura-loading">
556
-
<div class="aura-orb aura-orb-loading"></div>
557
-
<span class="aura-loading-text">...</span>
558
-
</div>
559
-
{:else if ambientError}
560
-
<div class="aura-state">
561
-
<span class="aura-error">{ambientError}</span>
562
-
</div>
563
-
{:else}
564
-
<div class="aura-revealed">
565
-
<div class="aura-orb" style="background: {ambientGradient}"></div>
566
-
<span class="aura-conditions">{ambientCondition}</span>
567
-
<button class="aura-disable" onclick={() => toggleAmbient(false)} title="disable">
568
-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
569
-
<line x1="18" y1="6" x2="6" y2="18"></line>
570
-
<line x1="6" y1="6" x2="18" y2="18"></line>
571
-
</svg>
572
-
</button>
573
-
</div>
574
-
{/if}
575
563
</div>
576
564
</section>
577
565
···
1148
1136
accent-color: var(--accent);
1149
1137
}
1150
1138
1151
-
/* aura card — locked state */
1152
-
.aura-card {
1153
-
border-color: var(--border-subtle);
1139
+
/* aura theme button */
1140
+
.aura-btn {
1154
1141
border-style: dashed;
1155
-
transition: all 0.4s ease;
1156
1142
}
1157
1143
1158
-
.aura-card.aura-active {
1144
+
.aura-btn.active {
1159
1145
border-style: solid;
1160
-
border-color: color-mix(in srgb, var(--accent) 30%, var(--border-subtle));
1161
1146
}
1162
1147
1163
-
.aura-unlock {
1164
-
display: flex;
1165
-
align-items: center;
1166
-
justify-content: center;
1167
-
width: 100%;
1168
-
padding: 1.25rem;
1169
-
background: transparent;
1170
-
border: none;
1171
-
cursor: pointer;
1172
-
transition: all 0.3s ease;
1173
-
}
1174
-
1175
-
.aura-unlock:hover {
1176
-
transform: scale(1.02);
1177
-
}
1178
-
1179
-
.aura-unlock:hover .aura-silhouette {
1180
-
opacity: 0.8;
1181
-
}
1182
-
1183
-
.aura-silhouette {
1184
-
position: relative;
1185
-
display: flex;
1186
-
align-items: center;
1187
-
justify-content: center;
1188
-
opacity: 0.5;
1189
-
transition: opacity 0.3s ease;
1190
-
color: var(--text-muted);
1191
-
}
1192
-
1193
-
.aura-question {
1194
-
position: absolute;
1195
-
font-size: var(--text-xl);
1196
-
font-weight: 700;
1197
-
color: var(--bg-primary);
1148
+
.aura-btn.aura-loading {
1149
+
opacity: 0.6;
1150
+
pointer-events: none;
1198
1151
}
1199
1152
1200
-
/* aura card — revealed state */
1201
-
.aura-revealed {
1202
-
display: flex;
1203
-
align-items: center;
1204
-
gap: 0.75rem;
1205
-
padding: 0.5rem 0;
1206
-
}
1207
-
1208
-
.aura-orb {
1209
-
width: 36px;
1210
-
height: 36px;
1153
+
.aura-orb-inline {
1154
+
width: 18px;
1155
+
height: 18px;
1211
1156
border-radius: var(--radius-full);
1212
-
flex-shrink: 0;
1213
1157
animation: aura-breathe 6s ease-in-out infinite;
1214
1158
}
1215
1159
···
1222
1166
50% { transform: scale(1.08); opacity: 1; }
1223
1167
}
1224
1168
1225
-
.aura-conditions {
1226
-
flex: 1;
1227
-
font-size: var(--text-sm);
1228
-
color: var(--text-tertiary);
1229
-
}
1230
-
1231
-
.aura-disable {
1232
-
display: flex;
1233
-
align-items: center;
1234
-
justify-content: center;
1235
-
width: 28px;
1236
-
height: 28px;
1237
-
background: transparent;
1238
-
border: none;
1239
-
border-radius: var(--radius-sm);
1240
-
color: var(--text-muted);
1241
-
cursor: pointer;
1242
-
transition: all 0.15s;
1243
-
flex-shrink: 0;
1244
-
}
1245
-
1246
-
.aura-disable:hover {
1247
-
color: var(--text-secondary);
1248
-
background: var(--bg-hover);
1249
-
}
1250
-
1251
-
.aura-loading {
1252
-
display: flex;
1253
-
align-items: center;
1254
-
justify-content: center;
1255
-
gap: 0.75rem;
1256
-
padding: 1rem 0;
1257
-
}
1258
-
1259
-
.aura-loading-text {
1260
-
font-size: var(--text-sm);
1261
-
color: var(--text-muted);
1262
-
letter-spacing: 0.2em;
1263
-
}
1264
-
1265
-
.aura-state {
1266
-
padding: 0.75rem 0;
1267
-
text-align: center;
1268
-
}
1269
-
1270
-
.aura-error {
1169
+
.aura-error-row {
1271
1170
font-size: var(--text-sm);
1272
1171
color: var(--error);
1172
+
padding: 0.5rem 0;
1173
+
border-bottom: 1px solid var(--border-subtle);
1273
1174
}
1274
1175
1275
1176
/* toggle switch */