@cardstack/boxel-cli 0.2.0 → 0.3.0-unstable.13

package/bundled-types/host-app/components/operator-mode/host-submode/publishing-realm-popover.gts

@@ -0,0 +1,159 @@
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+
+import { LoadingIndicator } from '@cardstack/boxel-ui/components';
+
+import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
+import type RealmService from '@cardstack/host/services/realm';
+
+interface PublishingRealmArgs {
+  isOpen: boolean;
+}
+
+export default class PublishingRealmPopover extends Component<PublishingRealmArgs> {
+  @service declare realm: RealmService;
+  @service declare operatorModeStateService: OperatorModeStateService;
+
+  get publishingRealms() {
+    return this.realm.publishingRealms(this.realmURL);
+  }
+
+  get realmURL() {
+    return this.operatorModeStateService.realmURL;
+  }
+
+  <template>
+    {{#if @isOpen}}
+      <div class='publishing-realm-popover'>
+        <div class='publishing-realm-header'>
+          Publishing to:
+        </div>
+        <div class='publishing-realm-content'>
+          {{#if this.publishingRealms.length}}
+            <div class='realm-urls'>
+              {{#each this.publishingRealms as |url|}}
+                <div class='realm-item'>
+                  <div class='realm-icon-container'>
+                    {{#if this.operatorModeStateService.currentRealmInfo}}
+                      <img
+                        src={{this.operatorModeStateService.currentRealmInfo.iconURL}}
+                        alt='Realm icon'
+                        class='realm-icon'
+                      />
+                    {{else}}
+                      <div class='default-realm-icon'></div>
+                    {{/if}}
+                  </div>
+                  <div class='realm-url'>{{url}}</div>
+                  <div class='status-icon'>
+                    <LoadingIndicator class='loading-icon' />
+                  </div>
+                </div>
+              {{/each}}
+            </div>
+          {{else}}
+            <p class='no-domains-message'>No domains are currently publishing.</p>
+          {{/if}}
+        </div>
+      </div>
+    {{/if}}
+
+    <style scoped>
+      .publishing-realm-popover {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        background: white;
+        border: solid 1px rgba(0, 0, 0, 0.35);
+        border-radius: 8px;
+        box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.25);
+        min-width: 320px;
+        max-width: 320px;
+        z-index: 1000;
+        margin-top: 4px;
+        padding: var(--boxel-sp-xs);
+      }
+
+      .publishing-realm-header {
+        font: 500 var(--boxel-font-xs);
+        color: var(--boxel-dark);
+        line-height: 2.91;
+        letter-spacing: 0.17px;
+      }
+
+      .publishing-realm-content {
+        padding: 0.5rem 0;
+      }
+
+      .publishing-realms-list {
+        max-height: 200px;
+      }
+
+      .realm-item {
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid var(--boxel-light-200);
+      }
+
+      .realm-item:last-child {
+        border-bottom: none;
+      }
+
+      .realm-icon-container {
+        width: 20px;
+        height: 20px;
+        margin-right: 0.75rem;
+        flex-shrink: 0;
+      }
+
+      .realm-icon {
+        width: 100%;
+        height: 100%;
+        border-radius: 3px;
+        object-fit: cover;
+      }
+
+      .default-realm-icon {
+        width: 100%;
+        height: 100%;
+        background-color: var(--boxel-light-400);
+        border-radius: 3px;
+      }
+
+      .realm-url {
+        flex: 1;
+        font: 500 var(--boxel-font-sm);
+        color: var(--boxel-dark);
+        text-wrap: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .status-icon {
+        margin-left: 0.75rem;
+        flex-shrink: 0;
+      }
+
+      .loading-icon {
+        color: var(--boxel-purple-600);
+      }
+
+      .no-domains-message {
+        text-align: center;
+        color: var(--boxel-light-600);
+        font-style: italic;
+        padding: 1rem;
+        font-size: var(--boxel-font-size-xs);
+      }
+
+      @keyframes spin {
+        from {
+          transform: rotate(0deg);
+        }
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    </style>
+  </template>
+}

package/bundled-types/host-app/components/operator-mode/host-submode.gts

@@ -0,0 +1,373 @@
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import Globe from '@cardstack/boxel-icons/globe';
+import Refresh from '@cardstack/boxel-icons/refresh';
+import onClickOutside from 'ember-click-outside/modifiers/on-click-outside';
+
+import { restartableTask } from 'ember-concurrency';
+import perform from 'ember-concurrency/helpers/perform';
+
+import { BoxelButton, Tooltip } from '@cardstack/boxel-ui/components';
+import { PublishSiteIcon } from '@cardstack/boxel-ui/icons';
+
+import OpenSitePopover from '@cardstack/host/components/operator-mode/host-submode/open-site-popover';
+import PublishingRealmPopover from '@cardstack/host/components/operator-mode/host-submode/publishing-realm-popover';
+import PublishRealmModal from '@cardstack/host/components/operator-mode/publish-realm-modal';
+
+import type HostModeService from '@cardstack/host/services/host-mode-service';
+import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
+import type RealmService from '@cardstack/host/services/realm';
+import type StoreService from '@cardstack/host/services/store';
+
+import { idFromCardOrURL } from '@cardstack/host/utils/id-from-card-or-url';
+
+import type { ViewCardFn } from 'https://cardstack.com/base/card-api';
+
+import HostModeContent from '../host-mode/content';
+
+import SubmodeLayout from './submode-layout';
+
+import type { PublishError } from './publish-realm-modal';
+
+interface HostSubmodeSignature {
+  Element: HTMLElement;
+  Args: {};
+}
+
+export default class HostSubmode extends Component<HostSubmodeSignature> {
+  @service declare private operatorModeStateService: OperatorModeStateService;
+  @service declare private store: StoreService;
+  @service declare private realm: RealmService;
+  @service declare private hostModeService: HostModeService;
+
+  @tracked isPublishRealmModalOpen = false;
+  @tracked isPublishingRealmPopoverOpen = false;
+  @tracked isOpenSitePopoverOpen = false;
+
+  @action
+  openPublishRealmModal() {
+    this.isPublishRealmModalOpen = true;
+  }
+
+  @action
+  closePublishRealmModal() {
+    this.isPublishRealmModalOpen = false;
+  }
+
+  @action
+  togglePublishingRealmPopover() {
+    this.isPublishingRealmPopoverOpen = !this.isPublishingRealmPopoverOpen;
+  }
+
+  @action
+  closeOpenSitePopover() {
+    this.isOpenSitePopoverOpen = false;
+  }
+
+  get realmURL() {
+    return this.hostModeService.realmURL;
+  }
+
+  get isPublishing() {
+    return this.realm.isPublishing(this.realmURL);
+  }
+
+  get hasPublishedSites() {
+    return this.hostModeService.publishedRealmURLs.length > 0;
+  }
+
+  get publishedRealmURLs() {
+    return this.hostModeService.publishedRealmURLs;
+  }
+
+  get publishButtonLabel() {
+    return this.hasPublishedSites ? 'Republish Site' : 'Publish Site';
+  }
+
+  get defaultPublishedRealmURL(): string | undefined {
+    return this.hostModeService.defaultPublishedRealmURL;
+  }
+
+  handlePublishTask = restartableTask(async (publishedRealmURLs: string[]) => {
+    const results = await this.realm.publish(this.realmURL, publishedRealmURLs);
+
+    const errors = new Map<string, string>();
+    if (results) {
+      results.forEach((result, index) => {
+        if (result.status === 'rejected') {
+          const url = publishedRealmURLs[index];
+          const error = result as PromiseRejectedResult;
+          const errorMessage =
+            error.reason?.message || 'Failed to publish to this domain';
+          errors.set(url, errorMessage);
+        }
+      });
+    }
+
+    if (errors.size > 0) {
+      const error = new Error(
+        'Failed to publish to some domains',
+      ) as PublishError;
+      error.urlErrors = errors;
+      throw error;
+    }
+
+    this.isPublishingRealmPopoverOpen = false;
+  });
+
+  @action
+  handlePublish(publishedRealmURLs: string[]) {
+    let promise = this.handlePublishTask.perform(publishedRealmURLs);
+    // Catch the error so it doesn't bubble
+    // to the browser (so error reporters like Bugsnag will see it).
+    // TODO: remove this after this issue (https://github.com/machty/ember-concurrency/issues/40)
+    // is resolved.
+    promise.catch((_error) => {});
+  }
+
+  get handlePublishError(): PublishError | null {
+    return this.handlePublishTask.last?.error as PublishError | null;
+  }
+
+  handleUnpublish = restartableTask(async (publishedRealmURL: string) => {
+    await this.realm.unpublish(this.realmURL, publishedRealmURL);
+  });
+
+  get defaultPublishedSiteURL(): string | undefined {
+    return this.hostModeService.defaultPublishedSiteURL;
+  }
+
+  @action
+  handleOpenSiteButtonClick(event: Event) {
+    let mouseEvent = event as MouseEvent;
+    if (mouseEvent.shiftKey) {
+      mouseEvent.preventDefault();
+      mouseEvent.stopPropagation();
+      this.isOpenSitePopoverOpen = !this.isOpenSitePopoverOpen;
+      return;
+    }
+
+    // If there's no default URL, prevent navigation and show popover
+    if (!this.defaultPublishedRealmURL) {
+      mouseEvent.preventDefault();
+      mouseEvent.stopPropagation();
+      this.isOpenSitePopoverOpen = true;
+      return;
+    }
+
+    // Otherwise, let the anchor navigate naturally
+    this.isOpenSitePopoverOpen = false;
+  }
+
+  private viewCard: ViewCardFn = (cardOrURL) => {
+    let cardId = idFromCardOrURL(cardOrURL);
+    if (!cardId) {
+      return;
+    }
+
+    this.operatorModeStateService.addToHostModeStack(
+      cardId.replace(/\.json$/, ''),
+    );
+  };
+
+  private removeCardFromStack = (cardId: string) => {
+    this.operatorModeStateService.removeFromHostModeStack(cardId);
+  };
+
+  <template>
+    <SubmodeLayout class='host-submode-layout' data-test-host-submode>
+      <:topBar>
+        <div class='publish-realm-button-container'>
+          {{#if this.isPublishing}}
+            <BoxelButton
+              @kind='primary'
+              @size='tall'
+              class='publish-realm-button publishing'
+              {{on 'click' this.togglePublishingRealmPopover}}
+              data-test-publish-realm-button
+            >
+              <Refresh width='22' height='22' class='publish-icon' />
+              Publishing…
+            </BoxelButton>
+          {{else}}
+            <BoxelButton
+              @kind='primary'
+              @size='tall'
+              class='publish-realm-button'
+              {{on 'click' this.openPublishRealmModal}}
+              data-test-publish-realm-button
+            >
+              <PublishSiteIcon width='22' height='22' class='publish-icon' />
+              {{this.publishButtonLabel}}
+            </BoxelButton>
+          {{/if}}
+          <PublishingRealmPopover
+            @isOpen={{this.isPublishingRealmPopoverOpen}}
+          />
+        </div>
+        {{#if this.hasPublishedSites}}
+
+          <div
+            class='open-site-button-container'
+            {{onClickOutside
+              this.closeOpenSitePopover
+              exceptSelector='.open-site-button'
+            }}
+          >
+            <Tooltip class='open-site-tooltip'>
+              <:trigger>
+                <BoxelButton
+                  @as='anchor'
+                  @kind='secondary'
+                  @size='tall'
+                  @href={{this.defaultPublishedSiteURL}}
+                  class='open-site-button'
+                  target='_blank'
+                  rel='noopener noreferrer'
+                  {{on 'click' this.handleOpenSiteButtonClick}}
+                  data-test-open-site-button
+                >
+                  <Globe width='22' height='22' class='globe-icon' />
+                  Open Site
+                </BoxelButton>
+              </:trigger>
+              <:content>
+                Open Site in a New Tab (Shift+Click for options)
+              </:content>
+            </Tooltip>
+            <OpenSitePopover @isOpen={{this.isOpenSitePopoverOpen}} />
+          </div>
+        {{/if}}
+
+      </:topBar>
+      <:default as |layout|>
+        <HostModeContent
+          @primaryCardId={{this.operatorModeStateService.hostModePrimaryCard}}
+          @stackItemCardIds={{this.operatorModeStateService.hostModeStack}}
+          @removeCardFromStack={{this.removeCardFromStack}}
+          @openInteractSubmode={{fn layout.updateSubmode 'interact'}}
+          @viewCard={{this.viewCard}}
+          class='host-submode-content'
+        />
+      </:default>
+    </SubmodeLayout>
+
+    <PublishRealmModal
+      @isOpen={{this.isPublishRealmModalOpen}}
+      @onClose={{this.closePublishRealmModal}}
+      @handlePublish={{this.handlePublish}}
+      @publishError={{this.handlePublishError}}
+      @handleUnpublish={{perform this.handleUnpublish}}
+    />
+
+    <style scoped>
+      .host-submode-layout {
+        --host-submode-background: var(--boxel-700);
+        --submode-bar-item-border-radius: var(--boxel-border-radius);
+        --submode-bar-item-box-shadow: var(--boxel-deep-box-shadow);
+        --submode-bar-item-outline: var(--boxel-border-flexible);
+        --operator-mode-left-column: calc(
+          21.5rem - var(--new-file-button-width)
+        );
+        background-color: var(--host-submode-background);
+      }
+
+      .host-submode {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+        background-position: center;
+        background-size: cover;
+      }
+
+      .host-submode-layout
+        .open-site-button-container
+        + :deep(.profile-icon-button) {
+        margin-left: 0;
+      }
+
+      .host-mode-top-bar-content {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        padding-left: calc(
+          var(--operator-mode-left-column) + var(--submode-switcher-width) +
+            var(--operator-mode-spacing)
+        );
+      }
+
+      .host-submode-content {
+        flex: 1;
+      }
+
+      .publish-realm-button-container {
+        position: relative;
+      }
+
+      .publish-realm-button {
+        padding: var(--boxel-sp-xxs) var(--boxel-sp-xs);
+        border: none;
+        border-radius: var(--submode-bar-item-border-radius);
+        box-shadow: var(--submode-bar-item-box-shadow);
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-xxxs);
+      }
+
+      .publish-realm-button:focus:not(:disabled) {
+        outline-offset: 1px;
+      }
+
+      .publish-icon {
+        flex-shrink: 0;
+      }
+
+      .open-site-button-container {
+        position: relative;
+        margin-left: auto;
+      }
+
+      .open-site-button {
+        padding: var(--boxel-sp-xxs) var(--boxel-sp-xs);
+        --boxel-button-color: transparent;
+        --boxel-button-border: 1px solid var(--boxel-700);
+        --boxel-button-text-color: var(--boxel-light);
+        border-radius: var(--submode-bar-item-border-radius);
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-xxxs);
+      }
+
+      .open-site-button:hover:not(:disabled) {
+        --boxel-button-border: 1px solid var(--boxel-light);
+      }
+
+      .globe-icon {
+        flex-shrink: 0;
+        color: var(--boxel-teal);
+      }
+
+      .publish-realm-button.publishing {
+        animation: pulse 2s infinite;
+      }
+
+      @keyframes pulse {
+        0% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.7;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+    </style>
+  </template>
+}

package/bundled-types/host-app/components/operator-mode/interact-submode/neighbor-stack-trigger.gts

@@ -0,0 +1,116 @@
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import Component from '@glimmer/component';
+
+import { Button, Tooltip } from '@cardstack/boxel-ui/components';
+import { cn, eq } from '@cardstack/boxel-ui/helpers';
+import { IconPlus } from '@cardstack/boxel-ui/icons';
+
+export const SearchSheetTriggers = {
+  DropCardToLeftNeighborStackButton: 'left',
+  DropCardToRightNeighborStackButton: 'right',
+} as const;
+type Values<T> = T[keyof T];
+export type SearchSheetTrigger = Values<typeof SearchSheetTriggers>;
+
+interface Signature {
+  Element: HTMLButtonElement;
+  Args: {
+    triggerSide: SearchSheetTrigger;
+    activeTrigger: SearchSheetTrigger | null;
+    onTrigger: (triggerSide: SearchSheetTrigger) => void;
+  };
+}
+
+export default class NeighborStackTriggerButton extends Component<Signature> {
+  private get tooltipPlacement() {
+    return this.args.triggerSide ===
+      SearchSheetTriggers.DropCardToRightNeighborStackButton
+      ? SearchSheetTriggers.DropCardToLeftNeighborStackButton
+      : SearchSheetTriggers.DropCardToRightNeighborStackButton;
+  }
+  <template>
+    <Tooltip @placement={{this.tooltipPlacement}} ...attributes>
+      <:trigger>
+        <Button
+          class={{cn
+            'add-card-to-neighbor-stack'
+            add-card-to-neighbor-stack--active=(eq @activeTrigger @triggerSide)
+          }}
+          {{on 'click' (fn @onTrigger @triggerSide)}}
+          aria-label='Add card to {{@triggerSide}} stack'
+          data-test-add-card-right-stack={{eq
+            @triggerSide
+            SearchSheetTriggers.DropCardToRightNeighborStackButton
+          }}
+          data-test-add-card-left-stack={{eq
+            @triggerSide
+            SearchSheetTriggers.DropCardToLeftNeighborStackButton
+          }}
+          data-test-neighbor-stack-trigger
+        >
+          <span class='icon-container'>
+            <IconPlus class='add-icon' width='10' height='10' />
+          </span>
+        </Button>
+      </:trigger>
+      <:content>
+        Open a card to the
+        {{@triggerSide}}
+        of the current card
+      </:content>
+    </Tooltip>
+    <style scoped>
+      .add-card-to-neighbor-stack {
+        --minimized-width: 8px;
+        --minimized-height: 20px;
+        --expanded-width: 16px;
+        --expanded-height: 66px;
+        --boxel-transition: 100ms ease;
+        --boxel-button-min-width: var(--expanded-width);
+        --boxel-button-min-height: var(--minimized-height);
+        height: calc(var(--expanded-height) / 2);
+        width: var(--expanded-width);
+        background: none;
+        border: none;
+        padding: 0;
+      }
+      .add-card-to-neighbor-stack:hover,
+      .add-card-to-neighbor-stack:focus:focus-visible,
+      .add-card-to-neighbor-stack--active {
+        padding: 0;
+        height: var(--expanded-height);
+        outline-offset: 2px;
+      }
+      .icon-container {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--minimized-width);
+        height: var(--minimized-height);
+        border-radius: inherit;
+        background-color: var(--boxel-highlight);
+        border: 2px solid rgba(0 0 0 / 50%);
+        box-shadow: var(--boxel-deep-box-shadow);
+        transition:
+          height var(--boxel-transition),
+          width var(--boxel-transition);
+      }
+      .add-card-to-neighbor-stack:hover .icon-container,
+      .add-card-to-neighbor-stack:focus:focus-visible .icon-container,
+      .add-card-to-neighbor-stack--active .icon-container {
+        width: var(--expanded-width);
+        height: var(--expanded-height);
+      }
+      .add-icon {
+        visibility: collapse;
+        transition: visibility var(--boxel-transition);
+      }
+      .add-card-to-neighbor-stack:hover .add-icon,
+      .add-card-to-neighbor-stack:focus:focus-visible .add-icon,
+      .add-card-to-neighbor-stack--active .add-icon {
+        visibility: visible;
+      }
+    </style>
+  </template>
+}