@cachly-dev/mcp-server 0.10.48 → 0.10.50

package/apps/travel-chaos-organizer/frontend/app/onboarding.tsx

@@ -0,0 +1,119 @@
+import { useRef, useState } from "react";
+import {
+  Animated, Dimensions, FlatList, StyleSheet, Text,
+  TouchableOpacity, View,
+} from "react-native";
+import { useRouter } from "expo-router";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { haptics } from "../lib/haptics";
+
+const { width } = Dimensions.get("window");
+const ONBOARDING_KEY = "tco_onboarding_done";
+
+const SLIDES = [
+  {
+    icon: "✈️",
+    title: "Reisechaos ade",
+    body: "Alle Buchungen, Tickets und Dokumente an einem Ort — automatisch sortiert.",
+  },
+  {
+    icon: "📸",
+    title: "Einfach scannen",
+    body: "Screenshot machen, PDF teilen oder E-Mail einfügen. KI erkennt alle Details automatisch.",
+  },
+  {
+    icon: "📶",
+    title: "Offline verfügbar",
+    body: "Deine Tickets und QR-Codes sind auch ohne Internet abrufbar — am Gate, im Zug, überall.",
+  },
+  {
+    icon: "🔐",
+    title: "Deine Daten, dein Server",
+    body: "Alles läuft auf deiner eigenen Infrastruktur. Keine Cloud, kein Tracking.",
+  },
+];
+
+export async function isOnboardingDone(): Promise<boolean> {
+  return (await AsyncStorage.getItem(ONBOARDING_KEY)) === "done";
+}
+
+export default function OnboardingScreen() {
+  const router = useRouter();
+  const [index, setIndex] = useState(0);
+  const scrollX = useRef(new Animated.Value(0)).current;
+  const listRef = useRef<FlatList>(null);
+
+  async function next() {
+    await haptics.tap();
+    if (index < SLIDES.length - 1) {
+      listRef.current?.scrollToIndex({ index: index + 1, animated: true });
+      setIndex(index + 1);
+    } else {
+      await finish();
+    }
+  }
+
+  async function finish() {
+    await AsyncStorage.setItem(ONBOARDING_KEY, "done");
+    await haptics.success();
+    router.replace("/(auth)/login");
+  }
+
+  return (
+    <View style={s.container}>
+      <TouchableOpacity style={s.skip} onPress={finish}>
+        <Text style={s.skipText}>Überspringen</Text>
+      </TouchableOpacity>
+
+      <Animated.FlatList
+        ref={listRef}
+        data={SLIDES}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        scrollEnabled={false}
+        onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], { useNativeDriver: false })}
+        keyExtractor={(_, i) => String(i)}
+        renderItem={({ item }) => (
+          <View style={[s.slide, { width }]}>
+            <Text style={s.icon}>{item.icon}</Text>
+            <Text style={s.title}>{item.title}</Text>
+            <Text style={s.body}>{item.body}</Text>
+          </View>
+        )}
+      />
+
+      <View style={s.footer}>
+        <View style={s.dots}>
+          {SLIDES.map((_, i) => {
+            const inputRange = [(i - 1) * width, i * width, (i + 1) * width];
+            const dotWidth = scrollX.interpolate({ inputRange, outputRange: [8, 24, 8], extrapolate: "clamp" });
+            const opacity = scrollX.interpolate({ inputRange, outputRange: [0.3, 1, 0.3], extrapolate: "clamp" });
+            return <Animated.View key={i} style={[s.dot, { width: dotWidth, opacity }]} />;
+          })}
+        </View>
+
+        <TouchableOpacity style={s.button} onPress={next}>
+          <Text style={s.buttonText}>
+            {index < SLIDES.length - 1 ? "Weiter" : "Los geht's"}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  container: { flex: 1, backgroundColor: "#0f0f1a" },
+  skip: { position: "absolute", top: 56, right: 24, zIndex: 10 },
+  skipText: { color: "#4a4a7a", fontSize: 14 },
+  slide: { flex: 1, alignItems: "center", justifyContent: "center", padding: 40, gap: 24 },
+  icon: { fontSize: 88 },
+  title: { fontSize: 30, fontWeight: "800", color: "#fff", textAlign: "center", lineHeight: 36 },
+  body: { fontSize: 16, color: "#8888aa", textAlign: "center", lineHeight: 24, maxWidth: 300 },
+  footer: { padding: 32, gap: 24, alignItems: "center" },
+  dots: { flexDirection: "row", gap: 6, alignItems: "center" },
+  dot: { height: 8, borderRadius: 4, backgroundColor: "#4f46e5" },
+  button: { backgroundColor: "#4f46e5", paddingVertical: 16, borderRadius: 14, width: "100%", alignItems: "center" },
+  buttonText: { color: "#fff", fontSize: 17, fontWeight: "700" },
+});

