fix: improve sheet loading UX and add Liquid Glass buttons

- Add progressive loading messages for sheets ("Loading Sheet", "Crunching numbers", etc.)
- Fix loading position shift by using single overlay with consistent positioning
- Check cached note type for immediate "Loading Sheet" display
- Add Liquid Glass styling to Create Folder buttons (Home, FolderNotes, SubfoldersList)
- Add Note and Sheet filters to Filter & Sort sheet
- Reorganize filters in 2x2 grid layout, sorted alphabetically
- Add spreadsheet preview in notes list (shows first 6 cell values instead of raw JSON)

Author: typelets

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

@@ -1,5 +1,5 @@
-import React, { useMemo, useState } from 'react';
-import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import React, { useEffect, useMemo, useState } from 'react';
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
 import { WebView } from 'react-native-webview';
 
 interface SheetsViewerProps {
@@ -13,14 +13,48 @@ interface SheetsViewerProps {
     };
     isDark: boolean;
   };
+  onLoaded?: () => void;
+  hideLoadingOverlay?: boolean;
 }
 
 /**
  * SheetsViewer - Read-only spreadsheet viewer for mobile
  * Uses Univer library via WebView to render spreadsheets exactly as they appear on web
  */
-export function SheetsViewer({ content, theme }: SheetsViewerProps) {
+// Fun loading messages that appear progressively
+const LOADING_MESSAGES = [
+  'Loading Sheet',
+  'Crunching numbers',
+  'Almost there',
+  'Worth the wait',
+];
+
+export function SheetsViewer({ content, theme, onLoaded, hideLoadingOverlay }: SheetsViewerProps) {
   const [loading, setLoading] = useState(true);
+  const [messageIndex, setMessageIndex] = useState(0);
+
+  // Progress through loading messages
+  useEffect(() => {
+    if (!loading) return;
+
+    const timers: ReturnType<typeof setTimeout>[] = [];
+
+    // After 1 second, show second message
+    timers.push(setTimeout(() => setMessageIndex(1), 1000));
+    // After 2 seconds, show third message
+    timers.push(setTimeout(() => setMessageIndex(2), 2000));
+    // After 3.5 seconds, show fourth message
+    timers.push(setTimeout(() => setMessageIndex(3), 3500));
+
+    return () => timers.forEach(clearTimeout);
+  }, [loading]);
+
+  // Reset message index when loading starts
+  useEffect(() => {
+    if (loading) {
+      setMessageIndex(0);
+    }
+  }, [loading]);
 
   // Escape content for safe inclusion in HTML
   const escapedContent = useMemo(() => {
@@ -565,9 +599,12 @@ export function SheetsViewer({ content, theme }: SheetsViewerProps) {
 
   return (
     <View style={styles.container}>
-      {loading && (
+      {loading && !hideLoadingOverlay && (
         <View style={styles.loadingOverlay}>
           <ActivityIndicator size="large" color={theme.colors.mutedForeground} />
+          <Text style={[styles.loadingText, { color: theme.colors.mutedForeground }]}>
+            {LOADING_MESSAGES[messageIndex]}
+          </Text>
         </View>
       )}
       <WebView
@@ -589,15 +626,20 @@ export function SheetsViewer({ content, theme }: SheetsViewerProps) {
         // @ts-ignore - iOS specific - require user action to show keyboard
         keyboardDisplayRequiresUserAction={true}
         onLoadEnd={() => {
-          setTimeout(() => setLoading(false), 1000);
+          setTimeout(() => {
+            setLoading(false);
+            onLoaded?.();
+          }, 1000);
         }}
         onMessage={(event) => {
           try {
             const data = JSON.parse(event.nativeEvent.data);
             if (data.type === 'loaded') {
               setLoading(false);
+              onLoaded?.();
             } else if (data.type === 'error') {
               setLoading(false);
+              onLoaded?.();
               console.error('SheetsViewer error:', data.message);
             } else if (data.type === 'debug') {
               console.log('SheetsViewer debug:', JSON.stringify(data, null, 2));
@@ -620,15 +662,15 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
   },
   loadingOverlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
+    ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
     justifyContent: 'center',
     zIndex: 1,
-    paddingBottom: 60, // Account for header
+  },
+  loadingText: {
+    marginTop: 12,
+    fontSize: 16,
+    fontWeight: '500',
   },
 });
 

apps/mobile/v1/src/screens/FolderNotes/components/NotesList/CreateFolderSheet.tsx

@@ -141,13 +141,21 @@ export const CreateFolderSheet = forwardRef<BottomSheetModal, CreateFolderSheetP
 
           <View style={styles.bottomSheetFooter}>
             <TouchableOpacity
-              style={[styles.createButton, { backgroundColor: theme.colors.primary }]}
               onPress={handleCreateFolder}
               disabled={isCreatingFolder}
+              style={{ opacity: isCreatingFolder ? 0.6 : 1 }}
             >
-              <Text style={[styles.createButtonText, { color: theme.colors.primaryForeground }]}>
-                {isCreatingFolder ? 'Creating...' : 'Create'}
-              </Text>
+              <GlassView
+                glassEffectStyle="regular"
+                style={[styles.glassCreateButton, { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)' }]}
+                pointerEvents="none"
+              >
+                <View style={[styles.createButton, { backgroundColor: theme.colors.primary }]}>
+                  <Text style={[styles.createButtonText, { color: theme.colors.primaryForeground }]}>
+                    {isCreatingFolder ? 'Creating...' : 'Create'}
+                  </Text>
+                </View>
+              </GlassView>
             </TouchableOpacity>
           </View>
         </BottomSheetView>
@@ -224,10 +232,14 @@ const styles = StyleSheet.create({
   bottomSheetFooter: {
     paddingHorizontal: 20,
   },
+  glassCreateButton: {
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
   createButton: {
     width: '100%',
     padding: 14,
-    borderRadius: 8,
+    borderRadius: 12,
     alignItems: 'center',
   },
   createButtonText: {

apps/mobile/v1/src/screens/FolderNotes/components/NotesList/FilterSortSheet.tsx

@@ -8,11 +8,13 @@ import { useTheme } from '@/src/theme';
 
 export interface FilterConfig {
   showAttachmentsOnly: boolean;
-  showStarredOnly: boolean;
-  showHiddenOnly: boolean;
   showCodeOnly: boolean;
   showDiagramOnly: boolean;
+  showHiddenOnly: boolean;
+  showNoteOnly: boolean;
   showPublicOnly: boolean;
+  showSheetOnly: boolean;
+  showStarredOnly: boolean;
 }
 
 export interface SortConfig {
@@ -75,85 +77,112 @@ export const FilterSortSheet = forwardRef<BottomSheetModal, FilterSortSheetProps
               <Text style={[styles.inputLabel, { color: theme.colors.mutedForeground }]}>FILTER</Text>
               <TouchableOpacity
                 style={[styles.viewModeButton, { backgroundColor: theme.colors.muted, opacity: hasActiveFilters ? 1 : 0 }]}
-                onPress={() => setFilterConfig({ showAttachmentsOnly: false, showStarredOnly: false, showHiddenOnly: false, showCodeOnly: false, showDiagramOnly: false, showPublicOnly: false })}
+                onPress={() => setFilterConfig({ showAttachmentsOnly: false, showCodeOnly: false, showDiagramOnly: false, showHiddenOnly: false, showNoteOnly: false, showPublicOnly: false, showSheetOnly: false, showStarredOnly: false })}
                 activeOpacity={0.7}
                 disabled={!hasActiveFilters}
               >
                 <Ionicons name="close" size={16} color={theme.colors.mutedForeground} />
               </TouchableOpacity>
             </View>
 
-            <TouchableOpacity
-              style={[styles.filterOption, { backgroundColor: filterConfig.showAttachmentsOnly ? 'rgba(59, 130, 246, 0.1)' : 'transparent' }]}
-              onPress={() => setFilterConfig(prev => ({ ...prev, showAttachmentsOnly: !prev.showAttachmentsOnly }))}
-            >
-              <Ionicons
-                name={filterConfig.showAttachmentsOnly ? "checkbox" : "square-outline"}
-                size={24}
-                color={filterConfig.showAttachmentsOnly ? theme.colors.primary : theme.colors.mutedForeground}
-              />
-              <Text style={[styles.filterOptionText, { color: theme.colors.foreground }]}>Attachment</Text>
-            </TouchableOpacity>
+            {/* 2x2 grid layout - Alphabetically ordered */}
+            <View style={styles.filterGrid}>
+              <TouchableOpacity
+                style={[styles.filterOptionGrid, { backgroundColor: filterConfig.showAttachmentsOnly ? 'rgba(59, 130, 246, 0.1)' : 'transparent', borderColor: theme.colors.border }]}
+                onPress={() => setFilterConfig(prev => ({ ...prev, showAttachmentsOnly: !prev.showAttachmentsOnly }))}
+              >
+                <Ionicons
+                  name={filterConfig.showAttachmentsOnly ? "checkbox" : "square-outline"}
+                  size={20}
+                  color={filterConfig.showAttachmentsOnly ? theme.colors.primary : theme.colors.mutedForeground}
+                />
+                <Text style={[styles.filterOptionTextGrid, { color: theme.colors.foreground }]}>Attachment</Text>
+              </TouchableOpacity>
 
-            <TouchableOpacity
-              style={[styles.filterOption, { backgroundColor: filterConfig.showStarredOnly ? 'rgba(59, 130, 246, 0.1)' : 'transparent' }]}
-              onPress={() => setFilterConfig(prev => ({ ...prev, showStarredOnly: !prev.showStarredOnly }))}
-            >
-              <Ionicons
-                name={filterConfig.showStarredOnly ? "checkbox" : "square-outline"}
-                size={24}
-                color={filterConfig.showStarredOnly ? theme.colors.primary : theme.colors.mutedForeground}
-              />
-              <Text style={[styles.filterOptionText, { color: theme.colors.foreground }]}>Starred</Text>
-            </TouchableOpacity>
+              <TouchableOpacity
+                style={[styles.filterOptionGrid, { backgroundColor: filterConfig.showCodeOnly ? 'rgba(59, 130, 246, 0.1)' : 'transparent', borderColor: theme.colors.border }]}
+                onPress={() => setFilterConfig(prev => ({ ...prev, showCodeOnly: !prev.showCodeOnly }))}
+              >
+                <Ionicons
+                  name={filterConfig.showCodeOnly ? "checkbox" : "square-outline"}
+                  size={20}
+                  color={filterConfig.showCodeOnly ? theme.colors.primary : theme.colors.mutedForeground}
+                />
+                <Text style={[styles.filterOptionTextGrid, { color: theme.colors.foreground }]}>Code</Text>
+              </TouchableOpacity>
 
-            <TouchableOpacity
-              style={[styles.filterOption, { backgroundColor: filterConfig.showHiddenOnly ? 'rgba(59, 130, 246, 0.1)' : 'transparent' }]}
-              onPress={() => setFilterConfig(prev => ({ ...prev, showHiddenOnly: !prev.showHiddenOnly }))}
-            >
-              <Ionicons
-                name={filterConfig.showHiddenOnly ? "checkbox" : "square-outline"}
-                size={24}
-                color={filterConfig.showHiddenOnly ? theme.colors.primary : theme.colors.mutedForeground}
-              />
-              <Text style={[styles.filterOptionText, { color: theme.colors.foreground }]}>Hidden</Text>
-            </TouchableOpacity>
+              <TouchableOpacity
+                style={[styles.filterOptionGrid, { backgroundColor: filterConfig.showDiagramOnly ? 'rgba(59, 130, 246, 0.1)' : 'transparent', borderColor: theme.colors.border }]}
+                onPress={() => setFilterConfig(prev => ({ ...prev, showDiagramOnly: !prev.showDiagramOnly }))}
+              >
+                <Ionicons
+                  name={filterConfig.showDiagramOnly ? "checkbox" : "square-outline"}
+                  size={20}
+                  color={filterConfig.showDiagramOnly ? theme.colors.primary : theme.colors.mutedForeground}
+                />
+                <Text style={[styles.filterOptionTextGrid, { color: theme.colors.foreground }]}>Diagram</Text>
+              </TouchableOpacity>
 
-            <TouchableOpacity
-              style={[styles.filterOption, { backgroundColor: filterConfig.showCodeOnly ? 'rgba(59, 130, 246, 0.1)' : 'transparent' }]}
-              onPress={() => setFilterConfig(prev => ({ ...prev, showCodeOnly: !prev.showCodeOnly }))}
-            >
-              <Ionicons
-                name={filterConfig.showCodeOnly ? "checkbox" : "square-outline"}
-                size={24}
-                color={filterConfig.showCodeOnly ? theme.colors.primary : theme.colors.mutedForeground}
-              />
-              <Text style={[styles.filterOptionText, { color: theme.colors.foreground }]}>Code</Text>
-            </TouchableOpacity>
+              <TouchableOpacity
+                style={[styles.filterOptionGrid, { backgroundColor: filterConfig.showHiddenOnly ? 'rgba(59, 130, 246, 0.1)' : 'transparent', borderColor: theme.colors.border }]}
+                onPress={() => setFilterConfig(prev => ({ ...prev, showHiddenOnly: !prev.showHiddenOnly }))}
+              >
+                <Ionicons
+                  name={filterConfig.showHiddenOnly ? "checkbox" : "square-outline"}
+                  size={20}
+                  color={filterConfig.showHiddenOnly ? theme.colors.primary : theme.colors.mutedForeground}
+                />
+                <Text style={[styles.filterOptionTextGrid, { color: theme.colors.foreground }]}>Hidden</Text>
+              </TouchableOpacity>
 
-            <TouchableOpacity
-              style={[styles.filterOption, { backgroundColor: filterConfig.showDiagramOnly ? 'rgba(59, 130, 246, 0.1)' : 'transparent' }]}
-              onPress={() => setFilterConfig(prev => ({ ...prev, showDiagramOnly: !prev.showDiagramOnly }))}
-            >
-              <Ionicons
-                name={filterConfig.showDiagramOnly ? "checkbox" : "square-outline"}
-                size={24}
-                color={filterConfig.showDiagramOnly ? theme.colors.primary : theme.colors.mutedForeground}
-              />
-              <Text style={[styles.filterOptionText, { color: theme.colors.foreground }]}>Diagram</Text>
-            </TouchableOpacity>
+              <TouchableOpacity
+                style={[styles.filterOptionGrid, { backgroundColor: filterConfig.showNoteOnly ? 'rgba(59, 130, 246, 0.1)' : 'transparent', borderColor: theme.colors.border }]}
+                onPress={() => setFilterConfig(prev => ({ ...prev, showNoteOnly: !prev.showNoteOnly }))}
+              >
+                <Ionicons
+                  name={filterConfig.showNoteOnly ? "checkbox" : "square-outline"}
+                  size={20}
+                  color={filterConfig.showNoteOnly ? theme.colors.primary : theme.colors.mutedForeground}
+                />
+                <Text style={[styles.filterOptionTextGrid, { color: theme.colors.foreground }]}>Note</Text>
+              </TouchableOpacity>
 
-            <TouchableOpacity
-              style={[styles.filterOption, { backgroundColor: filterConfig.showPublicOnly ? 'rgba(59, 130, 246, 0.1)' : 'transparent' }]}
-              onPress={() => setFilterConfig(prev => ({ ...prev, showPublicOnly: !prev.showPublicOnly }))}
-            >
-              <Ionicons
-                name={filterConfig.showPublicOnly ? "checkbox" : "square-outline"}
-                size={24}
-                color={filterConfig.showPublicOnly ? theme.colors.primary : theme.colors.mutedForeground}
-              />
-              <Text style={[styles.filterOptionText, { color: theme.colors.foreground }]}>Public</Text>
-            </TouchableOpacity>
+              <TouchableOpacity
+                style={[styles.filterOptionGrid, { backgroundColor: filterConfig.showPublicOnly ? 'rgba(59, 130, 246, 0.1)' : 'transparent', borderColor: theme.colors.border }]}
+                onPress={() => setFilterConfig(prev => ({ ...prev, showPublicOnly: !prev.showPublicOnly }))}
+              >
+                <Ionicons
+                  name={filterConfig.showPublicOnly ? "checkbox" : "square-outline"}
+                  size={20}
+                  color={filterConfig.showPublicOnly ? theme.colors.primary : theme.colors.mutedForeground}
+                />
+                <Text style={[styles.filterOptionTextGrid, { color: theme.colors.foreground }]}>Public</Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={[styles.filterOptionGrid, { backgroundColor: filterConfig.showSheetOnly ? 'rgba(59, 130, 246, 0.1)' : 'transparent', borderColor: theme.colors.border }]}
+                onPress={() => setFilterConfig(prev => ({ ...prev, showSheetOnly: !prev.showSheetOnly }))}
+              >
+                <Ionicons
+                  name={filterConfig.showSheetOnly ? "checkbox" : "square-outline"}
+                  size={20}
+                  color={filterConfig.showSheetOnly ? theme.colors.primary : theme.colors.mutedForeground}
+                />
+                <Text style={[styles.filterOptionTextGrid, { color: theme.colors.foreground }]}>Sheet</Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={[styles.filterOptionGrid, { backgroundColor: filterConfig.showStarredOnly ? 'rgba(59, 130, 246, 0.1)' : 'transparent', borderColor: theme.colors.border }]}
+                onPress={() => setFilterConfig(prev => ({ ...prev, showStarredOnly: !prev.showStarredOnly }))}
+              >
+                <Ionicons
+                  name={filterConfig.showStarredOnly ? "checkbox" : "square-outline"}
+                  size={20}
+                  color={filterConfig.showStarredOnly ? theme.colors.primary : theme.colors.mutedForeground}
+                />
+                <Text style={[styles.filterOptionTextGrid, { color: theme.colors.foreground }]}>Starred</Text>
+              </TouchableOpacity>
+            </View>
 
             <Text style={[styles.inputLabel, { color: theme.colors.mutedForeground, marginTop: 24 }]}>SORT BY</Text>
 
@@ -257,6 +286,25 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  filterGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+  filterOptionGrid: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+    width: '48%',
+    gap: 8,
+  },
+  filterOptionTextGrid: {
+    fontSize: 14,
+    flex: 1,
+  },
   filterOption: {
     flexDirection: 'row',
     alignItems: 'center',