fix(mobile): add sheet tabs at top and default zoom preference

- Move sheet tabs from bottom to top, connected to sheet headers
- Style tabs with header background color and underline indicator
- Add default sheet zoom preference in Settings (50%-200%)
- Load saved zoom preference when viewing sheets
- Add zoom reset on percentage tap in sheet viewer
- Add 10 extra rows past content in sheets
- Update loading messages with fun variations
- Position zoom controls in bottom right corner

Author: typelets

apps/mobile/v1/package.json

@@ -17,6 +17,7 @@
     "@gorhom/bottom-sheet": "^5.2.6",
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-community/netinfo": "11.4.1",
+    "@react-native-community/slider": "^5.1.1",
     "@react-navigation/bottom-tabs": "^7.8.5",
     "@react-navigation/elements": "^2.6.3",
     "@react-navigation/native": "^7.1.8",

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

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { getDefaultSheetZoomPreference } from '../lib/preferences';
 import {
   ActivityIndicator,
   Animated,
@@ -14,6 +15,10 @@ import {
 export const GLASS_BG_DARK = 'rgba(255, 255, 255, 0.01)';
 export const GLASS_BG_LIGHT = 'rgba(0, 0, 0, 0.01)';
 
+// Sheet header background colors - exported for parent to match tab bar
+export const SHEET_HEADER_BG_DARK = '#252629';
+export const SHEET_HEADER_BG_LIGHT = '#f5f5f5';
+
 // Excel date serial number range (1900-2099)
 const MIN_DATE_SERIAL = 1;
 const MAX_DATE_SERIAL = 73050;
@@ -117,6 +122,7 @@ export interface SheetControlsData {
   tabBarHeight: number;
   onZoomIn: () => void;
   onZoomOut: () => void;
+  onZoomReset: () => void;
   onSelectSheet: (index: number) => void;
 }
 
@@ -134,7 +140,8 @@ interface NativeSheetsViewerProps {
   };
   onLoaded?: () => void;
   hideLoadingOverlay?: boolean;
-  bottomInset?: number;
+  /** Extra top inset for sheet tabs when present */
+  topInset?: number;
   /** Callback to provide sheet controls data to parent for rendering outside ScrollView */
   onControlsReady?: (controls: SheetControlsData) => void;
 }
@@ -146,7 +153,7 @@ const BASE_ROW_HEADER_WIDTH = 36;
 const BASE_COLUMN_HEADER_HEIGHT = 20;
 const HEADER_FONT_SIZE = 10;
 const BUFFER = 30;
-const MIN_ZOOM = 0.5;
+const MIN_ZOOM = 0.50;
 const MAX_ZOOM = 3.0;
 const DEFAULT_ZOOM = 1.0;
 
@@ -265,13 +272,29 @@ export function NativeSheetsViewer({
   theme,
   onLoaded,
   hideLoadingOverlay,
-  bottomInset = 0,
+  topInset = 0,
   onControlsReady,
 }: NativeSheetsViewerProps) {
   const [loading, setLoading] = useState(true);
   const [activeSheetIndex, setActiveSheetIndex] = useState(0);
   const [zoom, setZoom] = useState(DEFAULT_ZOOM);
 
+  // Load saved zoom preference on mount
+  useEffect(() => {
+    const loadZoomPreference = async () => {
+      try {
+        const savedZoom = await getDefaultSheetZoomPreference();
+        setZoom(savedZoom);
+      } catch (error) {
+        // Keep default zoom on error
+        if (__DEV__) {
+          console.error('Failed to load sheet zoom preference:', error);
+        }
+      }
+    };
+    loadZoomPreference();
+  }, []);
+
   // Track scroll for virtualization only (not for header sync)
   const scrollXRef = useRef(0);
   const scrollYRef = useRef(0);
@@ -340,8 +363,9 @@ export function NativeSheetsViewer({
     }
 
     // Ensure minimum visible area for empty or small sheets
+    // Add 10 extra rows beyond the data
     return {
-      maxRow: Math.max(MIN_ROWS, maxRow + 3),
+      maxRow: Math.max(MIN_ROWS, maxRow + 10),
       maxCol: Math.max(MIN_COLS, maxCol + 2)
     };
   }, [currentSheet?.cellData]);
@@ -449,6 +473,10 @@ export function NativeSheetsViewer({
     setZoom(z => Math.max(MIN_ZOOM, z - 0.25));
   }, []);
 
+  const handleZoomReset = useCallback(() => {
+    setZoom(DEFAULT_ZOOM);
+  }, []);
+
   const handleSelectSheet = useCallback((index: number) => {
     setActiveSheetIndex(index);
   }, []);
@@ -464,7 +492,8 @@ export function NativeSheetsViewer({
   const borderColor = theme.isDark ? '#444' : '#ddd';
   const headerBg = theme.isDark ? '#252629' : '#f5f5f5';
   const cellBg = theme.colors.background;
-  const tabBarHeight = hasMultipleSheets ? 48 + bottomInset : 0;
+  // Tabs are now at top (rendered by parent), so no bottom space needed
+  const tabBarHeight = 0;
 
   // Notify parent about controls data so it can render glass controls outside ScrollView
   useEffect(() => {
@@ -479,10 +508,11 @@ export function NativeSheetsViewer({
         tabBarHeight,
         onZoomIn: handleZoomIn,
         onZoomOut: handleZoomOut,
+        onZoomReset: handleZoomReset,
         onSelectSheet: handleSelectSheet,
       });
     }
-  }, [currentSheet, onControlsReady, zoom, sheetInfo.names, activeSheetIndex, hasMultipleSheets, tabBarHeight, handleZoomIn, handleZoomOut, handleSelectSheet]);
+  }, [currentSheet, onControlsReady, zoom, sheetInfo.names, activeSheetIndex, hasMultipleSheets, tabBarHeight, handleZoomIn, handleZoomOut, handleZoomReset, handleSelectSheet]);
 
   if (!workbook || !currentSheet) {
     return (
@@ -779,6 +809,7 @@ export function NativeSheetsViewer({
         style={[
           styles.corner,
           {
+            top: topInset,
             width: ROW_HEADER_WIDTH,
             height: COLUMN_HEADER_HEIGHT,
             backgroundColor: headerBg,
@@ -789,7 +820,7 @@ export function NativeSheetsViewer({
       />
 
       {/* Column headers - synced via Animated transform */}
-      <View style={[styles.columnHeaderWrapper, { left: ROW_HEADER_WIDTH, height: COLUMN_HEADER_HEIGHT }]}>
+      <View style={[styles.columnHeaderWrapper, { top: topInset, left: ROW_HEADER_WIDTH, height: COLUMN_HEADER_HEIGHT }]}>
         <Animated.View
           style={{
             flexDirection: 'row',
@@ -801,7 +832,7 @@ export function NativeSheetsViewer({
       </View>
 
       {/* Row headers - synced via Animated transform */}
-      <View style={[styles.rowHeaderWrapper, { top: COLUMN_HEADER_HEIGHT, bottom: tabBarHeight, width: ROW_HEADER_WIDTH }]}>
+      <View style={[styles.rowHeaderWrapper, { top: topInset + COLUMN_HEADER_HEIGHT, bottom: tabBarHeight, width: ROW_HEADER_WIDTH }]}>
         <Animated.View
           style={{
             transform: [{ translateY: Animated.multiply(scrollYAnim, -1) }],
@@ -812,7 +843,7 @@ export function NativeSheetsViewer({
       </View>
 
       {/* Main scrollable grid */}
-      <View style={[styles.gridContainer, { top: COLUMN_HEADER_HEIGHT, left: ROW_HEADER_WIDTH, bottom: tabBarHeight }]}>
+      <View style={[styles.gridContainer, { top: topInset + COLUMN_HEADER_HEIGHT, left: ROW_HEADER_WIDTH, bottom: tabBarHeight }]}>
         <Animated.ScrollView
           horizontal
           showsHorizontalScrollIndicator={false}
@@ -877,15 +908,13 @@ const styles = StyleSheet.create({
   },
   corner: {
     position: 'absolute',
-    top: 0,
     left: 0,
     zIndex: 10,
     borderRightWidth: StyleSheet.hairlineWidth,
     borderBottomWidth: StyleSheet.hairlineWidth,
   },
   columnHeaderWrapper: {
     position: 'absolute',
-    top: 0,
     right: 0,
     zIndex: 5,
     overflow: 'hidden',

apps/mobile/v1/src/lib/preferences.ts

@@ -12,6 +12,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 
 const PREFERENCE_KEYS = {
   CACHE_DECRYPTED_CONTENT: 'cache_decrypted_content',
+  DEFAULT_SHEET_ZOOM: 'default_sheet_zoom',
 };
 
 /**
@@ -78,3 +79,49 @@ export async function clearDecryptedCache(): Promise<void> {
     console.error('[Preferences] Failed to clear decrypted cache:', error);
   }
 }
+
+/**
+ * Get the default zoom level for sheets
+ * @returns Zoom level as a decimal (e.g., 1.0 = 100%, 0.75 = 75%)
+ */
+export async function getDefaultSheetZoomPreference(): Promise<number> {
+  try {
+    const value = await AsyncStorage.getItem(PREFERENCE_KEYS.DEFAULT_SHEET_ZOOM);
+
+    // Default to 100% if not set
+    if (value === null) {
+      return 1.0;
+    }
+
+    const zoom = parseFloat(value);
+    // Validate zoom is within reasonable bounds (50% - 300%)
+    if (isNaN(zoom) || zoom < 0.5 || zoom > 3.0) {
+      return 1.0;
+    }
+
+    return zoom;
+  } catch (error) {
+    console.error('[Preferences] Failed to get sheet zoom preference:', error);
+    return 1.0; // Default to 100% on error
+  }
+}
+
+/**
+ * Set the default zoom level for sheets
+ * @param zoom Zoom level as a decimal (e.g., 1.0 = 100%, 0.75 = 75%)
+ */
+export async function setDefaultSheetZoomPreference(zoom: number): Promise<void> {
+  try {
+    // Clamp zoom to valid range
+    const clampedZoom = Math.max(0.5, Math.min(3.0, zoom));
+
+    await AsyncStorage.setItem(
+      PREFERENCE_KEYS.DEFAULT_SHEET_ZOOM,
+      clampedZoom.toString()
+    );
+
+    console.log(`[Preferences] Default sheet zoom: ${Math.round(clampedZoom * 100)}%`);
+  } catch (error) {
+    console.error('[Preferences] Failed to set sheet zoom preference:', error);
+  }
+}