i18n-dashboard 0.1.0

package/components/dashboard/WidgetGrid.vue

@@ -0,0 +1,190 @@
+<script lang="ts" setup>
+import type { WidgetType } from '~/types/dashboard.type'
+import { WIDGET_REGISTRY, WIDGET_SIZE_CLASSES } from '~/consts/dashboard.const'
+
+const { t } = useT()
+const { currentUser } = useAuth()
+const {
+  layout,
+  editing,
+  localLayout,
+  saving,
+  startEditing,
+  cancelEditing,
+  saveLayout,
+  onDragStart,
+  onDragOver,
+  onDragEnd,
+  removeWidget,
+  addWidget,
+  resizeWidget,
+  updateWidgetConfig,
+} = useDashboard()
+
+const showPicker = ref(false)
+const configIndex = ref(-1)
+
+const activeLayout = computed(() => editing.value ? localLayout.value : layout.value)
+
+function sizeClass(size: string) {
+  return WIDGET_SIZE_CLASSES[size as keyof typeof WIDGET_SIZE_CLASSES] ?? 'col-span-1 row-span-1'
+}
+
+function widgetComponent(type: WidgetType) {
+  switch (type) {
+    case 'stat-keys':
+    case 'stat-coverage':
+    case 'stat-languages':
+    case 'stat-unused':
+      return resolveComponent('DashboardWidgetsStatWidget')
+    case 'projects':
+      return resolveComponent('DashboardWidgetsProjectsWidget')
+    case 'languages-coverage':
+      return resolveComponent('DashboardWidgetsLanguagesCoverageWidget')
+    case 'last-activity':
+      return resolveComponent('DashboardWidgetsActivityWidget')
+    case 'review-queue':
+      return resolveComponent('DashboardWidgetsReviewWidget')
+    default:
+      return 'div'
+  }
+}
+
+function onAddWidget(widget: Parameters<typeof addWidget>[0]) {
+  addWidget(widget)
+}
+
+function onSaveConfig(patch: { dataSource?: any; title?: string | undefined }) {
+  updateWidgetConfig(configIndex.value, patch)
+  configIndex.value = -1
+}
+</script>
+
+<template>
+  <div>
+    <div class="flex items-center justify-between mb-6">
+      <div>
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+          {{ t('dashboard.hello', 'Hello') }}{{ currentUser?.name ? `, ${currentUser.name}` : '' }}
+        </h1>
+        <p class="text-gray-500 dark:text-gray-400 mt-0.5 text-sm">{{ t('dashboard.title', 'Dashboard') }}</p>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <UButton
+          v-if="!editing"
+          variant="ghost"
+          color="neutral"
+          icon="i-heroicons-pencil-square"
+          @click="startEditing"
+        >
+          {{ t('dashboard.edit', 'Edit') }}
+        </UButton>
+        <template v-else>
+          <UButton variant="ghost" color="neutral" @click="cancelEditing">
+            {{ t('common.cancel', 'Cancel') }}
+          </UButton>
+          <UButton
+            icon="i-heroicons-plus"
+            variant="outline"
+            color="neutral"
+            @click="showPicker = true"
+          >
+            {{ t('common.add', 'Add') }}
+          </UButton>
+          <UButton :loading="saving" icon="i-heroicons-check" @click="saveLayout">
+            {{ t('dashboard.done', 'Done') }}
+          </UButton>
+        </template>
+      </div>
+    </div>
+
+    <div
+      v-if="activeLayout.length === 0"
+      class="border border-dashed border-gray-300 dark:border-gray-700 rounded-xl p-16 text-center"
+    >
+      <UIcon name="i-heroicons-squares-2x2" class="text-5xl text-gray-300 dark:text-gray-600 mb-3" />
+      <p class="text-gray-400 font-medium">{{ t('dashboard.no_widgets', 'No widgets') }}</p>
+      <UButton v-if="editing" class="mt-4" icon="i-heroicons-plus" @click="showPicker = true">
+        {{ t('dashboard.add_widget', 'Add a widget') }}
+      </UButton>
+    </div>
+
+    <div
+      v-else
+      class="grid grid-cols-4 gap-4 auto-rows-[minmax(140px,auto)]"
+    >
+      <div
+        v-for="(widget, index) in activeLayout"
+        :key="widget.id"
+        :class="[sizeClass(widget.size), 'relative', editing ? 'cursor-grab' : '']"
+        :draggable="editing"
+        @dragstart="onDragStart(index)"
+        @dragover="onDragOver($event, index)"
+        @dragend="onDragEnd"
+      >
+        <button
+          v-if="editing"
+          class="absolute -top-2 -left-2 z-10 w-5 h-5 bg-red-500 rounded-full text-white flex items-center justify-center text-xs shadow-sm hover:bg-red-600 transition-colors"
+          @click.stop="removeWidget(index)"
+        >
+          ×
+        </button>
+
+        <div v-if="editing" class="absolute -top-2 right-0 z-10 flex gap-0.5">
+          <button
+            v-for="s in WIDGET_REGISTRY[widget.type].sizes"
+            :key="s"
+            class="px-1 py-0.5 text-xs rounded shadow-sm transition-colors"
+            :class="widget.size === s
+              ? 'bg-primary-500 text-white'
+              : 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'"
+            @click.stop="resizeWidget(index, s)"
+          >
+            {{ s }}
+          </button>
+        </div>
+
+        <button
+          v-if="editing && WIDGET_REGISTRY[widget.type].hasDataSource"
+          class="absolute bottom-1 right-1 z-10 w-6 h-6 bg-gray-600/80 dark:bg-gray-400/80 rounded-full text-white flex items-center justify-center text-xs hover:bg-gray-700 transition-colors"
+          @click.stop="configIndex = index"
+        >
+          <UIcon name="i-heroicons-cog-6-tooth" class="text-xs" />
+        </button>
+
+        <div :class="editing ? 'animate-wiggle h-full' : 'h-full'">
+          <component
+            :is="widgetComponent(widget.type)"
+            :id="widget.id"
+            :type="widget.type"
+            :size="widget.size"
+            :editing="editing"
+            :data-source="widget.dataSource"
+            :title="widget.title"
+          />
+        </div>
+      </div>
+    </div>
+
+    <DashboardWidgetPicker v-model="showPicker" @add="onAddWidget" />
+
+    <DashboardWidgetConfigModal
+      :open="configIndex !== -1"
+      :widget="configIndex !== -1 ? activeLayout[configIndex] : null"
+      :index="configIndex"
+      @update:open="val => { if (!val) configIndex = -1 }"
+      @save="onSaveConfig"
+    />
+  </div>
+</template>
+
+<style scoped>
+@keyframes wiggle {
+  0%, 100% { transform: rotate(-0.5deg); }
+  50% { transform: rotate(0.5deg); }
+}
+.animate-wiggle {
+  animation: wiggle 0.4s ease-in-out infinite;
+}
+</style>

