feat(chat): integrate chat project into monorepo with full app structure

- Restructure chat as apps/mobile, apps/web, apps/landing, backend
- Add NestJS backend for secure Azure OpenAI API calls
- Remove exposed API key from mobile app (security fix)
- Add shared chat-types package
- Create SvelteKit web app scaffold
- Create Astro landing page scaffold
- Update pnpm workspace configuration
- Add project-level CLAUDE.md documentation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

chat/apps/mobile/components/ModelCard.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { useTheme } from '@react-navigation/native';
+import { Ionicons } from '@expo/vector-icons';
+import { Model } from '../types';
+
+type ModelCardProps = {
+  id: string;
+  name: string;
+  description: string;
+  deployment?: string;
+  isSelected?: boolean;
+  onSelect: (id: string) => void;
+  model?: Model; // Optionales komplettes Model-Objekt
+};
+
+export default function ModelCard({ 
+  id, 
+  name, 
+  description, 
+  isSelected = false, 
+  onSelect,
+  model
+}: ModelCardProps) {
+  const { colors } = useTheme();
+  const deployment = model?.parameters?.deployment;
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.container,
+        { 
+          backgroundColor: colors.card,
+          borderColor: isSelected ? colors.primary : 'transparent',
+        }
+      ]}
+      onPress={() => onSelect(id)}
+    >
+      <View style={styles.iconContainer}>
+        <Ionicons 
+          name="chatbubble-ellipses-outline" 
+          size={24} 
+          color={colors.primary} 
+        />
+      </View>
+      
+      <View style={styles.contentContainer}>
+        <Text style={[styles.name, { color: colors.text }]}>{name}</Text>
+        <Text 
+          style={[styles.description, { color: colors.text + '80' }]}
+          numberOfLines={2}
+        >
+          {description}
+        </Text>
+        
+        {deployment && (
+          <Text 
+            style={[styles.deployment, { color: colors.primary + 'CC' }]}
+            numberOfLines={1}
+          >
+            {deployment}
+          </Text>
+        )}
+      </View>
+      
+      {isSelected && (
+        <View style={[styles.checkmark, { backgroundColor: colors.primary }]}>
+          <Ionicons name="checkmark" size={16} color="#fff" />
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 12,
+    borderWidth: 2,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.05)',
+  },
+  contentContainer: {
+    flex: 1,
+    marginLeft: 16,
+  },
+  name: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 4,
+  },
+  description: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginBottom: 4,
+  },
+  deployment: {
+    fontSize: 12,
+    fontWeight: '500',
+  },
+  checkmark: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});