i18n-dashboard 0.1.0

package/bin/cli.mjs

@@ -0,0 +1,279 @@
+#!/usr/bin/env node
+import { spawn } from 'child_process'
+import { Command } from 'commander'
+import { existsSync, readFileSync, writeFileSync, unlinkSync } from 'fs'
+import { resolve } from 'path'
+import { tmpdir } from 'os'
+
+import { _dirname } from '../consts/commons.const.ts'
+import { buildEnv, loadUserConfig } from '../utils/config.util.ts'
+
+const packageRoot = resolve(_dirname, '..')
+
+const program = new Command()
+
+program
+    .name('i18n-dashboard')
+    .description('Dashboard to manage vue-i18n translation keys')
+    .version(JSON.parse(readFileSync(resolve(packageRoot, 'package.json'), 'utf-8')).version)
+
+// PID file stored per working directory (hashed to avoid conflicts)
+function getPidFile() {
+    const cwd = process.cwd().replace(/[/\\:]/g, '_')
+    return resolve(tmpdir(), `i18n-dashboard_${cwd}.pid`)
+}
+
+// ── start ──────────────────────────────────────────────────────────────────
+program
+    .command('start')
+    .description('Start the i18n dashboard server')
+    .option('-p, --port <port>', 'Port to listen on (default: 3333)')
+    .option('--host <host>', 'Host to listen on (default: localhost)')
+    .option('-d, --detach', 'Run in background (detached)')
+    .action(async (options) => {
+        const userConfig = await loadUserConfig()
+        const env = buildEnv(userConfig)
+
+        if (options.port) env.I18N_PORT = options.port
+        if (options.host) env.I18N_HOST = options.host
+
+        const port = env.I18N_PORT || '3333'
+        const host = env.I18N_HOST || 'localhost'
+
+        console.log(`\n🌐 Starting vue-i18n-dashboard on http://${host}:${port}`)
+        console.log(`📁 Project root: ${env.I18N_PROJECT_ROOT}\n`)
+
+        const outputDir = resolve(packageRoot, '.output')
+        const isBuilt = existsSync(resolve(outputDir, 'server/index.mjs'))
+
+        let proc
+        if (isBuilt) {
+            proc = spawn('node', [resolve(outputDir, 'server/index.mjs')], {
+                env: { ...env, PORT: port, HOST: host },
+                stdio: options.detach ? 'ignore' : 'inherit',
+                cwd: packageRoot,
+                detached: options.detach || false,
+            })
+        } else {
+            proc = spawn('npx', ['nuxt', 'dev', '--port', port, '--host', host], {
+                env,
+                stdio: options.detach ? 'ignore' : 'inherit',
+                cwd: packageRoot,
+                detached: options.detach || false,
+            })
+        }
+
+        // Save PID for stop command
+        const pidFile = getPidFile()
+        writeFileSync(pidFile, String(proc.pid))
+
+        if (options.detach) {
+            proc.unref()
+            console.log(`✅ Dashboard started in background (PID: ${proc.pid})`)
+            console.log(`   Stop it with: vue-i18n-dashboard stop\n`)
+        } else {
+            proc.on('exit', (code) => {
+                if (existsSync(pidFile)) unlinkSync(pidFile)
+                process.exit(code ?? 0)
+            })
+            // Clean up PID on SIGINT
+            process.on('SIGINT', () => {
+                if (existsSync(pidFile)) unlinkSync(pidFile)
+                proc.kill('SIGINT')
+            })
+        }
+    })
+
+// ── stop ───────────────────────────────────────────────────────────────────
+program
+    .command('stop')
+    .description('Stop the i18n dashboard server')
+    .option('-p, --port <port>', 'Port the server is running on (default: 3333)')
+    .action(async (options) => {
+        const pidFile = getPidFile()
+
+        if (existsSync(pidFile)) {
+            const pid = parseInt(readFileSync(pidFile, 'utf-8').trim())
+            try {
+                process.kill(pid, 'SIGTERM')
+                unlinkSync(pidFile)
+                console.log(`\n✅ Dashboard stopped (PID: ${pid})\n`)
+            } catch (e) {
+                if (e.code === 'ESRCH') {
+                    console.log('\nProcess was already stopped.')
+                } else {
+                    console.error('Could not stop process:', e.message)
+                }
+                if (existsSync(pidFile)) unlinkSync(pidFile)
+            }
+            return
+        }
+
+        // Fallback: try to kill by port using lsof (macOS/Linux)
+        const port = options.port || process.env.I18N_PORT || '3333'
+        console.log(`\nNo PID file found. Trying to find process on port ${port}...`)
+        const lsof = spawn('lsof', ['-ti', `tcp:${port}`], { stdio: ['ignore', 'pipe', 'ignore'] })
+        let pids = ''
+        lsof.stdout.on('data', (d) => { pids += d.toString() })
+        lsof.on('close', () => {
+            const found = pids.trim().split('\n').filter(Boolean)
+            if (!found.length) {
+                console.log('No dashboard process found on that port.\n')
+                return
+            }
+            for (const p of found) {
+                try {
+                    process.kill(parseInt(p), 'SIGTERM')
+                    console.log(`✅ Killed PID ${p}\n`)
+                } catch (_) {}
+            }
+        })
+    })
+
+// ── build ──────────────────────────────────────────────────────────────────
+program
+    .command('build')
+    .description('Build the dashboard for production (run once after install)')
+    .action(async () => {
+        console.log('\n🔨 Building vue-i18n-dashboard for production...\n')
+        const proc = spawn('npx', ['nuxt', 'build'], {
+            env: process.env,
+            stdio: 'inherit',
+            cwd: packageRoot,
+        })
+        proc.on('exit', (code) => {
+            if (code === 0) {
+                console.log('\n✅ Build complete!')
+                console.log('   Run "vue-i18n-dashboard start" to launch the dashboard.\n')
+            } else {
+                console.error('\n❌ Build failed.\n')
+            }
+            process.exit(code ?? 0)
+        })
+    })
+
+// ── init ───────────────────────────────────────────────────────────────────
+program
+    .command('init')
+    .description('Initialize configuration file interactively')
+    .option('--db <client>', 'Database client: sqlite3 (default), postgresql, mysql')
+    .action(async (options) => {
+        const { createInterface } = await import('readline')
+        const rl = createInterface({ input: process.stdin, output: process.stdout })
+        const question = (q) => new Promise((resolve) => rl.question(q, resolve))
+
+        console.log('\nvue-i18n-dashboard — Initialisation\n')
+
+        const dbClient = options.db || await question('Base de données [sqlite3/postgresql/mysql] (défaut: sqlite3): ') || 'sqlite3'
+        const localesPath = await question('Dossier des locales (défaut: src/locales): ') || 'src/locales'
+        const keySeparator = await question('Séparateur de clés (défaut: .): ') || '.'
+
+        let configContent = `// i18n-dashboard.config.js
+export default {
+  port: 3333,
+  // projectRoot: './',        // Chemin absolu ou relatif vers votre projet Vue
+  localesPath: '${localesPath}',  // Relatif à projectRoot
+  keySeparator: '${keySeparator}',
+  apiPath: '/locale/[lang].json',
+
+`
+
+        if (dbClient === 'sqlite3' || dbClient === 'better-sqlite3') {
+            const dbPath = await question('Chemin de la base SQLite (défaut: ./i18n-dashboard.db): ') || './i18n-dashboard.db'
+            configContent += `  database: {
+    client: 'better-sqlite3',
+    connection: '${dbPath}',
+  },
+
+`
+        } else if (dbClient === 'postgresql' || dbClient === 'pg') {
+            const host = await question('Host PostgreSQL (défaut: localhost): ') || 'localhost'
+            const port = await question('Port PostgreSQL (défaut: 5432): ') || '5432'
+            const user = await question('Utilisateur PostgreSQL: ')
+            const password = await question('Mot de passe PostgreSQL: ')
+            const database = await question('Base de données (défaut: i18n_dashboard): ') || 'i18n_dashboard'
+            configContent += `  database: {
+    client: 'pg',
+    connection: {
+      host: '${host}',
+      port: ${port},
+      user: '${user}',
+      password: '${password}',
+      database: '${database}',
+    },
+  },
+
+`
+        } else if (dbClient === 'mysql' || dbClient === 'mysql2') {
+            const host = await question('Host MySQL (défaut: localhost): ') || 'localhost'
+            const port = await question('Port MySQL (défaut: 3306): ') || '3306'
+            const user = await question('Utilisateur MySQL: ')
+            const password = await question('Mot de passe MySQL: ')
+            const database = await question('Base de données (défaut: i18n_dashboard): ') || 'i18n_dashboard'
+            configContent += `  database: {
+    client: 'mysql2',
+    connection: {
+      host: '${host}',
+      port: ${port},
+      user: '${user}',
+      password: '${password}',
+      database: '${database}',
+    },
+  },
+
+`
+        }
+
+        const googleApiKey = await question('Clé API Google Translate (optionnel, laisser vide pour le tier gratuit): ')
+        if (googleApiKey) {
+            configContent += `  googleTranslate: {
+    apiKey: '${googleApiKey}',
+  },
+
+`
+        }
+
+        configContent += `}`
+
+        writeFileSync(resolve(process.cwd(), 'i18n-dashboard.config.js'), configContent)
+
+        console.log('\n✅ Fichier de configuration créé : i18n-dashboard.config.js')
+        console.log('   Lancez le dashboard avec : vue-i18n-dashboard start\n')
+
+        rl.close()
+    })
+
+// ── sync (CLI shortcut) ────────────────────────────────────────────────────
+program
+    .command('sync')
+    .description('Sync JSON locale files to the database (dashboard must be running)')
+    .option('-p, --port <port>', 'Port the dashboard is running on (default: 3333)')
+    .action(async (options) => {
+        const port = options.port || process.env.I18N_PORT || '3333'
+        console.log(`\nSyncing locale files via http://localhost:${port}...`)
+        try {
+            // We need the project_id — fetch projects first
+            const projectsRes = await fetch(`http://localhost:${port}/api/projects`)
+            const projects = await projectsRes.json()
+            if (!projects?.length) {
+                console.error('No projects found. Add a project first via the dashboard UI.\n')
+                return
+            }
+            // Use the first project (or the one matching CWD)
+            const cwd = process.cwd()
+            const project = projects.find((p) => p.root_path === cwd) || projects[0]
+            console.log(`Using project: ${project.name} (${project.root_path})`)
+
+            const res = await fetch(`http://localhost:${port}/api/sync`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ project_id: project.id }),
+            })
+            const data = await res.json()
+            console.log(`✅ Sync done: ${data.added} ajoutées · ${data.updated} mises à jour · ${data.total} total\n`)
+        } catch (e) {
+            console.error('Could not connect to dashboard. Is it running?\n  vue-i18n-dashboard start\n')
+        }
+    })
+
+program.parse()

