using new LocalStorage service to keep track of Debug component visib…

…ility on load
michaelchadwick · May 24, 2024 · a8e3fb0 · a8e3fb0
1 parent 4bd121b
commit a8e3fb0
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 36 deletions.
diff --git a/app/components/debug.hbs b/app/components/debug.hbs
@@ -1,6 +1,8 @@
+{{#if @isExpanded}}
 <details
   class="debug"
   {{on "click" this.saveDebugVisibility}}
+  open
 >
   <summary>{{t "components.debug.summary"}}</summary>
   <div class="gallery">
@@ -23,4 +25,32 @@
       @publicRepos={{@ghPublicRepos}}
     />
   </div>
-</details>
+</details>
+{{else}}
+<details
+  class="debug"
+  {{on "click" this.saveDebugVisibility}}
+>
+  <summary>{{t "components.debug.summary"}}</summary>
+  <div class="gallery">
+    <DoubleIt />
+
+    {{#if (eq this.env "production")}}
+      <AudioPlayer
+        @srcURL={{this.app.AUDIO_PLAYER_FILE_REMOTE}}
+        @shouldLoop={{true}}
+      />
+    {{else}}
+      <AudioPlayer
+        @srcURL={{this.app.AUDIO_PLAYER_FILE_LOCAL}}
+        @shouldLoop={{true}}
+      />
+    {{/if}}
+
+    <GhUser
+      @username={{@ghUsername}}
+      @publicRepos={{@ghPublicRepos}}
+    />
+  </div>
+</details>
+{{/if}}
diff --git a/app/components/debug.js b/app/components/debug.js
@@ -1,26 +1,20 @@
 import Component from '@glimmer/component';
+import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import ENV from 'remember-stuff/config/environment';
 
 export default class DebugComponent extends Component {
   @tracked env = ENV.environment;
   @tracked app = ENV.APP;
-  @tracked isExpanded = this.args.debugIsExpanded;
+  @tracked isExpanded = this.args.isExpanded;
 
-  @action
-  bubbleSummaryUpToDetails(event) {
-    console.log('clicked on details > summary');
-
-    event.target.parentElement.click();
-  }
+  @service localStorage;
 
   @action
-  saveDebugVisibility(event) {
-    if (event.target.tagName == 'SUMMARY') {
-      this.isExpanded = !this.isExpanded;
+  saveDebugVisibility() {
+    this.isExpanded = !this.isExpanded;
 
-      localStorage.setItem(this.app.DEBUG_VISIBILITY_KEY, this.isExpanded);
-    }
+    this.localStorage.set('debugExpanded', this.isExpanded);
   }
 }
diff --git a/app/controllers/application.js b/app/controllers/application.js
@@ -1,16 +1,12 @@
 import Controller from '@ember/controller';
-import { tracked } from '@glimmer/tracking';
-import ENV from 'remember-stuff/config/environment';
+import { service } from '@ember/service';
 
 export default class ApplicationController extends Controller {
-  @tracked debugIsExpanded;
+  @service localStorage;
 
-  constructor() {
-    super(...arguments);
-    const lsDebugSetting = localStorage.getItem(ENV.APP.DEBUG_VISIBILITY_KEY);
+  get debugVisibility() {
+    const debugExpanded = this.localStorage.get('debugExpanded');
 
-    this.debugIsExpanded = lsDebugSetting || '';
-
-    console.log('LS debugIsExpanded set to:', this.debugIsExpanded);
+    return debugExpanded;
   }
 }
diff --git a/app/routes/application.js b/app/routes/application.js
@@ -4,11 +4,11 @@ import { tracked } from '@glimmer/tracking';
 import ENV from 'remember-stuff/config/environment';
 
 export default class ApplicationRoute extends Route {
+  @tracked env = ENV.environment;
+  @tracked ghUsername = ENV.APP.GH_USERNAME;
   @service headData;
   @service store;
   @service intl;
-  @tracked env = ENV.environment;
-  @tracked ghUsername = ENV.APP.GH_USERNAME;
 
   setupController(controller) {
     controller.set('env', ENV.environment);

diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -77,17 +77,17 @@ details {
   border: 1px solid #c7c7c7;
   border-radius: 0.5em;
   box-shadow: 0 0.25em 1.5em 0.25em rgba(0 0 0 / 10%);
-  cursor: pointer;
   padding: 0;
 }
 
 details:hover {
-  background-color: #eeeeee;
+  background-color: #f3f3f3;
   border-color: #3b3b3b;
 }
 
 details summary {
-  border-radius: 0.5em;
+  border-top-left-radius: 0.5em;
+  border-top-right-radius: 0.5em;
   padding: 1em;
 }
 

diff --git a/app/styles/components/debug.scss b/app/styles/components/debug.scss
@@ -12,21 +12,16 @@ details.debug:hover {
   border-color: #210039;
 }
 
-details.debug summary:hover {
-  background-color: #f2a6ff;
-  border-color: #632b2b;
-}
-
 details.debug .gallery {
   display: flex;
   gap: 1em;
-  margin-top: 0.5em;
+  margin: 1em;
 }
 
 details.debug .gallery > div {
   background-color: #fff;
   border-radius: 1em;
-  box-shadow: 0 0.25em 1.5em 0.25em rgba(0 0 0 / 10%);
+  box-shadow: 0 0.25em 1em 0.25em rgba(0 0 0 / 20%);
   max-width: 175px;
   min-width: 150px;
   padding: 1em;

diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -15,7 +15,7 @@
   <Debug
     @ghUsername={{@model.ghUsername}}
     @ghPublicRepos={{@model.ghPublicRepos}}
-    @isExpanded={{this.debugIsExpanded}}
+    @isExpanded={{this.debugVisibility}}
   />
 
   <Layout::Footer />

diff --git a/config/environment.js b/config/environment.js
@@ -17,7 +17,7 @@ module.exports = function (environment) {
     APP: {
       AUDIO_PLAYER_FILE_LOCAL: '/assets/audio/fezzish.mp3',
       AUDIO_PLAYER_FILE_REMOTE: 'https://neb.host/files/p/fezzish.mp3',
-      DEBUG_VISIBILITY_KEY: 'remember-stuff-debug-visibility',
+      LOCAL_STORAGE_KEY: 'remember-stuff',
       GH_USERNAME: 'michaelchadwick',
       MUSIC_API_ROOT: 'https://music.nebyoolae.com',
       SONG_API_URL: