DEV: Cleanup and linting

.eslintrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/eslint-theme");

.github/workflows/discourse-theme.yml

@@ -0,0 +1,11 @@
+name: Discourse Theme
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  ci:
+    uses: discourse/.github/.github/workflows/discourse-theme.yml@v1

.gitignore

@@ -1,2 +1,2 @@
-*.swp
-*.swo
+node_modules
+.discourse-site

.prettierrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/prettier");

.template-lintrc.cjs

@@ -0,0 +1 @@
+module.exports = require("@discourse/lint-configs/template-lint");

README.md

@@ -17,13 +17,13 @@ Tabs are:
 
 ### Screenshots:
 
-<img src="demo-bright-1.png" height="500">
+<img src="https://github.com/OsamaSayegh/discourse-tab-bar-theme/assets/17474474/3a5d64c2-7ffb-45a3-bdf3-c9db39c52d7c" height="500">
 
-<img src="demo-bright-2.png" height="300">
+<img src="https://github.com/OsamaSayegh/discourse-tab-bar-theme/assets/17474474/f5fcbc64-f88d-448b-9c84-3b2f18a4cc1d" height="300">
 
-<img src="demo-dark-1.png" height="300">
+<img src="https://github.com/OsamaSayegh/discourse-tab-bar-theme/assets/17474474/a3548b72-7cd5-4698-b324-600c3bd11630" height="300">
 
-<img src="demo-dark-2.png" height="500">
+<img src="https://github.com/OsamaSayegh/discourse-tab-bar-theme/assets/17474474/9028589b-45ff-44aa-8bb9-c6b4cad219fb" height="500">
 
 ### Installation
 

javascripts/d-tab-bar/initializers/init-tab-bar.js

@@ -1,3 +1,5 @@
+/* eslint ember/no-private-routing-service: 0 */
+
 import { withPluginApi } from "discourse/lib/plugin-api";
 import { parseTabsSettings, routeToURL } from "../lib/helpers";
 
