mobile: fix breadcrumbs

apps/mobile/app/components/list-items/headers/notebook-header.tsx

@@ -28,13 +28,19 @@ import { DefaultAppStyles } from "../../../utils/styles";
 import AppIcon from "../../ui/AppIcon";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
+import { IconButton } from "../../ui/icon-button";
+import { Pressable } from "../../ui/pressable";
+import NotebookScreen from "../../../screens/notebook";
+import { db } from "../../../common/database";
 
 export const NotebookHeader = ({
   notebook,
-  totalNotes = 0
+  totalNotes = 0,
+  breadcrumbs
 }: {
   notebook: Notebook;
   totalNotes: number;
+  breadcrumbs: { id: string; title: string }[];
 }) => {
   const { colors } = useThemeColors();
   return (
@@ -49,9 +55,51 @@ export const NotebookHeader = ({
         style={{
           width: "100%",
           gap: DefaultAppStyles.GAP_VERTICAL,
-          paddingVertical: 25
+          paddingVertical: DefaultAppStyles.GAP
         }}
       >
+        {breadcrumbs && breadcrumbs.length > 0 ? (
+          <View
+            style={{
+              width: "100%",
+              flexDirection: "row",
+              alignItems: "center",
+              flexWrap: "wrap",
+              paddingBottom: DefaultAppStyles.GAP_VERTICAL_SMALL
+            }}
+          >
+            {breadcrumbs.map((item, index) => (
+              <Pressable
+                onPress={async () => {
+                  const notebook = await db.notebooks.notebook(item.id);
+                  if (!notebook) return;
+                  NotebookScreen.navigate(notebook, true);
+                }}
+                key={item.id}
+                style={{
+                  width: undefined,
+                  flexDirection: "row",
+                  paddingHorizontal: 0,
+                  alignItems: "center"
+                }}
+              >
+                {index === 0 ? null : (
+                  <IconButton
+                    name="chevron-right"
+                    size={16}
+                    top={0}
+                    left={0}
+                    right={0}
+                    bottom={0}
+                    style={{ width: 20, height: 25 }}
+                  />
+                )}
+                <Paragraph size={AppFontSize.xs}>{item.title}</Paragraph>
+              </Pressable>
+            ))}
+          </View>
+        ) : null}
+
         <AppIcon name="notebook" size={AppFontSize.xxl} />
 
         <View>

apps/mobile/app/components/sheets/add-notebook/index.tsx

@@ -170,8 +170,6 @@ export const AddNotebookSheet = ({
       <Button
         title={notebook ? strings.save() : strings.add()}
         type="accent"
-        height={45}
-        fontSize={AppFontSize.md}
         style={{
           paddingHorizontal: DefaultAppStyles.GAP * 2,
           width: "100%"

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

@@ -186,58 +186,6 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
         id={params.current.item?.id}
       />
 
-      {breadcrumbs && breadcrumbs.length > 0 ? (
-        <View
-          style={{
-            width: "100%",
-            paddingHorizontal: DefaultAppStyles.GAP,
-            flexDirection: "row",
-            alignItems: "center",
-            flexWrap: "wrap",
-            marginTop: DefaultAppStyles.GAP_VERTICAL
-          }}
-        >
-          <IconButton
-            name="notebook-outline"
-            size={16}
-            style={{ width: 20, height: 25 }}
-            onPress={() => {
-              Navigation.push("Notebooks", {
-                canGoBack: true
-              });
-            }}
-          />
-
-          {breadcrumbs.map((item) => (
-            <Pressable
-              onPress={async () => {
-                const notebook = await db.notebooks.notebook(item.id);
-                if (!notebook) return;
-                NotebookScreen.navigate(notebook, true);
-              }}
-              key={item.id}
-              style={{
-                width: undefined,
-                flexDirection: "row",
-                paddingHorizontal: 0,
-                alignItems: "center"
-              }}
-            >
-              <IconButton
-                name="chevron-right"
-                size={16}
-                top={0}
-                left={0}
-                right={0}
-                bottom={0}
-                style={{ width: 20, height: 25 }}
-              />
-              <Paragraph size={AppFontSize.xs + 1}>{item.title}</Paragraph>
-            </Pressable>
-          ))}
-        </View>
-      ) : null}
-
       <DelayLayout wait={loading}>
         <List
           data={notes}
@@ -255,6 +203,7 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
               // onEditNotebook={() => {
               //   AddNotebookSheet.present(params.current.item);
               // }}
+              breadcrumbs={breadcrumbs}
               notebook={params.current.item}
               totalNotes={notes?.placeholders.length || 0}
             />