package/components/dashboard/WidgetPicker.vue

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import type { WidgetConfig, WidgetSize } from '~/types/dashboard.type'
+import { WIDGET_REGISTRY } from '~/consts/dashboard.const'
+
+const { t } = useT()
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'add': [widget: WidgetConfig]
+}>()
+
+const open = computed({
+  get: () => props.modelValue,
+  set: (v) => emit('update:modelValue', v),
+})
+
+const selectedSizes = ref<Record<string, WidgetSize>>({})
+
+function getSelectedSize(type: string): WidgetSize {
+  return selectedSizes.value[type] ?? WIDGET_REGISTRY[type as keyof typeof WIDGET_REGISTRY].defaultSize
+}
+
+function addWidget(type: string) {
+  const size = getSelectedSize(type)
+  const id = Date.now().toString(36)
+  emit('add', { id, type: type as WidgetConfig['type'], size })
+  open.value = false
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" :title="t('dashboard.add_widget', 'Add a widget')" :ui="{ width: 'max-w-2xl' }">
+    <template #body>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 p-1">
+        <div
+          v-for="(config, type) in WIDGET_REGISTRY"
+          :key="type"
+          class="border border-gray-200 dark:border-gray-700 rounded-xl p-4 space-y-3 hover:border-primary-300 dark:hover:border-primary-600 transition-colors"
+        >
+          <div class="flex items-start gap-3">
+            <div class="w-9 h-9 rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center shrink-0">
+              <UIcon :name="config.icon" class="text-gray-600 dark:text-gray-400" />
+            </div>
+            <div class="min-w-0">
+              <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ config.label }}</p>
+              <p class="text-xs text-gray-400 mt-0.5">{{ config.description }}</p>
+            </div>
+          </div>
+
+          <div class="flex items-center gap-1.5 flex-wrap">
+            <button
+              v-for="s in config.sizes"
+              :key="s"
+              class="px-2 py-0.5 text-xs rounded-md border transition-colors"
+              :class="getSelectedSize(type) === s
+                ? 'bg-primary-500 border-primary-500 text-white'
+                : 'bg-transparent border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:border-primary-400'"
+              @click="selectedSizes[type] = s"
+            >
+              {{ s }}
+            </button>
+          </div>
+
+          <UButton size="xs" variant="soft" class="w-full justify-center" @click="addWidget(type)">
+            {{ t('common.add', 'Add') }}
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/components/dashboard/widgets/ActivityWidget.vue

