interface: fix assorted breakage from 1.2 indigo bump

pkg/interface/package-lock.json

@@ -1709,9 +1709,21 @@
       "integrity": "sha512-3OPSdf9cejP/TSzWXuBaYbzLtAfBzQnc75SlPLkoPfwpxnv1Bvy9hiWngLY0WnKRR6lMOldnkYQCCuNWeDibYQ=="
     },
     "@tlon/indigo-react": {
-      "version": "1.1.15",
+      "version": "github:liam-fitzgerald/indigo-react#36fe20029c6005b39581b05c2987cd7c6d606056",
-      "resolved": "https://registry.npmjs.org/@tlon/indigo-react/-/indigo-react-1.1.15.tgz",
+      "from": "github:liam-fitzgerald/indigo-react#lf/1.2.5",
-      "integrity": "sha512-Ao+1hAJjN5y1gDyT7GIUgXORPXTIpZKVVtrS++ZGYBemYMSq3oJFMIZertsSZbDHuh/TsVPenJrMUZBpV60law=="
+      "requires": {
+        "@reach/menu-button": "^0.10.5",
+        "formik": "^2.1.5",
+        "react": "^16.13.1",
+        "tslib": "^2.0.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+          "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+        }
+      }
     },
     "@types/anymatch": {
       "version": "1.3.1",
@@ -1794,12 +1806,58 @@
       "integrity": "sha512-x26ur3dSXgv5AwKS0lNfbjpCakGIduWU1DU91Zz58ONRWrIKGunmZBNv4P7N+e27sJkiGDsw/3fT4AtsqQBrBA==",
       "dev": true
     },
+    "@types/orderedmap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/orderedmap/-/orderedmap-1.0.0.tgz",
+      "integrity": "sha512-dxKo80TqYx3YtBipHwA/SdFmMMyLCnP+5mkEqN0eMjcTBzHkiiX0ES118DsjDBjvD+zeSsSU9jULTZ+frog+Gw==",
+      "dev": true
+    },
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
       "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
       "dev": true
     },
+    "@types/prosemirror-model": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-model/-/prosemirror-model-1.7.2.tgz",
+      "integrity": "sha512-2l+yXvidg3AUHN07mO4Jd8Q84fo6ksFsy7LHUurLYrZ74uTahBp2fzcO49AKZMzww2EulXJ40Kl/OFaQ/7A1fw==",
+      "dev": true,
+      "requires": {
+        "@types/orderedmap": "*"
+      }
+    },
+    "@types/prosemirror-state": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-state/-/prosemirror-state-1.2.5.tgz",
+      "integrity": "sha512-a5DxAifiF6vmdSJ5jsDMkpykUgUJUy+T5Q5hCjFOKJ4cfd3m3q1lsFKr7Bc4r91Qb7rfqyiKCMDnASS8LIHrKw==",
+      "dev": true,
+      "requires": {
+        "@types/prosemirror-model": "*",
+        "@types/prosemirror-transform": "*",
+        "@types/prosemirror-view": "*"
+      }
+    },
+    "@types/prosemirror-transform": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-transform/-/prosemirror-transform-1.1.1.tgz",
+      "integrity": "sha512-yYCYSoiRH+Wcbl8GJc0PFCzeyMzNQ1vL2xrHHSXZuNcIlH75VoiKrZFeZ6BS9cl8mYXjZrlmdBe8YOxYvyKM6A==",
+      "dev": true,
+      "requires": {
+        "@types/prosemirror-model": "*"
+      }
+    },
+    "@types/prosemirror-view": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-view/-/prosemirror-view-1.15.1.tgz",
+      "integrity": "sha512-ZdgIqDLWiO4wW4DhK8OjEVam3/DhBcggQeZ6zLts+UCflAZPnEk5dzRqFBVEyrvWqSAGLuPAoOgGAPjj/XwR8w==",
+      "dev": true,
+      "requires": {
+        "@types/prosemirror-model": "*",
+        "@types/prosemirror-state": "*",
+        "@types/prosemirror-transform": "*"
+      }
+    },
     "@types/react": {
       "version": "16.9.38",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.38.tgz",
@@ -2309,7 +2367,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -3553,6 +3610,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "crelt": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.4.tgz",
+      "integrity": "sha512-l1cwMUOssGLEj5zgbut4lxJq95ZabOXVZnDybNqQRUtXh1lvUK7e7kJNm8SfvTQzYpE3AVJhIVUJKf382lMA7A=="
+    },
     "cross-env": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.2.tgz",
@@ -6208,6 +6270,14 @@
         "type-check": "~0.3.2"
       }
     },
+    "linkify-it": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
+      "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "loader-runner": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
@@ -6338,6 +6408,18 @@
       "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
       "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg=="
     },
+    "markdown-it": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-10.0.0.tgz",
+      "integrity": "sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==",
+      "requires": {
+        "argparse": "^1.0.7",
+        "entities": "~2.0.0",
+        "linkify-it": "^2.0.0",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      }
+    },
     "markdown-to-jsx": {
       "version": "6.11.4",
       "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-6.11.4.tgz",
@@ -6366,6 +6448,11 @@
         "unist-util-visit-parents": "1.1.2"
       }
     },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -6895,6 +6982,11 @@
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -7131,6 +7223,11 @@
         "word-wrap": "~1.2.3"
       }
     },
+    "orderedmap": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-1.1.1.tgz",
+      "integrity": "sha512-3Ux8um0zXbVacKUkcytc0u3HgC0b0bBLT+I60r2J/En72cI0nZffqrA7Xtf2Hqs27j1g82llR5Mhbd0Z1XW4AQ=="
+    },
     "original": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/original/-/original-1.0.2.tgz",
@@ -7647,6 +7744,150 @@
       "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.3.tgz",
       "integrity": "sha512-TEMKBo6s4gZUKmNYwaMkS2JdDxdWgUijW/U/jLAOHVyLZfU1KHXv+mC1J9gkfGOr8532XHqMJytko1lSjc0kmw=="
     },
