feat: Introduce Alerts, Clips, and Settings tabs, update theme colors, and enhance ThemedView, ThemedText, and IconSymbol components.

MobileApp/app/(tabs)/settings.tsx

@@ -0,0 +1,78 @@
+import { StyleSheet } from 'react-native';
+
+import { ThemedText } from '@/components/themed-text';
+import { ThemedView } from '@/components/themed-view';
+import { Colors } from '@/constants/theme';
+import { useColorScheme } from '@/hooks/use-color-scheme';
+
+export default function SettingsScreen() {
+    const colorScheme = useColorScheme();
+    const theme = colorScheme ?? 'light';
+
+    const cardStyle = [
+        styles.card,
+        {
+            shadowColor: Colors[theme].border,
+            borderColor: Colors[theme].border
+        }
+    ];
+
+    return (
+        <ThemedView style={styles.container}>
+            <ThemedView style={styles.header}>
+                <ThemedText type="title">Settings</ThemedText>
+                <ThemedText type="secondary">App preferences</ThemedText>
+            </ThemedView>
+
+            <ThemedView style={styles.sectionHeader}>
+                <ThemedText type="subtitle">Account</ThemedText>
+            </ThemedView>
+            <ThemedView style={cardStyle} variant="card">
+                <ThemedText style={styles.item}>Profile</ThemedText>
+                <ThemedText style={styles.item}>Notifications</ThemedText>
+                <ThemedText style={[styles.item, styles.lastItem]}>Privacy</ThemedText>
+            </ThemedView>
+
+            <ThemedView style={styles.sectionHeader}>
+                <ThemedText type="subtitle">General</ThemedText>
+            </ThemedView>
+            <ThemedView style={cardStyle} variant="card">
+                <ThemedText style={styles.item}>About</ThemedText>
+                <ThemedText style={styles.item}>Help & Support</ThemedText>
+                <ThemedText style={[styles.item, styles.lastItem]}>Sign Out</ThemedText>
+            </ThemedView>
+        </ThemedView>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 20,
+        paddingTop: 80,
+    },
+    header: {
+        marginBottom: 32,
+    },
+    sectionHeader: {
+        marginBottom: 12,
+        marginTop: 24,
+    },
+    card: {
+        borderRadius: 16,
+        borderWidth: 1,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.05,
+        shadowRadius: 8,
+        elevation: 2,
+        overflow: 'hidden',
+    },
+    item: {
+        padding: 16,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: 'rgba(0,0,0,0.05)',
+    },
+    lastItem: {
+        borderBottomWidth: 0,
+    },
+});