@olares/lares-mobile 0.15.24 → 0.15.26

package/src/settings/TtsSettings.vue

@@ -1,32 +1,64 @@
 <template>
-  <section class="lares-tts-settings">
+  <section class="lares-tts">
     <h3>{{ t('settings.tts.title') }}</h3>
-    <label>{{ t('settings.tts.model') }}
-      <select :value="view.value.config.ttsModel || ''" :disabled="state.saving" @change="save(controller.selectModel($event.target.value))">
-        <option value="">{{ t('settings.model.auto') }}</option>
-        <option v-for="id in models" :key="id" :value="id">{{ id }}</option>
-      </select>
+    <label v-if="isDesktop" class="lares-tts__field">
+      <span>{{ t('settings.tts.model') }}</span>
+      <LaresSelect :value="modelId" :sections="modelSections" :disabled="state.saving" @select="chooseModel" />
     </label>
-    <p v-if="view.errors.ttsModel" role="alert">{{ t('settings.saveFailed') }}</p>
-    <p v-if="!state.model">{{ t('preferences.modelsMissing') }}</p>
-    <p v-else-if="state.loading" role="status">{{ t('tts.loading') }}</p>
-    <p v-else-if="state.error" role="alert">{{ t('tts.loadFailed') }} <button type="button" @click="controller.load()">{{ t('dictation.retry') }}</button></p>
-    <label v-else-if="state.voices.length || state.unavailable">{{ t('tts.voice') }}
-      <select :value="state.selected" :disabled="state.saving" @change="save(controller.selectVoice($event.target.value))">
-        <option value="">{{ t('tts.default') }}</option>
-        <option v-if="state.unavailable" :value="state.selected" disabled>{{ state.selected }} · {{ t('preferences.unavailable') }}</option>
-        <option v-for="voice in state.voices" :key="voice.id" :value="voice.id">{{ voice.label }}</option>
-      </select>
-    </label>
-    <p v-else>{{ t('tts.noPresets') }}</p>
-    <p v-if="view.errors.ttsVoiceByModel" role="alert">{{ t('settings.saveFailed') }}</p>
-    <div class="lares-tts-settings__preview">
-      <button type="button" :disabled="!state.model || state.loading || Boolean(state.error) || state.saving || state.unavailable || state.blocked" @click="controller.audition()">{{ t(state.playing ? 'tts.stopPreview' : 'tts.preview') }}</button>
-      <p role="status">{{ t(state.blocked ? 'tts.busy' : 'tts.previewHint') }}</p>
+    <LaresSettingRow
+      v-else
+      :label="t('settings.tts.model')"
+      :value="modelLabel"
+      chevron
+      boxed
+      :disabled="state.saving"
+      @click="sheet = 'model'"
+    />
+    <p v-if="view.errors.ttsModel" class="lares-tts__alert" role="alert">{{ t('settings.saveFailed') }}</p>
+    <p v-if="!state.model" class="lares-tts__hint">{{ t('preferences.modelsMissing') }}</p>
+    <p v-else-if="state.loading" class="lares-tts__hint" role="status">{{ t('tts.loading') }}</p>
+    <div v-else-if="state.error" class="lares-tts__status" role="alert">
+      <p>{{ t('tts.loadFailed') }}</p>
+      <button type="button" @click="controller.load()">{{ t('dictation.retry') }}</button>
+    </div>
+    <template v-else-if="state.voices.length || state.unavailable">
+      <label v-if="isDesktop" class="lares-tts__field">
+        <span>{{ t('tts.voice') }}</span>
+        <LaresSelect :value="voiceId" :sections="voiceSections" :disabled="state.saving" @select="chooseVoice" />
+      </label>
+      <LaresSettingRow
+        v-else
+        :label="t('tts.voice')"
+        :value="voiceLabel"
+        chevron
+        boxed
+        :disabled="state.saving"
+        @click="sheet = 'voice'"
+      />
+    </template>
+    <p v-else class="lares-tts__hint">{{ t('tts.noPresets') }}</p>
+    <p v-if="view.errors.ttsVoiceByModel" class="lares-tts__alert" role="alert">{{ t('settings.saveFailed') }}</p>
+    <div class="lares-tts__action">
+      <p class="lares-tts__hint">{{ t(state.blocked ? 'tts.busy' : 'tts.previewHint') }}</p>
+      <button type="button" :disabled="previewDisabled" @click="controller.audition()">{{ t(state.playing ? 'tts.stopPreview' : 'tts.preview') }}</button>
     </div>
