feat: Add user setting to show/hide bookmark bar

src/css/settings.xcss

@@ -49,6 +49,12 @@ select {
   margin-bottom: 18px;
 }
 
+.box {
+  width: 1.1em;
+  height: 1.1em;
+  margin-right: 0.5em;
+}
+
 .item-list:empty {
   padding: 7px 0 10px;
   text-align: center;

src/newtab.ts

@@ -5,7 +5,7 @@ import { append, createFragment } from 'stage1';
 import { BookmarkBar } from './components/BookmarkBar';
 import { Menu } from './components/Menu';
 import { Search } from './components/Search';
-import { handleClick } from './utils';
+import { handleClick, storage } from './utils';
 
 performance.mark('Initialise Components');
 
@@ -16,7 +16,7 @@ append(Search(), frag);
 // Create BookmarkBar component near last because, after an async call, it needs
 // to synchronously and sequentially calculate DOM layout multiple times and
 // could cause reflow in extreme situations, so paint the rest of the app first
-append(BookmarkBar(), frag);
+if (!storage.b) append(BookmarkBar(), frag);
 append(Menu(), frag);
 append(frag, document.body);
 

src/settings.ts

@@ -101,14 +101,18 @@ const SectionItem = (
 };
 
 interface Refs {
+  feedback: HTMLDivElement;
   theme: HTMLSelectElement;
-  reset: HTMLButtonElement;
+  b: HTMLInputElement;
   se: HTMLUListElement;
   sd: HTMLUListElement;
+  reset: HTMLButtonElement;
 }
 
 const meta = compile(`
   <div>
+    <div @feedback></div>
+
     <div class=row>
       <label>Theme</label>
       <select @theme>
@@ -124,6 +128,12 @@ const meta = compile(`
       </select>
     </div>
 
+    <div class=row>
+      <label>
+        <input @b type=checkbox class=box> Show bookmarks bar
+      </label>
+    </div>
+
     <div class=row>
       <label>Sections</label>
       <fieldset>
@@ -175,10 +185,14 @@ const Settings = () => {
   const updateTheme = async (themeName: string) => {
     refs.theme.value = themeName;
 
-    void chrome.storage.local.set({
+    await chrome.storage.local.set({
       tn: themeName,
       t: (await themesData)[themeName],
     });
+
+    if (themeName === DEFAULT_THEME) {
+      void chrome.storage.local.remove('tn');
+    }
   };
 
   const updateOrder = (order: SettingsState['order'], skipSave?: boolean) => {
@@ -217,18 +231,28 @@ const Settings = () => {
     (event.target as SectionComponent).classList.remove('over');
   };
 
+  refs.theme.onchange = () => updateTheme(refs.theme.value);
+
+  refs.b.onchange = () => {
+    if (refs.b.checked) {
+      // When value is same as default, we don't need to store it
+      void chrome.storage.local.remove('b');
+    } else {
+      void chrome.storage.local.set({
+        b: true,
+      });
+    }
+  };
+
   // eslint-disable-next-line no-multi-assign
   refs.se.ondragover = refs.sd.ondragover = (event) => {
     event.preventDefault();
     // eslint-disable-next-line no-param-reassign
     event.dataTransfer!.dropEffect = 'move';
   };
-
   refs.se.ondrop = handleDrop(0);
   refs.sd.ondrop = handleDrop(1);
 
-  refs.theme.onchange = () => updateTheme(refs.theme.value);
-
   refs.reset.onclick = () => {
     void updateTheme(DEFAULT_THEME);
     updateOrder([[...DEFAULT_SECTION_ORDER], []]);
@@ -242,6 +266,7 @@ const Settings = () => {
   );
 
   void updateTheme(themeName);
+  refs.b.checked = !storage.b;
   updateOrder([orderEnabled, orderDisabled], true);
 
   return root;

src/types.ts

@@ -15,7 +15,9 @@ export interface UserStorageData {
   t?: string;
   /** The user's selected theme name. */
   tn?: string;
-  /** User sections order preference. */
+  /** Hide bookmarks bar user preference; `true` means hidden. */
+  b?: boolean;
+  /** Sections order user preference. */
   o?: SectionOrderItem[];
 }