major refactor, add new sidebar functionality and refreshed styles

.github/workflows/web-ext-workflow.yml

@@ -1,50 +1,43 @@
-name: Release new version
-
-on:
-  push:
-    tags:
-      - "v*.*.*"
-  # release:
-  #   types: [published]
-
-jobs:
-  build-release:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Build
-        id: web-ext-build
-        uses: kewisch/action-web-ext@v1
-        with:
-          cmd: build
-          filename: "{name}-{version}.xpi"
-          ignoreFiles: '[
-            "package.json",
-            "package-lock.json",
-            "yarn.lock",
-            ".github",
-            ".gitattributes",
-            "LICENSE",
-            "README.md"]'
-
-      - name: Sign
-        id: web-ext-sign
-        uses: kewisch/action-web-ext@v1
-        with:
-          cmd: sign
-          channel: listed
-          source: ${{ steps.web-ext-build.outputs.target }}
-          apiKey: ${{ secrets.FIREFOX_JWT_ISSUER }}
-          apiSecret: ${{ secrets.FIREFOX_JWT_SECRET }}
-          timeout: 900000
-
-      - name: Release
-        uses: softprops/action-gh-release@v2
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          files: ${{ steps.web-ext-sign.outputs.target }}
+name: Release new version
+
+on:
+  push:
+    tags:
+      - 'v*.*.*'
+  # release:
+  #   types: [published]
+
+jobs:
+  build-release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Build
+        id: web-ext-build
+        uses: kewisch/action-web-ext@v1
+        with:
+          cmd: build
+          filename: '{name}-{version}.xpi'
+          ignoreFiles: '[ "package.json", "package-lock.json", "yarn.lock", ".github", ".gitattributes", "LICENSE", "README.md"]'
+
+      - name: Sign
+        id: web-ext-sign
+        uses: kewisch/action-web-ext@v1
+        with:
+          cmd: sign
+          channel: listed
+          source: ${{ steps.web-ext-build.outputs.target }}
+          apiKey: ${{ secrets.FIREFOX_JWT_ISSUER }}
+          apiSecret: ${{ secrets.FIREFOX_JWT_SECRET }}
+          timeout: 900000
+
+      - name: Release
+        uses: softprops/action-gh-release@v2
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          files: ${{ steps.web-ext-sign.outputs.target }}

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+node_modules

.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

.prettierrc

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc.json",
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "quoteProps": "consistent",
+  "trailingComma": "none",
+  "bracketSpacing": false,
+  "bracketSameLine": true,
+  "arrowParens": "always",
+  "proseWrap": "never",
+  "endOfLine": "lf",
+  "embeddedLanguageFormatting": "auto",
+  "singleAttributePerLine": false,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": {
+        "parser": "json"
+      }
+    }
+  ]
+}

README.md

@@ -1,10 +1,6 @@
 # 📝 New Tab Notes
 
