ENH - expand Settings controls and wallpaper imports

frontend/src/ui/settings.css

@@ -190,19 +190,81 @@ label.sky-settings-row__title {
 }
 
 .sky-settings-range-row__frame {
-  padding-top: var(--sky-space-1);
-  padding-bottom: var(--sky-space-1);
+  min-height: 88px;
+  padding-top: 12px;
+  padding-bottom: 14px;
+  align-items: stretch;
+  flex-direction: column;
+  gap: 10px;
 }
 
 .sky-settings-group--compact .sky-settings-row__frame,
 .sky-settings-group--compact .sky-settings-range-row__frame {
-  min-height: 48px;
+  min-height: 76px;
   padding-top: 6px;
   padding-bottom: 6px;
 }
 
-.sky-settings-range-row .sky-range {
+.sky-settings-range-row__header,
+.sky-settings-range-row__control {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
+.sky-settings-range-row__header {
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.sky-settings-range-row__title,
+.sky-settings-range-row__value {
+  font-size: 17px;
+  line-height: 22px;
+}
+
+.sky-settings-range-row__title {
+  min-width: 0;
+  color: var(--sky-text);
+  overflow-wrap: anywhere;
+}
+
+.sky-settings-range-row__value {
+  flex: none;
+  color: var(--sky-muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.sky-settings-range-row__control {
+  min-height: 28px;
+  gap: 12px;
+}
+
+.sky-settings-range-row__control .sky-range {
   width: 100%;
+  flex: 1 1 auto;
+}
+
+.sky-settings-range-row__endpoint {
+  width: 24px;
+  height: 28px;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  color: var(--sky-muted);
+}
+
+.sky-settings-range-row__endpoint > svg {
+  width: 22px;
+  height: 22px;
+  display: block;
+}
+
+.sky-settings-range-row__endpoint--leading > svg {
+  width: 17px;
+  height: 17px;
 }
 
 .sky-settings-icon {

frontend/src/ui/settings/SkySettingsRangeRow.test.ts

@@ -1,4 +1,4 @@
-import { createSSRApp } from 'vue'
+import { createSSRApp, h } from 'vue'
 import { renderToString } from 'vue/server-renderer'
 import { describe, expect, it } from 'vitest'
 
@@ -26,7 +26,9 @@ describe('SkySettingsRangeRow', () => {
     expect(html).toContain('min="25"')
     expect(html).toContain('max="100"')
     expect(html).toContain('step="5"')
-    expect(html).toContain('75%')
+    expect(html).toContain('class="sky-settings-range-row__title">Brightness')
+    expect(html).toContain('class="sky-settings-range-row__value">75%')
+    expect(html).not.toContain('sky-range__caption')
   })
 
   it('uses the effective numeric value as its default visible label', async () => {
@@ -37,7 +39,9 @@ describe('SkySettingsRangeRow', () => {
 
     const html = await renderToString(app)
 
-    expect(html).toMatch(/class="sky-range__label">.*1\.25.*<\/span>/)
+    expect(html).toMatch(
+      /class="sky-settings-range-row__value">.*1\.25.*<\/span>/,
+    )
     expect(html).not.toContain('aria-valuetext=')
   })
 
@@ -51,7 +55,31 @@ describe('SkySettingsRangeRow', () => {
     const html = await renderToString(app)
 
     expect(html).toContain('aria-valuetext="75%"')
-    expect(html).toMatch(/class="sky-range__label">.*75%.*<\/span>/)
+    expect(html).toMatch(
+      /class="sky-settings-range-row__value">.*75%.*<\/span>/,
+    )
+  })
+
+  it('supports decorative range endpoint icons without changing the label', async () => {
+    const app = createSSRApp({
+      render: () =>
+        h(
+          SkySettingsRangeRow,
+          { modelValue: 50, title: 'Volume', valueLabel: '50%' },
+          {
+            leading: () => h('svg', { 'data-endpoint': 'low' }),
+            trailing: () => h('svg', { 'data-endpoint': 'high' }),
+          },
+        ),
+    })
+
+    const html = await renderToString(app)
+
+    expect(html).toContain('sky-settings-range-row__endpoint--leading')
+    expect(html).toContain('sky-settings-range-row__endpoint--trailing')
+    expect(html).toContain('data-endpoint="low"')
+    expect(html).toContain('data-endpoint="high"')
+    expect(html).toContain('aria-label="Volume"')
   })
 
   it('exposes input, change, and numeric model update events', () => {

frontend/src/ui/settings/SkySettingsRangeRow.vue

@@ -53,21 +53,38 @@ const accessibleValue = computed(
     :class="{ 'sky-settings-range-row--disabled': disabled }"
   >
     <div class="sky-settings-range-row__frame">
-      <SkyRange
-        :aria-label="title"
-        :aria-value-text="accessibleValue"
-        :caption="title"
-        :disabled="disabled"
-        :max="max"
-        :min="min"
-        :model-value="effectiveValue"
-        :step="step"
-        @change="emit('change', $event)"
-        @input="emit('input', $event)"
-        @update:model-value="emit('update:modelValue', $event)"
-      >
-        {{ visibleValue }}
-      </SkyRange>
+      <div class="sky-settings-range-row__header">
+        <span class="sky-settings-range-row__title">{{ title }}</span>
+        <span class="sky-settings-range-row__value">{{ visibleValue }}</span>
+      </div>
+      <div class="sky-settings-range-row__control">
+        <span
+          v-if="$slots.leading"
+          class="sky-settings-range-row__endpoint sky-settings-range-row__endpoint--leading"
+          aria-hidden="true"
+        >
+          <slot name="leading" />
+        </span>
+        <SkyRange
+          :aria-label="title"
+          :aria-value-text="accessibleValue"
+          :disabled="disabled"
+          :max="max"
+          :min="min"
+          :model-value="effectiveValue"
+          :step="step"
+          @change="emit('change', $event)"
+          @input="emit('input', $event)"
+          @update:model-value="emit('update:modelValue', $event)"
+        />
+        <span
+          v-if="$slots.trailing"
+          class="sky-settings-range-row__endpoint sky-settings-range-row__endpoint--trailing"
+          aria-hidden="true"
+        >
+          <slot name="trailing" />
+        </span>
+      </div>
     </div>
   </li>
 </template>