mobile: fix list headers

apps/mobile/app/components/list/index.tsx

@@ -44,6 +44,8 @@ import { Header } from "../list-items/headers/header";
 import { Empty, PlaceholderData } from "./empty";
 import { ListItemWrapper } from "./list-item.wrapper";
 import { ScrollView } from "react-native-actions-sheet";
+import { Spacing } from "../../common/design/spacing";
+import LineSeparator from "../ui/seperator/line-separator";
 
 type ListProps = {
   data: VirtualizedGrouping<Item> | undefined;
@@ -61,6 +63,7 @@ type ListProps = {
   groupType: GroupingKey;
   id?: string;
   type?: GroupingByIdKey;
+  hideHeaderTopBorder?: boolean;
 };
 
 const onMomentumScrollEnd = () => {
@@ -212,6 +215,10 @@ export default function List(props: ListProps) {
           }
           ListHeaderComponent={
             <>
+              {!props.hideHeaderTopBorder ? (
+                <LineSeparator paddingVertical={Spacing.LEVEL_3} />
+              ) : null}
+
               {props.CustomLisHeader ? (
                 props.CustomLisHeader
               ) : !props.headerTitle ? null : (

apps/mobile/app/components/sheets/reminder-notify/index.tsx

@@ -180,6 +180,7 @@ export default function ReminderNotify({
           <List
             data={references}
             loading={false}
+            hideHeaderTopBorder={true}
             dataType="note"
             groupType="notes"
             isRenderedInActionSheet={true}

apps/mobile/app/screens/favorites/index.tsx

@@ -17,7 +17,10 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { strings } from "@notesnook/intl";
 import React from "react";
+import { db } from "../../common/database";
+import { Spacing } from "../../common/design/spacing";
 import DelayLayout from "../../components/delay-layout";
 import { Header } from "../../components/header";
 import List from "../../components/list";
@@ -27,10 +30,6 @@ import Navigation, { NavigationProps } from "../../services/navigation";
 import SettingsService from "../../services/settings";
 import { useFavorites } from "../../stores/use-favorite-store";
 import useNavigationStore from "../../stores/use-navigation-store";
-import { db } from "../../common/database";
-import { strings } from "@notesnook/intl";
-import LineSeparator from "../../components/ui/seperator/line-separator";
-import { Spacing } from "../../common/design/spacing";
 
 export const Favorites = ({
   navigation,
@@ -72,8 +71,6 @@ export const Favorites = ({
         }}
       />
 
-      <LineSeparator paddingVertical={Spacing.LEVEL_3} />
-
       <DelayLayout wait={loading}>
         <List
           data={favorites}

apps/mobile/app/screens/home/index.tsx

@@ -19,6 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { strings } from "@notesnook/intl";
 import React from "react";
+import { Spacing } from "../../common/design/spacing";
 import { FloatingButton } from "../../components/container/floating-button";
 import DelayLayout from "../../components/delay-layout";
 import { Header } from "../../components/header";
@@ -30,8 +31,6 @@ import SettingsService from "../../services/settings";
 import useNavigationStore from "../../stores/use-navigation-store";
 import { useNotes } from "../../stores/use-notes-store";
 import { openEditor } from "../notes/common";
-import LineSeparator from "../../components/ui/seperator/line-separator";
-import { Spacing } from "../../common/design/spacing";
 
 export const Home = ({ navigation, route }: NavigationProps<"Notes">) => {
   const [notes, loading] = useNotes();
@@ -71,8 +70,6 @@ export const Home = ({ navigation, route }: NavigationProps<"Notes">) => {
         onPressDefaultRightButton={openEditor}
       />
 
-      <LineSeparator paddingVertical={Spacing.LEVEL_3} />
-
       <DelayLayout wait={loading}>
         <List
           data={notes}

apps/mobile/app/screens/notebook/index.tsx

@@ -20,6 +20,7 @@ import { resolveItems } from "@notesnook/common";
 import { Note, Notebook, VirtualizedGrouping } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import React, { useEffect, useRef, useState } from "react";
+import { View } from "react-native";
 import { db } from "../../common/database";
 import { FloatingButton } from "../../components/container/floating-button";
 import DelayLayout from "../../components/delay-layout";
@@ -28,20 +29,20 @@ import List from "../../components/list";
 import { NotebookHeader } from "../../components/list-items/headers/notebook-header";
 import { Properties } from "../../components/properties";
 import SelectionHeader from "../../components/selection-header";
+import { Notebooks } from "../../components/sheets/notebooks";
+import { getGroupOptions } from "../../hooks/use-group-options";
 import { useNavigationFocus } from "../../hooks/use-navigation-focus";
 import { eSendEvent, eSubscribeEvent } from "../../services/event-manager";
 import Navigation, { NavigationProps } from "../../services/navigation";
 import useNavigationStore, {
   NotebookScreenParams
 } from "../../stores/use-navigation-store";
+import { useSettingStore } from "../../stores/use-setting-store";
 import { eUpdateNotebookRoute } from "../../utils/events";
+import { rootNavigatorRef } from "../../utils/global-refs";
 import { findRootNotebookId } from "../../utils/notebooks";
 import { openEditor, setOnFirstSave } from "../notes/common";
-import { View } from "react-native";
-import { Notebooks } from "../../components/sheets/notebooks";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { rootNavigatorRef } from "../../utils/global-refs";
-import { getGroupOptions } from "../../hooks/use-group-options";
+import { Spacing } from "../../common/design/spacing";
 
 const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
   const [notes, setNotes] = useState<VirtualizedGrouping<Note>>();
@@ -182,6 +183,9 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
             items: selector
           });
         }}
+        style={{
+          paddingHorizontal: Spacing.LEVEL_2
+        }}
         id={notebook?.id}
       />
 

apps/mobile/app/screens/notes/index.tsx

@@ -22,6 +22,7 @@ import { Color, Note, Tag, VirtualizedGrouping } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import React, { useEffect, useRef, useState } from "react";
 import { db } from "../../common/database";
+import { Spacing } from "../../common/design/spacing";
 import { FloatingButton } from "../../components/container/floating-button";
 import DelayLayout from "../../components/delay-layout";
 import { Header } from "../../components/header";
@@ -42,8 +43,6 @@ import useNavigationStore, {
 import { useSettingStore } from "../../stores/use-setting-store";
 import { rootNavigatorRef } from "../../utils/global-refs";
 import { setOnFirstSave } from "./common";
-import LineSeparator from "../../components/ui/seperator/line-separator";
-import { Spacing } from "../../common/design/spacing";
 
 export interface RouteProps<T extends RouteName> extends NavigationProps<T> {
   get: (
@@ -216,7 +215,6 @@ const NotesPage = ({
           paddingHorizontal: Spacing.LEVEL_2
         }}
       />
-      <LineSeparator paddingVertical={Spacing.LEVEL_3} />
 
       <DelayLayout color={accentColor} wait={loadingNotes}>
         <List

apps/mobile/app/screens/relations-list/index.tsx

@@ -148,6 +148,7 @@ function RelationsList(props: NavigationProps<"RelationsList">) {
           <List
             data={items}
             loading={false}
+            hideHeaderTopBorder
             groupType={
               referenceType === "note"
                 ? "notes"

apps/mobile/app/screens/trash/index.tsx

@@ -17,23 +17,22 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { strings } from "@notesnook/intl";
 import React from "react";
 import { db } from "../../common/database";
+import { Spacing } from "../../common/design/spacing";
 import { FloatingButton } from "../../components/container/floating-button";
 import DelayLayout from "../../components/delay-layout";
 import { presentDialog } from "../../components/dialog/functions";
 import { Header } from "../../components/header";
 import List from "../../components/list";
+import SelectionHeader from "../../components/selection-header";
 import { useNavigationFocus } from "../../hooks/use-navigation-focus";
 import { ToastManager } from "../../services/event-manager";
 import Navigation, { NavigationProps } from "../../services/navigation";
 import useNavigationStore from "../../stores/use-navigation-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { useTrash, useTrashStore } from "../../stores/use-trash-store";
-import SelectionHeader from "../../components/selection-header";
-import { strings } from "@notesnook/intl";
-import { Spacing } from "../../common/design/spacing";
-import LineSeparator from "../../components/ui/seperator/line-separator";
 
 const onPressFloatingButton = () => {
   presentDialog({
@@ -103,7 +102,6 @@ export const Trash = ({ navigation, route }: NavigationProps<"Trash">) => {
           });
         }}
       />
-      <LineSeparator paddingVertical={Spacing.LEVEL_3} />
       <DelayLayout wait={loading}>
         <List
           data={trash}