interface: fix assorted breakage from 1.2 indigo bump

2024-12-14 08:34:25 +03:00 · 2020-09-22 16:50:09 +10:00 · 2020-09-22 16:50:09 +10:00 · 6aec4baf2b
commit 6aec4baf2b
parent a3545c5cb3
7 changed files with 413 additions and 91 deletions
--- a/pkg/interface/package-lock.json
+++ b/pkg/interface/package-lock.json
@ -1709,9 +1709,21 @@
      "integrity": "sha512-3OPSdf9cejP/TSzWXuBaYbzLtAfBzQnc75SlPLkoPfwpxnv1Bvy9hiWngLY0WnKRR6lMOldnkYQCCuNWeDibYQ=="
    },
    "@tlon/indigo-react": {
-      "version": "1.1.15",
-      "resolved": "https://registry.npmjs.org/@tlon/indigo-react/-/indigo-react-1.1.15.tgz",
-      "integrity": "sha512-Ao+1hAJjN5y1gDyT7GIUgXORPXTIpZKVVtrS++ZGYBemYMSq3oJFMIZertsSZbDHuh/TsVPenJrMUZBpV60law=="
+      "version": "github:liam-fitzgerald/indigo-react#36fe20029c6005b39581b05c2987cd7c6d606056",
+      "from": "github:liam-fitzgerald/indigo-react#lf/1.2.5",
+      "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=",
-      "dev": true
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
    },
    "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",
--- a/pkg/interface/src/views/apps/publish/components/lib/CommentInput.tsx
+++ b/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>
--- a/pkg/interface/src/views/apps/publish/components/lib/NoteForm.tsx
+++ b/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";
--- a/pkg/interface/src/views/apps/publish/components/lib/Notebook.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/Notebook.tsx
@ -3,35 +3,18 @@ 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 {
-  Box,
-  Button,
-  Text,
-  Tab as _Tab,
-  Tabs,
-  TabList as _TabList,
-  TabPanels,
-  TabPanel,
-  Row,
-} from "@tlon/indigo-react";
+import { Box, Button, Text, 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";
 import GlobalApi from "~/logic/api/global";
 import styled from "styled-components";
-import {Associations} from "~/types";
+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
@ -66,14 +69,14 @@ export class Notebook extends PureComponent<NotebookProps & RouteComponentProps,
    const role = group ? roleForShip(group, window.ship) : undefined;
    const isOwn = `~${window.ship}` === ship;
    const isAdmin = role === "admin" || isOwn;
-  
+
    const isWriter =
      isOwn || group.tags?.publish?.[`writers-${book}`]?.has(window.ship);
-  
+
    const notesList = notebook?.["notes-by-date"] || [];
    const notes = notebook?.notes || {};
    const showNickname = contact?.nickname && !hideNicknames;
-  
+
    return (
      <Box
        pt={4}
@ -104,66 +107,93 @@ export class Notebook extends PureComponent<NotebookProps & RouteComponentProps,
              </Button>
            </Link>
          )}
-          {!isOwn
-            ? this.state.isUnsubscribing
-              ? <Spinner 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(() => {
-                  history.push("/~publish");
-                }).catch(() => {
-                  this.setState({ isUnsubscribing: false });
-                });
-              }}>
+          {!isOwn ? (
+            this.state.isUnsubscribing ? (
+              <Spinner
+                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(() => {
+                      history.push("/~publish");
+                    })
+                    .catch(() => {
+                      this.setState({ isUnsubscribing: false });
+                    });
+                }}
+              >
                Unsubscribe
              </Button>
-            : null
-          }
+            )
+          ) : null}
        </Row>
        <Box gridColumn={["1/2", "1/3"]}>
          <Tabs>
-            <TabList>
-              <Tab>All Posts</Tab>
-              <Tab>About</Tab>
-              {isAdmin && <Tab>Subscribers</Tab>}
-              {isOwn && <Tab>Settings</Tab>}
-            </TabList>
-            <TabPanels>
-              <TabPanel>
-                <NotebookPosts
-                  notes={notes}
-                  list={notesList}
-                  host={ship}
-                  book={book}
-                  contacts={notebookContacts}
-                  hideNicknames={hideNicknames}
-                />
-              </TabPanel>
-              <TabPanel>
-                <Box color="black">{notebook?.about}</Box>
-              </TabPanel>
-              <TabPanel>
-                <Subscribers
-                  host={ship}
-                  book={book}
-                  notebook={notebook}
-                  api={api}
-                  groups={groups}
-                />
-              </TabPanel>
-              <TabPanel>
-                <Settings
-                  host={ship}
-                  book={book}
-                  api={api}
-                  notebook={notebook}
-                  contacts={notebookContacts}
-                  associations={associations}
-                  groups={groups}
-                />
-              </TabPanel>
-            </TabPanels>
+            <Tab
+              selected={state.tab}
+              setSelected={this.setTab}
+              label="All Posts"
+              id="all"
+            />
+            <Tab
+              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}
+              host={ship}
+              book={book}
+              contacts={notebookContacts}
+              hideNicknames={hideNicknames}
+            />
+          )}
+          {state.tab === "about" && <Box color="black">{notebook?.about}</Box>}
+          {state.tab === "subscribers" && (
+            <Subscribers
+              host={ship}
+              book={book}
+              notebook={notebook}
+              api={api}
+              groups={groups}
+            />
+          )}
+          {state.tab === "settings" && (
+            <Settings
+              host={ship}
+              book={book}
+              api={api}
+              notebook={notebook}
+              contacts={notebookContacts}
+              associations={associations}
+              groups={groups}
+            />
+          )}
        </Box>
      </Box>
    );
--- a/pkg/interface/src/views/apps/publish/components/lib/Sidebar.tsx
+++ b/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">
--- a/pkg/interface/src/views/components/AsyncButton.tsx
+++ b/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}
--- a/pkg/interface/src/views/components/Tab.tsx
+++ b/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>
+);
+