init

frontend/src/App.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { fetchProjekte } from './api.js'
+import SeitenLeiste from './components/SeitenLeiste.vue'
+import FeatureListe from './components/FeatureListe.vue'
+
+const projekte = ref([])
+const aktivesProjekt = ref(null)
+const dunkel = ref(document.documentElement.classList.contains('dark'))
+
+async function ladeProjekte() {
+  projekte.value = await fetchProjekte()
+  // Auswahl verwerfen, wenn das Projekt (z. B. nach Löschen) weg ist
+  if (aktivesProjekt.value && !projekte.value.some(p => p.name === aktivesProjekt.value)) {
+    aktivesProjekt.value = null
+  }
+}
+
+function umbenannt(alt, neu) {
+  if (aktivesProjekt.value === alt) aktivesProjekt.value = neu
+  ladeProjekte()
+}
+
+function wechsleDarkMode() {
+  dunkel.value = !dunkel.value
+  document.documentElement.classList.toggle('dark', dunkel.value)
+  localStorage.setItem('darkMode', dunkel.value)
+}
+
+onMounted(ladeProjekte)
+</script>
+
+<template>
+  <div class="raster">
+    <SeitenLeiste
+      :projekte="projekte"
+      :aktiv="aktivesProjekt"
+      @auswaehlen="aktivesProjekt = $event"
+      @geaendert="ladeProjekte"
+      @umbenannt="umbenannt"
+    >
+      <button class="icon-knopf" :title="dunkel ? 'Hellmodus' : 'Dunkelmodus'" @click="wechsleDarkMode">
+        {{ dunkel ? '☀' : '☾' }}
+      </button>
+    </SeitenLeiste>
+
+    <main>
+      <FeatureListe v-if="aktivesProjekt" :projekt="aktivesProjekt" @geaendert="ladeProjekte" />
+      <p v-else class="leer">Projekt wählen oder anlegen.</p>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.raster {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  min-height: 100vh;
+}
+main {
+  padding: 1.2rem 1.5rem;
+  min-width: 0;
+}
+.leer {
+  color: var(--dezent);
+  margin-top: 3rem;
+  text-align: center;
+}
+</style>