web: fix tags & other items lists glitching

streetwriters · Jul 10, 2024 · 8046932 · 8046932
1 parent c45aa84
commit 8046932
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 102 deletions.
diff --git a/apps/web/src/components/list-container/index.tsx b/apps/web/src/components/list-container/index.tsx
@@ -31,7 +31,11 @@ import {
   store as selectionStore
 } from "../../stores/selection-store";
 import GroupHeader from "../group-header";
-import { DEFAULT_ITEM_HEIGHT, ListItemWrapper } from "./list-profiles";
+import {
+  ListItemWrapper,
+  getListItemDefaultHeight,
+  getListItemPlaceholderData
+} from "./list-profiles";
 import Announcements from "../announcements";
 import { ListLoader } from "../loaders/list-loader";
 import ScrollContainer from "../scroll-container";
@@ -44,7 +48,7 @@ import {
   Virtuoso,
   VirtuosoHandle
 } from "react-virtuoso";
-import { useResolvedItem } from "@notesnook/common";
+import { getRandom, useResolvedItem } from "@notesnook/common";
 import { Context } from "./types";
 import { AppEventManager, AppEvents } from "../../common/app-events";
 
@@ -207,7 +211,7 @@ function ListContainer(props: ListContainerProps) {
             <Virtuoso
               ref={listRef}
               computeItemKey={(index) => items.key(index)}
-              defaultItemHeight={DEFAULT_ITEM_HEIGHT}
+              defaultItemHeight={getListItemDefaultHeight(group, compact)}
               totalCount={items.length}
               onBlur={() => setFocusedGroupIndex(-1)}
               onKeyDown={(e) => onKeyDown(e.nativeEvent)}
@@ -216,7 +220,7 @@ function ListContainer(props: ListContainerProps) {
                 Item: VirtuosoItem,
                 Header: ListHeader
               }}
