i18n-dashboard 0.1.0

package/components/TranslationRow.vue

@@ -0,0 +1,541 @@
+<template>
+  <div
+    class="grid border-b border-gray-100 dark:border-gray-800 last:border-0 group/row hover:bg-gray-50/50 dark:hover:bg-gray-800/30 transition-colors"
+    :class="translationKey.is_unused ? 'opacity-60' : ''"
+    :style="gridStyle"
+  >
+    <!-- Key column -->
+    <div class="px-4 py-3 flex flex-col justify-center min-w-0">
+      <div class="flex items-center gap-2 min-w-0">
+        <UTooltip v-if="translationKey.is_unused" :text="t('translations.unused_tooltip', 'Key not found in source code')">
+          <UIcon name="i-heroicons-exclamation-triangle" class="text-orange-400 text-sm shrink-0" />
+        </UTooltip>
+        <NuxtLink
+          :to="projectId ? `/projects/${projectId}/translations/${translationKey.id}` : `/keys/${translationKey.id}`"
+          class="text-sm font-mono font-medium text-gray-900 dark:text-gray-100 truncate hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
+        >
+          {{ translationKey.key }}
+        </NuxtLink>
+      </div>
+      <!-- Description: inline edit -->
+      <template v-if="editingDescription">
+        <div class="flex items-center gap-1 mt-0.5">
+          <UInput
+            v-model="descriptionDraft"
+            size="xs"
+            class="flex-1 text-xs"
+            placeholder="Description…"
+            autofocus
+            @keydown.enter="saveDescription"
+            @keydown.escape="cancelDescription"
+          />
+          <UButton size="xs" @click="saveDescription" :loading="savingDescription">OK</UButton>
+          <UButton size="xs" color="neutral" variant="ghost" @click="cancelDescription">✕</UButton>
+        </div>
+      </template>
+      <template v-else>
+        <p
+          class="text-xs mt-0.5 truncate cursor-pointer"
+          :class="translationKey.description ? 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300' : 'text-gray-300 dark:text-gray-600 italic hover:text-primary-400'"
+          @click="startEditDescription"
+        >
+          {{ translationKey.description || t('translations.add_description', 'Add a description…') }}
+        </p>
+      </template>
+      <!-- Usage info -->
+      <div v-if="translationKey.usages?.length" class="flex items-center gap-1 mt-1">
+        <UTooltip :text="usageTooltip">
+          <button class="flex items-center gap-1 text-xs text-gray-400 hover:text-primary-500 transition-colors">
+            <UIcon name="i-heroicons-code-bracket" class="text-xs" />
+            <span>{{ translationKey.usages.length }} {{ translationKey.usages.length > 1 ? t('translations.references', 'references') : t('translations.reference', 'reference') }}</span>
+          </button>
+        </UTooltip>
+      </div>
+    </div>
+
+    <!-- Translation columns -->
+    <div
+      v-for="lang in languages"
+      :key="lang.code"
+      class="px-3 py-2 flex items-start gap-2 min-w-0 group/cell"
+    >
+      <div class="flex-1 min-w-0">
+        <!-- Edit mode -->
+        <template v-if="editingCell === `${translationKey.id}-${lang.code}`">
+          <div :ref="el => textareaWrappers[lang.code] = el as HTMLElement">
+            <UTextarea
+              v-model="editValues[lang.code]"
+              :rows="2"
+              autofocus
+              class="text-sm w-full"
+              @keydown.ctrl.enter="saveTranslation(lang.code)"
+              @keydown.meta.enter="saveTranslation(lang.code)"
+              @keydown.escape="cancelEdit(lang.code)"
+            />
+          </div>
+          <!-- Insertion helpers toolbar -->
+          <div class="flex flex-wrap items-center gap-x-2 gap-y-1 mt-1.5 pb-1.5 border-b border-gray-100 dark:border-gray-800">
+            <!-- Named params -->
+            <template v-if="detectedParams.length">
+              <div class="flex items-center gap-1 flex-wrap">
+                <span class="text-xs text-gray-400">{{ t('key.params_label', 'Params:') }}</span>
+                <button
+                  v-for="param in detectedParams"
+                  :key="param"
+                  class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-xs font-mono bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 border border-amber-200 dark:border-amber-700 hover:bg-amber-100 dark:hover:bg-amber-900/50 transition-colors"
+                  @mousedown.prevent="insertAtCursor(lang.code, '{' + param + '}')"
+                >
+                  <UIcon name="i-heroicons-cursor-arrow-rays" class="text-xs opacity-60" />
+                  {{ '{' + param + '}' }}
+                </button>
+              </div>
+            </template>
+            <!-- Literal / backslash escapes -->
+            <div class="flex items-center gap-1 flex-wrap">
+              <span class="text-xs text-gray-400">{{ t('key.escapes_label', 'Escapes:') }}</span>
+              <UTooltip v-for="esc in ALL_ESCAPES" :key="esc.insert" :text="esc.hint">
+                <button
+                  class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-mono bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 border border-indigo-200 dark:border-indigo-700 hover:bg-indigo-100 dark:hover:bg-indigo-900/50 transition-colors"
+                  @mousedown.prevent="insertAtCursor(lang.code, esc.insert)"
+                >{{ esc.label }}</button>
+              </UTooltip>
+            </div>
+            <!-- Modifiers -->
+            <div class="flex items-center gap-1 flex-wrap">
+              <span class="text-xs text-gray-400">{{ t('key.modifiers_label', 'Modifiers:') }}</span>
+              <UTooltip v-for="mod in LINK_MODIFIERS" :key="mod.prefix" :text="mod.hint">
+                <button
+                  class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-mono bg-violet-50 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300 border border-violet-200 dark:border-violet-700 hover:bg-violet-100 dark:hover:bg-violet-900/50 transition-colors"
+                  @mousedown.prevent="insertAtCursor(lang.code, mod.prefix)"
+                >{{ mod.prefix }}</button>
+              </UTooltip>
+            </div>
+            <!-- Plural separator -->
+            <UTooltip :text="t('translations.insert_plural_sep', 'Insert a plural form separator | (e.g. car | cars)')">
+              <button
+                class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-xs font-mono bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300 border border-green-200 dark:border-green-700 hover:bg-green-100 dark:hover:bg-green-900/50 transition-colors"
+                @mousedown.prevent="insertAtCursor(lang.code, ' | ')"
+              >
+                <UIcon name="i-heroicons-bars-3-bottom-left" class="text-xs opacity-60" />
+                {{ ' | ' }}
+              </button>
+            </UTooltip>
+            <!-- Linked key picker -->
+            <LinkedKeyPicker :project-id="projectId" @select="(val) => insertLinkedKey(lang.code, val)" />
+          </div>
+          <div class="flex gap-1 mt-1.5">
+            <UButton
+              size="xs"
+              @click="saveTranslation(lang.code)"
+              :loading="saving === `${translationKey.id}-${lang.code}`"
+            >
+              {{ t('translations.save', 'Save') }}
+            </UButton>
+            <UButton size="xs" color="neutral" variant="ghost" @click="cancelEdit(lang.code)">
+              {{ t('common.cancel', 'Cancel') }}
+            </UButton>
+          </div>
+        </template>
+
+        <!-- View mode -->
+        <template v-else>
+          <div class="flex items-start gap-1.5">
+            <!-- Status dot -->
+            <UTooltip :text="statusLabel(lang.code)" :delay-duration="300">
+              <span
+                class="mt-1.5 w-2 h-2 rounded-full shrink-0"
+                :class="[statusDot(lang.code), canClickStatus(lang.code) ? 'cursor-pointer' : 'cursor-default']"
+                @click="cycleStatus(lang.code)"
+              />
+            </UTooltip>
+
+            <div class="flex-1 min-w-0 cursor-pointer" @click="startEdit(lang.code)">
+              <template v-if="getTranslation(lang.code)">
+                <!-- Plural: show forms stacked -->
+                <div v-if="getPluralCount(lang.code) > 1" class="space-y-0.5">
+                  <div
+                    v-for="(form, i) in getTranslation(lang.code).split(' | ')"
+                    :key="i"
+                    class="flex items-baseline gap-1.5"
+                  >
+                    <span class="text-xs font-mono text-green-500 shrink-0">[{{ i }}]</span>
+                    <span class="text-sm text-gray-700 dark:text-gray-300 leading-snug truncate hover:text-primary-600 dark:hover:text-primary-400">{{ form.trim() }}</span>
+                  </div>
+                </div>
+                <!-- Single value -->
+                <p
+                  v-else
+                  class="text-sm text-gray-700 dark:text-gray-300 leading-snug truncate hover:text-primary-600 dark:hover:text-primary-400"
+                >{{ getTranslation(lang.code) }}</p>
+              </template>
+              <span v-else class="text-xs text-gray-300 dark:text-gray-600 italic hover:text-primary-500 transition-colors">
+                {{ t('translations.click_to_add', 'Click to add…') }}
+              </span>
+            </div>
+          </div>
+        </template>
+      </div>
+
+      <!-- Actions: Google Translate + status toggle -->
+      <div class="flex flex-col gap-1 opacity-0 group-hover/cell:opacity-100 transition-opacity shrink-0">
+        <UTooltip :text="hasSourceText ? t('translations.translate_to', 'Translate to') + ` ${lang.name}` : t('translations.no_source', 'No source available')">
+          <UButton
+            icon="i-heroicons-sparkles"
+            size="xs"
+            color="warning"
+            variant="ghost"
+            :disabled="!hasSourceText"
+            :loading="translateLoading === `${translationKey.id}-${lang.code}`"
+            @click="autoTranslate(lang)"
+          />
+        </UTooltip>
+      </div>
+    </div>
+
+    <!-- Row actions -->
+    <div class="px-2 py-3 flex items-center justify-center">
+      <UDropdownMenu :items="rowActions">
+        <UButton
+          icon="i-heroicons-ellipsis-vertical"
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          class="opacity-0 group-hover/row:opacity-100 transition-opacity"
+        />
+      </UDropdownMenu>
+    </div>
+  </div>
+
+  <!-- History modal -->
+  <TranslationHistoryModal
+    v-if="showHistory"
+    :translation-id="historyTranslationId"
+    @close="showHistory = false"
+  />
+</template>
+
+<script setup lang="ts">
+import { TRANSLATION_STATUS } from '../server/enums/translation.enum'
+
+const { t } = useT()
+
+const props = defineProps<{
+  translationKey: {
+    id: number
+    key: string
+    description?: string
+    is_unused?: boolean
+    translations: Record<string, { id: number; value: string; language_code: string; status?: string } | undefined>
+    usages?: Array<{ file_path: string; line_number: number; detected_function: string }>
+  }
+  languages: Array<{ code: string; name: string }>
+  gridStyle: Record<string, string>
+  projectId?: number
+}>()
+
+const emit = defineEmits<{ updated: [] }>()
+
+const toast = useToast()
+const { canApprove, canManageProject } = useAuth()
+
+const userCanApprove = computed(() => props.projectId ? canApprove(props.projectId) : false)
+const userCanDelete = computed(() => props.projectId ? canManageProject(props.projectId) : false)
+
+// Description inline edit
+const editingDescription = ref(false)
+const descriptionDraft = ref('')
+const savingDescription = ref(false)
+
+function startEditDescription() {
+  descriptionDraft.value = props.translationKey.description || ''
+  editingDescription.value = true
+}
+
+function cancelDescription() {
+  editingDescription.value = false
+}
+
+async function saveDescription() {
+  savingDescription.value = true
+  try {
+    await $fetch(`/api/keys/${props.translationKey.id}`, {
+      method: 'PATCH',
+      body: { description: descriptionDraft.value || null },
+    })
+    editingDescription.value = false
+    emit('updated')
+  } catch (e: any) {
+    toast.add({ title: t('common.error', 'Error'), description: e.data?.message || e.message, color: 'error' })
+  } finally {
+    savingDescription.value = false
+  }
+}
+
+const editingCell = ref<string | null>(null)
+const editValues = ref<Record<string, string>>({})
+const saving = ref<string | null>(null)
+const translateLoading = ref<string | null>(null)
+const showHistory = ref(false)
+const historyTranslationId = ref<number | null>(null)
+const textareaWrappers = ref<Record<string, HTMLElement | null>>({})
+
+// Literal interpolation {'x'} + backslash escapes (v11.3+), grouped
+const ALL_ESCAPES = computed(() => [
+  { label: `{'@'}`, insert: `{'@'}`, hint: t('key.escape_at', `@ → {'@'} — prevents link interpretation`) },
+  { label: `{'{'}`, insert: `{'{'}`, hint: t('key.escape_open_brace', `{ → {'{'} — prevents interpolation opening`) },
+  { label: `{'}'}`, insert: `{'}'}`, hint: t('key.escape_close_brace', `} → {'}'} — prevents interpolation closing`) },
+  { label: `{'$'}`, insert: `{'$'}`, hint: t('key.escape_dollar', `$ → {'$'} — prevents modifier interpretation`) },
+  { label: `{'|'}`, insert: `{'|'}`, hint: t('key.escape_pipe', `| → {'|'} — literal pipe (≠ plural separator)`) },
+  { label: `\\{`, insert: `\\{`, hint: t('key.escape_backslash_open', `\\{ — backslash escape (v11.3+), alternative to {'{'}`) },
+  { label: `\\}`, insert: `\\}`, hint: t('key.escape_backslash_close', `\\} — backslash escape (v11.3+), alternative to {'}'}`) },
+  { label: `\\@`, insert: `\\@`, hint: t('key.escape_backslash_at', `\\@ — backslash escape (v11.3+), alternative to {'@'}`) },
+  { label: `\\\\`, insert: `\\\\`, hint: t('key.escape_backslash', `\\\\ — literal backslash`) },
+])
+
+// Modifier prefixes for linked messages
+const LINK_MODIFIERS = computed(() => [
+  { prefix: '@:', hint: t('key.modifier_simple', '@:key — inserts the value as-is') },
+  { prefix: '@.lower:', hint: t('key.modifier_lower', '@.lower:key — converts to lowercase') },
+  { prefix: '@.upper:', hint: t('key.modifier_upper', '@.upper:key — converts to UPPERCASE') },
+  { prefix: '@.capitalize:', hint: t('key.modifier_capitalize', '@.capitalize:key — capitalizes first letter') },
+])
+
+// Detect named/list params like {name}, {0} across all existing translations
+const PARAM_REGEX = /\{([a-zA-Z_$][a-zA-Z0-9_\-$]*|\d+)\}/g
+const detectedParams = computed(() => {
+  const params = new Set<string>()
+  for (const tr of Object.values(props.translationKey.translations)) {
+    if (!tr?.value) continue
+    for (const match of tr.value.matchAll(PARAM_REGEX)) {
+      params.add(match[1])
+    }
+  }
+  return [...params]
+})
+
+function insertAtCursor(langCode: string, insertion: string) {
+  const wrapper = textareaWrappers.value[langCode]
+  const textarea = wrapper?.querySelector('textarea')
+  const current = editValues.value[langCode] || ''
+
+  if (textarea) {
+    const start = textarea.selectionStart ?? current.length
+    const end = textarea.selectionEnd ?? current.length
+    editValues.value[langCode] = current.slice(0, start) + insertion + current.slice(end)
+    nextTick(() => {
+      textarea.focus()
+      textarea.selectionStart = textarea.selectionEnd = start + insertion.length
+    })
+  } else {
+    editValues.value[langCode] = current + insertion
+  }
+}
+
+function insertLinkedKey(langCode: string, value: string) {
+  insertAtCursor(langCode, value)
+}
+
+function getTranslation(langCode: string): string {
+  return props.translationKey.translations[langCode]?.value || ''
+}
+
+function getPluralCount(langCode: string): number {
+  const val = getTranslation(langCode)
+  return val ? val.split(' | ').length : 0
+}
+
+function getStatus(langCode: string): TRANSLATION_STATUS | null {
+  const tr = props.translationKey.translations[langCode]
+  if (!tr?.value) return null
+  return (tr.status as TRANSLATION_STATUS) || TRANSLATION_STATUS.DRAFT
+}
+
+function statusDot(langCode: string): string {
+  const status = getStatus(langCode)
+  if (!status) return 'bg-gray-200 dark:bg-gray-700'
+  const map: Record<TRANSLATION_STATUS, string> = {
+    [TRANSLATION_STATUS.DRAFT]: 'bg-yellow-400',
+    [TRANSLATION_STATUS.REVIEWED]: 'bg-blue-400',
+    [TRANSLATION_STATUS.APPROVED]: 'bg-green-500',
+    [TRANSLATION_STATUS.REJECTED]: 'bg-red-400',
+  }
+  return map[status] || 'bg-gray-200'
+}
+
+function statusLabel(langCode: string): string {
+  const status = getStatus(langCode)
+  if (!status) return t('translations.status_missing', 'Missing — click to add')
+  if (status === TRANSLATION_STATUS.DRAFT) return userCanApprove.value
+    ? t('translations.status_draft_approver', 'Draft — click to mark as reviewed')
+    : t('translations.status_draft_translator', 'Draft — click to mark as reviewed')
+  if (status === TRANSLATION_STATUS.REVIEWED) return userCanApprove.value
+    ? t('translations.status_reviewed_approver', 'Reviewed — click to approve')
+    : t('translations.status_reviewed_translator', 'Reviewed (approval reserved for moderators)')
+  if (status === TRANSLATION_STATUS.APPROVED) return userCanApprove.value
+    ? t('translations.status_approved_approver', 'Approved — click to revert to draft')
+    : t('translations.status_approved', 'Approved')
+  if (status === TRANSLATION_STATUS.REJECTED) return t('status.rejected', 'Rejected')
+  return status
+}
+
+function canClickStatus(langCode: string): boolean {
+  const tr = props.translationKey.translations[langCode]
+  if (!tr?.value) return false
+  if (!userCanApprove.value && tr.status === TRANSLATION_STATUS.APPROVED) return false
+  return true
+}
+
+async function cycleStatus(langCode: string) {
+  const tr = props.translationKey.translations[langCode]
+  if (!tr?.value) return
+
+  const current = (tr.status as TRANSLATION_STATUS) || TRANSLATION_STATUS.DRAFT
+  let next: TRANSLATION_STATUS
+  if (userCanApprove.value) {
+    // moderator+ can cycle through all statuses
+    next = current === TRANSLATION_STATUS.DRAFT ? TRANSLATION_STATUS.REVIEWED : current === TRANSLATION_STATUS.REVIEWED ? TRANSLATION_STATUS.APPROVED : TRANSLATION_STATUS.DRAFT
+  } else {
+    // translator can only toggle draft ↔ reviewed
+    if (current === TRANSLATION_STATUS.APPROVED) return // cannot change approved
+    next = current === TRANSLATION_STATUS.DRAFT ? TRANSLATION_STATUS.REVIEWED : TRANSLATION_STATUS.DRAFT
+  }
+
+  try {
+    await $fetch('/api/translations/status', {
+      method: 'POST',
+      body: { key_id: props.translationKey.id, language_code: langCode, status: next },
+    })
+    emit('updated')
+    refreshNuxtData('project-stats')
+  } catch (e: any) {
+    toast.add({ title: t('common.error', 'Error'), description: e.data?.message || e.message, color: 'error' })
+  }
+}
+
+const hasSourceText = computed(() =>
+  Object.values(props.translationKey.translations).some((tr) => tr?.value),
+)
+
+function getSourceText(): { text: string; lang: string } | null {
+  const entries = Object.entries(props.translationKey.translations)
+  const withValue = entries.filter(([, tr]) => tr?.value)
+  if (!withValue.length) return null
+  return { text: withValue[0][1]!.value, lang: withValue[0][0] }
+}
+
+const usageTooltip = computed(() => {
+  const usages = props.translationKey.usages || []
+  // Group by file
+  const byFile = usages.reduce((acc: Record<string, number[]>, u) => {
+    if (!acc[u.file_path]) acc[u.file_path] = []
+    acc[u.file_path].push(u.line_number)
+    return acc
+  }, {})
+  return Object.entries(byFile)
+    .slice(0, 5)
+    .map(([file, lines]) => `${file}:${lines.join(',')}`)
+    .join('\n')
+})
+
+function startEdit(langCode: string) {
+  editingCell.value = `${props.translationKey.id}-${langCode}`
+  editValues.value[langCode] = getTranslation(langCode)
+}
+
+function cancelEdit(langCode: string) {
+  editingCell.value = null
+  delete editValues.value[langCode]
+}
+
+async function saveTranslation(langCode: string) {
+  saving.value = `${props.translationKey.id}-${langCode}`
+  try {
+    await $fetch('/api/translations', {
+      method: 'POST',
+      body: {
+        key_id: props.translationKey.id,
+        language_code: langCode,
+        value: editValues.value[langCode],
+      },
+    })
+    editingCell.value = null
+    emit('updated')
+  } catch (e: any) {
+    toast.add({ title: t('common.error', 'Error'), description: e.data?.message || e.message, color: 'error' })
+  } finally {
+    saving.value = null
+  }
+}
+
+async function autoTranslate(lang: { code: string; name: string }) {
+  const source = getSourceText()
+  if (!source) return
+
+  translateLoading.value = `${props.translationKey.id}-${lang.code}`
+  try {
+    await $fetch('/api/translate', {
+      method: 'POST',
+      body: {
+        text: source.text,
+        from: source.lang,
+        to: lang.code,
+        key_id: props.translationKey.id,
+        language_code: lang.code,
+      },
+    })
+    toast.add({ title: t('translations.translated', 'Translated'), description: `${props.translationKey.key} → ${lang.name}`, color: 'success' })
+    emit('updated')
+  } catch (e: any) {
+    toast.add({ title: t('translations.translate_error', 'Google Translate error'), description: e.data?.message || e.message, color: 'error' })
+  } finally {
+    translateLoading.value = null
+  }
+}
+
+function viewHistory(langCode: string) {
+  const tr = props.translationKey.translations[langCode]
+  if (tr) {
+    historyTranslationId.value = tr.id
+    showHistory.value = true
+  }
+}
+
+const rowActions = computed(() => {
+  const groups: any[] = [
+    [
+      {
+        label: t('translations.history_by_lang', 'History by language'),
+        type: 'label' as const,
+      },
+      ...props.languages.map((lang) => ({
+        label: `${lang.name} (${lang.code})`,
+        icon: 'i-heroicons-clock',
+        disabled: !props.translationKey.translations[lang.code],
+        onSelect: () => viewHistory(lang.code),
+      })),
+    ],
+  ]
+  if (userCanDelete.value) {
+    groups.push([
+      {
+        label: t('translations.delete_key', 'Delete key'),
+        icon: 'i-heroicons-trash',
+        color: 'error' as const,
+        onSelect: deleteKey,
+      },
+    ])
+  }
+  return groups
+})
+
+async function deleteKey() {
+  try {
+    await $fetch(`/api/keys/${props.translationKey.id}`, { method: 'DELETE' })
+    toast.add({ title: t('translations.key_deleted', 'Key deleted'), color: 'success' })
+    emit('updated')
+    refreshNuxtData('project-stats')
+  } catch (e: any) {
+    toast.add({ title: t('common.error', 'Error'), description: e.data?.message || e.message, color: 'error' })
+  }
+}
+</script>

