fix: header flickering in list container

apps/web/src/common/reminders.js

@@ -69,7 +69,8 @@ export const Reminders = {
 };
 
 export async function resetReminders() {
-  appStore.set((state) => (state.reminders = []));
+  const reminders = [];
+
   if (await shouldAddBackupReminder()) {
     if (isDesktop()) {
       const { data, filename, ext } = await createBackup(false);
@@ -79,16 +80,17 @@ export async function resetReminders() {
       );
       saveFile(`${directory}/${filename}.${ext}`, data);
     } else {
-      appStore.addReminder("backup", "high");
+      reminders.push({ type: "backup", priority: "high" });
     }
   }
   if (await shouldAddLoginReminder()) {
-    appStore.addReminder("login", "low");
+    reminders.push({ type: "login", priority: "low" });
   }
   if (await shouldAddConfirmEmailReminder()) {
-    appStore.addReminder("email", "high");
+    reminders.push({ type: "email", priority: "high" });
   }
   if (await shouldAddRecoveryKeyBackupReminder()) {
-    appStore.addReminder("recoverykey", "high");
+    reminders.push({ type: "recoverykey", priority: "high" });
   }
+  appStore.get().setReminders(...reminders);
 }

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

@@ -177,3 +177,5 @@ export const MailCheck = createIcon(Icons.mdiEmailCheckOutline);
 export const Discord = createIcon(Icons.mdiDiscord);
 export const Twitter = createIcon(Icons.mdiTwitter);
 export const Reddit = createIcon(Icons.mdiReddit);
+
+export const Dismiss = createIcon(Icons.mdiClose);

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

@@ -66,16 +66,6 @@ function ListContainer(props) {
                   ) : (
                     <ReminderBar />
                   ),
-                Footer: () => (
-                  <Text
-                    textAlign="center"
-                    color="fontTertiary"
-                    variant="body"
-                    py={2}
-                  >
-                    — End reached —
-                  </Text>
-                ),
               }}
               itemContent={(index, item) => {
                 if (!item) return null;

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

@@ -80,6 +80,7 @@ function Note(props) {
               if (!tagItem) return null;
               return (
                 <IconTag
+                  key={tagItem.id}
                   text={tagItem.alias || tagItem.title}
                   icon={Icon.Tag}
                   onClick={() => {

apps/web/src/components/reminder-bar/index.js

@@ -1,11 +1,12 @@
 import React, { useMemo } from "react";
-import { Flex, Text } from "rebass";
+import { Button, Flex, Text } from "rebass";
 import { useStore as useAppStore } from "../../stores/app-store";
 import { Reminders } from "../../common/reminders";
 import * as Icon from "../icons";
 
 function ReminderBar() {
   const reminders = useAppStore((store) => store.reminders);
+  const dismissReminders = useAppStore((store) => store.dismissReminders);
   const reminder = useMemo(() => {
     if (!reminders) return null;
 
@@ -14,21 +15,21 @@ function ReminderBar() {
     if (!reminder) return;
     return Reminders[reminder.type];
   }, [reminders]);
+
   if (!reminder) return null;
   return (
     <Flex
       alignItems="center"
-      justifyContent="space-between"
       sx={{
         cursor: "pointer",
         borderRadius: "default",
         ":hover": { bg: "hover" },
       }}
+      p={1}
       onClick={reminder?.action}
       mx={1}
-      p={1}
     >
-      <Flex alignItems="center">
+      <Flex alignItems="center" flex={1}>
         <reminder.icon
           size={18}
           color="primary"
@@ -43,7 +44,22 @@ function ReminderBar() {
           </Text>
         </Flex>
       </Flex>
-      <Icon.ChevronRight size={20} color="primary" />
+      <Button
+        onClick={(e) => {
+          e.stopPropagation();
+          dismissReminders(reminder);
+        }}
+        sx={{
+          borderRadius: 50,
+          p: 1,
+          mr: 1,
+          bg: "transparent",
+          ":hover": { backgroundColor: "shade" },
+        }}
+        variant="tool"
+      >
+        <Icon.Dismiss size={20} color="primary" />
+      </Button>
     </Flex>
   );
 }

apps/web/src/stores/app-store.js

@@ -77,13 +77,25 @@ class AppStore extends BaseStore {
    * @param {string} detail
    * @param {"high"|"medium"|"low"} priority
    */
-  addReminder = (type, priority) => {
-    this.set((state) =>
-      state.reminders.push({
-        type,
-        priority: priority === "high" ? 1 : priority === "medium" ? 2 : 1,
-      })
-    );
+  setReminders = (...reminders) => {
+    this.set((state) => {
+      state.reminders = [];
+      for (let reminder of reminders) {
+        const { priority, type } = reminder;
+        state.reminders.push({
+          type,
+          priority: priority === "high" ? 1 : priority === "medium" ? 2 : 1,
+        });
+      }
+    });
+  };
+
+  dismissReminders = (...reminders) => {
+    this.set((state) => {
+      for (let reminder of reminders) {
+        state.reminders.splice(state.reminders.indexOf(reminder), 1);
+      }
+    });
   };
 
   pinItemToMenu = async (item) => {

apps/web/yarn.lock

@@ -8731,7 +8731,7 @@ normalize-url@^3.0.0:
 
 "notes-core@git+https://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:x-oauth-basic@github.com/streetwriters/notesnook-core.git":
   version "6.8.4"
-  resolved "git+https://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:x-oauth-basic@github.com/streetwriters/notesnook-core.git#9573ab115600117146f9d53b7fefba0ca89d03d8"
+  resolved "git+https://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:x-oauth-basic@github.com/streetwriters/notesnook-core.git#18b05fecdcab12278eb4e2e83e20e1f2d2cc97d0"
   dependencies:
     "@stablelib/blake2s" "^1.0.1"
     dayjs "^1.10.6"