package/components/LinkedKeyPicker.vue

@@ -0,0 +1,135 @@
+<template>
+  <UTooltip :text="t('key.link_key_tooltip', 'Link a key (@:key) with optional modifier')">
+    <UButton
+      icon="i-heroicons-link"
+      size="xs"
+      color="neutral"
+      variant="soft"
+      class="shrink-0"
+      @click="openModal"
+    />
+  </UTooltip>
+
+  <UModal v-model:open="open" :title="t('key.link_key_title', 'Link a key')" :ui="{ width: 'sm:max-w-lg' }">
+    <template #body>
+      <div class="space-y-4">
+        <!-- Modifier selector -->
+        <div class="flex gap-1.5 flex-wrap">
+          <button
+            v-for="mod in modifiers"
+            :key="mod.value"
+            class="px-2.5 py-1 rounded-lg border text-xs font-mono transition-colors"
+            :class="selectedModifier === mod.value
+              ? 'bg-violet-50 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300 border-violet-300 dark:border-violet-600'
+              : 'bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 border-gray-200 dark:border-gray-700 hover:border-gray-300'"
+            @click="selectedModifier = mod.value"
+          >
+            {{ mod.syntax }}
+          </button>
+        </div>
+
+        <!-- Search -->
+        <UInput
+          ref="searchInput"
+          v-model="search"
+          icon="i-heroicons-magnifying-glass"
+          :placeholder="t('key.search_placeholder', 'Search for a key...')"
+          class="w-full"
+          @input="onSearch"
+        />
+
+        <!-- Key list -->
+        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+          <div v-if="loading" class="py-8 text-center">
+            <UIcon name="i-heroicons-arrow-path" class="animate-spin text-gray-400 text-lg" />
+          </div>
+          <div v-else-if="!keys.length" class="py-8 text-center text-sm text-gray-400">
+            {{ t('key.none_found', 'No key found') }}
+          </div>
+          <div v-else class="max-h-72 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800">
+            <button
+              v-for="key in keys"
+              :key="key.id"
+              class="w-full text-left px-3 py-2.5 flex items-center justify-between gap-3 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/60 group"
+              @click="selectKey(key.key)"
+            >
+              <span class="text-sm font-mono text-gray-700 dark:text-gray-300 truncate">{{ key.key }}</span>
+              <code class="text-xs text-violet-500 dark:text-violet-400 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+                {{ previewSyntax }}{{ key.key }}
+              </code>
+            </button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+const { t } = useT()
+
+const props = defineProps<{
+  projectId?: number
+}>()
+
+const emit = defineEmits<{
+  select: [value: string]
+}>()
+
+const open = ref(false)
+const search = ref('')
+const loading = ref(false)
+const keys = ref<Array<{ id: number; key: string }>>([])
+const selectedModifier = ref<string>('')
+const searchInput = ref()
+
+const modifiers = computed(() => [
+  { value: '', syntax: '@:key' },
+  { value: 'lower', syntax: '@.lower:key' },
+  { value: 'upper', syntax: '@.upper:key' },
+  { value: 'capitalize', syntax: '@.capitalize:key' },
+])
+
+const previewSyntax = computed(() =>
+  selectedModifier.value ? `@.${selectedModifier.value}:` : '@:',
+)
+
+function openModal() {
+  open.value = true
+  search.value = ''
+  selectedModifier.value = ''
+  fetchKeys()
+  nextTick(() => searchInput.value?.inputRef?.focus())
+}
+
+let searchTimeout: ReturnType<typeof setTimeout>
+function onSearch() {
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(fetchKeys, 200)
+}
+
+async function fetchKeys() {
+  if (!props.projectId) return
+  loading.value = true
+  try {
+    const res = await $fetch<{ data: Array<{ id: number; key: string }> }>('/api/keys', {
+      query: {
+        project_id: props.projectId,
+        search: search.value || undefined,
+        limit: 50,
+        page: 1,
+      },
+    })
+    keys.value = res.data
+  } catch {
+    keys.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+function selectKey(key: string) {
+  emit('select', `${previewSyntax.value}${key}`)
+  open.value = false
+}
+</script>

package/components/PathPicker.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="flex gap-2">
+    <UInput
+      :model-value="modelValue"
+      class="flex-1 font-mono text-sm"
+      :placeholder="placeholder || '/path/to/project'"
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
+    <UButton
+      icon="i-heroicons-folder-open"
+      color="neutral"
+      variant="outline"
+      @click="openBrowser"
+    />
+  </div>
+
+  <UModal v-model:open="open" :title="t('pathpicker.title', 'Select a folder')" :ui="{ width: 'sm:max-w-xl' }">
+    <template #body>
+      <div class="space-y-3">
+
+        <!-- Breadcrumbs + home -->
+        <div class="flex items-center gap-1 flex-wrap min-h-6">
+          <UButton
+            icon="i-heroicons-home"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            @click="browse(data?.home ?? '')"
+          />
+          <template v-for="(crumb, i) in data?.breadcrumbs" :key="crumb.path">
+            <UIcon name="i-heroicons-chevron-right" class="text-gray-400 text-xs shrink-0" />
+            <button
+              class="text-xs px-1.5 py-0.5 rounded transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 font-mono"
+              :class="i === (data?.breadcrumbs.length ?? 0) - 1
+                ? 'text-gray-900 dark:text-white font-semibold'
+                : 'text-gray-500 dark:text-gray-400'"
+              @click="browse(crumb.path)"
+            >
+              {{ crumb.name }}
+            </button>
+          </template>
+        </div>
+
+        <!-- Directory list -->
+        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+          <!-- Up -->
+          <button
+            v-if="data?.parent"
+            class="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/60 border-b border-gray-100 dark:border-gray-800 transition-colors"
+            @click="browse(data.parent)"
+          >
+            <UIcon name="i-heroicons-arrow-up" class="text-gray-400 shrink-0" />
+            <span class="font-mono">../</span>
+          </button>
+
+          <!-- Loading -->
+          <div v-if="loading" class="py-8 text-center">
+            <UIcon name="i-heroicons-arrow-path" class="animate-spin text-gray-400 text-lg" />
+          </div>
+
+          <!-- Empty -->
+          <div v-else-if="!data?.entries.length" class="py-8 text-center text-sm text-gray-400">
+            {{ t('pathpicker.empty', 'No subfolder') }}
+          </div>
+
+          <!-- Entries -->
+          <div v-else class="max-h-72 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800">
+            <button
+              v-for="entry in data.entries"
+              :key="entry.path"
+              class="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-left hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors group"
+              @click="browse(entry.path)"
+            >
+              <UIcon name="i-heroicons-folder" class="text-amber-400 shrink-0" />
+              <span class="font-mono text-gray-700 dark:text-gray-300 flex-1 truncate">{{ entry.name }}</span>
+              <UIcon name="i-heroicons-chevron-right" class="text-gray-300 dark:text-gray-600 shrink-0 group-hover:text-gray-400 transition-colors" />
+            </button>
+          </div>
+        </div>
+
+        <!-- Current selection -->
+        <div class="bg-gray-50 dark:bg-gray-800 rounded-lg px-3 py-2 flex items-center gap-2">
+          <UIcon name="i-heroicons-map-pin" class="text-primary-500 shrink-0 text-sm" />
+          <code class="text-xs font-mono text-gray-700 dark:text-gray-300 flex-1 truncate">{{ data?.current ?? '…' }}</code>
+        </div>
+
+        <p v-if="browseError" class="text-xs text-red-500">{{ browseError }}</p>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton color="neutral" variant="ghost" @click="open = false">
+          {{ t('common.cancel', 'Cancel') }}
+        </UButton>
+        <UButton icon="i-heroicons-check" :disabled="!data?.current" @click="select">
+          {{ t('pathpicker.select', 'Select this folder') }}
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+const { t } = useT()
+
+const props = defineProps<{
+  modelValue: string
+  placeholder?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const open = ref(false)
+const loading = ref(false)
+const browseError = ref('')
+const data = ref<{
+  current: string
+  parent: string | null
+  home: string
+  breadcrumbs: { name: string; path: string }[]
+  entries: { name: string; path: string }[]
+} | null>(null)
+
+async function openBrowser() {
+  open.value = true
+  // Start from modelValue if set, otherwise let the server default to home
+  await browse(props.modelValue || '')
+}
+
+async function browse(path: string) {
+  loading.value = true
+  browseError.value = ''
+  try {
+    data.value = await $fetch('/api/fs/browse', {
+      query: path ? { path } : {},
+    })
+  } catch (e: any) {
+    browseError.value = e?.data?.message ?? 'Cannot browse this path'
+  } finally {
+    loading.value = false
+  }
+}
+
+function select() {
+  if (data.value?.current) {
+    emit('update:modelValue', data.value.current)
+  }
+  open.value = false
+}
+</script>