kin/web/frontend/src/views/SettingsView.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { api, type Project } from '../api'
import Badge from '../components/Badge.vue'

const { t } = useI18n()

const projects = ref<Project[]>([])
const loading = ref(true)
const error = ref<string | null>(null)

onMounted(async () => {
  try {
    projects.value = await api.projects()
  } catch (e: unknown) {
    error.value = e instanceof Error ? e.message : String(e)
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <div>
    <h1 class="text-xl font-semibold text-gray-100 mb-2">{{ t('settings.title') }}</h1>
    <p class="text-xs text-gray-500 mb-6">{{ t('settings.navigate_hint') }}</p>

    <div v-if="loading" class="text-gray-500 text-sm">{{ t('common.loading') }}</div>
    <div v-else-if="error" class="text-red-400 mb-4">{{ error }}</div>
    <div v-else class="space-y-2">
      <div v-for="project in projects" :key="project.id"
        class="flex items-center justify-between px-4 py-3 border border-gray-700 rounded-lg hover:border-gray-600 transition-colors">
        <div class="flex items-center gap-3 min-w-0">
          <span class="font-medium text-gray-100">{{ project.name }}</span>
          <span class="text-xs text-gray-500 font-mono shrink-0">{{ project.id }}</span>
          <Badge :text="project.status" :color="project.status === 'active' ? 'green' : 'gray'" />
          <span v-if="project.execution_mode" class="text-xs text-gray-500 shrink-0">{{ project.execution_mode }}</span>
        </div>
        <router-link
          :to="{ path: `/project/${project.id}`, query: { tab: 'settings' } }"
          class="px-3 py-1 text-xs bg-gray-800 text-gray-300 border border-gray-700 rounded hover:bg-gray-700 no-underline shrink-0 ml-4">
          {{ t('settings.open_settings') }}
        </router-link>
      </div>
    </div>
  </div>
</template>