Minor cleanup and add KeyboardAvoidingView to global search.

components/job-notes/job-notes.jsx

@@ -3,10 +3,16 @@ import { useQuery } from "@apollo/client";
 import { AntDesign } from "@expo/vector-icons";
 import { useGlobalSearchParams } from "expo-router";
 import { DateTime } from "luxon";
-import React, { useCallback, useState } from "react";
+import React, { memo, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FlatList, RefreshControl, View } from "react-native";
-import { ActivityIndicator, Button, Card, Text } from "react-native-paper";
+import {
+  ActivityIndicator,
+  Button,
+  Card,
+  Divider,
+  Text,
+} from "react-native-paper";
 import ErrorDisplay from "../error/error-display";
 import NewNoteModal from "./new-note-modal";
 
@@ -33,17 +39,41 @@ export default function JobNotes() {
     return refetch();
   };
 
+  const job = data?.jobs_by_pk;
+
+  // Memoized list data (only when job & notes exist)
+  const listData = useMemo(() => {
+    if (!job?.notes) return [];
+    const notes = job.notes;
+    const pinnedNotes = [];
+    const otherNotes = [];
+    for (const n of notes) {
+      (n.pinned ? pinnedNotes : otherNotes).push(n);
+    }
+    pinnedNotes.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+    otherNotes.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+    const DIVIDER_ID = "__divider__";
+    return pinnedNotes.length > 0 && otherNotes.length > 0
+      ? [...pinnedNotes, { id: DIVIDER_ID, type: "divider" }, ...otherNotes]
+      : [...pinnedNotes, ...otherNotes];
+  }, [job?.notes]);
+
+  const keyExtractor = useCallback((item) => item.id, []);
+  const renderItem = useCallback(
+    ({ item }) =>
+      item.type === "divider" ? <DividerItem /> : <NoteListItem item={item} />,
+    []
+  );
+
   if (loading) {
     return <ActivityIndicator size="large" style={{ flex: 1 }} />;
   }
   if (error) {
     return <ErrorDisplay message={JSON.stringify(error?.message)} />;
   }
-
-  if (!data?.jobs_by_pk) {
+  if (!job) {
     return <ErrorDisplay errorMessage={"Job is not defined."} />;
   }
-  const job = data.jobs_by_pk;
 
   return (
     <View style={{ flex: 1, display: "flex" }}>
@@ -55,7 +85,7 @@ export default function JobNotes() {
       >
         {t("jobdetail.actions.addnote")}
       </Button>
-      {job.notes.length === 0 ? (
+      {listData.length === 0 ? (
         <Card>
           <Card.Content>
             <Text>{t("jobdetail.labels.nojobnotes")}</Text>
@@ -67,8 +97,13 @@ export default function JobNotes() {
             <RefreshControl refreshing={loading} onRefresh={onRefresh} />
           }
           style={{ flex: 1 }}
-          data={job.notes}
-          renderItem={(object) => <NoteListItem item={object.item} />}
+          data={listData}
+          keyExtractor={keyExtractor}
+          renderItem={renderItem}
+          removeClippedSubviews
+          initialNumToRender={12}
+          maxToRenderPerBatch={8}
+          windowSize={7}
         />
       )}
       <NewNoteModal
@@ -82,7 +117,7 @@ export default function JobNotes() {
   );
 }
 
-function NoteListItem({ item }) {
+const NoteListItem = memo(function NoteListItem({ item }) {
   return (
     <Card style={{ margin: 8 }}>
       <Card.Content>
@@ -90,26 +125,20 @@ function NoteListItem({ item }) {
           <Text>{item.text}</Text>
           <View
             style={{
-              flexDirection: "column",
+              flexDirection: "row",
               alignSelf: "flex-end",
               alignItems: "center",
+              gap: 8,
             }}
           >
+            {item.pinned && (
+              <AntDesign name="pushpin" size={24} color="dodgerblue" />
+            )}
             {item.private && (
-              <AntDesign
-                name="eye-invisible"
-                style={{ margin: 4 }}
-                size={24}
-                color="black"
-              />
+              <AntDesign name="eye-invisible" size={24} color="black" />
             )}
             {item.critical && (
-              <AntDesign
-                name="warning"
-                style={{ margin: 4 }}
-                size={24}
-                color="tomato"
-              />
+              <AntDesign name="warning" size={24} color="tomato" />
             )}
             <Text style={{ fontSize: 12 }}>{item.created_by}</Text>
             <Text style={{ fontSize: 12 }}>
@@ -122,4 +151,8 @@ function NoteListItem({ item }) {
       </Card.Content>
     </Card>
   );
-}
+});
+
+const DividerItem = memo(function DividerItem() {
+  return <Divider bold style={{ margin: 12 }} />;
+});