fabric_trade_user/src/views/profile/ProfileDisplayView.vue

<script setup lang="ts">
import { useTimeoutFn } from '@vueuse/core'
import BaseButton from '@/components/ui/BaseButton.vue'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import ProfileSubpageLayout from '@/views/profile/components/ProfileSubpageLayout.vue'
import { useThemeStore, type ThemePreference } from '@/stores/theme'
import { ref } from 'vue'

const theme = useThemeStore()
const saved = ref(false)

const { start: hideSaved } = useTimeoutFn(() => {
  saved.value = false
}, 2000)

const themeOptions: {
  value: ThemePreference
  label: string
  description: string
  icon: string
}[] = [
  {
    value: 'light',
    label: 'روشن',
    description: 'پس‌زمینه روشن و کنتراست بالا',
    icon: 'vuesax-linear:sun-1',
  },
  {
    value: 'dark',
    label: 'تاریک',
    description: 'مناسب استفاده در شب',
    icon: 'vuesax-linear:moon',
  },
  {
    value: 'system',
    label: 'سیستم',
    description: 'هم‌تراز با تنظیمات دستگاه',
    icon: 'vuesax-linear:mobile',
  },
]

function save() {
  saved.value = true
  hideSaved()
}
</script>

<template>
  <ProfileSubpageLayout title="تنظیمات نمایش" subtitle="حالت نمایش روشن، تاریک یا سیستم">
    <div class="display-page">
      <fieldset class="display-fieldset">
        <legend class="display-fieldset__legend">حالت نمایش</legend>

        <div class="display-grid" role="radiogroup" aria-label="حالت نمایش">
          <button
            v-for="option in themeOptions"
            :key="option.value"
            type="button"
            class="theme-card"
            :class="{ 'theme-card--active': theme.preference === option.value }"
            role="radio"
            :aria-checked="theme.preference === option.value"
            @click="theme.preference = option.value"
          >
            <span class="theme-card__icon" aria-hidden="true">
              <BasicIcon :icon="option.icon" :size="26" :stroke-width="1.5" />
            </span>
            <span class="theme-card__body">
              <strong class="theme-card__label">{{ option.label }}</strong>
              <span class="theme-card__desc">{{ option.description }}</span>
            </span>
            <span class="theme-card__check" aria-hidden="true">
              <BasicIcon
                v-if="theme.preference === option.value"
                icon="vuesax-linear:tick-circle"
                :size="20"
                :stroke-width="1.75"
              />
            </span>
          </button>
        </div>
      </fieldset>

      <BaseButton block @click="save">ذخیره تنظیمات</BaseButton>
      <p v-if="saved" class="display-saved">تنظیمات نمایش ذخیره شد ✓</p>
    </div>
  </ProfileSubpageLayout>
</template>

<style scoped>
.display-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.display-fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

.display-fieldset__legend {
  margin: 0 0 12px;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
}

.display-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.theme-card {
  display: grid;
  grid-template-columns: 48px 1fr 24px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-elevated);
  color: var(--color-text);
  text-align: right;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
}

.theme-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.theme-card:active {
  transform: scale(0.99);
}

.theme-card--active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.theme-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.theme-card--active .theme-card__icon {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.theme-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.theme-card__label {
  font-size: 0.9375rem;
  font-weight: 700;
}

.theme-card__desc {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.theme-card--active .theme-card__label {
  color: var(--color-primary);
}

.theme-card__check {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  min-height: 20px;
}

.display-saved {
  margin: 0;
  font-size: 0.875rem;
  text-align: center;
  color: var(--color-success);
}
</style>