package/components/dashboard/WidgetConfigModal.vue

@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { WidgetConfig, WidgetDataSource, DataSourceType } from '~/types/dashboard.type'
+import { WIDGET_REGISTRY } from '~/consts/dashboard.const'
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    required: true,
+  },
+  widget: {
+    type: Object as PropType<WidgetConfig | null>,
+    default: null,
+  },
+  index: {
+    type: Number,
+    default: -1,
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'save', value: { dataSource: WidgetDataSource | undefined; title: string | undefined }): void
+}>()
+
+const { t } = useT()
+const { visibleProjects } = useProject()
+
+const draftSource = ref<DataSourceType>('global')
+const draftProjectId = ref<number | undefined>()
+const draftTitle = ref('')
+
+watch(
+  () => props.widget,
+  (w) => {
+    if (!w) return
+    draftSource.value = w.dataSource?.type ?? 'global'
+    draftProjectId.value = w.dataSource?.projectId
+    draftTitle.value = w.title ?? ''
+  },
+  { immediate: true },
+)
+
+const projectItems = computed(() =>
+  visibleProjects.value
+    .filter((p: any) => !p.is_system)
+    .map((p: any) => ({ label: p.name, value: p.id })),
+)
+
+const hasDataSource = computed(() => {
+  if (!props.widget) return false
+  return WIDGET_REGISTRY[props.widget.type].hasDataSource
+})
+
+function save() {
+  const dataSource: WidgetDataSource = draftSource.value === 'project'
+    ? { type: 'project', projectId: draftProjectId.value }
+    : { type: 'global' }
+  emit('save', { dataSource, title: draftTitle.value || undefined })
+  emit('update:open', false)
+}
+</script>
+
+<template>
+  <UModal :open="open" :title="t('dashboard.configure_widget', 'Configure widget')" @update:open="emit('update:open', $event)">
+    <template #body>
+      <div class="space-y-6">
+        <div v-if="hasDataSource" class="space-y-3">
+          <p class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('dashboard.data_source', 'Data source') }}</p>
+          <div class="flex gap-2">
+            <button
+              class="flex-1 px-3 py-2 rounded-lg text-sm font-medium border transition-colors"
+              :class="draftSource === 'global'
+                ? 'bg-primary-500 text-white border-primary-500'
+                : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'"
+              @click="draftSource = 'global'"
+            >
+              Global
+            </button>
+            <button
+              class="flex-1 px-3 py-2 rounded-lg text-sm font-medium border transition-colors"
+              :class="draftSource === 'project'
+                ? 'bg-primary-500 text-white border-primary-500'
+                : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'"
+              @click="draftSource = 'project'"
+            >
+              {{ t('dashboard.specific_project', 'Specific project') }}
+            </button>
+          </div>
+
+          <div v-if="draftSource === 'project'">
+            <USelect
+              v-model="draftProjectId"
+              :items="projectItems"
+              :placeholder="t('dashboard.select_project', 'Select a project')"
+            />
+          </div>
+        </div>
+
+        <div class="space-y-2">
+          <p class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('dashboard.custom_title', 'Custom title') }}</p>
+          <UInput
+            v-model="draftTitle"
+            :placeholder="t('dashboard.default_title', 'Default title')"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton variant="ghost" color="neutral" @click="emit('update:open', false)">
+          {{ t('common.cancel', 'Cancel') }}
+        </UButton>
+        <UButton @click="save">
+          {{ t('common.save', 'Save') }}
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>