changelog dialog

www/src/ts/app/app.ts

@@ -21,6 +21,8 @@ import { openFile, saveFile } from "../utils";
 import "../virtual_machine/ui";
 import "./save";
 import { SaveDialog } from "./save";
+import "./welcome";
+import { AppWelcome } from "./welcome";
 
 declare global {
   const __COMMIT_HASH__: string;
@@ -61,6 +63,7 @@ export class App extends BaseElement {
   @query("ace-ic10") editor: IC10Editor;
   @query("session-share-dialog") shareDialog: ShareSessionDialog;
   @query("save-dialog") saveDialog: SaveDialog;
+  @query("app-welcome") appWelcome: AppWelcome;
 
   // get editor() {
   //   return this.renderRoot.querySelector("ace-ic10") as IC10Editor;
@@ -83,6 +86,7 @@ export class App extends BaseElement {
     root.addEventListener("app-export", this._handleExport.bind(this));
     root.addEventListener("app-save", this._handleSave.bind(this));
     root.addEventListener("app-load", this._handleLoad.bind(this));
+    root.addEventListener("app-changelog", this._handleChangelog.bind(this));
     return root;
   }
 
@@ -104,11 +108,54 @@ export class App extends BaseElement {
         </div>
         <session-share-dialog></session-share-dialog>
         <save-dialog></save-dialog>
+        <app-welcome @sl-after-hide=${this.afterWelcomeHide}></app-welcome>
       </div>
     `;
   }
 
-  firstUpdated(): void {}
+  firstUpdated(): void {
+    setTimeout(() => {
+      this.checkSeenVersion();
+    }, 2000);
+  }
+
+  checkSeenVersion() {
+    const seenVersionsStr = window.localStorage.getItem("seenVersions");
+    let seenVersions: string[] = [];
+    if (seenVersionsStr !== null && seenVersionsStr.length > 0) {
+      try {
+        const saved = JSON.parse(seenVersionsStr);
+        seenVersions = saved;
+      } catch (e) {
+        console.log("error pulling seen versions", e);
+      }
+    }
+    const ourVer = `${this.appVersion}_${this.gitVer}_${this.buildDate}`;
+    if (!seenVersions.includes(ourVer)) {
+      this.appWelcome.show();
+    }
+  }
+
+  afterWelcomeHide() {
+    const seenVersionsStr = window.localStorage.getItem("seenVersions");
+    const seenVersions: string[] = [];
+    if (seenVersionsStr !== null && seenVersionsStr.length > 0) {
+      try {
+        const saved = JSON.parse(seenVersionsStr);
+        seenVersions.concat(saved);
+      } catch (e) {
+        console.log("error pulling seen versions", e);
+      }
+    }
+    const unique = new Set(seenVersions);
+    const ourVer = `${this.appVersion}_${this.gitVer}_${this.buildDate}`;
+    if (this.appWelcome.dontShowAgain) {
+      unique.add(ourVer)
+    } else {
+      unique.delete(ourVer)
+    }
+    window.localStorage.setItem("seenVersions", JSON.stringify(Array.from(unique)));
+  }
 
   _handleShare(_e: Event) {
     // TODO:
@@ -130,6 +177,10 @@ export class App extends BaseElement {
   _handleOpenFile(_e: Event) {
     openFile(window.Editor.editor);
   }
+
+  _handleChangelog(_e: Event) {
+    this.appWelcome.show();
+  }
 }
 
 

www/src/ts/app/nav.ts

@@ -157,6 +157,11 @@ export class Nav extends BaseElement {
                   <sl-menu-item value="preset-demo"> Demo </sl-menu-item>
                 </sl-menu>
               </sl-menu-item>
+              <sl-divider></sl-divider>
+              <sl-menu-item value="changelog">
+                Changelog
+                <sl-icon name="journal-text" slot="prefix"></sl-icon>
+              </sl-menu-item>
             </sl-menu>
           </sl-dropdown>
         </div>
@@ -246,6 +251,10 @@ export class Nav extends BaseElement {
         break;
       case "preset-demo":
         window.location.hash = "demo";
+        break;
+      case "changelog":
+        this.dispatchEvent(new CustomEvent("app-changelog", { bubbles: true }));
+        break;
       default:
         console.log("Unknown main menu item", item.value);
     }

www/src/ts/app/welcome.ts

@@ -0,0 +1,75 @@
+import { html, css } from "lit";
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { customElement, property, query, state } from "lit/decorators.js";
+import { BaseElement, defaultCss } from "../components";
+import { SlDialog, SlSwitch } from "@shoelace-style/shoelace";
+import { until } from "lit/directives/until.js";
+
+import "@shoelace-style/shoelace/dist/components/spinner/spinner.js";
+import '@shoelace-style/shoelace/dist/components/switch/switch.js';
+
+import { marked } from "marked";
+import { gfmStyles } from "./gfm-styles";
+
+@customElement("app-welcome")
+export class AppWelcome extends BaseElement {
+  static styles = [
+    ...defaultCss,
+    gfmStyles,
+    css`
+      .welcome-dialog {
+        --width: 42rem;
+      }
+    `,
+  ];
+
+  @property({ type: Boolean }) dontShowAgain: boolean;
+
+  constructor() {
+    super();
+    this.dontShowAgain = true;
+  }
+
+  @query("sl-dialog.welcome-dialog") dialog: SlDialog;
+  @query("sl-switch.dont-show-switch") dontShowSwitch: SlSwitch;
+
+  hide() {
+    this.dialog?.hide();
+  }
+
+  show() {
+    this.dialog?.show();
+  }
+
+  async getChangelog() {
+    const response = await fetch("static/CHANGELOG.md");
+    const blob = await response.blob();
+    const markdown = await blob.text();
+    const renderedText = await marked(markdown, {
+      async: true,
+      gfm: true,
+    });
+    return unsafeHTML(renderedText);
+  }
+
+  render() {
+    return html`
+      <sl-dialog class="welcome-dialog" label="Changlog">
+        <h6>Hey there!</h6>
+        <p>Looks like there have been some updates since you've last visit.</p>
+        <br />
+        <p>Check out the changelog below.</p>
+        <div class="p-4 border-1 border-solid rounded-lg max-h-80 mt-4 overflow-y-auto bg-neutral-900 markdown-body">
+          ${until(this.getChangelog(), html`<sl-spinner class="ml-2 my-4" style="font-size: 2rem;"></sl-spinner>`)}
+        </div>
+        <div slot="footer">
+          <sl-switch class="dont-show-switch" size="small" ?checked=${this.dontShowAgain} @sl-change=${this._dontShowSwitchChange} >Don't show again</sl-switch>
+        </div>
+      </sl-dialog>
+    `;
+  }
+
+  _dontShowSwitchChange(e: CustomEvent) {
+    this.dontShowAgain = this.dontShowSwitch.checked;
+  }
+}

www/src/ts/utils.ts

@@ -13,9 +13,7 @@ export function docReady(fn: () => void) {
 }
 
 function isZeroNegative(zero: number) {
-  const isZero = zero === 0;
-  const isNegative = 1 / zero === -Infinity;
-  return isNegative && isZero;
+  return Object.is(zero, -0)
 }
 
 export function numberToString(n: number): string {