npmx.dev/app/pages/settings.vue at b054c19f20f346c9cafb8492134714483fc2db5a · npmx-dev/npmx.dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<script setup lang="ts">
const router = useRouter()
const { settings } = useSettings()
const { locale, locales, setLocale } = useI18n()
const colorMode = useColorMode()

const availableLocales = computed(() =>
  locales.value.map(l => (typeof l === 'string' ? { code: l, name: l } : l)),
)

function goBack() {
  router.back()
}

useSeoMeta({
  title: 'Settings - npmx',
})
</script>

<template>
  <main class="container py-8 sm:py-12 w-full">
    <!-- Back button -->
    <button
      type="button"
      class="inline-flex items-center gap-2 mb-6 text-sm text-fg-muted hover:text-fg transition-colors duration-150 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
      @click="goBack"
    >
      <span class="i-carbon-arrow-left w-4 h-4" aria-hidden="true" />
      {{ $t('nav.back') }}
    </button>

    <div class="space-y-1 p-4 rounded-lg bg-bg-muted border border-border">
      <button
        type="button"
        class="w-full flex items-center justify-between gap-3 px-2 py-2 rounded-md hover:bg-bg-muted transition-[background-color] duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
        role="menuitemcheckbox"
        :aria-checked="settings.relativeDates"
        @click="settings.relativeDates = !settings.relativeDates"
      >
        <span class="text-sm text-fg select-none">{{ $t('settings.relative_dates') }}</span>
        <span
          class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent transition-[background-color] duration-200 ease-in-out motion-reduce:transition-none shadow"
          :class="settings.relativeDates ? 'bg-fg' : 'bg-bg'"
          aria-hidden="true"
        >
          <span
            class="pointer-events-none inline-block h-4 w-4 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
            :class="
              settings.relativeDates ? 'translate-x-4 bg-bg-subtle' : 'translate-x-0 bg-fg-muted'
            "
          />
        </span>
      </button>

      <!-- Include @types in install toggle -->
      <button
        type="button"
        class="w-full flex items-center justify-between gap-3 px-2 py-2 rounded-md hover:bg-bg-muted transition-[background-color] duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
        role="menuitemcheckbox"
        :aria-checked="settings.includeTypesInInstall"
        @click="settings.includeTypesInInstall = !settings.includeTypesInInstall"
      >
        <span class="text-sm text-fg select-none text-left">{{
          $t('settings.include_types')
        }}</span>
        <span
          class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent transition-[background-color] duration-200 ease-in-out motion-reduce:transition-none border border-border shadow"
          :class="settings.includeTypesInInstall ? 'bg-fg' : 'bg-bg'"
          aria-hidden="true"
        >
          <span
            class="pointer-events-none inline-block h-4 w-4 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
            :class="
              settings.includeTypesInInstall
                ? 'translate-x-4 bg-bg-subtle'
                : 'translate-x-0 bg-fg-muted'
            "
          />
        </span>
      </button>

      <!-- Theme selector -->
      <div class="pt-2 mt-2 border-t border-border">
        <div class="px-2 py-1">
          <label for="theme-select" class="text-xs text-fg-subtle uppercase tracking-wider">
            {{ $t('settings.theme') }}
          </label>
        </div>
        <div class="px-2 py-1">
          <select
            id="theme-select"
            :value="colorMode.preference"
            class="w-full bg-bg-muted border border-border rounded-md px-2 py-1.5 text-sm text-fg focus:outline-none focus:ring-2 focus:ring-fg/50 cursor-pointer"
            @change="
              colorMode.preference = ($event.target as HTMLSelectElement).value as
                | 'light'
                | 'dark'
                | 'system'
            "
          >
            <option value="system">{{ $t('settings.theme_system') }}</option>
            <option value="light">{{ $t('settings.theme_light') }}</option>
            <option value="dark">{{ $t('settings.theme_dark') }}</option>
          </select>
        </div>
      </div>

      <!-- Language selector -->
      <div class="pt-2 mt-2 border-t border-border">
        <div class="px-2 py-1">
          <label for="language-select" class="text-xs text-fg-subtle uppercase tracking-wider">
            {{ $t('settings.language') }}
          </label>
        </div>
        <div class="px-2 py-1">
          <select
            id="language-select"
            :value="locale"
            class="w-full bg-bg-muted border border-border rounded-md px-2 py-1.5 text-sm text-fg focus:outline-none focus:ring-2 focus:ring-fg/50 cursor-pointer"
            @change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
          >
            <option v-for="loc in availableLocales" :key="loc.code" :value="loc.code">
              {{ loc.name }}
            </option>
          </select>
        </div>
        <a
          href="https://github.com/npmx-dev/npmx.dev/tree/main/i18n/locales"
          target="_blank"
          rel="noopener noreferrer"
          class="flex items-center gap-1.5 px-2 py-1.5 text-xs text-fg-muted hover:text-fg transition-colors"
        >
          <span class="i-carbon-translate w-3.5 h-3.5" aria-hidden="true" />
          {{ $t('settings.help_translate') }}
        </a>
      </div>

      <div class="pt-2 mt-2 border-t border-border">
        <h2 class="text-xs text-fg-subtle uppercase tracking-wider px-2 py-1">
          {{ $t('settings.accent_colors') }}
        </h2>
        <div class="px-2 py-2">
          <AccentColorPicker />
        </div>
      </div>
    </div>
  </main>
</template>