fix(mobile): add folder path toggle in notes list

Author: typelets

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

@@ -35,6 +35,7 @@ interface NoteListItemProps {
   isDeleting?: boolean;
   isArchiving?: boolean;
   closeSwipeables?: number; // Increment this to close all swipeables
+  showFolderPaths?: boolean;
 }
 
 const NoteListItemComponent: React.FC<NoteListItemProps> = ({
@@ -57,6 +58,7 @@ const NoteListItemComponent: React.FC<NoteListItemProps> = ({
   isDeleting = false,
   isArchiving = false,
   closeSwipeables = 0,
+  showFolderPaths = true,
 }) => {
   const swipeableRef = useRef<Swipeable>(null);
 
@@ -296,7 +298,7 @@ const NoteListItemComponent: React.FC<NoteListItemProps> = ({
               >
                 {enhancedData?.preview || ''}
               </Text>
-              {!folderId && folderPath && (
+              {!folderId && folderPath && showFolderPaths && (
                 <View style={styles.noteListFolderInfo}>
                   <View style={[styles.noteListFolderDot, { backgroundColor: noteFolder?.color || '#6b7280' }]} />
                   <Text style={[styles.noteListFolderPath, { color: mutedForegroundColor }]} numberOfLines={1}>

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

@@ -16,6 +16,8 @@ interface NotesHeaderProps {
   onCreateNotePress: () => void;
   onEmptyTrashPress: () => void;
   createNoteButtonRef?: React.RefObject<View>;
+  showFolderPaths: boolean;
+  onToggleFolderPaths: () => void;
 }
 
 export const NotesHeader: React.FC<NotesHeaderProps> = ({
@@ -28,6 +30,8 @@ export const NotesHeader: React.FC<NotesHeaderProps> = ({
   onCreateNotePress,
   onEmptyTrashPress,
   createNoteButtonRef,
+  showFolderPaths,
+  onToggleFolderPaths,
 }) => {
   const theme = useTheme();
 
@@ -38,19 +42,37 @@ export const NotesHeader: React.FC<NotesHeaderProps> = ({
           NOTES ({String(filteredNotesCount || 0)})
           {viewType !== 'public' && filteredNotesCount !== totalNotesCount && ` (${totalNotesCount} total)`}
         </Text>
-        <GlassView glassEffectStyle="regular" style={[styles.squareButtonGlass, { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)' }]}>
-          <TouchableOpacity
-            style={styles.squareButton}
-            onPress={onFilterPress}
-            activeOpacity={0.7}
-          >
-            <Ionicons
-              name={hasActiveFilters ? "funnel" : "funnel-outline"}
-              size={16}
-              color={hasActiveFilters ? theme.colors.primary : theme.colors.foreground}
-            />
-          </TouchableOpacity>
-        </GlassView>
+        <View style={styles.headerButtons}>
+          {/* Folder path toggle - only show in views without a specific folder */}
+          {(viewType === 'all' || viewType === 'starred' || viewType === 'archived') && (
+            <GlassView glassEffectStyle="regular" style={[styles.squareButtonGlass, { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)', marginRight: 8 }]}>
+              <TouchableOpacity
+                style={styles.squareButton}
+                onPress={onToggleFolderPaths}
+                activeOpacity={0.7}
+              >
+                <Ionicons
+                  name={showFolderPaths ? "folder" : "folder-outline"}
+                  size={16}
+                  color={showFolderPaths ? theme.colors.primary : theme.colors.foreground}
+                />
+              </TouchableOpacity>
+            </GlassView>
+          )}
+          <GlassView glassEffectStyle="regular" style={[styles.squareButtonGlass, { backgroundColor: theme.isDark ? 'rgba(255, 255, 255, 0.01)' : 'rgba(0, 0, 0, 0.01)' }]}>
+            <TouchableOpacity
+              style={styles.squareButton}
+              onPress={onFilterPress}
+              activeOpacity={0.7}
+            >
+              <Ionicons
+                name={hasActiveFilters ? "funnel" : "funnel-outline"}
+                size={16}
+                color={hasActiveFilters ? theme.colors.primary : theme.colors.foreground}
+              />
+            </TouchableOpacity>
+          </GlassView>
+        </View>
       </View>
 
       {/* Create Note Button / Empty Trash Button - Full width to match note list */}
@@ -107,6 +129,10 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     letterSpacing: 0.8,
   },
+  headerButtons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
   squareButtonGlass: {
     borderRadius: GLASS_BUTTON.BORDER_RADIUS,
     overflow: 'hidden',

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

@@ -65,6 +65,7 @@ export default function NotesList({ navigation, route, renderHeader, scrollY: pa
   const [archivingNoteId, setArchivingNoteId] = useState<string | null>(null);
   const [closeSwipeables, setCloseSwipeables] = useState(0);
   const [showLoading, setShowLoading] = useState(false);
+  const [showFolderPaths, setShowFolderPaths] = useState(false);
 
   // Performance tracking
   const screenFocusTime = useRef<number>(0);
@@ -650,9 +651,10 @@ export default function NotesList({ navigation, route, renderHeader, scrollY: pa
         isDeleting={deletingNoteId === note.id}
         isArchiving={archivingNoteId === note.id}
         closeSwipeables={closeSwipeables}
+        showFolderPaths={showFolderPaths}
       />
     );
-  }, [filteredNotes.length, folderId, handleNotePress, handleNoteLongPress, handleDeleteNote, handleArchiveNote, folderPathsMap, foldersMap, skeletonOpacity, notesEnhancedDataCache, foregroundColor, mutedForegroundColor, mutedColor, borderColor, backgroundColor, deletingNoteId, archivingNoteId, closeSwipeables]);
+  }, [filteredNotes.length, folderId, handleNotePress, handleNoteLongPress, handleDeleteNote, handleArchiveNote, folderPathsMap, foldersMap, skeletonOpacity, notesEnhancedDataCache, foregroundColor, mutedForegroundColor, mutedColor, borderColor, backgroundColor, deletingNoteId, archivingNoteId, closeSwipeables, showFolderPaths]);
 
   // Render list header (subfolders and create note button)
   const renderListHeader = useCallback(() => {
@@ -686,10 +688,12 @@ export default function NotesList({ navigation, route, renderHeader, scrollY: pa
           onCreateNotePress={() => createFileSheetRef.current?.present()}
           onEmptyTrashPress={handleEmptyTrash}
           createNoteButtonRef={createNoteButtonRef}
+          showFolderPaths={showFolderPaths}
+          onToggleFolderPaths={() => setShowFolderPaths(prev => !prev)}
         />
       </>
     );
-  }, [loading, notes.length, renderHeader, viewType, subfolders, viewMode, filteredNotes.length, hasActiveFilters, handleEmptyTrash, filterSortSheetRef]);
+  }, [loading, notes.length, renderHeader, viewType, subfolders, viewMode, filteredNotes.length, hasActiveFilters, handleEmptyTrash, filterSortSheetRef, showFolderPaths]);
 
   // Render empty state
   const renderEmptyComponent = useCallback(() => {