Adding Project Menu to Play

package.json

@@ -60,8 +60,8 @@
       "gzip": "3.5 KB"
     },
     "dist/play-pen.js": {
-      "none": "31900 KB",
-      "gzip": "5150 KB"
+      "none": "32100 KB",
+      "gzip": "5190 KB"
     }
   },
   "typesVersions": {

src/elements/play-icon/play-icon.ts

@@ -35,6 +35,7 @@ import resizeHorizontalOutline from './icons/resize-horizontal-outline.svg'
 import restartOutline from './icons/restart-outline.svg'
 import shareNewOutline from './icons/share-new-outline.svg'
 import unmountOutline from './icons/unmount-outline.svg'
+import uploadOutline from './icons/upload-outline.svg'
 
 export type PlayIconSVG = keyof typeof icons
 
@@ -62,7 +63,8 @@ const icons = {
   'resize-horizontal-outline': resizeHorizontalOutline,
   'restart-outline': restartOutline,
   'share-ios-outline': unmountOutline,
-  'share-new-outline': shareNewOutline
+  'share-new-outline': shareNewOutline,
+  'upload-outline': uploadOutline
 }
 
 declare global {

src/elements/play-pen-header.ts

@@ -10,7 +10,6 @@ import {defaultSettings} from '../storage/settings-save.js'
 import {Bubble} from '../utils/bubble.js'
 import {cssReset} from '../utils/css-reset.js'
 import {openURL} from '../utils/open-url.js'
-import type {PlayExportDialog} from './play-export-dialog.js'
 import type {PlaySettingsDialog} from './play-settings-dialog.js'
 import type {PlayAssetsDialog} from './play-assets-dialog.js'
 
@@ -19,10 +18,12 @@ import './play-export-dialog.js'
 import './play-icon/play-icon.js'
 import './play-logo/play-logo.js'
 import './play-new-pen-button.js'
+import './play-project-button.js'
 import './play-resizable-text-input.js'
 import './play-settings-dialog.js'
 import './play-assets-dialog.js'
 import {type AssetsState, emptyAssetsState} from './play-assets/play-assets.js'
+import type {PlayExportDialog} from './play-export-dialog.js'
 
 declare global {
   interface HTMLElementEventMap {
@@ -124,6 +125,12 @@ export class PlayPenHeader extends LitElement {
   @query('play-settings-dialog')
   private _settings!: PlaySettingsDialog
 
+  protected override firstUpdated(): void {
+    this.addEventListener('open-export-dialog', () => {
+      this._export.open()
+    })
+  }
+
   protected override render(): TemplateResult {
     return html`
       <header>
@@ -149,14 +156,11 @@ export class PlayPenHeader extends LitElement {
             label="Docs"
             @click=${() => openURL('https://developers.reddit.com/docs')}
           ></play-button
-          ><play-button
-            appearance="bordered"
-            size="small"
-            icon="download-outline"
-            title="Export Pen"
-            label="Export"
-            @click=${() => this._export.open()}
-          ></play-button
+          ><play-project-button
+          size="small"
+          .srcByLabel=${this.srcByLabel}
+        ></play-project-button
+        ></play-button
           ><play-button
             appearance="bordered"
             size="small"

src/elements/play-project-button.test.ts

@@ -0,0 +1,7 @@
+import {assert} from '@esm-bundle/chai'
+import {PlayProjectButton} from './play-project-button.js'
+
+test('tag is defined', () => {
+  const el = document.createElement('play-project-button')
+  assert.instanceOf(el, PlayProjectButton)
+})

src/elements/play-project-button.ts

@@ -0,0 +1,197 @@
+import {
+  LitElement,
+  css,
+  html,
+  type CSSResultGroup,
+  type TemplateResult
+} from 'lit'
+import {customElement, property} from 'lit/decorators.js'
+import {Bubble} from '../utils/bubble.js'
+
+import {cssReset} from '../utils/css-reset.js'
+import './play-dropdown-menu.js'
+import './play-icon/play-icon.js'
+import './play-list-item.js'
+
+export type SizeOptions = 'small' | 'medium'
+const iconSizes: {[key in SizeOptions]: string} = {
+  small: '16px',
+  medium: '20px'
+}
+
+declare global {
+  interface HTMLElementEventMap {
+    'edit-src': CustomEvent<string>
+  }
+  interface HTMLElementTagNameMap {
+    'play-project-button': PlayProjectButton
+  }
+}
+
+@customElement('play-project-button')
+export class PlayProjectButton extends LitElement {
+  static override readonly styles: CSSResultGroup = css`
+    ${cssReset}
+
+    .container {
+      display: flex;
+      flex-direction: row;
+      column-gap: 0;
+      justify-content: space-between;
+      align-items: center;
+      box-shadow: inset 0px 0px 0px var(--border-width)
+        var(--color-secondary-border);
+      border-radius: var(--radius-full);
+    }
+
+    button {
+      font-family: var(--font-family-sans);
+      color: var(--color-secondary-plain);
+      background-color: transparent;
+      border: none;
+      cursor: pointer;
+    }
+
+    :host([size='small']) button {
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 16px;
+      letter-spacing: -0.1px;
+    }
+
+    :host([size='medium']) button {
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px;
+      letter-spacing: -0.3px;
+    }
+
+    .project-pen {
+      display: flex;
+      flex-direction: row;
+    }
+
+    :host([size='small']) .project-pen {
+      column-gap: 8px;
+      padding-top: 8px;
+      padding-right: 8px;
+      padding-bottom: 8px;
+      padding-left: 12px;
+      border-top-left-radius: 16px;
+      border-bottom-left-radius: 16px;
+    }
+
+    :host([size='medium']) .project-pen {
+      column-gap: 8px;
+      padding-top: 10px;
+      padding-right: 12px;
+      padding-bottom: 10px;
+      padding-left: 16px;
+      border-top-left-radius: 20px;
+      border-bottom-left-radius: 20px;
+    }
+
+    :host([size='small']) .new-from-template {
+      padding-top: 8px;
+      padding-right: 8px;
+      padding-bottom: 8px;
+      padding-left: 8px;
+      border-top-right-radius: 16px;
+      border-bottom-right-radius: 16px;
+    }
+
+    :host([size='medium']) .project-options {
+      padding-top: 10px;
+      padding-right: 10px;
+      padding-bottom: 10px;
+      padding-left: 8px;
+      border-top-right-radius: 20px;
+      border-bottom-right-radius: 20px;
+    }
+
+    .project-options:hover,
+    .project-template:hover {
+      background-color: var(--color-secondary-background-hovered);
+    }
+
+    .project-pen:active,
+    .project-options:active {
+      background-color: var(--color-secondary-background-active);
+    }
+
+    .project-pen:focus,
+    .project-options:focus {
+      outline-color: var(--color-brand-background);
+    }
+
+    .divider {
+      width: 1px;
+      background-color: var(--color-secondary-background-decor);
+    }
+
+    :host([size='small']) .divider {
+      height: 16px;
+    }
+
+    :host([size='medium']) .divider {
+      height: 20px;
+    }
+  `
+  @property({attribute: false}) srcByLabel?: {readonly [key: string]: string}
+  @property() size: SizeOptions = 'medium'
+
+  protected override render(): TemplateResult {
+    return html`
+      <div class="container">
+        <button
+          class="project-pen"
+          @click=${() =>
+            this.dispatchEvent(
+              Bubble<string>('edit-src', this.srcByLabel?.Default || '')
+            )}
+          title="Project Pen"
+        >
+          <play-icon
+            size=${iconSizes[this.size]}
+            icon="download-outline"
+          ></play-icon>
+          <span>Project</span>
+        </button>
+        <div class="divider"></div>
+        <play-dropdown-menu direction="down">
+          <div slot="trigger">
+            <button class="project-options" title="Project Options">
+              <play-icon
+                size=${iconSizes[this.size]}
+                icon="caret-down-outline"
+              ></play-icon>
+            </button>
+          </div>
+          <div slot="menu">
+            <!--            <play-list-item-->
+            <!--              label="Save"-->
+            <!--              icon="download-outline"-->
+            <!--            ></play-list-item>-->
+            <!--            <play-list-item-->
+            <!--              label="Load"-->
+            <!--              icon="upload-outline"-->
+            <!--            ></play-list-item>-->
+            <play-list-item
+              label="Export"
+              icon="external-outline"
+              @click=${() =>
+                this.dispatchEvent(
+                  new CustomEvent('open-export-dialog', {
+                    bubbles: true,
+                    composed: true
+                  })
+                )}
+            ></play-list-item>
+          </div>
+        </play-dropdown-menu>
+      </div>
+    `
+  }
+}