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'

const { t } = useI18n()

const projects = ref<Project[]>([])
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)
  }
})
</script>

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

    <div v-if="error" class="text-red-400 mb-4">{{ error }}</div>

    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead>
          <tr class="text-left text-xs text-gray-500 border-b border-gray-800">
            <th class="pb-2 pr-6 font-medium">Name</th>
            <th class="pb-2 pr-6 font-medium font-mono">ID</th>
            <th class="pb-2 pr-6 font-medium">Mode</th>
            <th class="pb-2 pr-6 font-medium">Status</th>
            <th class="pb-2 font-medium"></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="project in projects" :key="project.id" class="border-b border-gray-800 hover:bg-gray-800/30">
            <td class="py-2 pr-6 text-gray-100">{{ project.name }}</td>
            <td class="py-2 pr-6 text-gray-500 font-mono text-xs">{{ project.id }}</td>
            <td class="py-2 pr-6 text-gray-400 text-xs">{{ project.execution_mode ?? '—' }}</td>
            <td class="py-2 pr-6 text-gray-400 text-xs">{{ project.status }}</td>
            <td class="py-2">
              <router-link
                :to="`/project/${project.id}?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"
              >
                {{ t('settings.open_settings') }}
              </router-link>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>