add storage limit warning when outbox is full

src/outbox.css

@@ -136,6 +136,20 @@ main[aria-busy="true"]:empty::before { content: "Loading..."; }
 main[aria-busy="false"]:empty::before { content: "Your outbox is empty."; }
 main[aria-busy="false"]:empty::after { content: "When you send asks or answer asks privately, they'll show up here."; }
 
+main[data-show-limit-warning="true"]::before {
+  content: "Your outbox is full.\aOlder items will be deleted automatically as new items are saved.";
+
+  display: block;
+  padding: 14px 16px;
+  border-radius: 6px;
+  margin-top: var(--post-margin);
+
+  background-color: #ff492f;
+  color: rgb(var(--background));
+  text-align: center;
+  white-space: pre-line;
+}
+
 aside {
   position: sticky;
   top: 0;

src/outbox.js

@@ -94,7 +94,11 @@ const constructItem = ([timestamp, { recipient, recipientUrl, content, layout }]
 
 const updateExportDownload = () => {
   browser.storage.local.get()
-    .then(storageObject => JSON.stringify(storageObject, null, 2))
+    .then(storageObject => {
+      const storageKeys = Object.keys(storageObject);
+      mainElement.dataset.showLimitWarning = storageKeys.length >= 512;
+      return JSON.stringify(storageObject, null, 2);
+    })
     .then(storageString => {
       const now = new Date();