package/apps/travel-chaos-organizer/frontend/app.config.ts

@@ -0,0 +1,54 @@
+import { ExpoConfig } from "expo/config";
+
+const config: ExpoConfig = {
+  name: "Travel Chaos Organizer",
+  slug: "travel-chaos-organizer",
+  version: "0.1.0",
+  scheme: "tco",
+  runtimeVersion: {
+    policy: "appVersion",
+  },
+  orientation: "portrait",
+  icon: "./assets/icon.png",
+  splash: {
+    image: "./assets/splash.png",
+    backgroundColor: "#0f0f1a",
+  },
+  updates: {
+    url: "https://u.expo.dev/ed92c1f4-4f25-411f-a945-3c77f58d8550",
+    enabled: true,
+    fallbackToCacheTimeout: 3000,
+    checkAutomatically: "ON_LOAD",
+  },
+  ios: {
+    bundleIdentifier: "dev.cachly.tco",
+    supportsTablet: true,
+  },
+  android: {
+    package: "dev.cachly.tco",
+    adaptiveIcon: {
+      foregroundImage: "./assets/adaptive-icon.png",
+      backgroundColor: "#0f0f1a",
+    },
+  },
+  plugins: [
+    "expo-router",
+    "expo-sqlite",
+    "expo-updates",
+    ["expo-image-picker", { photosPermission: "Allow TCO to access your photos for travel document scanning." }],
+    ["expo-document-picker", {}],
+    [
+      "expo-notifications",
+      {
+        icon: "./assets/icon.png",
+        color: "#4f46e5",
+        sounds: [],
+      },
+    ],
+  ],
+  extra: {
+    eas: { projectId: "ed92c1f4-4f25-411f-a945-3c77f58d8550" },
+  },
+};
+
+export default config;

package/apps/travel-chaos-organizer/frontend/assets/adaptive-icon.svg

@@ -0,0 +1,66 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">
+  <defs>
+    <radialGradient id="glow" cx="50%" cy="43%" r="27%" fx="50%" fy="43%">
+      <stop offset="0%" stop-color="#4f46e5" stop-opacity="0.25"/>
+      <stop offset="100%" stop-color="#4f46e5" stop-opacity="0"/>
+    </radialGradient>
+    <filter id="planeShadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="8" stdDeviation="16" flood-color="#4f46e5" flood-opacity="0.4"/>
+    </filter>
+  </defs>
+
+  <!-- Radial glow behind plane -->
+  <ellipse cx="512" cy="440" rx="300" ry="280" fill="url(#glow)"/>
+
+  <!-- Paper plane group, centered ~(512, 420) -->
+  <g filter="url(#planeShadow)">
+    <!-- Main wing body -->
+    <polygon
+      points="192,540 512,270 832,420 512,480"
+      fill="#ffffff"
+      opacity="0.97"
+    />
+    <!-- Lower wing / tail -->
+    <polygon
+      points="192,540 512,480 400,620"
+      fill="#c7c4f0"
+      opacity="0.85"
+    />
+    <!-- Nose crease highlight -->
+    <polygon
+      points="512,270 832,420 512,380"
+      fill="#e8e6ff"
+      opacity="0.6"
+    />
+    <!-- Tail fold accent -->
+    <polygon
+      points="400,620 512,480 512,560"
+      fill="#9d9ae8"
+      opacity="0.7"
+    />
+  </g>
+
+  <!-- TCO text -->
+  <text
+    x="512"
+    y="692"
+    font-family="system-ui, -apple-system, sans-serif"
+    font-size="140"
+    font-weight="700"
+    fill="#ffffff"
+    text-anchor="middle"
+    letter-spacing="12"
+  >TCO</text>
+
+  <!-- Subtitle text -->
+  <text
+    x="512"
+    y="778"
+    font-family="system-ui, -apple-system, sans-serif"
+    font-size="52"
+    font-weight="400"
+    fill="#6666aa"
+    text-anchor="middle"
+    letter-spacing="3"
+  >Travel Chaos Organizer</text>
+</svg>

package/apps/travel-chaos-organizer/frontend/assets/icon.svg