@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { WidgetSize, WidgetDataSource } from '~/types/dashboard.type'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  size: {
+    type: String as PropType<WidgetSize>,
+    required: true,
+  },
+  editing: {
+    type: Boolean,
+    required: true,
+  },
+  dataSource: {
+    type: Object as PropType<WidgetDataSource | undefined>,
+    default: undefined,
+  },
+  title: {
+    type: String as PropType<string | undefined>,
+    default: undefined,
+  },
+})
+
+const { t } = useT()
+
+const { stats, pending, sourceLabel, hasProject } = useWidgetData(
+  props.id,
+  computed(() => props.dataSource),
+)
+
+const maxItems = computed(() => {
+  if (props.size === 'lg') return 10
+  if (props.size === 'wide') return 8
+  return 5
+})
+
+const displayedActivity = computed(() => (stats.value?.recentActivity ?? []).slice(0, maxItems.value))
+
+const displayTitle = computed(() => props.title || t('dashboard.recent_activity', 'Recent activity'))
+
+function formatRelative(date: string) {
+  const diff = Date.now() - new Date(date).getTime()
+  const min = Math.floor(diff / 60000)
+  if (min < 1) return t('common.just_now', 'just now')
+  if (min < 60) return `${min}min ${t('common.ago', 'ago')}`
+  const h = Math.floor(min / 60)
+  if (h < 24) return `${h}h ${t('common.ago', 'ago')}`
+  return `${Math.floor(h / 24)}d ${t('common.ago', 'ago')}`
+}
+
+function activityIcon(changedBy: string) {
+  if (changedBy === 'google-translate') return 'i-heroicons-sparkles'
+  if (changedBy === 'sync') return 'i-heroicons-arrow-path'
+  return 'i-heroicons-pencil'
+}
+</script>
+
+<template>
+  <UCard class="h-full overflow-hidden">
+    <template #header>
+      <div class="flex items-center gap-2">
+        <UIcon name="i-heroicons-clock" class="text-gray-400" />
+        <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ displayTitle }}</span>
+        <span v-if="sourceLabel" class="ml-auto text-xs text-gray-400 dark:text-gray-500">{{ sourceLabel }}</span>
+      </div>
+    </template>
+
+    <div v-if="pending" class="space-y-2">
+      <USkeleton v-for="i in 4" :key="i" class="h-8 w-full" />
+    </div>
+
+    <div v-else-if="!hasProject" class="flex flex-col items-center justify-center h-full py-6 text-center">
+      <UIcon name="i-heroicons-clock" class="text-3xl text-gray-300 dark:text-gray-600 mb-2" />
+      <p class="text-sm text-gray-400">{{ t('dashboard.select_project', 'Select a project') }}</p>
+    </div>
+
+    <div v-else-if="!displayedActivity.length" class="flex flex-col items-center justify-center h-full py-6 text-center">
+      <UIcon name="i-heroicons-clock" class="text-3xl text-gray-300 dark:text-gray-600 mb-2" />
+      <p class="text-sm text-gray-400">{{ t('dashboard.no_activity', 'No recent activity') }}</p>
+    </div>
+
+    <div
+      v-else
+      class="overflow-y-auto"
+      :class="size === 'wide' ? 'grid grid-cols-2 gap-x-4 gap-y-2' : 'space-y-2'"
+    >
+      <div
+        v-for="item in displayedActivity"
+        :key="item.id"
+        class="flex items-start gap-2 py-1"
+      >
+        <div class="w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center shrink-0 mt-0.5">
+          <UIcon :name="activityIcon(item.changed_by)" class="text-xs text-gray-500 dark:text-gray-400" />
+        </div>
+        <div class="min-w-0 flex-1">
+          <p class="text-xs font-mono text-gray-700 dark:text-gray-300 truncate">{{ item.key }}</p>
+          <div class="flex items-center gap-1.5 mt-0.5">
+            <UBadge :label="item.language_code.toUpperCase()" color="neutral" variant="soft" size="xs" />
+            <span class="text-xs text-gray-400">{{ formatRelative(item.changed_at) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>

package/components/dashboard/widgets/LanguagesCoverageWidget.vue

@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { WidgetSize, WidgetDataSource } from '~/types/dashboard.type'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  size: {
+    type: String as PropType<WidgetSize>,
+    required: true,
+  },
+  editing: {
+    type: Boolean,
+    required: true,
+  },
+  dataSource: {
+    type: Object as PropType<WidgetDataSource | undefined>,
+    default: undefined,
+  },
+  title: {
+    type: String as PropType<string | undefined>,
+    default: undefined,
+  },
+})
+
+const { t } = useT()
+
+const { stats, pending, sourceLabel, hasProject } = useWidgetData(
+  props.id,
+  computed(() => props.dataSource),
+)
+
+const maxItems = computed(() => {
+  if (props.size === 'lg') return 6
+  if (props.size === 'wide') return 8
+  return 3
+})
+
+const displayedLanguages = computed(() => (stats.value?.languages ?? []).slice(0, maxItems.value))
+
+const displayTitle = computed(() => props.title || t('dashboard.languages_coverage', 'Language coverage'))
+
+function coverageColor(coverage: number) {
+  if (coverage >= 90) return 'bg-green-500'
+  if (coverage >= 60) return 'bg-yellow-400'
+  return 'bg-red-400'
+}
+</script>
+
+<template>
+  <UCard class="h-full overflow-hidden">
+    <template #header>
+      <div class="flex items-center gap-2">
+        <UIcon name="i-heroicons-globe-alt" class="text-gray-400" />
+        <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ displayTitle }}</span>
+        <span v-if="sourceLabel" class="ml-auto text-xs text-gray-400 dark:text-gray-500">{{ sourceLabel }}</span>
+      </div>
+    </template>
+
+    <div v-if="pending" class="space-y-3">
+      <USkeleton v-for="i in 3" :key="i" class="h-8 w-full" />
+    </div>
+
+    <div v-else-if="!hasProject" class="flex flex-col items-center justify-center h-full py-6 text-center">
+      <UIcon name="i-heroicons-globe-alt" class="text-3xl text-gray-300 dark:text-gray-600 mb-2" />
+      <p class="text-sm text-gray-400">{{ t('dashboard.select_project', 'Select a project') }}</p>
+    </div>
+
+    <div v-else-if="!displayedLanguages.length" class="flex flex-col items-center justify-center h-full py-6 text-center">
+      <UIcon name="i-heroicons-globe-alt" class="text-3xl text-gray-300 dark:text-gray-600 mb-2" />
+      <p class="text-sm text-gray-400">{{ t('dashboard.no_languages', 'No language configured') }}</p>
+    </div>
+
+    <div
+      v-else
+      class="overflow-y-auto space-y-3"
+      :class="size === 'wide' ? 'grid grid-cols-2 gap-3 space-y-0' : ''"
+    >
+      <div v-for="lang in displayedLanguages" :key="lang.code" class="space-y-1">
+        <div class="flex items-center justify-between text-xs">
+          <span class="font-medium text-gray-700 dark:text-gray-300">
+            {{ lang.name }}
+            <span class="text-gray-400 ml-1 font-mono">{{ lang.code }}</span>
+          </span>
+          <span class="font-semibold" :class="lang.coverage >= 90 ? 'text-green-600' : lang.coverage >= 60 ? 'text-yellow-500' : 'text-red-500'">
+            {{ lang.coverage }}%
+          </span>
+        </div>
+        <div class="w-full bg-gray-100 dark:bg-gray-800 rounded-full h-1.5">
+          <div
+            class="h-1.5 rounded-full transition-all"
+            :class="coverageColor(lang.coverage)"
+            :style="{ width: `${lang.coverage}%` }"
+          />
+        </div>
+        <p v-if="size !== 'sm'" class="text-xs text-gray-400">
+          {{ lang.translated }} / {{ lang.total }} · {{ lang.missing }} {{ t('dashboard.missing', 'missing') }}
+        </p>
+      </div>
+    </div>
+  </UCard>
+</template>