-              increaseViewportBy={{ top: 10, bottom: 10 }}
+              increaseViewportBy={{ top: 200, bottom: 200 }}
               context={{
                 header,
                 items,
@@ -301,78 +305,32 @@ function ItemRenderer({
   } = context;
   const resolvedItem = useResolvedItem({ index, items });
   if (!resolvedItem || !resolvedItem.item) {
-    if (compact)
-      return (
-        <div
-          key="list-item-skeleton"
-          style={{
-            padding: 5,
-            height: 12,
-            width: "50%",
-            backgroundColor: "var(--background-secondary)"
-          }}
-        />
-      );
-
+    const placeholderData = getListItemPlaceholderData(group, compact);
     return (
       <div
         key="list-item-skeleton"
         style={{
           display: "flex",
           flexDirection: "column",
-          paddingTop: 10,
-          paddingBottom: 10,
-          paddingLeft: 5,
-          paddingRight: 5,
-          gap: 5
+          paddingTop: placeholderData.padding[0],
+          paddingRight: placeholderData.padding[1],
+          paddingBottom: placeholderData.padding[2],
+          paddingLeft: placeholderData.padding[3],
+          gap: placeholderData.gap
         }}
       >
-        <div
-          style={{
-            height: 16,
-            width: "50%",
-            backgroundColor: "var(--background-secondary)"
-          }}
-        />
-        <div
-          style={{
-            height: 12,
-            width: "100%",
-            backgroundColor: "var(--background-secondary)"
-          }}
-        />
-        <div
-          style={{
-            height: 12,
-            width: "100%",
-            backgroundColor: "var(--background-secondary)"
-          }}
-        />
-        <div style={{ display: "flex", gap: 5 }}>
-          <span
-            style={{
-              height: 10,
-              width: "50px",
-              backgroundColor: "var(--background-secondary)"
-            }}
-          />
-          <span
-            style={{
-              height: 10,
-              width: 10,
-              borderRadius: 50,
-              backgroundColor: "var(--background-secondary)"
-            }}
-          />
-          <span
+        {placeholderData.lines.map((line, index) => (
+          <div
+            key={`${index}`}
             style={{
-              height: 10,
-              width: 10,
-              borderRadius: 50,
-              backgroundColor: "var(--background-secondary)"
+              height: line.height,
+              width:
+                line.width === "random" ? `${getRandom(20, 60)}%` : line.width,
+              backgroundColor: "var(--background-secondary)",
+              borderRadius: line.height / 4
             }}
           />
-        </div>
+        ))}
       </div>
     );
   }

diff --git a/apps/web/src/components/list-container/list-profiles.tsx b/apps/web/src/components/list-container/list-profiles.tsx
@@ -40,11 +40,10 @@ type ListItemWrapperProps = {
   data?: unknown;
   context?: Context;
   compact?: boolean;
-  simplified?: boolean;
 };
 
 export function ListItemWrapper(props: ListItemWrapperProps) {
-  const { group, compact, context, simplified, item, data } = props;
+  const { group, compact, context, item, data } = props;
 
   switch (item.type) {
     case "note": {
@@ -64,13 +63,13 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
           item={item}
           totalNotes={typeof data === "number" ? data : 0}
           date={getDate(item, group)}
-          simplified={simplified}
+          compact={compact}
         />
       );
     case "trash":
       return <TrashItem item={item} date={getDate(item, group)} />;
     case "reminder":
-      return <Reminder item={item} simplified={simplified} />;
+      return <Reminder item={item} compact={compact} />;
     case "tag":
       return (
         <Tag item={item} totalNotes={typeof data === "number" ? data : 0} />
@@ -82,6 +81,66 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
   }
 }
 
+type PlaceholderData = {
+  padding: [number, number, number, number];
+  lines: { height: number; width: "random" | string | number }[];
+  gap?: number;
+};
+const COMPACT_PLACEHOLDER_ITEM_DATA: PlaceholderData = {
+  padding: [6, 5, 6, 5],
+  lines: [{ height: 16, width: `random` }]
+};
+const FULL_PLACEHOLDER_ITEM_DATA: PlaceholderData = {
+  padding: [10, 5, 10, 5],
+  gap: 5,
+  lines: [
+    {
+      height: 16,
+      width: "50%"
+    },
+    {
+      height: 12,
+      width: "100%"
+    },
+    {
+      height: 12,
+      width: "70%"
+    },
+    {
+      height: 10,
+      width: 30
+    }
+  ]
+};
+export function getListItemDefaultHeight(
+  group: GroupingKey | undefined,
+  compact: boolean | undefined
+) {
+  const data = getListItemPlaceholderData(group, compact);
+  let height = data.padding[0] + data.padding[2];
+  if (data.gap) height += data.gap * data.lines.length - 1;
+  data.lines.forEach((line) => (height += line.height));
+  return height;
+}
+export function getListItemPlaceholderData(
+  group: GroupingKey | undefined,
+  compact: boolean | undefined
+): PlaceholderData {
+  switch (group) {
+    case "home":
+    case "favorites":
+    case "notes":
+    case "notebooks":
+    case "trash":
+    case "reminders":
+      if (compact) return COMPACT_PLACEHOLDER_ITEM_DATA;
+      return FULL_PLACEHOLDER_ITEM_DATA;
+    case "tags":
+    default:
+      return COMPACT_PLACEHOLDER_ITEM_DATA;
+  }
+}
+
 function getDate(item: Item, groupType?: GroupingKey): number {
   return (
     getSortValue(

diff --git a/apps/web/src/components/list-item/index.tsx b/apps/web/src/components/list-item/index.tsx
@@ -40,7 +40,6 @@ type ListItemProps<TItem extends Item, TContext> = {
   isFocused?: boolean;
   isCompact?: boolean;
   isDisabled?: boolean;
-  isSimple?: boolean;
   item: TItem;
   draggable?: boolean;
 
@@ -76,7 +75,6 @@ function ListItem<TItem extends Item, TContext>(
     isFocused,
     isCompact,
     isDisabled,
-    isSimple,
     item,
     sx,
     context,
@@ -203,12 +201,12 @@ function ListItem<TItem extends Item, TContext>(
         <Text
           dir="auto"
           data-test-id={`title`}
-          variant={isSimple || isCompact ? "body" : "subtitle"}
+          variant={isCompact ? "body" : "subtitle"}
           sx={{
             whiteSpace: "nowrap",
             overflow: "hidden",
             textOverflow: "ellipsis",
-            fontWeight: isCompact || isSimple ? "body" : "bold",
+            fontWeight: isCompact ? "body" : "bold",
             color:
               selected && heading === "heading"
                 ? `${heading}-selected`
@@ -222,7 +220,7 @@ function ListItem<TItem extends Item, TContext>(
         props.title
       )}
 
-      {!isSimple && !isCompact && props.body && (
+      {!isCompact && props.body && (
         <Text
           as="p"
           variant="body"

diff --git a/apps/web/src/components/notebook/index.tsx b/apps/web/src/components/notebook/index.tsx
@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React, { useRef } from "react";
 import { Flex, Text } from "@theme-ui/components";
 import ListItem from "../list-item";
-import { useStore, store } from "../../stores/notebook-store";
+import { store } from "../../stores/notebook-store";
 import { useStore as useNotesStore } from "../../stores/note-store";
 import { store as appStore } from "../../stores/app-store";
 import { db } from "../../common/db";
@@ -49,20 +49,18 @@ type NotebookProps = {
   item: NotebookType;
   totalNotes: number;
   date: number;
-  simplified?: boolean;
+  compact?: boolean;
 };
 function Notebook(props: NotebookProps) {
-  const { item, totalNotes, date, simplified } = props;
+  const { item, totalNotes, date, compact } = props;
   const notebook = item;
-  const isCompact = useStore((store) => store.viewMode === "compact");
   const dragTimeout = useRef(0);
   const { isDragEntering, isDragLeaving } = useDragHandler(`id_${notebook.id}`);
 
   return (
     <ListItem
       draggable
-      isCompact={isCompact}
-      isSimple={simplified}
+      isCompact={compact}
       item={notebook}
       onClick={() => openNotebook(notebook, totalNotes)}
       onDragEnter={(e) => {
@@ -87,7 +85,7 @@ function Notebook(props: NotebookProps) {
       menuItems={notebookMenuItems}
       footer={
         <>
-          {isCompact ? (
+          {compact ? (
             <>
               <Text variant="subBody">{pluralize(totalNotes, "note")}</Text>
             </>
@@ -143,7 +141,8 @@ export default React.memo(Notebook, (prev, next) => {
     prevItem.pinned === nextItem.pinned &&
     prevItem.title === nextItem.title &&
     prevItem.description === nextItem.description &&
-    prev.totalNotes === next.totalNotes
+    prev.totalNotes === next.totalNotes &&
+    prev.compact === next.compact
   );
 });
 

diff --git a/apps/web/src/components/reminder/index.tsx b/apps/web/src/components/reminder/index.tsx
@@ -61,11 +61,11 @@ const PRIORITY_ICON_MAP = {
 
 type ReminderProps = {
   item: ReminderType;
-  simplified?: boolean;
+  compact?: boolean;
 };
 
 function Reminder(props: ReminderProps) {
-  const { item, simplified } = props;
+  const { item, compact } = props;
   const reminder = item as unknown as ReminderType;
   const PriorityIcon = PRIORITY_ICON_MAP[reminder.priority];
   return (
@@ -74,7 +74,7 @@ function Reminder(props: ReminderProps) {
       title={reminder.title}
       body={reminder.description}
       isDisabled={reminder.disabled}
-      isSimple={simplified}
+      isCompact={compact}
       onClick={() => showEditReminderDialog(reminder.id)}
       footer={
         <Flex

diff --git a/apps/web/src/views/notebooks.tsx b/apps/web/src/views/notebooks.tsx
@@ -32,6 +32,7 @@ function Notebooks() {
   const filteredItems = useSearch("notebooks", (query) =>
     db.lookup.notebooks(query).sorted()
   );
+  const isCompact = useStore((store) => store.viewMode === "compact");
 
   useEffect(() => {
     store.get().refresh();
@@ -45,6 +46,7 @@ function Notebooks() {
         refresh={refresh}
         items={filteredItems || notebooks}
         placeholder={<Placeholder context="notebooks" />}
+        compact={isCompact}
         button={{
           onClick: () => hashNavigate("/notebooks/create")
         }}