Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/tabs ux #6534

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions apps/mobile/app/components/attachments/actions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -182,18 +182,17 @@ const Actions = ({
relations
.map((relation) => relation.fromId)
.forEach(async (id) => {
const tab = useTabStore.getState().getTabForNote(id);
if (tab !== undefined) {
const isFocused = useTabStore.getState().currentTab === tab;
useTabStore.getState().forEachNoteTab(id, async (tab) => {
const isFocused = useTabStore.getState().currentTab === tab.id;
if (isFocused) {
eSendEvent(eOnLoadNote, {
item: await db.notes.note(id),
forced: true
});
} else {
editorController.current.commands.setLoading(true, tab);
editorController.current.commands.setLoading(true, tab.id);
}
}
});
});
close?.();
},
Expand Down
2 changes: 1 addition & 1 deletion apps/mobile/app/components/properties/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
close();
eSendEvent(eOnLoadNote, {
item: item,
presistTab: true
newTab: true
});
if (!DDS.isTab) {
tabBarRef.current?.goToPage(1);
Expand Down
8 changes: 1 addition & 7 deletions apps/mobile/app/components/sheets/editor-tabs/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -97,11 +97,6 @@ const TabItemComponent = (props: {
}
props.close?.();
}}
onLongPress={() => {
useTabStore.getState().updateTab(props.tab.id, {
previewTab: false
});
}}
>
<View
style={{
Expand Down Expand Up @@ -157,8 +152,7 @@ const TabItemComponent = (props: {
color={props.tab.pinned ? colors.primary.accent : colors.primary.icon}
onPress={() => {
useTabStore.getState().updateTab(props.tab.id, {
pinned: !props.tab.pinned,
previewTab: false
pinned: !props.tab.pinned
});
}}
top={0}
Expand Down
12 changes: 5 additions & 7 deletions apps/mobile/app/components/sheets/link-note/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,24 +22,22 @@ import {
VirtualizedGrouping,
createInternalLink
} from "@notesnook/core";
import type { LinkAttributes } from "@notesnook/editor";
import { NativeEvents } from "@notesnook/editor-mobile/src/utils/native-events";
import { strings } from "@notesnook/intl";
import { useThemeColors } from "@notesnook/theme";
import React, { useEffect, useRef, useState } from "react";
import { TextInput, View } from "react-native";
import { FlatList } from "react-native-actions-sheet";
import { db } from "../../../common/database";
import { useDBItem } from "../../../hooks/use-db-item";
import { editorController } from "../../../screens/editor/tiptap/utils";
import { presentSheet } from "../../../services/event-manager";
import { SIZE } from "../../../utils/size";
import { Button } from "../../ui/button";
import Input from "../../ui/input";
import { Pressable } from "../../ui/pressable";
import Paragraph from "../../ui/typography/paragraph";
import type { LinkAttributes } from "@notesnook/editor";
import {
EditorEvents,
editorController
} from "../../../screens/editor/tiptap/utils";
import { strings } from "@notesnook/intl";

const ListNoteItem = ({
id,
Expand Down Expand Up @@ -194,7 +192,7 @@ export default function LinkNote(props: {
}
: undefined
);
editorController.current?.postMessage(EditorEvents.resolve, {
editorController.current?.postMessage(NativeEvents.resolve, {
data: {
href: link,
title: selectedNote.title
Expand Down
21 changes: 10 additions & 11 deletions apps/mobile/app/hooks/use-actions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
/* eslint-disable no-inner-declarations */
import {
Color,
createInternalLink,
ItemReference,
Note,
Notebook,
Reminder,
Tag,
TrashItem,
VAULT_ERRORS,
createInternalLink
VAULT_ERRORS
} from "@notesnook/core";
import { strings } from "@notesnook/intl";
import { DisplayedNotification } from "@notifee/react-native";
Expand All @@ -50,11 +50,11 @@ import ReminderSheet from "../components/sheets/reminder";
import { useSideBarDraggingStore } from "../components/side-menu/dragging-store";
import { useTabStore } from "../screens/editor/tiptap/use-tab-store";
import {
ToastManager,
eSendEvent,
eSubscribeEvent,
openVault,
presentSheet
presentSheet,
ToastManager
} from "../services/event-manager";
import Navigation from "../services/navigation";
import Notifications from "../services/notifications";
Expand Down Expand Up @@ -547,14 +547,13 @@ export const useActions = ({
const toggleReadyOnlyMode = async () => {
const currentReadOnly = (item as Note).readonly;
await db.notes.readonly(!currentReadOnly, item?.id);

if (useTabStore.getState().hasTabForNote(item.id)) {
const tabId = useTabStore.getState().getTabForNote(item.id);
if (!tabId) return;
useTabStore.getState().updateTab(tabId, {
readonly: !currentReadOnly
useTabStore.getState().forEachNoteTab(item.id, (tab) => {
useTabStore.getState().updateTab(tab.id, {
session: {
readonly: !currentReadOnly
}
});
}
});
Navigation.queueRoutesForUpdate();
close();
};
Expand Down
6 changes: 4 additions & 2 deletions apps/mobile/app/hooks/use-app-events.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -602,13 +602,15 @@ export const useAppEvents = () => {
EV.subscribe(EVENTS.vaultLocked, async () => {
// Lock all notes in all tabs...
for (const tab of useTabStore.getState().tabs) {
const noteId = useTabStore.getState().getTab(tab.id)?.noteId;
const noteId = useTabStore.getState().getTab(tab.id)?.session?.noteId;
if (!noteId) continue;
const note = await db.notes.note(noteId);
const locked = note && (await db.vaults.itemExists(note));
if (locked) {
useTabStore.getState().updateTab(tab.id, {
locked: true
session: {
locked: true
}
});
if (
tab.id === useTabStore.getState().currentTab &&
Expand Down
4 changes: 3 additions & 1 deletion apps/mobile/app/navigation/tabs-holder.js
Original file line number Diff line number Diff line change
Expand Up @@ -529,7 +529,9 @@ const onChangeTab = async (event) => {
const locked = note && (await db.vaults.itemExists(note));
if (locked) {
useTabStore.getState().updateTab(tab.id, {
locked: true
session: {
locked: true
}
});
}
}
Expand Down
3 changes: 2 additions & 1 deletion apps/mobile/app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@
"@trpc/client": "^10.45.2",
"@trpc/react-query": "^10.45.2",
"@trpc/server": "^10.45.2",
"@tanstack/react-query": "^4.36.1"
"@tanstack/react-query": "^4.36.1",
"async-mutex": "0.5.0"
},
"sideEffects": false
}
49 changes: 31 additions & 18 deletions apps/mobile/app/screens/editor/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.

/* eslint-disable @typescript-eslint/no-var-requires */

import { i18n } from "@lingui/core";
import { strings } from "@notesnook/intl";
import React, {
forwardRef,
useCallback,
Expand Down Expand Up @@ -46,6 +48,7 @@ import {
eUnlockWithPassword
} from "../../utils/events";
import { openLinkInBrowser } from "../../utils/functions";
import { tabBarRef } from "../../utils/global-refs";
import EditorOverlay from "./loading";
import { EDITOR_URI } from "./source";
import { EditorProps, useEditorType } from "./tiptap/types";
Expand All @@ -58,9 +61,6 @@ import {
openInternalLink,
randId
} from "./tiptap/utils";
import { tabBarRef } from "../../utils/global-refs";
import { strings } from "@notesnook/intl";
import { i18n } from "@lingui/core";

const style: ViewStyle = {
height: "100%",
Expand Down Expand Up @@ -203,11 +203,13 @@ const useLockedNoteHandler = () => {

useEffect(() => {
for (const tab of useTabStore.getState().tabs) {
const noteId = useTabStore.getState().getTab(tab.id)?.noteId;
const noteId = useTabStore.getState().getTab(tab.id)?.session?.noteId;
if (!noteId) continue;
if (tabRef.current && tabRef.current.noteLocked) {
if (tabRef.current && tabRef.current.session?.noteLocked) {
useTabStore.getState().updateTab(tabRef.current.id, {
locked: true
session: {
locked: true
}
});
}
}
Expand All @@ -221,23 +223,27 @@ const useLockedNoteHandler = () => {
biometryAvailable: !!biometry,
biometryEnrolled: !!fingerprint
});
syncTabs();
syncTabs("biometry");
})();
}, [tab?.id]);

useEffect(() => {
const unlockWithBiometrics = async () => {
try {
if (!tabRef.current?.noteLocked || !tabRef.current) return;
if (!tabRef.current?.session?.noteLocked || !tabRef.current) return;
console.log("Trying to unlock with biometrics...");
const credentials = await BiometricService.getCredentials(
"Unlock note",
"Unlock note to open it in editor."
);

if (credentials && credentials?.password && tabRef.current.noteId) {
if (
credentials &&
credentials?.password &&
tabRef.current.session?.noteId
) {
const note = await db.vault.open(
tabRef.current.noteId,
tabRef.current.session?.noteId,
credentials?.password
);

Expand All @@ -246,7 +252,9 @@ const useLockedNoteHandler = () => {
});

useTabStore.getState().updateTab(tabRef.current.id, {
locked: false
session: {
locked: false
}
});
}
} catch (e) {
Expand All @@ -261,7 +269,7 @@ const useLockedNoteHandler = () => {
password: string;
biometrics?: boolean;
}) => {
if (!tabRef.current?.noteId || !tabRef.current) return;
if (!tabRef.current?.session?.noteId || !tabRef.current) return;
if (!password || password.trim().length === 0) {
ToastManager.show({
heading: strings.passwordNotEntered(),
Expand All @@ -271,7 +279,10 @@ const useLockedNoteHandler = () => {
}

try {
const note = await db.vault.open(tabRef.current?.noteId, password);
const note = await db.vault.open(
tabRef.current?.session?.noteId,
password
);
if (enrollBiometrics && note) {
try {
const unlocked = await db.vault.unlock(password);
Expand Down Expand Up @@ -302,7 +313,9 @@ const useLockedNoteHandler = () => {
item: note
});
useTabStore.getState().updateTab(tabRef.current.id, {
locked: false
session: {
locked: false
}
});
} catch (e) {
console.log(e);
Expand All @@ -315,7 +328,7 @@ const useLockedNoteHandler = () => {

const unlock = () => {
if (
(tabRef.current?.locked,
(tabRef.current?.session?.locked,
useTabStore.getState().biometryAvailable &&
useTabStore.getState().biometryEnrolled &&
!editorState().movedAway)
Expand All @@ -327,7 +340,7 @@ const useLockedNoteHandler = () => {
console.log("Biometrics unavailable.", editorState().movedAway);
if (!editorState().movedAway) {
setTimeout(() => {
if (tabRef.current && tabRef.current?.locked) {
if (tabRef.current && tabRef.current?.session?.locked) {
editorController.current?.commands.focus(tabRef.current?.id);
}
}, 100);
Expand All @@ -342,13 +355,13 @@ const useLockedNoteHandler = () => {
}),
eSubscribeEvent(eUnlockWithPassword, onSubmit)
];
if (tabRef.current?.locked && tabBarRef.current?.page() === 2) {
if (tabRef.current?.session?.locked && tabBarRef.current?.page() === 2) {
unlock();
}
return () => {
subs.map((s) => s?.unsubscribe());
};
}, [tab?.id, tab?.locked]);
}, [tab?.id, tab?.session?.locked]);

return null;
};
14 changes: 7 additions & 7 deletions apps/mobile/app/screens/editor/readonly-editor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@ import WebView from "react-native-webview";
import { useRef } from "react";
import { EDITOR_URI } from "./source";
import { EditorMessage } from "./tiptap/types";
import { EventTypes } from "./tiptap/editor-events";
import { EditorEvents } from "@notesnook/editor-mobile/src/utils/editor-events";
import { Attachment } from "@notesnook/editor";
import downloadAttachment from "../../common/filesystem/download-attachment";
import { EditorEvents } from "./tiptap/utils";
import { NativeEvents } from "@notesnook/editor-mobile/src/utils/native-events";
import { useThemeColors } from "@notesnook/theme";
import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
import { db } from "../../common/database";
Expand Down Expand Up @@ -69,11 +69,11 @@ export function ReadonlyEditor(props: {
const data = event.nativeEvent.data;
const editorMessage = JSON.parse(data) as EditorMessage<any>;

if (editorMessage.type === EventTypes.logger) {
if (editorMessage.type === EditorEvents.logger) {
logger.info("[READONLY EDITOR LOG]", editorMessage.value);
}

if (editorMessage.type === EventTypes.readonlyEditorLoaded) {
if (editorMessage.type === EditorEvents.readonlyEditorLoaded) {
console.log("Readonly editor loaded.");
props.onLoad?.((content: { data: string; id: string }) => {
setTimeout(() => {
Expand All @@ -87,7 +87,7 @@ export function ReadonlyEditor(props: {
setLoading(false);
}, 300);
});
} else if (editorMessage.type === EventTypes.getAttachmentData) {
} else if (editorMessage.type === EditorEvents.getAttachmentData) {
const attachment = (editorMessage.value as any).attachment as Attachment;

console.log("Getting attachment data:", attachment.hash, attachment.type);
Expand All @@ -106,7 +106,7 @@ export function ReadonlyEditor(props: {
);
editorRef.current?.postMessage(
JSON.stringify({
type: EditorEvents.attachmentData,
type: NativeEvents.attachmentData,
value: {
resolverId: (editorMessage.value as any).resolverId,
data
Expand All @@ -118,7 +118,7 @@ export function ReadonlyEditor(props: {
console.log("Error downloading attachment data");
editorRef.current?.postMessage(
JSON.stringify({
type: EditorEvents.attachmentData,
type: NativeEvents.attachmentData,
data: {
resolverId: (editorMessage.value as any).resolverId,
data: undefined
Expand Down
2 changes: 1 addition & 1 deletion apps/mobile/app/screens/editor/source.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,5 @@ const EditorMobileSourceUrl =
* The url should be something like this: http://192.168.100.126:3000/index.html
*/
export const EDITOR_URI = __DEV__
? EditorMobileSourceUrl
? "http://192.168.100.8:3000/index.html"
: EditorMobileSourceUrl;
Loading
Loading