package/components/dashboard/widgets/ProjectsWidget.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import type { WidgetSize } from '~/types/dashboard.type'
+
+const props = defineProps<{
+  size: WidgetSize
+  editing: boolean
+}>()
+
+const { t } = useT()
+const { visibleProjects, pending } = useProject()
+const router = useRouter()
+
+const maxItems = computed(() => {
+  if (props.size === 'lg') return 6
+  if (props.size === 'wide') return 4
+  return 3
+})
+
+const displayedProjects = computed(() => visibleProjects.value.slice(0, maxItems.value))
+
+function navigate(id: number) {
+  if (props.editing) return
+  router.push(`/projects/${id}`)
+}
+</script>
+
+<template>
+  <UCard class="h-full overflow-hidden">
+    <template #header>
+      <div class="flex items-center gap-2">
+        <UIcon name="i-heroicons-rectangle-stack" class="text-gray-400" />
+        <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ t('nav.projects', 'Projects') }}</span>
+        <UBadge v-if="visibleProjects.length" :label="String(visibleProjects.length)" color="neutral" variant="soft" size="xs" class="ml-auto" />
+      </div>
+    </template>
+
+    <div v-if="pending" class="space-y-2">
+      <USkeleton v-for="i in 3" :key="i" class="h-10 w-full" />
+    </div>
+
+    <div v-else-if="!displayedProjects.length" class="flex flex-col items-center justify-center h-full py-6 text-center">
+      <UIcon name="i-heroicons-folder-open" class="text-3xl text-gray-300 dark:text-gray-600 mb-2" />
+      <p class="text-sm text-gray-400">{{ t('projects.none', 'No project') }}</p>
+    </div>
+
+    <div
+      v-else
+      class="overflow-y-auto"
+      :class="size === 'wide' ? 'grid grid-cols-2 gap-2' : 'space-y-2'"
+    >
+      <button
+        v-for="project in displayedProjects"
+        :key="project.id"
+        class="w-full flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors text-left"
+        :class="{ 'cursor-default': editing }"
+        @click="navigate(project.id)"
+      >
+        <div
+          class="w-8 h-8 rounded-md flex items-center justify-center shrink-0"
+          :class="`bg-${project.color || 'primary'}-100 dark:bg-${project.color || 'primary'}-900/30`"
+        >
+          <UIcon
+            name="i-heroicons-folder"
+            class="text-sm"
+            :class="`text-${project.color || 'primary'}-600`"
+          />
+        </div>
+        <div class="min-w-0 flex-1">
+          <p class="text-sm font-medium text-gray-900 dark:text-white truncate">{{ project.name }}</p>
+          <p class="text-xs text-gray-400">
+            {{ project.key_count ?? 0 }} {{ t('translations.keys_count', 'keys') }} · {{ project.language_count ?? 0 }} {{ t('translations.langs_count', 'languages') }}
+          </p>
+        </div>
+      </button>
+    </div>
+  </UCard>
+</template>