feat(mobile): add file type selection sheet for creating new files

apps/mobile/v1/eas.json

@@ -7,12 +7,14 @@
     "development": {
       "developmentClient": true,
       "distribution": "internal",
+      "node": "22.12.0",
       "env": {
         "RCT_NEW_ARCH_ENABLED": "0"
       }
     },
     "preview": {
       "distribution": "internal",
+      "node": "22.12.0",
       "env": {
         "RCT_NEW_ARCH_ENABLED": "1",
         "SENTRY_ORG": "bata-labs",
@@ -21,6 +23,7 @@
     },
     "production": {
       "autoIncrement": true,
+      "node": "22.12.0",
       "env": {
         "RCT_NEW_ARCH_ENABLED": "1",
         "SENTRY_ORG": "bata-labs",

apps/mobile/v1/package.json

@@ -1,7 +1,7 @@
 {
   "name": "v1",
   "main": "index.js",
-  "version": "1.45.2",
+  "version": "1.45.4",
   "scripts": {
     "start": "expo start",
     "reset-project": "node ./scripts/reset-project.js",

apps/mobile/v1/src/components/CreateFileSheet.tsx

@@ -0,0 +1,258 @@
+import { Ionicons } from '@expo/vector-icons';
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetScrollView,
+} from '@gorhom/bottom-sheet';
+import { GlassView } from 'expo-glass-effect';
+import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { Alert, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { MdiIcon, mdiCodeTags, mdiFileDocumentOutline, mdiFileTableBoxOutline, mdiTextBoxOutline, mdiVectorSquare } from './MdiIcon';
+import { useTheme } from '../theme';
+
+export interface CreateFileSheetRef {
+  present: () => void;
+  dismiss: () => void;
+}
+
+interface CreateFileSheetProps {
+  onCreateNote: () => void;
+}
+
+interface FileTypeOption {
+  id: 'note' | 'sheet' | 'diagram' | 'code' | 'document';
+  title: string;
+  subtitle: string;
+  iconPath: string;
+  iconColor: string;
+  available: boolean;
+}
+
+const FILE_TYPES: FileTypeOption[] = [
+  {
+    id: 'note',
+    title: 'Note',
+    subtitle: 'Write with rich text formatting',
+    iconPath: mdiTextBoxOutline,
+    iconColor: '#f43f5e',
+    available: true,
+  },
+  {
+    id: 'sheet',
+    title: 'Spreadsheet',
+    subtitle: 'Create tables and calculations',
+    iconPath: mdiFileTableBoxOutline,
+    iconColor: '#22c55e',
+    available: false,
+  },
+  {
+    id: 'diagram',
+    title: 'Diagram',
+    subtitle: 'Draw flowcharts and diagrams',
+    iconPath: mdiVectorSquare,
+    iconColor: '#a855f7',
+    available: false,
+  },
+  {
+    id: 'code',
+    title: 'Code',
+    subtitle: 'Write and save code snippets',
+    iconPath: mdiCodeTags,
+    iconColor: '#f59e0b',
+    available: false,
+  },
+  {
+    id: 'document',
+    title: 'Document',
+    subtitle: 'Long-form writing with pages',
+    iconPath: mdiFileDocumentOutline,
+    iconColor: '#3b82f6',
+    available: false,
+  },
+];
+
+export const CreateFileSheet = forwardRef<CreateFileSheetRef, CreateFileSheetProps>(
+  ({ onCreateNote }, ref) => {
+    const theme = useTheme();
+    const insets = useSafeAreaInsets();
+    const sheetRef = useRef<BottomSheetModal>(null);
+
+    useImperativeHandle(ref, () => ({
+      present: () => sheetRef.current?.present(),
+      dismiss: () => sheetRef.current?.dismiss(),
+    }));
+
+    const renderBackdrop = useCallback(
+      (props: BottomSheetBackdropProps) => (
+        <BottomSheetBackdrop
+          {...props}
+          disappearsOnIndex={-1}
+          appearsOnIndex={0}
+          opacity={0.3}
+        />
+      ),
+      []
+    );
+
+    const handleSelect = (option: FileTypeOption) => {
+      if (!option.available) {
+        Alert.alert('Coming Soon', `${option.title} creation is coming in a future update. Stay tuned!`);
+        return;
+      }
+
+      sheetRef.current?.dismiss();
+
+      if (option.id === 'note') {
+        onCreateNote();
+      }
+    };
+
+    return (
+      <BottomSheetModal
+        ref={sheetRef}
+        backdropComponent={renderBackdrop}
+        backgroundStyle={{ backgroundColor: theme.colors.card }}
+        handleIndicatorStyle={{ backgroundColor: theme.colors.border }}
+        enableDynamicSizing={true}
+        enablePanDownToClose={true}
+        maxDynamicContentSize={600}
+      >
+        <BottomSheetScrollView style={styles.container}>
+          <View style={styles.header}>
+            <Text style={[styles.title, { color: theme.colors.foreground }]}>
+              Create New
+            </Text>
+            <GlassView
+              glassEffectStyle="regular"
+              style={[
+                styles.glassButton,
+                { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)' },
+              ]}
+            >
+              <TouchableOpacity
+                style={styles.closeButton}
+                onPress={() => sheetRef.current?.dismiss()}
+              >
+                <Ionicons name="close" size={20} color={theme.colors.foreground} />
+              </TouchableOpacity>
+            </GlassView>
+          </View>
+
+          <View style={[styles.divider, { backgroundColor: theme.colors.border }]} />
+
+          <View style={[styles.optionsContainer, { paddingBottom: Math.max(insets.bottom, 20) }]}>
+            {FILE_TYPES.map((option) => (
+              <TouchableOpacity
+                key={option.id}
+                style={[
+                  styles.optionItem,
+                  {
+                    backgroundColor: theme.colors.card,
+                    borderColor: theme.colors.border,
+                    opacity: option.available ? 1 : 0.5,
+                  },
+                ]}
+                onPress={() => handleSelect(option)}
+                activeOpacity={0.7}
+              >
+                <View style={[styles.optionIcon, { backgroundColor: theme.colors.muted }]}>
+                  <MdiIcon path={option.iconPath} size={24} color={option.iconColor} />
+                </View>
+                <View style={styles.optionText}>
+                  <Text style={[styles.optionTitle, { color: theme.colors.foreground }]}>
+                    {option.title}
+                  </Text>
+                  <Text style={[styles.optionSubtitle, { color: theme.colors.mutedForeground }]}>
+                    {option.subtitle}
+                  </Text>
+                </View>
+                {!option.available && (
+                  <View style={[styles.comingSoonBadge, { backgroundColor: theme.colors.muted }]}>
+                    <Text style={[styles.comingSoonText, { color: theme.colors.mutedForeground }]}>
+                      Soon
+                    </Text>
+                  </View>
+                )}
+              </TouchableOpacity>
+            ))}
+          </View>
+        </BottomSheetScrollView>
+      </BottomSheetModal>
+    );
+  }
+);
+
+CreateFileSheet.displayName = 'CreateFileSheet';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingBottom: 12,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '600',
+  },
+  glassButton: {
+    borderRadius: 17,
+    overflow: 'hidden',
+  },
+  closeButton: {
+    width: 34,
+    height: 34,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  divider: {
+    height: 0.5,
+  },
+  optionsContainer: {
+    paddingHorizontal: 20,
+    paddingTop: 16,
+    gap: 12,
+  },
+  optionItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+  },
+  optionIcon: {
+    width: 48,
+    height: 48,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 16,
+  },
+  optionText: {
+    flex: 1,
+  },
+  optionTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 2,
+  },
+  optionSubtitle: {
+    fontSize: 14,
+  },
+  comingSoonBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+  },
+  comingSoonText: {
+    fontSize: 12,
+    fontWeight: '500',
+  },
+});

