feat: Refactor Coordinate Notes to Location Notes; update navigation, add new components, and implement location note functionality

Author: codeAbinash

App.tsx

@@ -7,8 +7,9 @@ import { queryClient } from '@query/index'
 import { NavigationContainer, useNavigation } from '@react-navigation/native'
 import { CardStyleInterpolators, createStackNavigator, type StackNavigationOptions } from '@react-navigation/stack'
 import ComputerScienceSettings from '@screens/ComputerScience/ComputerScienceSettings'
-import CoordinateNotes from '@screens/CoordinateNotes/CoordinateNotes'
-import NewCoordinateNotes from '@screens/CoordinateNotes/NewCoordinateNotes'
+import { LocationNoteParamList } from '@screens/CoordinateNotes/LocationNote'
+import LocationNotes from '@screens/CoordinateNotes/LocationNotes'
+import LocationNote from '@screens/CoordinateNotes/LocationNote'
 import LocationTags from '@screens/CoordinateNotes/LocationTags'
 import DeveloperOptions from '@screens/DeveloperOptions/DeveloperOptions'
 import MMKVDataEditor, { type MMKVDataEditorParamList } from '@screens/DeveloperOptions/MMKVDataEditor'
@@ -61,7 +62,7 @@ import { Dimensions, SafeAreaView, useColorScheme } from 'react-native'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated'
 import './global.css'
