diff --git a/apps/mobile/app/components/list-items/note/index.tsx b/apps/mobile/app/components/list-items/note/index.tsx index 343ba3159..01c432a41 100644 --- a/apps/mobile/app/components/list-items/note/index.tsx +++ b/apps/mobile/app/components/list-items/note/index.tsx @@ -25,7 +25,7 @@ import { TrashItem } from "@notesnook/core"; import { useThemeColors } from "@notesnook/theme"; -import { EntityLevel, decode } from "entities"; +import { decode, EntityLevel } from "entities"; import React from "react"; import { View } from "react-native"; import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled"; @@ -41,23 +41,23 @@ import { TagsWithDateEdited } from "@notesnook/common"; import { strings } from "@notesnook/intl"; +import dayjs from "dayjs"; +import { create } from "zustand"; import { notesnook } from "../../../../e2e/test.ids"; +import { FontFamily } from "../../../common/design/font"; +import { Radius, Spacing } from "../../../common/design/spacing"; import useIsSelected from "../../../hooks/use-selected"; import { useTabStore } from "../../../screens/editor/tiptap/use-tab-store"; import { useSelectionStore } from "../../../stores/use-selection-store"; import { DefaultAppStyles } from "../../../utils/styles"; import { Properties } from "../../properties"; import AppIcon from "../../ui/AppIcon"; +import { ExpiryDate } from "../../ui/expiry-date"; import { IconButton } from "../../ui/icon-button"; import { ReminderTime } from "../../ui/reminder-time"; import { TimeSince } from "../../ui/time-since"; import Heading from "../../ui/typography/heading"; import Paragraph from "../../ui/typography/paragraph"; -import dayjs from "dayjs"; -import { ExpiryDate } from "../../ui/expiry-date"; -import { Radius, Spacing } from "../../../common/design/spacing"; -import { create } from "zustand"; -import { FontFamily } from "../../../common/design/font"; type NoteItemProps = { item: Note | BaseTrashItem; @@ -157,6 +157,16 @@ const NoteItem = ({ } ]; + const activeStatusIcons = statusIcons.filter( + (statusIcon) => statusIcon.condition + ); + + const canShowTopStatusBar = + attachmentsCount > 0 && + activeStatusIcons.length > 0 && + notebooks?.items?.length && + tags?.items.length; + return ( <> - {compactMode ? null : ( + {compactMode || !canShowTopStatusBar || isTrash ? null : ( - {!isTrash ? ( - <> - {statusIcons - .filter((statusIcon) => statusIcon.condition) - .map((statusIcon) => ( - - - - ))} + {activeStatusIcons.map((statusIcon) => ( + + + + ))} - {attachmentsCount !== 0 ? ( + {attachmentsCount !== 0 ? ( + + + + {attachmentsCount} + + + ) : null} + + {notebooks?.items + ?.filter( + (item) => + renderedInRoute !== "Notebook" || + item.id !== useNavigationStore.getState().focusedRouteId + ) + .filter((_, index) => showMore || index < 1) + .map((item) => ( + + + + {item.title} + + + ))} + + {tags?.items + ?.filter((_, index) => showMore || index < 1) + .map((item) => + item.id ? ( - - - {attachmentsCount} + + {item.title} - ) : null} + ) : null + )} - {notebooks?.items - ?.filter( - (item) => - renderedInRoute !== "Notebook" || - item.id !== useNavigationStore.getState().focusedRouteId - ) - .filter((_, index) => showMore || index < 1) - .map((item) => ( - - - - {item.title} - - - ))} - - {tags?.items - ?.filter((_, index) => showMore || index < 1) - .map((item) => - item.id ? ( - - - {item.title} - - - ) : null - )} - - {(() => { - const filteredNotebooks = (notebooks?.items || []).filter( - (nb) => - renderedInRoute !== "Notebook" || - nb.id !== useNavigationStore.getState().focusedRouteId - ); - const filteredTags = (tags?.items || []).filter((t) => t.id); - const totalNotebooks = filteredNotebooks.length; - const totalTags = filteredTags.length; - const hasMore = totalNotebooks > 1 || totalTags > 1; - if (!hasMore) return null; - const hiddenCount = - (totalNotebooks > 1 ? totalNotebooks - 1 : 0) + - (totalTags > 1 ? totalTags - 1 : 0); - return ( - { - if (showMore) { - useShowMoreStore.getState().hide(item.id); - } else { - useShowMoreStore.getState().show(item.id); - } - }} - > - {showMore - ? "Show less" - : `+${hiddenCount} ${strings.more()}`} - - ); - })()} - - ) : ( - <> - { + const filteredNotebooks = (notebooks?.items || []).filter( + (nb) => + renderedInRoute !== "Notebook" || + nb.id !== useNavigationStore.getState().focusedRouteId + ); + const filteredTags = (tags?.items || []).filter((t) => t.id); + const totalNotebooks = filteredNotebooks.length; + const totalTags = filteredTags.length; + const hasMore = totalNotebooks > 1 || totalTags > 1; + if (!hasMore) return null; + const hiddenCount = + (totalNotebooks > 1 ? totalNotebooks - 1 : 0) + + (totalTags > 1 ? totalTags - 1 : 0); + return ( + { + if (showMore) { + useShowMoreStore.getState().hide(item.id); + } else { + useShowMoreStore.getState().show(item.id); + } }} > - {item && item.dateDeleted - ? strings.deletedOn( - new Date(item.dateDeleted).toISOString().slice(0, 10) - ) - : null} - - - - {strings.note()} - - - )} + {showMore ? "Show less" : `+${hiddenCount} ${strings.more()}`} + + ); + })()} )} @@ -490,6 +463,18 @@ const NoteItem = ({ gap: Spacing.LEVEL_1 }} > + {isTrash ? ( + + {strings.note()} + + ) : null} + {compactMode ? null : ( - {getFormattedDate( - date, - dayjs(date).isBefore(dayjs().subtract(1, "day").hour(23)) - ? "date" - : "time" - )} + {isTrash + ? strings.deletedOn( + new Date((item as TrashItem).dateDeleted) + .toISOString() + .slice(0, 10) + ) + : getFormattedDate( + date, + dayjs(date).isBefore(dayjs().subtract(1, "day").hour(23)) + ? "date" + : "time" + )} )} diff --git a/apps/mobile/app/components/list-items/selection-wrapper/index.tsx b/apps/mobile/app/components/list-items/selection-wrapper/index.tsx index dcf5c610b..d587e646f 100644 --- a/apps/mobile/app/components/list-items/selection-wrapper/index.tsx +++ b/apps/mobile/app/components/list-items/selection-wrapper/index.tsx @@ -71,44 +71,53 @@ const SelectionWrapper = ({ }; return ( - - - {hasGroupHeader ? null : ( + <> + {hasGroupHeader ? null : ( + - )} - + )} + + - {children} - - - + + {children} + + + + ); };