rss-reader/vue/src/components/AdminSettings.vue

<script setup>
import { useSettings } from '../composables/useSettings.js'

const {
  headlineSizeScale,
  contentSizeScale,
  headlineFontKey,
  contentFontKey,
  SIZE_STEPS,
  SIZE_LABELS,
  HEADLINE_FONT_OPTIONS,
  CONTENT_FONT_OPTIONS,
  setHeadlineSize,
  setContentSize,
  setHeadlineFont,
  setContentFont,
  textAlignKey,
  contentPadding,
  TEXT_ALIGN_OPTIONS,
  PADDING_STEPS,
  PADDING_LABELS,
  setTextAlign,
  setContentPadding,
} = useSettings()
</script>

<template>
  <div class="settings">
    <h1 class="settings__heading">Typography</h1>

    <section class="settings__section">
      <h2 class="settings__section-title">Headline Size</h2>
      <div class="settings__strip">
        <button
          v-for="(step, i) in SIZE_STEPS"
          :key="step"
          class="settings__btn"
          :class="{ 'settings__btn--active': headlineSizeScale === step }"
          type="button"
          @click="setHeadlineSize(step)"
        >{{ SIZE_LABELS[i] }}</button>
      </div>
    </section>

    <section class="settings__section">
      <h2 class="settings__section-title">Article Text Size</h2>
      <div class="settings__strip">
        <button
          v-for="(step, i) in SIZE_STEPS"
          :key="step"
          class="settings__btn"
          :class="{ 'settings__btn--active': contentSizeScale === step }"
          type="button"
          @click="setContentSize(step)"
        >{{ SIZE_LABELS[i] }}</button>
      </div>
    </section>

    <section class="settings__section">
      <h2 class="settings__section-title">Headline Font</h2>
      <select
        class="settings__select"
        :value="headlineFontKey"
        @change="setHeadlineFont($event.target.value)"
      >
        <option
          v-for="opt in HEADLINE_FONT_OPTIONS"
          :key="opt.key"
          :value="opt.key"
        >{{ opt.label }}</option>
      </select>
    </section>

    <section class="settings__section">
      <h2 class="settings__section-title">Article Text Font</h2>
      <select
        class="settings__select"
        :value="contentFontKey"
        @change="setContentFont($event.target.value)"
      >
        <option
          v-for="opt in CONTENT_FONT_OPTIONS"
          :key="opt.key"
          :value="opt.key"
        >{{ opt.label }}</option>
      </select>
    </section>

    <section class="settings__section">
      <h2 class="settings__section-title">Text Alignment</h2>
      <div class="settings__strip">
        <button
          v-for="opt in TEXT_ALIGN_OPTIONS"
          :key="opt.key"
          class="settings__btn"
          :class="{ 'settings__btn--active': textAlignKey === opt.key }"
          type="button"
          @click="setTextAlign(opt.key)"
        >{{ opt.label }}</button>
      </div>
    </section>

    <section class="settings__section">
      <h2 class="settings__section-title">Content Padding</h2>
      <div class="settings__strip">
        <button
          v-for="(step, i) in PADDING_STEPS"
          :key="step"
          class="settings__btn"
          :class="{ 'settings__btn--active': contentPadding === step }"
          type="button"
          @click="setContentPadding(step)"
        >{{ PADDING_LABELS[i] }}</button>
      </div>
    </section>
  </div>
</template>

<style scoped>
.settings {
  padding: 1.5rem 1rem 0.5rem;
  max-width: 720px;
  margin: 0 auto;
}

.settings__heading {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 1.25rem;
}

.settings__section {
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-background-soft);
}

.settings__section-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin-bottom: 0.6rem;
}

.settings__strip {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.settings__btn {
  min-height: 36px;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.settings__btn:hover {
  border-color: var(--color-border-hover);
}

.settings__btn--active {
  border-color: var(--color-accent);
  background: var(--color-accent-hover);
  color: var(--color-text);
}

.settings__select {
  width: 100%;
  min-height: 36px;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-background);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  appearance: auto;
}

.settings__select:hover {
  border-color: var(--color-border-hover);
}
</style>