web: control item compactness from list container

apps/web/src/components/list-container/index.tsx

@@ -57,6 +57,7 @@ type ListContainerProps = {
   type: keyof typeof ListProfiles;
   items: Item[];
   groupType?: string;
+  compact?: boolean;
   context?: Context;
   refresh: () => void;
   header?: JSX.Element;
@@ -68,7 +69,8 @@ type ListContainerProps = {
 };
 
 function ListContainer(props: ListContainerProps) {
-  const { type, groupType, items, context, refresh, header, button } = props;
+  const { type, groupType, items, context, refresh, header, button, compact } =
+    props;
 
   const [focusedGroupIndex, setFocusedGroupIndex] = useState(-1);
 
@@ -228,11 +230,11 @@ function ListContainer(props: ListContainerProps) {
                   default:
                     return (
                       <Component
-                        //@ts-ignore
                         item={item}
                         context={context}
                         index={index}
                         type={type}
+                        compact={compact}
                       />
                     );
                 }

apps/web/src/components/list-container/list-profiles.tsx

@@ -53,14 +53,16 @@ type ItemWrapperProps<TItem = Item> = {
   item: TItem;
   type: keyof typeof ListProfiles;
   context?: Context;
+  compact?: boolean;
 };
 
 type ItemWrapper<TItem = Item> = (
   props: ItemWrapperProps<TItem>
 ) => JSX.Element;
 
-const NotesProfile: ItemWrapper = ({ index, item, type, context }) => (
+const NotesProfile: ItemWrapper = ({ index, item, type, context, compact }) => (
   <Note
+    compact={compact}
     index={index}
     pinnable={!context}
     item={item}
@@ -93,8 +95,8 @@ const TopicsProfile: ItemWrapper = ({ index, item }) => (
   />
 );
 
-const RemindersProfile: ItemWrapper<ReminderType> = ({ index, item }) => (
-  <Reminder item={item} index={index} />
+const RemindersProfile: ItemWrapper = ({ index, item }) => (
+  <Reminder item={item as ReminderType} index={index} />
 );
 
 const TrashProfile: ItemWrapper = ({ index, item, type }) => (

apps/web/src/components/note/index.js

@@ -55,11 +55,12 @@ function Note(props) {
     context,
     date,
     reminder,
+    simplified,
+    compact
   } = props;
   const note = item;
 
   const isOpened = useStore((store) => store.selectedNote === note.id);
-  const isCompact = useStore((store) => store.viewMode === "compact");
   const attachments = useAttachmentStore((store) =>
     store.attachments.filter((a) => a.noteIds.includes(note.id))
   );
@@ -77,7 +78,8 @@ function Note(props) {
     <ListItem
       selectable
       isFocused={isOpened}
-      isCompact={isCompact}
+      isCompact={compact}
+      isSimple={simplified}
       item={note}
       title={note.title}
       body={note.headline}
@@ -147,7 +149,7 @@ function Note(props) {
             alignItems: "center"
           }}
         >
-          {isCompact ? (
+          {compact ? (
             <>
               {note.conflicted && (
                 <Icon.Alert size={15} color="error" sx={{ mr: 1 }} />
@@ -257,6 +259,7 @@ export default React.memo(Note, function (prevProps, nextProps) {
     prevItem.locked === nextItem.locked &&
     prevItem.conflicted === nextItem.conflicted &&
     prevItem.color === nextItem.color &&
+    prevProps.compact === nextProps.compact &&
     prevProps.notebook?.dateEdited === nextProps.notebook?.dateEdited &&
     prevProps.reminder?.dateModified === nextProps.reminder?.dateModified &&
     JSON.stringify(prevProps.tags) === JSON.stringify(nextProps.tags) &&

apps/web/src/views/home.js

@@ -28,6 +28,7 @@ import useNavigate from "../hooks/use-navigate";
 function Home() {
   useStore((store) => store.nonce);
   const notes = useStore((store) => store.notes);
+  const isCompact = useStore((store) => store.viewMode === "compact");
   const refresh = useStore((store) => store.refresh);
   const clearContext = useStore((store) => store.clearContext);
   const [isLoading, setIsLoading] = useState(true);
@@ -61,6 +62,7 @@ function Home() {
     <ListContainer
       type="home"
       groupType="home"
+      compact={isCompact}
       refresh={refresh}
       isLoading={isLoading}
       items={notes}

apps/web/src/views/notes.js

@@ -30,6 +30,7 @@ function Notes() {
   const context = useNotesStore((store) => store.context);
   const refreshContext = useNotesStore((store) => store.refreshContext);
   const type = context?.type === "favorite" ? "favorites" : "notes";
+  const isCompact = useNotesStore((store) => store.viewMode === "compact");
 
   useEffect(() => {
     if (context?.type === "color" && context?.notes?.length <= 0) {
@@ -43,6 +44,7 @@ function Notes() {
       type="notes"
       groupType={type}
       refresh={refreshContext}
+      compact={isCompact}
       context={{ ...context, notes: undefined }}
       items={groupArray(context.notes, db.settings.getGroupOptions(type))}
       placeholder={