fix(context): add expo-font dependency and fix TypeScript issues

- Add expo-font package for font loading
- Fix various TypeScript type issues in components
- Update i18n utilities

Note: Some TypeScript errors remain and will be addressed in follow-up.

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

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

apps/context/apps/mobile/components/documents/DocumentContent.tsx

@@ -14,6 +14,7 @@ export interface DocumentContentProps {
 	isNewDocument: boolean;
 	autoFocus?: boolean;
 	className?: string;
+	spaceId: string;
 }
 
 /**
@@ -27,6 +28,7 @@ export const DocumentContent: React.FC<DocumentContentProps> = ({
 	isNewDocument,
 	autoFocus = false,
 	className,
+	spaceId,
 }) => {
 	const { isDark } = useTheme();
 	const { width } = useWindowDimensions();
@@ -99,7 +101,7 @@ export const DocumentContent: React.FC<DocumentContentProps> = ({
 		},
 		link: {
 			color: isDark ? '#93c5fd' : '#3b82f6',
-			textDecorationLine: 'underline',
+			textDecorationLine: 'underline' as const,
 		},
 		code_inline: {
 			backgroundColor: isDark ? '#374151' : '#f3f4f6',
@@ -156,6 +158,7 @@ export const DocumentContent: React.FC<DocumentContentProps> = ({
 			>
 				<MentionTextInput
 					ref={textInputRef}
+					spaceId={spaceId}
 					value={content}
 					onChangeText={handleContentChange}
 					placeholder={
@@ -179,7 +182,7 @@ export const DocumentContent: React.FC<DocumentContentProps> = ({
 					// Accessibility
 					accessibilityLabel="Dokumentinhalt bearbeiten"
 					accessibilityHint="Hier können Sie Ihren Dokumentinhalt eingeben und bearbeiten"
-					accessibilityRole="textbox"
+					accessibilityRole="text"
 				/>
 			</View>
 		);

apps/context/apps/mobile/components/documents/DocumentEditor.tsx

@@ -7,8 +7,8 @@ import { DocumentContent } from './DocumentContent';
 import { DocumentToolbar, KeyboardShortcutsInfo } from './DocumentToolbar';
 import { DocumentTagsEditor } from './DocumentTagsEditor';
 import { DocumentHeader } from './DocumentHeader';
-import { VariantCreator } from './VariantCreator';
-import { BottomLLMToolbar } from './BottomLLMToolbar';
+import { VariantCreator } from '~/components/variants/VariantCreator';
+import { BottomLLMToolbar } from '~/components/ai/BottomLLMToolbar';
 import { Text } from '~/components/ui/Text';
 import { Skeleton } from '~/components/ui/Skeleton';
 import { EDITOR_CONFIG } from '~/config/editorConfig';
@@ -257,6 +257,7 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({ spaceId, documen
 								isNewDocument={isNewDocument}
 								autoFocus={isNewDocument && state.mode === 'edit'}
 								className="flex-1"
+								spaceId={spaceId}
 							/>
 						</ScrollView>
 					</View>

apps/context/apps/mobile/components/mentions/MentionTextInput.tsx

@@ -201,13 +201,13 @@ const MentionTextInputBase: ForwardRefRenderFunction<TextInput, MentionTextInput
 		console.log('Berechne Dropdown-Position unter dem Cursor');
 
 		// Versuche, die Position des Cursors zu ermitteln
-		if (inputRef.current) {
+		if (localInputRef.current) {
 			try {
 				// Auf Web-Plattformen können wir die Cursor-Position ermitteln
 				if (Platform.OS === 'web') {
 					// Wir müssen auf die native DOM-Methoden zugreifen
 					// @ts-ignore - Wir wissen, dass wir auf Web sind
-					const input = inputRef.current._reactInternals?.stateNode;
+					const input = localInputRef.current._reactInternals?.stateNode;
 
 					if (input) {
 						// Ermittle die Cursor-Position im Textfeld
@@ -251,7 +251,7 @@ const MentionTextInputBase: ForwardRefRenderFunction<TextInput, MentionTextInput
 
 					// Berechne die Position relativ zum sichtbaren Bereich
 					// @ts-ignore - Wir wissen, dass wir auf Web sind
-					const scrollTop = inputRef.current._reactInternals?.stateNode?.scrollTop || 0;
+					const scrollTop = localInputRef.current._reactInternals?.stateNode?.scrollTop || 0;
 					const verticalOffset = (currentLine - 1) * lineHeight;
 					const cursorTop = verticalOffset - scrollTop + 50; // +50 für Padding und Header
 
@@ -459,8 +459,8 @@ const MentionTextInputBase: ForwardRefRenderFunction<TextInput, MentionTextInput
 		// Fokus auf das Eingabefeld setzen mit einer Verzögerung
 		// Dies ist wichtig, damit der Fokus nach dem Rendern wiederhergestellt wird
 		const refocusInput = () => {
-			if (inputRef.current) {
-				inputRef.current.focus();
+			if (localInputRef.current) {
+				localInputRef.current.focus();
 			} else {
 				// Wenn das Ref noch nicht verfügbar ist, versuche es erneut
 				setTimeout(refocusInput, 10);

apps/context/apps/mobile/components/navigation/Breadcrumbs.tsx

@@ -89,7 +89,8 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
 	};
 
 	const handleItemPress = (index: number, href?: string) => {
-		if (items[index].dropdownItems && items[index].dropdownItems?.length > 0) {
+		const item = items[index];
+		if (item?.dropdownItems && item.dropdownItems.length > 0) {
 			measureItem(index);
 			setActiveDropdown(activeDropdown === index ? null : index);
 		} else if (href) {

apps/context/apps/mobile/components/variants/VariantCreator.tsx

@@ -343,10 +343,11 @@ export const VariantCreator: React.FC<VariantCreatorProps> = ({
 												<Text
 													className={twMerge(
 														'ml-2',
-														vo.selected === option &&
-															(isDark
+														vo.selected === option
+															? isDark
 																? 'text-white font-semibold'
-																: 'text-indigo-800 font-semibold')
+																: 'text-indigo-800 font-semibold'
+															: ''
 													)}
 												>
 													{option}

apps/context/apps/mobile/package.json

@@ -29,6 +29,7 @@
 		"expo-constants": "~17.0.8",
 		"expo-dev-client": "~5.0.4",
 		"expo-dev-launcher": "^5.0.17",
+		"expo-font": "^14.0.10",
 		"expo-linking": "~7.0.5",
 		"expo-localization": "^16.1.6",
 		"expo-router": "~4.0.6",

apps/context/apps/mobile/types/documentEditor.ts

@@ -82,7 +82,7 @@ export function documentEditorReducer(
 				...state,
 				document: action.payload,
 				title: action.payload.title,
-				content: action.payload.content,
+				content: action.payload.content ?? '',
 				tags: action.payload.metadata?.tags || [],
 				unsavedChanges: false,
 			};

apps/context/apps/mobile/utils/debounce.ts

@@ -2,7 +2,7 @@ export function debounce<T extends (...args: any[]) => any>(
 	func: T,
 	wait: number,
 	options?: { leading?: boolean; trailing?: boolean }
-): (...args: Parameters<T>) => void {
+): ((...args: Parameters<T>) => void) & { cancel: () => void } {
 	let timeout: NodeJS.Timeout | null = null;
 	let result: any;
 

apps/context/apps/mobile/utils/i18n.ts

@@ -26,7 +26,8 @@ const resources = {
 // Get device language, fallback to English if not supported
 function getDeviceLanguage(): SupportedLanguage {
 	try {
-		const locale = Localization.locale;
+		const locales = Localization.getLocales();
+		const locale = locales[0]?.languageTag;
 		if (!locale) return 'en';
 
 		const languageCode = locale.split('-')[0] as SupportedLanguage;
@@ -91,11 +92,13 @@ export const isLanguageSupported = (code: string): code is SupportedLanguage =>
 
 // Helper function to get device locale info
 export const getDeviceLocaleInfo = () => {
+	const locales = Localization.getLocales();
+	const calendars = Localization.getCalendars();
 	return {
-		locale: Localization.locale,
-		locales: Localization.locales,
-		timezone: Localization.timezone,
-		isRTL: Localization.isRTL,
-		region: Localization.region,
+		locale: locales[0]?.languageTag,
+		locales: locales.map((l) => l.languageTag),
+		timezone: calendars[0]?.timeZone,
+		isRTL: locales[0]?.textDirection === 'rtl',
+		region: locales[0]?.regionCode,
 	};
 };