-    <p v-if="state.previewError" role="alert">{{ t('tts.previewFailed') }}</p>
-    <label class="lares-tts-settings__speak"><input type="checkbox" :checked="view.value.config.speak === true" :disabled="Boolean(view.pending.speak)" @change="save(preferences.patch({ speak: $event.target.checked }))" />{{ t('settings.speak.title') }}</label>
-    <p v-if="view.errors.speak" role="alert">{{ t('settings.saveFailed') }}</p>
+    <p v-if="state.previewError" class="lares-tts__alert" role="alert">{{ t('tts.previewFailed') }}</p>
+    <label class="lares-tts__switch">
+      <span>{{ t('settings.speak.title') }}</span>
+      <input type="checkbox" role="switch" :checked="view.value.config.speak === true" :disabled="Boolean(view.pending.speak)" :aria-checked="view.value.config.speak === true ? 'true' : 'false'" @change="save(preferences.patch({ speak: $event.target.checked }))" />
+    </label>
+    <p class="lares-tts__hint">{{ t('settings.tts.hint') }}</p>
+    <p v-if="view.errors.speak" class="lares-tts__alert" role="alert">{{ t('settings.saveFailed') }}</p>
+    <LaresSheet v-if="!isDesktop" :open="Boolean(sheet)" :title="sheetTitle" @close="sheet = ''">
+      <LaresSettingRow
+        v-for="item in sheetItems"
+        :key="item.id || 'auto'"
+        :label="item.label"
+        :checked="item.id === sheetCurrent"
+        :disabled="state.saving || item.disabled"
+        @click="chooseSheet(item)"
+      />
+    </LaresSheet>
   </section>
 </template>
 <script>
@@ -34,27 +66,216 @@ import { markRaw } from "vue";
 import { createTtsSettings } from "@olares/lares-core/voice/tts-settings";
 import { fetchTtsVoices } from "@olares/lares-core/voice/tts-voice";
 import { previewTts } from "@olares/lares-core/voice/tts-preview";
+import LaresSettingRow from "./SettingRow.vue";
+import LaresSelect from "./Select.vue";
+import LaresSheet from "./Sheet.vue";
 export default {
-  props: { preferences: { type: Object, required: true }, view: { type: Object, required: true }, t: { type: Function, required: true }, fetcher: { type: Function, required: true } },
+  components: { LaresSettingRow, LaresSelect, LaresSheet },
+  props: { preferences: { type: Object, required: true }, view: { type: Object, required: true }, t: { type: Function, required: true }, fetcher: { type: Function, required: true }, device: { type: String, default: "mobile" } },
   data() {
     const controller = markRaw(createTtsSettings({ preferences: this.preferences, list: (model, options) => fetchTtsVoices(model, { ...options, fetcher: this.fetcher }), preview: take => previewTts(take, { fetcher: this.fetcher }) }));
-    return { controller, state: controller.getSnapshot() };
+    return { controller, state: controller.getSnapshot(), sheet: "" };
+  },
+  computed: {
+    isDesktop() { return this.device === "desktop"; },
+    models() { return [...new Set([this.view.value.config.ttsModel, ...(this.view.value.ttsModels || [])].filter(Boolean))]; },
+    modelId() { return this.view.value.config.ttsModel || ""; },
+    modelLabel() { return this.modelId ? this.modelId : this.t("settings.model.auto"); },
+    modelSections() { return [{ items: [{ id: "", label: this.t("settings.model.auto") }, ...this.models.map(id => ({ id, label: id }))] }]; },
+    voiceId() { return this.state.selected || ""; },
+    voiceItems() {
+      return [
+        { id: "", label: this.t("tts.default") },
+        ...(this.state.unavailable && this.state.selected ? [{ id: this.state.selected, label: `${this.state.selected} · ${this.t("preferences.unavailable")}`, disabled: true }] : []),
+        ...this.state.voices.map(voice => ({ id: voice.id, label: voice.label })),
+      ];
+    },
+    voiceSections() { return [{ items: this.voiceItems }]; },
+    voiceLabel() { return this.voiceItems.find(item => item.id === this.voiceId)?.label || this.t("tts.default"); },
+    previewDisabled() { return !this.state.model || this.state.loading || Boolean(this.state.error) || this.state.saving || this.state.unavailable || this.state.blocked; },
+    sheetTitle() { return this.t(this.sheet === "voice" ? "tts.voice" : "settings.tts.model"); },
+    sheetItems() { return this.sheet === "voice" ? this.voiceItems : this.modelSections[0].items; },
+    sheetCurrent() { return this.sheet === "voice" ? this.voiceId : this.modelId; },
   },
-  computed: { models() { return [...new Set([this.view.value.config.ttsModel, ...(this.view.value.ttsModels || [])].filter(Boolean))]; } },
   mounted() { this.off = this.controller.subscribe(() => { this.state = this.controller.getSnapshot(); }); void this.controller.load(); },
   beforeUnmount() { this.off?.(); this.controller.dispose(); },
-  methods: { save(operation) { void operation.catch(() => {}); } },
+  methods: {
+    save(operation) { void operation.catch(() => {}); },
+    chooseModel(item) { this.save(this.controller.selectModel(item.id)); },
+    chooseVoice(item) { if (!item.disabled) this.save(this.controller.selectVoice(item.id)); },
+    chooseSheet(item) {
+      if (item.disabled || this.state.saving) return;
+      const sheet = this.sheet;
+      this.sheet = "";
+      if (item.id === (sheet === "voice" ? this.voiceId : this.modelId)) return;
+      if (sheet === "voice") this.chooseVoice(item);
+      else this.chooseModel(item);
+    },
+  },
 };
 </script>
 <style scoped>