-![Mozilla Add-on](https://img.shields.io/amo/v/newtab-notes@semanticdata)
-![Add-on rating](https://img.shields.io/amo/rating/newtab-notes@semanticdata)
-![Add-on downloads](https://img.shields.io/amo/dw/newtab-notes@semanticdata)
-![Add-on users](https://img.shields.io/amo/users/newtab-notes@semanticdata)
-![License](https://img.shields.io/github/license/semanticdata/firefox-new-tab-notes)
+![Mozilla Add-on](https://img.shields.io/amo/v/newtab-notes@semanticdata) ![Add-on rating](https://img.shields.io/amo/rating/newtab-notes@semanticdata) ![Add-on downloads](https://img.shields.io/amo/dw/newtab-notes@semanticdata) ![Add-on users](https://img.shields.io/amo/users/newtab-notes@semanticdata) ![License](https://img.shields.io/github/license/semanticdata/firefox-new-tab-notes)
 
 Firefox extension that transforms the New Tab into a minimalist, auto-saving text editor.
 
@@ -20,11 +16,9 @@ Firefox extension that transforms the New Tab into a minimalist, auto-saving tex
 
 ## 🖼 Screenshots
 
-![screenshot light theme](screenshot.png)
-*Light mode*
+![screenshot light theme](screenshot.png) _Light mode_
 
-![screenshot dark theme](screenshot-dark.png)
-*Dark mode*
+![screenshot dark theme](screenshot-dark.png) _Dark mode_
 
 ## TODO
 

manifest.json

@@ -19,8 +19,33 @@
     "newtab": "src/newtab.html"
   },
   "browser_action": {
-    "browser_style": true,
     "default_title": "New Tab Notes",
-    "default_popup": "src/newtab.html"
+    "default_icon": {
+      "48": "src/icon48.png",
+      "512": "src/icon512.png"
+    }
+  },
+  "background": {
+    "scripts": ["src/background.js"]
+  },
+  "options_ui": {
+    "page": "src/options/options.html",
+    "browser_style": true
+  },
+  "sidebar_action": {
+    "default_icon": {
+      "48": "src/icon48.png",
+      "512": "src/icon512.png"
+    },
+    "default_title": "Sidebar Notes",
+    "default_panel": "src/sidebar/panel.html"
+  },
+  "commands": {
+    "_execute_sidebar_action": {
+      "suggested_key": {
+        "default": "Alt+Shift+N"
+      },
+      "description": "Toggle the Sidebar Notes."
+    }
   }
 }

src/background.js

@@ -0,0 +1,20 @@
+const sidebarToggle = '_execute_sidebar_action'
+
+// Update UI and set value of textbox
+async function updateUI() {
+  let commands = await browser.commands.getAll()
+  for (command of commands) {
+    if (command.name === sidebarToggle) {
+      document.querySelector('#shortcut').value = command.shortcut
+    }
+  }
+}
+
+// Toggles Sidebar with new Action Button
+function openSidebar() {
+  browser.sidebarAction.toggle()
+}
+
+browser.browserAction.onClicked.addListener(openSidebar)
+
+document.addEventListener('DOMContentLoaded', updateUI)

src/newtab.html

@@ -1,49 +1,59 @@
 <!DOCTYPE html>
 
 <html lang="en" data-theme="light">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-  <title>New Tab Notes</title>
-  <link rel="icon" type="image/png" sizes="48x48" href="icon48.png">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
-  <link rel="stylesheet" href="styles.css">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Fira+Mono:wght@400;500;700&display=swap"
-    rel="stylesheet">
-  <!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600|Source+Code+Pro"> -->
-  <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter:400,700&display=swap" /> -->
-  <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.1/css/all.css"> -->
-</head>
-
-<body>
-  <nav class="navbar container">
-    <div class="navbar-brand">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>New Tab Notes</title>
+    <link rel="icon" type="image/png" sizes="48x48" href="icon48.png" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" />
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Fira+Mono:wght@400;500;700&display=swap"
+      rel="stylesheet" />
+    <!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600|Source+Code+Pro"> -->
+    <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter:400,700&display=swap" /> -->
+    <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.1/css/all.css"> -->
+  </head>
+
+  <body>
+    <header>
       <h1 class="nav-title">📝 New Tab Notes</h1>
-    </div>
 
-    <div class="navbar-end">
-      <button type="button" data-theme-toggle aria-label="Change to light theme">Change to light theme
+      <button
+        type="button"
+        data-theme-toggle
+        aria-label="Change to light theme">
+        Change to light theme
       </button>
-    </div>
-  </nav>
-
-  <main class="container">
-    <textarea class="textarea" id="notes" rows="" placeholder="Write something..."></textarea>
-  </main>
-
-  <footer class="footer container">
-    <p>Made with <a class="heart" href="https://github.com/semanticdata/firefox-new-tab-notes">❤</a> by <a
-        href="https://github.com/semanticdata">semanticdata</a>.
-    </p>
-  </footer>
-
-  <script type="text/javascript" src="tabnotes.js"></script>
-  <script type="text/javascript" src="toggle.js"></script>
-</body>
-
-</html>
+    </header>
+
+    <main>
+      <textarea
+        class="textarea"
+        id="notes"
+        rows=""
+        placeholder="Write something..."></textarea>
+    </main>
+
+    <footer>
+      <p>
+        Made with
+        <a
+          class="heart"
+          href="https://github.com/semanticdata/firefox-new-tab-notes"
+          >❤</a
+        >
+        by <a href="https://github.com/semanticdata">Miguel Pimentel</a>.
+      </p>
+    </footer>
+
+    <script type="text/javascript" src="tabnotes.js"></script>
+    <script type="text/javascript" src="toggle.js"></script>
+  </body>
+</html>

src/options/options.css

@@ -0,0 +1,48 @@
+* {
+  transition: all 750ms;
+  text-align: center;
+  overflow-y: hidden !important;
+}
+
+section {
+  padding-top: 1rem !important;
+}
+
+h1 {
+  line-height: 1.5 !important;
+}
+
+p {
+  padding-top: 4rem;
+}
+
+input {
+  margin: 0.5rem 0;
+  max-width: 10rem !important;
+}
+
+input,
+button {
+  border-radius: 5px !important;
+}
+
+.site-author {
+  color: rebeccapurple;
+}
+
+.site-author:hover {
+  color: red;
+}
+
+.fa-heart {
+  color: rebeccapurple;
+}
+
+.fa-heart:hover {
+  color: red;
+}
+
+::selection {
+  background: rebeccapurple;
+  color: #ffffff;
+}