feat: add ability to unpin using the pin ui

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

@@ -110,9 +110,7 @@ function ListItem(props) {
         <Flex
           variant="rowCenter"
           bg="primary"
-          onClick={() => {
-            //TODO unpin
-          }}
+          onClick={() => props.unpin && props.unpin()}
           sx={{
             position: "absolute",
             top: -15,

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

@@ -17,6 +17,11 @@ import { showItemDeletedToast } from "../../common/toasts";
 import { showUnpinnedToast } from "../../common/toasts";
 import { showToast } from "../../utils/toast";
 
+const pin = async (note) => {
+  await store.pin(note.id);
+  if (note.pinned) await showUnpinnedToast(note.id, "note");
+};
+
 function menuItems(note, context) {
   return [
     { title: "colors", component: Colors },
@@ -28,10 +33,7 @@ function menuItems(note, context) {
     },
     {
       title: note.pinned ? "Unpin" : "Pin",
-      onClick: async () => {
-        await store.pin(note.id);
-        if (note.pinned) await showUnpinnedToast(note.id, "note");
-      },
+      onClick: pin.bind(this, note),
       onlyPro: true,
     },
     {
@@ -123,6 +125,7 @@ function Note(props) {
       body={note.headline}
       id={note.id}
       index={index}
+      unpin={pin.bind(this, note)}
       onClick={() => {
         if (note.conflicted) {
           setHashParam({ diff: note.id });

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

@@ -6,15 +6,15 @@ import * as Icon from "../icons";
 import { showEditNoteDialog } from "../dialogs/addnotebookdialog";
 import { confirm } from "../dialogs/confirm";
 import { showItemDeletedToast, showUnpinnedToast } from "../../common/toasts";
-
+const pin = async (notebook, index) => {
+  await store.pin(notebook, index);
+  if (notebook.pinned) showUnpinnedToast(notebook.id, "notebook");
+};
 function menuItems(notebook, index) {
   return [
     {
       title: notebook.pinned ? "Unpin" : "Pin",
-      onClick: async () => {
-        await store.pin(notebook, index);
-        if (notebook.pinned) showUnpinnedToast(notebook.id, "notebook");
-      },
+      onClick: () => pin(notebook, index),
     },
     {
       title: "Edit",
@@ -58,6 +58,7 @@ class Notebook extends React.Component {
         selectable
         item={notebook}
         onClick={onClick}
+        unpin={() => pin(notebook, index)}
         title={notebook.title}
         body={notebook.description}
         subBody={