diff --git a/apps/mobile/app/components/list-items/headers/notebook-header.tsx b/apps/mobile/app/components/list-items/headers/notebook-header.tsx
index e19cf718d..9c416acac 100644
--- a/apps/mobile/app/components/list-items/headers/notebook-header.tsx
+++ b/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 ? (
+
+ {breadcrumbs.map((item, index) => (
+ {
+ 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 : (
+
+ )}
+ {item.title}
+
+ ))}
+
+ ) : null}
+
diff --git a/apps/mobile/app/components/sheets/add-notebook/index.tsx b/apps/mobile/app/components/sheets/add-notebook/index.tsx
index 4c9c75f20..84b00de74 100644
--- a/apps/mobile/app/components/sheets/add-notebook/index.tsx
+++ b/apps/mobile/app/components/sheets/add-notebook/index.tsx
@@ -170,8 +170,6 @@ export const AddNotebookSheet = ({