-import CoordinateNote, { CoordinateNoteParamList } from '@screens/CoordinateNotes/CoordinateNote'
+import NewLocationNote from '@screens/CoordinateNotes/NewLocationNotes'
 
 function App(): React.JSX.Element {
   const scheme = useColorScheme()
@@ -196,17 +197,19 @@ function Navigation() {
         <Stack.Screen name='SJF' component={SJF} options={GestureEnabled} />
         <Stack.Screen name='Chart' component={Chart} options={IOS_BOTTOM_STYLE} />
         <Stack.Screen name='Onboarding' component={Onboarding} options={NO_ANIMATION} />
-        <Stack.Screen name='CoordinateNotes' component={CoordinateNotes} options={GestureEnabled} />
-        <Stack.Screen name='NewCoordinateNotes' component={NewCoordinateNotes} options={GestureEnabled} />
+        <Stack.Screen name='LocationNotes' component={LocationNotes} options={GestureEnabled} />
+        <Stack.Screen name='NewLocationNote' component={NewLocationNote} options={GestureEnabled} />
         <Stack.Screen name='LocationTags' component={LocationTags} options={IOS_BOTTOM_STYLE} />
-        <Stack.Screen name='CoordinateNote' component={CoordinateNote} options={GestureEnabled} />
+        <Stack.Screen name='LocationNote' component={LocationNote} options={GestureEnabled} />
       </Stack.Navigator>
     </>
   )
 }
 
 export type RootStackParamList = {
-  CoordinateNote: CoordinateNoteParamList
+  NewLocationNote: undefined
+  LocationNote: LocationNoteParamList
+  LocationNotes: undefined
   LocationTags: undefined
   Home: undefined
   Location: undefined
@@ -271,8 +274,6 @@ export type RootStackParamList = {
   Chart: ChartParamList
   Onboarding: undefined
   Skia: undefined
-  CoordinateNotes: undefined
-  NewCoordinateNotes: undefined
 }
 
 const FabButton = () => {

src/screens/CoordinateNotes/CoordinateNote.tsx renamed to src/screens/CoordinateNotes/LocationNote.tsx

@@ -9,26 +9,26 @@ import { SettOption } from '@components/Settings/SettOption'
 import SettText from '@components/Settings/SettText'
 import SettWrapper from '@components/Settings/SettWrapper'
 import { RouteProp } from '@react-navigation/native'
-import { coordinateNotesStore, LocationNote } from '@screens/CoordinateNotes/coordinateNotesStore'
+import { coordinateNotesStore, type LocationNote } from '@screens/CoordinateNotes/locationNotesStore'
 import type { StackNav } from '@utils/types'
 import { useCallback, useEffect, useState } from 'react'
 import { BackHandler, View } from 'react-native'
 import LocationDetails from './LocationDetails'
 
 type ParamList = {
-  CoordinateNote: CoordinateNoteParamList
+  LocationNote: LocationNoteParamList
 }
 
-export type CoordinateNoteParamList = {
+export type LocationNoteParamList = {
   data: LocationNote
 }
 
-type CoordinateNoteProps = {
-  route: RouteProp<ParamList, 'CoordinateNote'>
+type LocationNoteProps = {
+  route: RouteProp<ParamList, 'LocationNote'>
   navigation: StackNav
 }
 
-export default function CoordinateNote({ navigation, route }: CoordinateNoteProps) {
+export default function LocationNote({ navigation, route }: LocationNoteProps) {
   const alert = popupStore((store) => store.alert)
   const data = route.params.data
   const [name, setName] = useState<string>(data.title || '')
@@ -108,7 +108,7 @@ export default function CoordinateNote({ navigation, route }: CoordinateNoteProp
           </SettGroup>
           <LocationDetails data={data.location} />
           <SettText>
-            Deleting this note will remove it from the list of coordinate notes. This action cannot be undone.
+            Deleting this note will remove it from the list of location notes.
           </SettText>
           <View className='mt-5 px-5'>
             <Btn title={'Delete Note'} className='bg-red-500' onPress={handleRemove} />

src/screens/CoordinateNotes/CoordinateNotes.tsx renamed to src/screens/CoordinateNotes/LocationNotes.tsx

@@ -7,14 +7,15 @@ import { SettOption } from '@components/Settings/SettOption'
 import SettText from '@components/Settings/SettText'
 import SettWrapper from '@components/Settings/SettWrapper'
 import { useNavigation } from '@react-navigation/native'
-import { coordinateNotesStore, LocationNote } from '@screens/CoordinateNotes/coordinateNotesStore'
+import { coordinateNotesStore, LocationNote } from '@screens/CoordinateNotes/locationNotesStore'
 import fabStyles from '@screens/Home/styles/fabStyles'
+import { F, Medium } from '@utils/fonts'
 import type { NavProp, StackNav } from '@utils/types'
 import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import NoNotes from './NoCoordinateNotes'
+import NoNotes from './NoLocationNotes'
 
-export default function CoordinateNotes({ navigation }: NavProp) {
+export default function LocationNotes({ navigation }: NavProp) {
   const notes = coordinateNotesStore((state) => state.notes)
   return (
     <>
@@ -44,8 +45,14 @@ function NotesList({ notes }: { notes: LocationNote[] }) {
             title={item.title}
             Icon={<RoundedIcon Icon={Location01Icon} />}
             arrow
-            onPress={() => navigation.navigate('CoordinateNote', { data: item })}
-          />
+            onPress={() => navigation.navigate('LocationNote', { data: item })}
+          >
+            {item.description && (
+              <Medium className='text-zinc-600 dark:text-zinc-400' style={F.F10_5} numberOfLines={1}>
+                {item.description}
+              </Medium>
+            )}
+          </SettOption>
         ))}
       </SettGroup>
     </Gap12>
@@ -65,7 +72,7 @@ export const FabButton = () => {
     >
       <Press
         style={fabStyles.fabShadow}
-        onPress={() => navigation.navigate('NewCoordinateNotes')}
+        onPress={() => navigation.navigate('NewLocationNote')}
         activeOpacity={0.9}
         activeScale={0.95}
         className='items-center justify-center rounded-full bg-accent'

src/screens/CoordinateNotes/NewCoordinateNotes.tsx renamed to src/screens/CoordinateNotes/NewLocationNotes.tsx

@@ -6,7 +6,7 @@ import RoundedIcon from '@components/RoundedIcon'
 import SettGroup from '@components/Settings/SettGroup'
 import { SettOption } from '@components/Settings/SettOption'
 import SettWrapper from '@components/Settings/SettWrapper'
-import { coordinateNotesStore } from '@screens/CoordinateNotes/coordinateNotesStore'
+import { coordinateNotesStore } from '@screens/CoordinateNotes/locationNotesStore'
 import { fetchLocation } from '@screens/CoordinateNotes/lib'
 import { useQuery } from '@tanstack/react-query'
 import { NavProp } from '@utils/types'
@@ -15,7 +15,7 @@ import { BackHandler, View } from 'react-native'
 import { GeoPosition } from 'react-native-geolocation-service'
 import LocationDetails from './LocationDetails'
 
-export default function NewCoordinateNotes({ navigation }: NavProp) {
+export default function NewLocationNote({ navigation }: NavProp) {
   const [name, setName] = useState<string>('')
   const [description, setDescription] = useState<string>('')
   const updateNote = coordinateNotesStore((state) => state.updateNote)

src/screens/CoordinateNotes/NoCoordinateNotes.tsx renamed to src/screens/CoordinateNotes/NoLocationNotes.tsx

@@ -3,7 +3,7 @@ import { Lottie } from '@components/Lottie'
 import { W } from '@utils/dimensions'
 import { Regular } from '@utils/fonts'
 import { View } from 'react-native'
-import { LocationNote } from './coordinateNotesStore'
+import { LocationNote } from './locationNotesStore'
 
 export default function CoordinateNotes({ notes }: { notes: LocationNote[] }) {
   if (notes.length > 0) return null

src/screens/CoordinateNotes/coordinateNotesStore.ts renamed to src/screens/CoordinateNotes/locationNotesStore.ts

@@ -107,11 +107,11 @@ function Shortcuts({ navigation }: { navigation: StackNav }) {
       <Bold className='my-2 px-5 text-base text-gray-800 dark:text-gray-300'>Shortcuts</Bold>
       <View className='w-full flex-row flex-wrap' style={{ gap: 12, paddingHorizontal: 18 }}>
         <TouchableOpacity
-          onPress={() => navigation.navigate('CoordinateNotes')}
+          onPress={() => navigation.navigate('LocationNotes')}
           style={[hw, styles.shadow, styles.center]}
           className='w-1/2 rounded-2xl bg-white dark:bg-zinc-900'
         >
-          <Medium className='text-xs text-gray-700 dark:text-gray-300'>Shortcut 1</Medium>
+          <Medium className='text-xs text-gray-700 dark:text-gray-300'>Location Notes</Medium>
         </TouchableOpacity>
         <TouchableOpacity
           onPress={() => navigation.navigate('Test')}

src/screens/Home/HomeScreen.tsx

@@ -61,7 +61,7 @@ const tools: Group[] = [
       { title: 'Random Color', Icon: PaintBoardSolidIcon, to: 'RandomColor', className: 'bg-orange-500' },
       { title: 'Gradient Colors', Icon: ColorsSolidIcon, className: 'bg-green-500' },
       { title: 'Location Speed Meter', Icon: DashboardSpeed01SolidIcon, className: 'bg-yellow-500' },
-      { title: 'Coordinate Notes', Icon: MapsLocation02SolidIcon, className: 'bg-blue-500', to: 'CoordinateNotes' },
+      { title: 'Coordinate Notes', Icon: MapsLocation02SolidIcon, className: 'bg-accent', to: 'LocationNotes' },
       { title: 'Random Password', Icon: LockPasswordSolidIcon, className: 'bg-slate-500', to: 'RandomPassword' },
     ],
   },