@@ -13,15 +15,17 @@ function highlight(destination) {
 }
 
 function compareURLs(url1, url2) {
-  if (url1 === decodeURI(url2)) return true;
+  if (url1 === decodeURI(url2)) {
+    return true;
+  }
   if (!settings.match_url_params) {
     return (
       url1 &&
       url2 &&
       url1.replace(/(\?|#).*/g, "") === url2.replace(/(\?|#).*/g, "")
     );
   }
-  return false
+  return false;
 }
 
 export default {
@@ -30,10 +34,14 @@ export default {
   initialize() {
     withPluginApi("0.8.13", (api) => {
       const site = api.container.lookup("site:main");
-      if (!site.mobileView) return;
+      if (!site.mobileView) {
+        return;
+      }
 
       const user = api.getCurrentUser();
-      if (!user) return;
+      if (!user) {
+        return;
+      }
 
       const tabs = parseTabsSettings();
       if (tabs.length === 0) {
@@ -43,7 +51,9 @@ export default {
       const router = api.container.lookup("router:main");
 
       tabs.forEach((tab) => {
-        if (tab.destination.indexOf("/") !== -1) return;
+        if (tab.destination.indexOf("/") !== -1) {
+          return;
+        }
         // we need this to highlight tab when you navigate to
         // a subroute of a tab's route
         api.container.lookup(`route:${tab.destination}`).reopen({
@@ -59,8 +69,9 @@ export default {
               );
               if (usernameParam) {
                 const target = this.modelFor("user");
-                if (target?.username === user.username)
+                if (target?.username === user.username) {
                   highlight(tab.destination);
+                }
               } else {
                 highlight(tab.destination);
               }
@@ -72,15 +83,18 @@ export default {
       });
 
       api.onAppEvent("page:changed", (data) => {
-        const tab = tabs.find((tab) => {
+        const match = tabs.find((tab) => {
           if (!router.hasRoute(tab.destination)) {
             return compareURLs(tab.destination, data.url);
           } else {
-            return tab.destination === data.currentRouteName && compareURLs(routeToURL(router, tab.destination, user), data.url);
+            return (
+              tab.destination === data.currentRouteName &&
+              compareURLs(routeToURL(router, tab.destination, user), data.url)
+            );
           }
         });
-        if (tab) {
-          highlight(tab.destination);
+        if (match) {
+          highlight(match.destination);
         }
       });
     });

javascripts/d-tab-bar/lib/helpers.js

@@ -1,3 +1,5 @@
+/* eslint ember/no-private-routing-service: 0 */
+
 export function parseTabsSettings() {
   const list = [];
   [

javascripts/discourse/connectors/above-footer/d-tab-bar.gjs

@@ -1,28 +1,28 @@
+/* eslint ember/no-private-routing-service: 0 */
+
 import Component from "@ember/component";
-import { action } from "@ember/object";
-import { inject as service } from "@ember/service";
-import { htmlSafe } from "@ember/template";
-import { on } from "@ember/modifier";
 import { fn } from "@ember/helper";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
-import and from "truth-helpers/helpers/and";
-
+import { inject as service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
 import discourseURL from "discourse/lib/url";
 import dIcon from "discourse-common/helpers/d-icon";
-import themeSetting from "discourse/helpers/theme-setting";
-
+import and from "truth-helpers/helpers/and";
 import { parseTabsSettings, routeToURL } from "../../../d-tab-bar/lib/helpers";
 
 const SCROLL_MAX = 30;
 const HIDDEN_TAB_BAR_CLASS = "tab-bar-hidden";
 
 export default class DTabBar extends Component {
-  tabs = parseTabsSettings();
-  lastScrollTop = 0;
   @service router;
   @service currentUser;
 
+  tabs = parseTabsSettings();
+  lastScrollTop = 0;
+
   get width() {
     const length = this.tabs.length;
     const percentage = length ? 100 / length : length;
@@ -69,14 +69,24 @@ export default class DTabBar extends Component {
 
   <template>
     {{#if (and this.currentUser this.tabs.length)}}
-      <div class="d-tab-bar" {{didInsert this.setupScrollListener}} {{willDestroy this.removeScrollListener}}>
+      <div
+        class="d-tab-bar"
+        {{didInsert this.setupScrollListener}}
+        {{willDestroy this.removeScrollListener}}
+      >
         {{#each this.tabs as |tab|}}
-          <a style="{{this.width}}" class="tab" data-destination="{{tab.destination}}" {{on "click" (fn this.navigate tab)}}>
+          <div
+            role="link"
+            style={{this.width}}
+            class="tab"
+            data-destination={{tab.destination}}
+            {{on "click" (fn this.navigate tab)}}
+          >
             {{dIcon tab.icon}}
-            {{#if (themeSetting 'display_icon_titles')}}
+            {{#if settings.display_icon_titles}}
               <p class="title">{{tab.title}}</p>
             {{/if}}
-          </a>
+          </div>
         {{/each}}
       </div>
     {{/if}}

package.json

@@ -0,0 +1,13 @@
+{
+  "name": "discourse-tab-bar",
+  "version": "0.0.1",
+  "repository": "https://github.com/OsamaSayegh/discourse-tab-bar-theme",
+  "author": "Osama Sayegh",
+  "license": "MIT",
+  "devDependencies": {
+    "@discourse/lint-configs": "^1.3.1",
+    "ember-template-lint": "^5.13.0",
+    "eslint": "^8.55.0",
+    "prettier": "^2.8.8"
+  }
+}

test/acceptance/tab-bar-test.js

@@ -1,21 +1,21 @@
-import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
 import { visit } from "@ember/test-helpers";
 import { test } from "qunit";
+import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
 
-acceptance("Tab bar component | Logged in users on mobile", function(needs) {
+acceptance("Tab bar component | Logged in users on mobile", function (needs) {
   needs.user();
   needs.mobileView();
 
-  test("They see the bar on mobile", async function(assert) {
+  test("They see the bar on mobile", async function (assert) {
     await visit("/latest");
     assert.ok(exists(".d-tab-bar"));
   });
 });
 
-acceptance("Tab bar component | Anon users on mobile", function(needs) {
+acceptance("Tab bar component | Anon users on mobile", function (needs) {
   needs.mobileView();
 
-  test("They don't see the bar on mobile", async function(assert) {
+  test("They don't see the bar on mobile", async function (assert) {
     await visit("/latest");
     assert.notOk(exists(".d-tab-bar"));
   });