+    "prosemirror": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/prosemirror/-/prosemirror-0.11.1.tgz",
+      "integrity": "sha512-IZ35mmexuo3DNkMXs2A3bAm1jdlAJRVPor/bX1AWT+TdAR9fv6igUjRUFtQDCRUKwxH7ufwL1p6Um/MdgcbVIw=="
+    },
+    "prosemirror-commands": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.1.4.tgz",
+      "integrity": "sha512-kj4Qi+8h3EpJtZuuEDwZ9h2/QNGWDsIX/CzjmClxi9GhxWyBUMVUvIFk0mgdqHyX20lLeGmOpc0TLA5aPzgpWg==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-dropcursor": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.3.2.tgz",
+      "integrity": "sha512-4c94OUGyobGnwcQI70OXyMhE/9T4aTgjU+CHxkd5c7D+jH/J0mKM/lk+jneFVKt7+E4/M0D9HzRPifu8U28Thw==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0",
+        "prosemirror-view": "^1.1.0"
+      }
+    },
+    "prosemirror-example-setup": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-example-setup/-/prosemirror-example-setup-1.1.2.tgz",
+      "integrity": "sha512-MTpIMyqk08jFnzxeRMCinCEMtVSTUtxKgQBGxfCbVe9C6zIOqp9qZZJz5Ojaad1GETySyuj8+OIHHvQsIaaaGQ==",
+      "requires": {
+        "prosemirror-commands": "^1.0.0",
+        "prosemirror-dropcursor": "^1.0.0",
+        "prosemirror-gapcursor": "^1.0.0",
+        "prosemirror-history": "^1.0.0",
+        "prosemirror-inputrules": "^1.0.0",
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-menu": "^1.0.0",
+        "prosemirror-schema-list": "^1.0.0",
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "prosemirror-gapcursor": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.1.5.tgz",
+      "integrity": "sha512-SjbUZq5pgsBDuV3hu8GqgIpZR5eZvGLM+gPQTqjVVYSMUCfKW3EGXTEYaLHEl1bGduwqNC95O3bZflgtAb4L6w==",
+      "requires": {
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-view": "^1.0.0"
+      }
+    },
+    "prosemirror-history": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.1.3.tgz",
+      "integrity": "sha512-zGDotijea+vnfnyyUGyiy1wfOQhf0B/b6zYcCouBV8yo6JmrE9X23M5q7Nf/nATywEZbgRLG70R4DmfSTC+gfg==",
+      "requires": {
+        "prosemirror-state": "^1.2.2",
+        "prosemirror-transform": "^1.0.0",
+        "rope-sequence": "^1.3.0"
+      }
+    },
+    "prosemirror-inputrules": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.1.3.tgz",
+      "integrity": "sha512-ZaHCLyBtvbyIHv0f5p6boQTIJjlD6o2NPZiEaZWT2DA+j591zS29QQEMT4lBqwcLW3qRSf7ZvoKNbf05YrsStw==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-keymap": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.1.4.tgz",
+      "integrity": "sha512-Al8cVUOnDFL4gcI5IDlG6xbZ0aOD/i3B17VT+1JbHWDguCgt/lBHVTHUBcKvvbSg6+q/W4Nj1Fu6bwZSca3xjg==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
+    "prosemirror-markdown": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.5.0.tgz",
+      "integrity": "sha512-ugTyZfTu1l2E3EI6+DwD917mz2Sk5E4R01Nh67yMffGg4S9ZetC81g1VIKGCaak4jnoP4BMUIOUJyXAS6xFLaA==",
+      "requires": {
+        "markdown-it": "^10.0.0",
+        "prosemirror-model": "^1.0.0"
+      }
+    },
+    "prosemirror-menu": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.1.4.tgz",
+      "integrity": "sha512-2ROsji/X9ciDnVSRvSTqFygI34GEdHfQSsK4zBKjPxSEroeiHHcdRMS1ofNIf2zM0Vpp5/YqfpxynElymQkqzg==",
+      "requires": {
+        "crelt": "^1.0.0",
+        "prosemirror-commands": "^1.0.0",
+        "prosemirror-history": "^1.0.0",
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "prosemirror-model": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.11.2.tgz",
+      "integrity": "sha512-+gM+x1VUfGAyKR/g0bK7FC46fVNq0xVVL859QAQ7my2p5HzKrPps/pSbYn7T50XTG2r2IhZJChsUFUBHtcoN0Q==",
+      "requires": {
+        "orderedmap": "^1.1.0"
+      }
+    },
+    "prosemirror-schema-list": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.1.4.tgz",
+      "integrity": "sha512-pNTuZflacFOBlxrTcWSdWhjoB8BaucwfJVp/gJNxztOwaN3wQiC65axclXyplf6TKgXD/EkWfS/QAov3/Znadw==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-state": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.3.3.tgz",
+      "integrity": "sha512-PLXh2VJsIgvlgSTH6I2Yg6vk1CzPDp21DFreVpQtDMY2S6WaMmrQgDTLRcsrD8X38v8Yc873H7+ogdGzyIPn+w==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-transform": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.2.8.tgz",
+      "integrity": "sha512-hKqceqv9ZmMQXNQkhFjr0KFGPvkhygaWND+uIM0GxRpALrKfxP97SsgHTBs3OpJhDmh5N+mB4D/CksB291Eavg==",
+      "requires": {
+        "prosemirror-model": "^1.0.0"
+      }
+    },
+    "prosemirror-view": {
+      "version": "1.15.7",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.15.7.tgz",
+      "integrity": "sha512-fSSXphXg+82qb4xNsHT0mX6ro0Wu1/l+WIFO5jYfyjd42r6ZWSg0gFItLgqOVPxoKQOlrPJUhrozTxiqx0EXOg==",
+      "requires": {
+        "prosemirror-model": "^1.1.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -8388,6 +8629,11 @@
         "inherits": "^2.0.1"
       }
     },
+    "rope-sequence": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.2.tgz",
+      "integrity": "sha512-ku6MFrwEVSVmXLvy3dYph3LAMNS0890K7fabn+0YIRQ2T96T9F4gkFf0vf0WW0JUraNWwGRtInEpH7yO4tbQZg=="
+    },
     "run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -8993,8 +9239,7 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
-      "dev": true
     },
     "ssri": {
       "version": "6.0.1",
@@ -9687,6 +9932,11 @@
       "integrity": "sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==",
       "dev": true
     },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
     "unherit": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz",
@@ -9908,6 +10158,11 @@
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
       "dev": true
     },
+    "use-prosemirror": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-prosemirror/-/use-prosemirror-1.2.0.tgz",
+      "integrity": "sha512-qRq5xNdgNQKBFBOKlhGmpKd0yJoktmkiUPkD+SmS+BX9are1S/Emg4qf8vk/Npk32ECIgKxmbicd4xUzQFhNoQ=="
+    },
     "util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
@@ -10006,6 +10261,11 @@
       "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
       "dev": true
     },
