add bookmarks view

data/static/css/style.css

@@ -465,7 +465,7 @@ footer {
   gap: var(--base-padding);
 }
 
-.thread-actions {
+.subheader-actions {
   display: flex;
   flex-wrap: wrap;
   gap: var(--base-padding);
@@ -662,12 +662,12 @@ details {
     }
   }
 
-  &:not([open]) summary::before {
+  &:not([open]) > summary::before {
     content: '▶';
     padding-inline: var(--base-padding);
   }
 
-  &[open] summary::before {
+  &[open] > summary::before {
     content: '▼';
     padding-inline: var(--base-padding);
   }
@@ -677,6 +677,10 @@ details.separated {
   margin: 0.5em 0;
 }
 
+details.inner {
+  margin-inline: var(--base-padding);
+}
+
 .avatar-form {
   display: flex;
   gap: var(--huge-padding);
@@ -724,6 +728,25 @@ details.separated {
   }
 }
 
+table {
+  border-collapse: collapse;
+  width: 100%;
+
+  &.three-cols > thead > tr > th {
+    &:nth-child(1) {
+      width: 70%;
+    }
+
+    &:nth-child(2) {
+      width: 25%;
+    }
+
+    &:nth-child(3) {
+      width: 15%;
+    }
+  }
+
+}
 
 /* babycode tags */
 .inline-code {

data/static/js/bits/bookmark-menu.js

@@ -7,9 +7,9 @@ async function getHTML(endpoint, options = {}) {
 
   const params = new URLSearchParams(query);
   const res = await fetch(`${endpoint}?${params}`, options);
-  if (!res.ok) {
-    console.error(res);
-  }
+  // if (!res.ok) {
+  //   console.error(res);
+  // }
 
   return { body: await res.text(), status: res.status };
 }
@@ -81,7 +81,7 @@ export async function bookmarkMenuSubmit(ev, _, el) {
   const status = (await getHTML(url, options)).status;
 
   if (status !== 204) {
-    b.trigger('bookmarkMenuShowError');
+    b.send({ status: status }, 'bookmarkMenuShowError');
     return;
   }
 
@@ -99,11 +99,17 @@ export function bookmarkMenuResetSavedButton(_, __, el) {
   el.value = 'Save';
 }
 
-export function bookmarkMenuShowError(_, __, el) {
+export function bookmarkMenuShowError(payload, _, el) {
   if (el === undefined) {
     return;
   }
 
+  if (payload.status === 404) {
+    el.innerText = 'This thread or post no longer exists. Please refresh the page.';
+  } else {
+    el.innerText = 'Something went wrong. Try again later.';
+  }
+
   if (el.classList.contains('hidden')) {
     el.classList.remove('hidden');
     setTimeout(() => { b.trigger('bookmarkMenuHideError') }, 4000);

data/static/js/bits/bookmarks.js

@@ -0,0 +1,62 @@
+export const b = {
+  init: 'restoreCollectionDetails restoreThreadDetails restorePostDetails',
+}
+
+const COLLECTION_DETAILS_KEY = 'collectionsOpen';
+const THREAD_DETAILS_KEY = 'threadsOpen';
+const POST_DETAILS_KEY = 'postsOpen';
+
+let collectionDetailsData = {};
+let collectionThreadDetailsData = {};
+let collectionPostDetailsData = {};
+
+async function setDetailsData(obj, key, id, isOpen) {
+  obj[id] = isOpen;
+  await b.savePageData(obj, key);
+}
+
+export async function restoreCollectionDetails(_, __, el) {
+  collectionDetailsData = await b.loadPageData(COLLECTION_DETAILS_KEY, {});
+  el.open = collectionDetailsData[el.dataset.id] === true;
+}
+
+export async function setCollectionDetails(ev, sender, el) {
+  if (el !== sender) {
+    return;
+  }
+  if (ev.target !== el.querySelector('summary')) {
+    return;
+  }
+  console.log(!el.open);
+  await setDetailsData(collectionDetailsData, COLLECTION_DETAILS_KEY, el.dataset.id, !el.open);
+}
+
+export async function restoreThreadDetails(_, __, el) {
+  collectionThreadDetailsData = await b.loadPageData(THREAD_DETAILS_KEY, {});
+  el.open = collectionThreadDetailsData[el.dataset.id] === true;
+}
+
+export async function setThreadDetails(ev, sender, el) {
+  if (el !== sender) {
+    return;
+  }
+  if (ev.target !== el.querySelector('summary')) {
+    return;
+  }
+  await setDetailsData(collectionThreadDetailsData, THREAD_DETAILS_KEY, el.dataset.id, !el.open);
+}
+
+export async function restorePostDetails(_, __, el) {
+  collectionPostDetailsData = await b.loadPageData(POST_DETAILS_KEY, {});
+  el.open = collectionPostDetailsData[el.dataset.id] === true;
+}
+
+export async function setPostDetails(ev, sender, el) {
+  if (el !== sender) {
+    return;
+  }
+  if (ev.target !== el.querySelector('summary')) {
+    return;
+  }
+  await setDetailsData(collectionPostDetailsData, POST_DETAILS_KEY, el.dataset.id, !el.open);
+}