init

frontend/src/components/StartSeite.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { fetchProjekte } from '../api.js'
+import { usePolling } from '../composables/usePolling.js'
+import ProjektKarte from './ProjektKarte.vue'
+
+defineEmits(['oeffne'])
+
+const projekte = ref([])
+const fehler = ref('')
+
+async function laden() {
+  try {
+    projekte.value = await fetchProjekte()
+    fehler.value = ''
+  } catch (e) {
+    fehler.value = e.message
+  }
+}
+
+const poll = usePolling(laden, () => projekte.value.some((p) => p.scan_laeuft), 3000)
+onMounted(async () => {
+  await laden()
+  poll.start()
+})
+</script>
+
+<template>
+  <p v-if="fehler" class="fehler">{{ fehler }}</p>
+  <p v-else-if="!projekte.length" class="leer">
+    Keine Projekte — Pfade in <code>projekte.txt</code> eintragen (eine Zeile = ein Repo).
+  </p>
+  <div class="liste">
+    <ProjektKarte v-for="p in projekte" :key="p.name" :projekt="p"
+                  @oeffne="$emit('oeffne', p.name)" @aktualisiert="laden(); poll.start()" />
+  </div>
+</template>
+
+<style scoped>
+.liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
+.fehler { color: var(--rot); }
+.leer { color: var(--dezent); }
+</style>