+    "w3c-keyname": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz",
+      "integrity": "sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw=="
+    },
     "warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",

pkg/interface/src/views/apps/publish/components/lib/CommentInput.tsx

@@ -48,7 +48,7 @@ export default function CommentInput(props: CommentInputProps) {
           id="comment"
           placeholder={props.placeholder || ""}
         />
-        <AsyncButton loadingText={loading} border type="submit">
+        <AsyncButton mt={2} loadingText={loading} border type="submit">
           {label}
         </AsyncButton>
       </Form>

pkg/interface/src/views/apps/publish/components/lib/NoteForm.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import * as Yup from "yup";
-import { Box, Input } from "@tlon/indigo-react";
+import { Box, ManagedTextInputField as Input } from "@tlon/indigo-react";
 import { AsyncButton } from "../../../../components/AsyncButton";
 import { Formik, Form, FormikHelpers } from "formik";
 import { MarkdownField } from "./MarkdownField";

pkg/interface/src/views/apps/publish/components/lib/Notebook.tsx

@@ -3,19 +3,10 @@ import { Link, RouteComponentProps, Route, Switch } from "react-router-dom";
 import { NotebookPosts } from "./NotebookPosts";
 import { Subscribers } from "./Subscribers";
 import { Settings } from "./Settings";
-import { Spinner } from '~/views/components/Spinner';
+import { Spinner } from "~/views/components/Spinner";
+import { Tabs, Tab } from "~/views/components/Tab";
 import { roleForShip } from "~/logic/lib/group";
-import {
+import { Box, Button, Text, Row } from "@tlon/indigo-react";
-  Box,
-  Button,
-  Text,
-  Tab as _Tab,
-  Tabs,
-  TabList as _TabList,
-  TabPanels,
-  TabPanel,
-  Row,
-} from "@tlon/indigo-react";
 import { Notebook as INotebook } from "~/types/publish-update";
 import { Groups } from "~/types/group-update";
 import { Contacts, Rolodex } from "~/types/contact-update";
@@ -24,14 +15,6 @@ import styled from "styled-components";
 import { Associations } from "~/types";
 import { deSig } from "~/logic/lib/util";
 
-const TabList = styled(_TabList)`
-  margin-bottom: ${(p) => p.theme.space[4]}px;
-`;
-
-const Tab = styled(_Tab)`
-  flex-grow: 1;
-`;
-
 interface NotebookProps {
   api: GlobalApi;
   ship: string;
@@ -48,16 +31,36 @@ interface NotebookState {
   isUnsubscribing: boolean;
 }
 
-export class Notebook extends PureComponent<NotebookProps & RouteComponentProps, NotebookState> {
+export class Notebook extends PureComponent<
+  NotebookProps & RouteComponentProps,
+  NotebookState
+> {
   constructor(props) {
     super(props);
     this.state = {
-      isUnsubscribing: false
+      isUnsubscribing: false,
+      tab: "all",
     };
+    this.setTab = this.setTab.bind(this);
+  }
+
+  setTab(tab) {
+    this.setState({ tab });
   }
 
   render() {
-    const { api, ship, book, notebook, notebookContacts, groups, history, hideNicknames, associations } = this.props;
+    const {
+      api,
+      ship,
+      book,
+      notebook,
+      notebookContacts,
+      groups,
+      history,
+      hideNicknames,
+      associations,
+    } = this.props;
+    const { state } = this;
 
     const group = groups[notebook?.["writers-group-path"]];
     if (!group) return null; // Waitin on groups to populate
@@ -104,32 +107,63 @@ export class Notebook extends PureComponent<NotebookProps & RouteComponentProps,
               </Button>
             </Link>
           )}
-          {!isOwn
+          {!isOwn ? (
-            ? this.state.isUnsubscribing
+            this.state.isUnsubscribing ? (
-              ? <Spinner awaiting={this.state.isUnsubscribing} classes="mt2 ml2" text="Unsubscribing..." />
+              <Spinner
-              : <Button ml={isWriter ? 2 : 0} error border onClick={() => {
+                awaiting={this.state.isUnsubscribing}
+                classes="mt2 ml2"
+                text="Unsubscribing..."
+              />
+            ) : (
+              <Button
+                ml={isWriter ? 2 : 0}
+                error
+                border
+                onClick={() => {
                   this.setState({ isUnsubscribing: true });
-                api.publish.unsubscribeNotebook(deSig(ship), book).then(() => {
+                  api.publish
+                    .unsubscribeNotebook(deSig(ship), book)
+                    .then(() => {
                       history.push("/~publish");
-                }).catch(() => {
+                    })
+                    .catch(() => {
                       this.setState({ isUnsubscribing: false });
                     });
-              }}>
+                }}
+              >
                 Unsubscribe
               </Button>
-            : null
+            )
-          }
+          ) : null}
         </Row>
         <Box gridColumn={["1/2", "1/3"]}>
           <Tabs>
-            <TabList>
+            <Tab
-              <Tab>All Posts</Tab>
+              selected={state.tab}
-              <Tab>About</Tab>
+              setSelected={this.setTab}
-              {isAdmin && <Tab>Subscribers</Tab>}
+              label="All Posts"
-              {isOwn && <Tab>Settings</Tab>}
+              id="all"
-            </TabList>
+            />
-            <TabPanels>
+            <Tab
-              <TabPanel>
+              selected={state.tab}
+              setSelected={this.setTab}
+              label="About"
+              id="about"
+            />
+            <Tab
+              selected={state.tab}
+              setSelected={this.setTab}
+              label="Subscribers"
+              id="subscribers"
+            />
+            <Tab
+              selected={state.tab}
+              setSelected={this.setTab}
+              label="Settings"
+              id="settings"
+            />
+          </Tabs>
+          {state.tab === "all" && (
             <NotebookPosts
               notes={notes}
               list={notesList}
@@ -138,11 +172,9 @@ export class Notebook extends PureComponent<NotebookProps & RouteComponentProps,
               contacts={notebookContacts}
               hideNicknames={hideNicknames}
             />
-              </TabPanel>
+          )}
-              <TabPanel>
+          {state.tab === "about" && <Box color="black">{notebook?.about}</Box>}
-                <Box color="black">{notebook?.about}</Box>
+          {state.tab === "subscribers" && (
-              </TabPanel>
-              <TabPanel>
             <Subscribers
               host={ship}
               book={book}
@@ -150,8 +182,8 @@ export class Notebook extends PureComponent<NotebookProps & RouteComponentProps,
               api={api}
               groups={groups}
             />
-              </TabPanel>
+          )}
-              <TabPanel>
+          {state.tab === "settings" && (
             <Settings
               host={ship}
               book={book}
@@ -161,9 +193,7 @@ export class Notebook extends PureComponent<NotebookProps & RouteComponentProps,
               associations={associations}
               groups={groups}
             />
-              </TabPanel>
+          )}
-            </TabPanels>
-          </Tabs>
         </Box>
       </Box>
     );

pkg/interface/src/views/apps/publish/components/lib/Sidebar.tsx

@@ -106,7 +106,8 @@ export function Sidebar(props: any) {
       pt={[3, 0]}
       overflowY="auto"
       display={display}
-      maxWidth={["none", "250px"]}
+      flexShrink={0}
+      width={["auto", "250px"]}
     >
       <Box>
         <Link to="/~publish/new" className="green2 pa4 f9 dib">

pkg/interface/src/views/components/AsyncButton.tsx

@@ -37,7 +37,7 @@ export function AsyncButton({
     <Button border disabled={!isValid} type="submit" {...rest}>
       {isSubmitting ? (
         <LoadingSpinner
-          foreground="white"
+          foreground={rest.primary ? "white" : 'black'}
           background="transparent"
           awaiting
           text={loadingText}

pkg/interface/src/views/components/Tab.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Box, Text, Row } from "@tlon/indigo-react";
+
+export const Tab = ({ selected, id, label, setSelected }) => (
+  <Box
+    py={2}
+    borderBottom={1}
+    borderBottomColor={selected === id ? "black" : "washedGray"}
+    px={2}
+    flexGrow={1}
+    display="flex"
+    alignItems="center"
+    justifyContent="center"
+    onClick={() => setSelected(id)}
+  >
+    <Text color={selected === id ? "black" : "gray"}>{label}</Text>
+  </Box>
+);
+
+export const Tabs = ({ children, ...rest }: Parameters<typeof Row>[0]) => (
+  <Row
+    bg="white"
+    mb={2}
+    justifyContent="stretch"
+    alignItems="flex-end"
+    {...rest}
+  >
+    {children}
+  </Row>
+);
+