@@ -0,0 +1,79 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">
+  <defs>
+    <radialGradient id="glow" cx="50%" cy="43%" r="27%" fx="50%" fy="43%">
+      <stop offset="0%" stop-color="#4f46e5" stop-opacity="0.25"/>
+      <stop offset="100%" stop-color="#4f46e5" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="bgGlow" cx="50%" cy="50%" r="60%">
+      <stop offset="0%" stop-color="#1a1535"/>
+      <stop offset="100%" stop-color="#0f0f1a"/>
+    </radialGradient>
+    <filter id="planeShadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="8" stdDeviation="16" flood-color="#4f46e5" flood-opacity="0.4"/>
+    </filter>
+  </defs>
+
+  <!-- Background -->
+  <rect width="1024" height="1024" rx="220" fill="url(#bgGlow)"/>
+
+  <!-- Subtle top highlight -->
+  <rect width="1024" height="1024" rx="220" fill="url(#bgGlow)" opacity="0"/>
+
+  <!-- Accent border glow -->
+  <rect width="1024" height="1024" rx="220" fill="none" stroke="#4f46e5" stroke-width="2" stroke-opacity="0.15"/>
+
+  <!-- Radial glow behind plane -->
+  <ellipse cx="512" cy="440" rx="300" ry="280" fill="url(#glow)"/>
+
+  <!-- Paper plane group, centered ~(512, 420) -->
+  <g filter="url(#planeShadow)">
+    <!-- Main wing body: large right-pointing shape -->
+    <polygon
+      points="192,540 512,270 832,420 512,480"
+      fill="#ffffff"
+      opacity="0.97"
+    />
+    <!-- Lower wing / tail -->
+    <polygon
+      points="192,540 512,480 400,620"
+      fill="#c7c4f0"
+      opacity="0.85"
+    />
+    <!-- Nose crease highlight -->
+    <polygon
+      points="512,270 832,420 512,380"
+      fill="#e8e6ff"
+      opacity="0.6"
+    />
+    <!-- Tail fold accent -->
+    <polygon
+      points="400,620 512,480 512,560"
+      fill="#9d9ae8"
+      opacity="0.7"
+    />
+  </g>
+
+  <!-- TCO text -->
+  <text
+    x="512"
+    y="692"
+    font-family="system-ui, -apple-system, sans-serif"
+    font-size="140"
+    font-weight="700"
+    fill="#ffffff"
+    text-anchor="middle"
+    letter-spacing="12"
+  >TCO</text>
+
+  <!-- Subtitle text -->
+  <text
+    x="512"
+    y="778"
+    font-family="system-ui, -apple-system, sans-serif"
+    font-size="52"
+    font-weight="400"
+    fill="#6666aa"
+    text-anchor="middle"
+    letter-spacing="3"
+  >Travel Chaos Organizer</text>
+</svg>

package/apps/travel-chaos-organizer/frontend/assets/splash.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1284" height="2778" viewBox="0 0 1284 2778">
+  <rect width="1284" height="2778" fill="#0f0f1a"/>
+  <radialGradient id="g" cx="642" cy="1389" r="400" gradientUnits="userSpaceOnUse">
+    <stop offset="0" stop-color="#4f46e5" stop-opacity="0.25"/>
+    <stop offset="1" stop-color="#4f46e5" stop-opacity="0"/>
+  </radialGradient>
+  <circle cx="642" cy="1389" r="400" fill="url(#g)"/>
+  <g transform="translate(642,1330)">
+    <polygon points="-110,-80 160,0 -110,80 -40,0" fill="#ffffff"/>
+    <polygon points="-110,80 -40,0 -110,20" fill="#a5b4fc"/>
+    <polygon points="-110,-80 -40,0 20,-60" fill="#e0e7ff" opacity="0.6"/>
+  </g>
+  <text x="642" y="1510" font-family="system-ui,-apple-system,sans-serif" font-size="120" font-weight="700" fill="#ffffff" text-anchor="middle" letter-spacing="12">TCO</text>
+  <text x="642" y="1590" font-family="system-ui,-apple-system,sans-serif" font-size="40" fill="#6666aa" text-anchor="middle" letter-spacing="3">Travel Chaos Organizer</text>
+</svg>

package/apps/travel-chaos-organizer/frontend/components/BottomSheet.tsx

