feat: backup key task

packages/app/src/Tasks/TaskList.tsx

@@ -1,5 +1,5 @@
 import "./TaskList.css";
-import { useState } from "react";
+import { useSyncExternalStore } from "react";
 import { useUserProfile } from "@snort/system-react";
 
 import useLogin from "@/Hooks/useLogin";
@@ -9,37 +9,62 @@ import { DonateTask } from "./DonateTask";
 import { Nip5Task } from "./Nip5Task";
 import { RenewSubTask } from "./RenewSubscription";
 import { NoticeZapPoolDefault } from "./NoticeZapPool";
+import { BackupKeyTask } from "./BackupKey";
+import { ExternalStore } from "@snort/shared";
 
-const AllTasks: Array<UITask> = [new Nip5Task(), new DonateTask(), new NoticeZapPoolDefault()];
-if (CONFIG.features.subscriptions) {
-  AllTasks.push(new RenewSubTask());
+class TaskStore extends ExternalStore<Array<UITask>> {
+  #tasks: Array<UITask>;
+
+  constructor() {
+    super();
+    const AllTasks: Array<UITask> = [
+      new BackupKeyTask(),
+      new Nip5Task(),
+      new DonateTask(),
+      new NoticeZapPoolDefault()
+    ];
+    if (CONFIG.features.subscriptions) {
+      AllTasks.push(new RenewSubTask());
+    }
+    AllTasks.forEach(a => a.load(() => {
+      this.notifyChange()
+    }));
+    this.#tasks = AllTasks;
+  }
+
+  takeSnapshot(): UITask[] {
+    return [...this.#tasks];
+  }
 }
-AllTasks.forEach(a => a.load());
 
+const AllTasks = new TaskStore();
 export const TaskList = () => {
   const session = useLogin();
   const user = useUserProfile(session.publicKey);
-  const [, setTick] = useState<number>(0);
+  const tasks = useSyncExternalStore(c => AllTasks.hook(c), () => AllTasks.snapshot());
 
   function muteTask(t: UITask) {
     t.mute();
-    setTick(x => (x += 1));
   }
 
   return (
     <div className="task-list">
-      {AllTasks.filter(a => (user ? a.check(user, session) : false)).map(a => {
-        return (
-          <div key={a.id} className="card">
-            <div className="header">
-              <Icon name="lightbulb" />
-              <div className="close" onClick={() => muteTask(a)}>
-                <Icon name="close" size={14} />
+      {tasks.filter(a => (user ? a.check(user, session) : false)).map(a => {
+        if (a.noBaseStyle) {
+          return a.render();
+        } else {
+          return (
+            <div key={a.id} className="card">
+              <div className="header">
+                <Icon name="lightbulb" />
+                <div className="close" onClick={() => muteTask(a)}>
+                  <Icon name="close" size={14} />
+                </div>
               </div>
+              {a.render()}
             </div>
-            {a.render()}
-          </div>
-        );
+          );
+        }
       })}
     </div>
   );