apps/mobile/v1/src/components/MdiIcon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+// MDI icon paths (from @mdi/js) - hardcoded to avoid Node version issues
+export const mdiTextBoxOutline = 'M5,3C3.89,3 3,3.89 3,5V19C3,20.11 3.89,21 5,21H19C20.11,21 21,20.11 21,19V5C21,3.89 20.11,3 19,3H5M5,5H19V19H5V5M7,7V9H17V7H7M7,11V13H17V11H7M7,15V17H14V15H7Z';
+export const mdiVectorSquare = 'M2,2H8V4H16V2H22V8H20V16H22V22H16V20H8V22H2V16H4V8H2V2M16,8V6H8V8H6V16H8V18H16V16H18V8H16M4,4V6H6V4H4M18,4V6H20V4H18M4,18V20H6V18H4M18,18V20H20V18H18Z';
+export const mdiFileTableBoxOutline = 'M19 3H5C3.89 3 3 3.89 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.89 20.1 3 19 3M19 19H5V5H19V19M7 7H11V11H7V7M7 13H11V17H7V13M13 7H17V11H13V7M13 13H17V17H13V13Z';
+export const mdiCodeTags = 'M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z';
+export const mdiFileDocumentOutline = 'M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z';
+
+interface MdiIconProps {
+  path: string;
+  size?: number;
+  color?: string;
+}
+
+/**
+ * Renders MDI icons using react-native-svg
+ * MDI icons use a 24x24 viewBox
+ */
+export function MdiIcon({ path, size = 24, color = '#000' }: MdiIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24">
+      <Path d={path} fill={color} />
+    </Svg>
+  );
+}
+
+export default MdiIcon;