@@ -0,0 +1,102 @@
+/**
+ * Native-feel bottom sheet — replaces Modal for most action sheets.
+ * Animated slide-up, backdrop tap to dismiss, safe-area aware.
+ */
+import { ReactNode, useEffect, useRef } from "react";
+import {
+  Animated, Dimensions, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+const { height: SCREEN_HEIGHT } = Dimensions.get("window");
+
+type Props = {
+  visible: boolean;
+  onClose: () => void;
+  children?: ReactNode;
+  /** Sheet takes up this fraction of screen height (default 0.5) */
+  heightFraction?: number;
+  /** Set true when sheet contains text inputs so keyboard doesn't cover them */
+  hasInputs?: boolean;
+};
+
+export default function BottomSheet({ visible, onClose, children, heightFraction = 0.5, hasInputs = false }: Props) {
+  const insets = useSafeAreaInsets();
+  const translateY = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
+  const backdropOpacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (visible) {
+      Animated.parallel([
+        Animated.spring(translateY, { toValue: 0, useNativeDriver: true, damping: 20, stiffness: 200 }),
+        Animated.timing(backdropOpacity, { toValue: 1, duration: 200, useNativeDriver: true }),
+      ]).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(translateY, { toValue: SCREEN_HEIGHT, duration: 250, useNativeDriver: true }),
+        Animated.timing(backdropOpacity, { toValue: 0, duration: 200, useNativeDriver: true }),
+      ]).start();
+    }
+  }, [visible]);
+
+  if (!visible && (translateY as any).__getValue() === SCREEN_HEIGHT) return null;
+
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents={visible ? "auto" : "none"}>
+      <Animated.View style={[s.backdrop, { opacity: backdropOpacity }]}>
+        <Pressable style={StyleSheet.absoluteFill} onPress={onClose} />
+      </Animated.View>
+
+      <Animated.View
+        style={[
+          s.sheet,
+          {
+            height: SCREEN_HEIGHT * heightFraction,
+            paddingBottom: insets.bottom + 16,
+            transform: [{ translateY }],
+          },
+        ]}
+      >
+        <View style={s.handle} />
+        {hasInputs ? (
+          <KeyboardAvoidingView
+            style={{ flex: 1 }}
+            behavior={Platform.OS === "ios" ? "padding" : "height"}
+            keyboardVerticalOffset={16}
+          >
+            <ScrollView
+              keyboardShouldPersistTaps="handled"
+              showsVerticalScrollIndicator={false}
+              contentContainerStyle={{ flexGrow: 1 }}
+            >
+              {children}
+            </ScrollView>
+          </KeyboardAvoidingView>
+        ) : children}
+      </Animated.View>
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  backdrop: { ...StyleSheet.absoluteFillObject, backgroundColor: "#000000bb" },
+  sheet: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: "#1a1a2e",
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    paddingTop: 12,
+    paddingHorizontal: 20,
+  },
+  handle: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: "#3a3a5e",
+    alignSelf: "center",
+    marginBottom: 20,
+  },
+});

package/apps/travel-chaos-organizer/frontend/components/ConfettiCannon.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useRef } from "react";
+import { Animated, Dimensions, StyleSheet, View } from "react-native";
+
+type Props = {
+  visible: boolean;
+};
+
+const COLORS = ["#4f46e5", "#a5b4fc", "#818cf8", "#c7d2fe", "#f59e0b", "#10b981"];
+const COUNT = 24;
+const { width } = Dimensions.get("window");
+
+function rand(min: number, max: number) {
+  return Math.random() * (max - min) + min;
+}
+
+type Particle = {
+  x: Animated.Value;
+  y: Animated.Value;
+  opacity: Animated.Value;
+  scale: Animated.Value;
+  color: string;
+  startX: number;
+};
+
+export default function ConfettiCannon({ visible }: Props) {
+  const particles = useRef<Particle[]>(
+    Array.from({ length: COUNT }, (_, i) => ({
+      x: new Animated.Value(0),
+      y: new Animated.Value(0),
+      opacity: new Animated.Value(0),
+      scale: new Animated.Value(1),
+      color: COLORS[i % COLORS.length],
+      startX: rand(0, width),
+    }))
+  ).current;
+
+  useEffect(() => {
+    if (!visible) return;
+
+    particles.forEach((p) => {
+      p.x.setValue(0);
+      p.y.setValue(0);
+      p.opacity.setValue(1);
+      p.scale.setValue(1);
+    });
+
+    const animations = particles.map((p) => {
+      const duration = rand(900, 1200);
+      const tx = rand(-150, 150);
+      const ty = rand(-300, -50);
+
+      return Animated.parallel([
+        Animated.timing(p.x, { toValue: tx, duration, useNativeDriver: true }),
+        Animated.timing(p.y, { toValue: ty, duration, useNativeDriver: true }),
+        Animated.timing(p.scale, { toValue: 0.3, duration, useNativeDriver: true }),
+        Animated.sequence([
+          Animated.delay(duration * 0.6),
+          Animated.timing(p.opacity, { toValue: 0, duration: duration * 0.4, useNativeDriver: true }),
+        ]),
+      ]);
+    });
+
+    Animated.parallel(animations).start();
+  }, [visible]);
+
+  if (!visible) return null;
+
+  return (
+    <View style={s.container} pointerEvents="none">
+      {particles.map((p, i) => (
+        <Animated.View
+          key={i}
+          style={[
+            s.particle,
+            { backgroundColor: p.color, left: p.startX - 4 },
+            {
+              opacity: p.opacity,
+              transform: [
+                { translateX: p.x },
+                { translateY: p.y },
+                { scale: p.scale },
+              ],
+            },
+          ]}
+        />
+      ))}
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  container: {
+    position: "absolute",
+    bottom: 80,
+    left: 0,
+    right: 0,
+    zIndex: 100,
+    pointerEvents: "none",
+  } as any,
+  particle: {
+    position: "absolute",
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    bottom: 0,
+  },
+});

