ki integration

2026-08-15 13:43:52 +02:00
parent 82d98bd8cf
commit 9ecb292c26
78 changed files with 12055 additions and 55 deletions
--- a/client/src/app/(tabs)/erstellen.tsx
+++ b/client/src/app/(tabs)/erstellen.tsx
@@ -0,0 +1,91 @@
+import { Ionicons } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { Screen } from '@/components/screen';
+import { useSession } from '@/lib/session';
+import { colors, radius, space, text } from '@/theme/tokens';
+
+/**
+ * Wird in E6 zum Popover über der Tab-Leiste. Bis dahin dieselbe Auswahl als
+ * Screen – die drei Abläufe sind unterschiedlich lang, keiner darf der
+ * Standard werden (app-aufbau.md §3).
+ */
+export default function ErstellenScreen() {
+  const router = useRouter();
+  const { aktiverOrdner } = useSession();
+
+  return (
+    <Screen title="Erstellen">
+      {aktiverOrdner ? (
+        <Text style={s.scope}>
+          Aktiver Ordner: <Text style={s.scopeName}>{aktiverOrdner.name}</Text>
+        </Text>
+      ) : (
+        <Text style={s.scope}>Noch kein Ordner gewählt – im Profil einen anlegen.</Text>
+      )}
+
+      <Eintrag
+        icon="images-outline"
+        titel="Post"
+        text="Kulisse, Produkt und Person wählen, Bilderkette erzeugen."
+        aufDruck={() => router.push('/erstellen/post')}
+      />
+      <Eintrag icon="film-outline" titel="Video" text="Kommt mit E10." gesperrt />
+      <Eintrag
+        icon="cube-outline"
+        titel="Modell"
+        text="Person, Produkt oder Kulisse anlegen."
+        aufDruck={() => router.push('/modell/neu')}
+      />
+      <Eintrag icon="document-outline" titel="Entwürfe" text="Kommt mit E6." gesperrt />
+    </Screen>
+  );
+}
+
+function Eintrag({
+  icon, titel, text: beschreibung, aufDruck, gesperrt,
+}: {
+  icon: keyof typeof Ionicons.glyphMap;
+  titel: string;
+  text: string;
+  aufDruck?: () => void;
+  gesperrt?: boolean;
+}) {
+  return (
+    <Pressable
+      onPress={aufDruck}
+      disabled={gesperrt}
+      accessibilityRole="button"
+      style={({ pressed }) => [s.zeile, gesperrt ? s.aus : null, pressed && !gesperrt ? s.gedrueckt : null]}>
+      <View style={s.icon}>
+        <Ionicons name={icon} size={20} color={gesperrt ? colors.faint : colors.accent} />
+      </View>
+      <View style={s.zeileText}>
+        <Text style={s.zeileTitel}>{titel}</Text>
+        <Text style={s.zeileUnter}>{beschreibung}</Text>
+      </View>
+      {!gesperrt ? <Ionicons name="chevron-forward" size={18} color={colors.faint} /> : null}
+    </Pressable>
+  );
+}
+
+const s = StyleSheet.create({
+  scope: { ...text.label, color: colors.mut },
+  scopeName: { color: colors.txt, fontWeight: '700' },
+  zeile: {
+    flexDirection: 'row', alignItems: 'center', gap: space.lg,
+    backgroundColor: colors.surface,
+    borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: radius.md, padding: space.lg,
+  },
+  aus: { opacity: 0.45 },
+  gedrueckt: { opacity: 0.8 },
+  icon: {
+    width: 38, height: 38, borderRadius: radius.sm,
+    backgroundColor: colors.surface2, alignItems: 'center', justifyContent: 'center',
+  },
+  zeileText: { flex: 1, gap: 2 },
+  zeileTitel: { ...text.body, fontWeight: '600', color: colors.txt },
+  zeileUnter: { ...text.label, color: colors.mut, lineHeight: 18 },
+});