-.lares-tts-settings { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
-.lares-tts-settings label { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
-.lares-tts-settings select { width: 100%; min-width: 0; max-width: 100%; font: inherit; color: inherit; border: 1px solid var(--q-separator); border-radius: 8px; background: var(--q-background-2, transparent); padding: 10px; }
-.lares-tts-settings button:disabled { opacity: .45; cursor: default; }
-.lares-tts-settings button:focus-visible, .lares-tts-settings select:focus-visible { outline: 2px solid var(--q-blue-default, #3978f6); outline-offset: 2px; }
-.lares-tts-settings button { font: inherit; color: inherit; border: 1px solid var(--q-separator); border-radius: 8px; background: transparent; padding: 8px 14px; }
-.lares-tts-settings p { margin: 0; font-size: 13px; color: var(--q-ink-3); }
-.lares-tts-settings [role="alert"] { color: var(--q-orange-default); }
-.lares-tts-settings label.lares-tts-settings__speak { flex-direction: row; align-items: center; }
-.lares-tts-settings__preview { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
+.lares-tts {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  color: var(--q-ink-1);
+  font-size: 15px;
+  line-height: 22px;
+}
+
+.lares-tts h3 {
+  margin: 4px 0 0;
+  color: var(--q-ink-3);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.lares-tts__field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.lares-tts__hint {
+  margin: 0;
+  color: var(--q-ink-3);
+  font-size: 15px;
+  line-height: 22px;
+}
+
+.lares-tts__alert {
+  margin: 0;
+  color: var(--q-orange-default);
+  font-size: 15px;
+  line-height: 22px;
+}
+
+.lares-tts__status {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 44px;
+}
+
+.lares-tts__status p {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  color: var(--q-orange-default);
+  font-size: 15px;
+  line-height: 22px;
+}
+
+.lares-tts__status > button,
+.lares-tts__action > button {
+  flex: none;
+  min-height: 36px;
+  border: 0;
+  border-radius: 12px;
+  padding: 0 14px;
+  background: var(--q-blue-alpha);
+  color: var(--q-blue-default);
+  font: inherit;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 20px;
+  cursor: pointer;
+}
+
+.lares-tts__status > button:disabled,
+.lares-tts__action > button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.lares-tts__status > button:focus-visible,
+.lares-tts__action > button:focus-visible {
+  outline: 2px solid var(--q-blue-default);
+  outline-offset: 2px;
+}
+
+.lares-tts__action,
+.lares-tts__switch {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 64px;
+  box-sizing: border-box;
+  border: 1px solid var(--q-separator);
+  border-radius: 20px;
+  padding: 12px 16px;
+}
+
+.lares-tts__action .lares-tts__hint {
+  flex: 1;
+  min-width: 0;
+  font-size: 15px;
+  line-height: 22px;
+}
+
+.lares-tts__switch > span {
+  flex: 1;
+  min-width: 0;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.lares-tts__switch {
+  cursor: pointer;
+}
+
+.lares-tts__switch input {
+  position: relative;
+  flex: none;
+  width: 44px;
+  height: 26px;
+  margin: 0;
+  border: 0;
+  border-radius: 999px;
+  background: var(--q-background-3);
+  appearance: none;
+  cursor: pointer;
+}
+
+.lares-tts__switch input::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--q-ink-1);
+  transition: transform var(--lares-duration-fast, 160ms) var(--lares-ease-out, ease);
+}
+
+.lares-tts__switch input:checked {
+  background: var(--q-blue-default);
+}
+
+.lares-tts__switch input:checked::after {
+  background: var(--q-ink-on-brand);
+  transform: translateX(18px);
+}
+
+.lares-tts__switch input:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.lares-tts__switch input:focus-visible {
+  outline: 2px solid var(--q-blue-default);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lares-tts__switch input::after {
+    transition: none;
+  }
+}
 </style>

package/src/settings/VoiceKeys.vue

@@ -0,0 +1,267 @@
+<template>
+  <section class="lares-voice-keys">
+    <h3>{{ t('settings.group.keys') }}</h3>
+    <p>{{ t('settings.keys.hint') }}</p>
+    <ul v-if="keys && keys.length" class="lares-voice-keys__list">
+      <li v-for="key in keys" :key="key.id">
+        <span class="lares-voice-keys__name">{{ key.name }}<small>{{ key.models.join(', ') }}</small></span>
+        <button type="button" :disabled="busy" @click="revoking = key">{{ t('settings.keys.revoke') }}</button>
+      </li>
+    </ul>
+    <p v-else-if="keys">{{ t('settings.keys.empty') }}</p>
+    <label class="lares-voice-keys__field">
+      <span>{{ t('settings.keys.name') }}</span>
+      <input v-model="name" type="text" maxlength="64" :placeholder="t('settings.keys.namePlaceholder')" :disabled="busy" />
+    </label>
+    <div class="lares-voice-keys__models" role="group" :aria-label="t('settings.keys.models')">
+      <p>{{ t('settings.keys.models') }}</p>
+      <label v-for="model in allModels" :key="model">
+        <input type="checkbox" :checked="models.includes(model)" :disabled="busy" @change="toggle(model)" />
+        <span>{{ model }}</span>
+      </label>
+    </div>
+    <p v-if="agentSelected" role="note">{{ t('settings.keys.agentWarning') }}</p>
+    <button type="button" class="lares-voice-keys__issue" :disabled="busy || !name.trim() || !models.length" @click="issue">{{ t(busy ? 'settings.keys.issuing' : 'settings.keys.issue') }}</button>
+    <p v-if="error" role="alert">{{ error }}</p>
+    <div v-if="issued" class="lares-voice-keys__dialog" role="dialog">
+      <p>{{ t('settings.keys.issued') }}</p>
+      <code>{{ issued.key }}</code>
+      <div class="lares-voice-keys__actions">
+        <button type="button" @click="copy">{{ t(copied ? 'settings.keys.copied' : 'settings.keys.copy') }}</button>
+        <button type="button" class="is-primary" @click="issued = null">{{ t('settings.keys.done') }}</button>
+      </div>
+    </div>
+    <div v-if="revoking" class="lares-voice-keys__dialog" role="dialog">
+      <p>{{ t('settings.keys.revokeConfirm', { name: revoking.name }) }}</p>
+      <div class="lares-voice-keys__actions">
+        <button type="button" :disabled="busy" @click="revoke">{{ t('settings.keys.revoke') }}</button>
+        <button type="button" @click="revoking = null">{{ t('settings.keys.done') }}</button>
+      </div>
+    </div>
+  </section>
+</template>
+<script>
+import { markRaw } from "vue";
+import { messageFromCode } from "@olares/lares-core/i18n/t";
+import { VOICE_KEY_AGENT_MODELS, VOICE_KEY_DEFAULT_MODELS, VOICE_KEY_MODELS } from "@olares/lares-core/voice/keys-client";
+export default {
+  props: { client: { type: Object, required: true }, t: { type: Function, required: true } },
+  data() {
+    return { keys: null, name: "", models: [...VOICE_KEY_DEFAULT_MODELS], issued: null, copied: false, revoking: null, busy: false, error: "", allModels: markRaw([...VOICE_KEY_MODELS]) };
+  },
+  computed: { agentSelected() { return this.models.some((model) => VOICE_KEY_AGENT_MODELS.includes(model)); } },
+  mounted() { void this.load(); },
+  methods: {
+    fail(err) { this.error = messageFromCode(this.t, err?.message || "", "error.voice_key_failed"); },
+    async load() { try { this.keys = await this.client.list(); } catch (err) { this.fail(err); } },
+    toggle(model) { this.models = this.models.includes(model) ? this.models.filter((value) => value !== model) : VOICE_KEY_MODELS.filter((value) => value === model || this.models.includes(value)); },
+    async issue() {
+      this.busy = true; this.error = "";
+      try { this.issued = await this.client.issue({ name: this.name, models: this.models }); this.copied = false; this.name = ""; this.models = [...VOICE_KEY_DEFAULT_MODELS]; await this.load(); }
+      catch (err) { this.fail(err); }
+      finally { this.busy = false; }
+    },
+    async revoke() {
+      this.busy = true; this.error = "";
+      try { await this.client.revoke(this.revoking.id); this.revoking = null; await this.load(); }
+      catch (err) { this.fail(err); }
+      finally { this.busy = false; }
+    },
+    async copy() { try { await navigator.clipboard.writeText(this.issued.key); this.copied = true; } catch (err) { this.fail(err); } },
+  },
+};
+</script>
+<style scoped>
+.lares-voice-keys {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  margin-top: 8px;
+  color: var(--q-ink-1);
+  font-size: 15px;
+  line-height: 22px;
+}
+
+.lares-voice-keys h3 {
+  margin: 4px 0 0;
+  color: var(--q-ink-3);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.lares-voice-keys p {
+  margin: 0;
+  color: var(--q-ink-3);
+  font-size: 15px;
+  line-height: 22px;
+}
+
+.lares-voice-keys [role="alert"],
+.lares-voice-keys [role="note"] {
+  color: var(--q-orange-default);
+}
+
+.lares-voice-keys__list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.lares-voice-keys__list li,
+.lares-voice-keys__dialog {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 64px;
+  box-sizing: border-box;
+  border: 1px solid var(--q-separator);
+  border-radius: 20px;
+  padding: 12px 16px;
+}
+
+.lares-voice-keys__name {
+  min-width: 0;
+  flex: 1;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.lares-voice-keys__name small {
+  display: block;
+  overflow: hidden;
+  color: var(--q-ink-3);
+  font-size: 13px;
+  line-height: 18px;
+  text-overflow: ellipsis;
+}
+
+.lares-voice-keys__field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.lares-voice-keys__field span,
+.lares-voice-keys__models > p {
+  color: var(--q-ink-2);
+}
+
+.lares-voice-keys input[type="text"] {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 48px;
+  border: 1px solid var(--q-separator);
+  border-radius: 16px;
+  padding: 0 16px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 16px;
+}
+
+.lares-voice-keys input[type="text"]:focus-visible {
+  outline: 2px solid var(--q-blue-default);
+  outline-offset: 2px;
+}
+
+.lares-voice-keys__models {
+  overflow: hidden;
+  border: 1px solid var(--q-separator);
+  border-radius: 20px;
+}
+
+.lares-voice-keys__models > p {
+  margin: 0;
+  padding: 12px 16px 4px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.lares-voice-keys__models label {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 48px;
+  padding: 0 16px;
+  border-top: 1px solid var(--q-separator);
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.lares-voice-keys__models input {
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  accent-color: var(--q-blue-default);
+}
+
+.lares-voice-keys button {
+  flex: none;
+  min-height: 36px;
+  border: 1px solid var(--q-separator);
+  border-radius: 12px;
+  padding: 0 14px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 15px;
+  cursor: pointer;
+}
+
+.lares-voice-keys button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.lares-voice-keys button:focus-visible {
+  outline: 2px solid var(--q-blue-default);
+  outline-offset: 2px;
+}
+
+.lares-voice-keys__issue,
+.lares-voice-keys button.is-primary {
+  border: 0;
+  background: var(--q-blue-alpha);
+  color: var(--q-blue-default);
+  font-weight: 500;
+}
+
+.lares-voice-keys__issue {
+  min-height: 48px;
+  border-radius: 16px;
+  font-size: 16px;
+}
+
+.lares-voice-keys__dialog {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.lares-voice-keys__dialog p {
+  color: var(--q-ink-1);
+}
+
+.lares-voice-keys code {
+  overflow-wrap: anywhere;
+  border-radius: 12px;
+  padding: 12px;
+  background: var(--q-background-3);
+  font-size: 13px;
+  line-height: 18px;
+  user-select: all;
+}
+
+.lares-voice-keys__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+</style>