package/apps/travel-chaos-organizer/frontend/components/ConfirmDialog.tsx

@@ -0,0 +1,109 @@
+import React, { useEffect, useRef } from "react";
+import { Animated, Pressable, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+
+type Action = {
+  label: string;
+  style?: "default" | "cancel" | "destructive";
+  onPress?: () => void;
+};
+
+type Props = {
+  visible: boolean;
+  title: string;
+  message?: string;
+  actions: Action[];
+};
+
+export default function ConfirmDialog({ visible, title, message, actions }: Props) {
+  const opacity = useRef(new Animated.Value(0)).current;
+  const scale = useRef(new Animated.Value(0.92)).current;
+
+  useEffect(() => {
+    if (visible) {
+      Animated.parallel([
+        Animated.timing(opacity, { toValue: 1, duration: 180, useNativeDriver: true }),
+        Animated.spring(scale, { toValue: 1, useNativeDriver: true, damping: 18, stiffness: 280 }),
+      ]).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(opacity, { toValue: 0, duration: 140, useNativeDriver: true }),
+        Animated.timing(scale, { toValue: 0.92, duration: 140, useNativeDriver: true }),
+      ]).start();
+    }
+  }, [visible]);
+
+  if (!visible) return null;
+
+  return (
+    <View style={s.overlay} pointerEvents="box-none">
+      <Pressable style={StyleSheet.absoluteFill} />
+      <Animated.View style={[s.backdrop, { opacity }]} />
+      <Animated.View style={[s.card, { opacity, transform: [{ scale }] }]}>
+        <Text style={s.title}>{title}</Text>
+        {message ? <Text style={s.message}>{message}</Text> : null}
+        <View style={s.actions}>
+          {actions.map((a, i) => (
+            <TouchableOpacity
+              key={i}
+              style={[
+                s.btn,
+                a.style === "destructive" && s.btnDestructive,
+                a.style === "cancel" && s.btnCancel,
+              ]}
+              onPress={a.onPress}
+              activeOpacity={0.75}
+              accessibilityRole="button"
+              accessibilityLabel={a.label}
+            >
+              <Text
+                style={[
+                  s.btnText,
+                  a.style === "destructive" && s.btnTextDestructive,
+                  a.style === "cancel" && s.btnTextCancel,
+                ]}
+              >
+                {a.label}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </Animated.View>
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 9999,
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "#000000bb",
+  },
+  card: {
+    backgroundColor: "#1a1a2e",
+    borderRadius: 20,
+    padding: 24,
+    width: 300,
+    borderWidth: 1,
+    borderColor: "#2a2a4a",
+    gap: 8,
+  },
+  title: { color: "#fff", fontSize: 17, fontWeight: "700" },
+  message: { color: "#9999cc", fontSize: 14, lineHeight: 20 },
+  actions: { flexDirection: "column", gap: 8, marginTop: 8 },
+  btn: {
+    backgroundColor: "#4f46e5",
+    borderRadius: 12,
+    paddingVertical: 12,
+    alignItems: "center",
+  },
+  btnCancel: { backgroundColor: "transparent", borderWidth: 1, borderColor: "#2a2a4a" },
+  btnDestructive: { backgroundColor: "#7f1d1d" },
+  btnText: { color: "#fff", fontWeight: "700", fontSize: 15 },
+  btnTextCancel: { color: "#9999cc" },
+  btnTextDestructive: { color: "#fca5a5" },
+});