wsb-daemon 0.275.7622

wsb's daemon: the workbench, the GitHub mirror's schedule and peer continuity, for every workspace on the machine
<script lang="ts">
  import { ui } from "../../stores/ui.svelte.js";
  import { sync } from "../../stores/sync.svelte.js";
  import { listedShortcuts } from "../../utils/keyboard.js";

  const isMac = navigator.platform.toUpperCase().includes("MAC");
  const mod = isMac ? "Cmd" : "Ctrl";

  const baseShortcuts = listedShortcuts(mod);

  const zoomShortcuts = [
    { key: `${mod}++`, action: "Zoom in" },
    { key: `${mod}+-`, action: "Zoom out" },
    { key: `${mod}+0`, action: "Reset zoom" },
  ];

  const shortcuts = sync.isDesktop
    ? [...baseShortcuts, ...zoomShortcuts]
    : baseShortcuts;

  function handleOverlayClick(e: MouseEvent) {
    if (
      (e.target as HTMLElement).classList.contains(
        "shortcuts-overlay",
      )
    ) {
      ui.activeModal = null;
    }
  }
</script>

<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
  class="shortcuts-overlay"
  onclick={handleOverlayClick}
  onkeydown={(e) => {
    if (e.key === "Escape") ui.activeModal = null;
  }}
>
  <div class="shortcuts-modal">
    <div class="shortcuts-header">
      <h3 class="shortcuts-title">Keyboard Shortcuts</h3>
      <button
        class="close-btn"
        onclick={() => ui.activeModal = null}
      >
        &times;
      </button>
    </div>

    <div class="shortcuts-list">
      {#each shortcuts as shortcut}
        <div class="shortcut-row">
          <kbd class="shortcut-key">{shortcut.key}</kbd>
          <span class="shortcut-action">{shortcut.action}</span>
        </div>
      {/each}
    </div>
  </div>
</div>

<style>
  .shortcuts-overlay {
    position: fixed;
    inset: 0;
    background: var(--vscode-widget-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
  }

  .shortcuts-modal {
    width: 360px;
    background: var(--vscode-sideBar-background);
    border: 1px solid var(--vscode-panel-border);
    border-radius: var(--wsb-radius-lg);
    box-shadow: var(--wb-shadow-md);
    overflow: hidden;
  }

  .shortcuts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--wb-spacing-12) var(--wb-spacing-16);
    border-bottom: 1px solid var(--vscode-panel-border);
  }

  .shortcuts-title {
    font-size: var(--wb-font-size-13);
    font-weight: 600;
    color: var(--vscode-editor-foreground);
  }

  .close-btn {
    width: var(--wb-control-size-24);
    height: var(--wb-control-size-24);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--wb-font-size-16);
    color: var(--vscode-disabledForeground);
    border-radius: var(--wsb-radius-sm);
  }

  .close-btn:hover {
    background: var(--vscode-list-hoverBackground);
    color: var(--vscode-editor-foreground);
  }

  .shortcuts-list {
    padding: var(--wb-spacing-8) 0;
  }

  .shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--wb-spacing-5) var(--wb-spacing-16);
  }

  .shortcut-key {
    font-family: var(--wsb-font-mono);
    font-size: var(--wb-font-size-11);
    padding: var(--wb-spacing-1) var(--wb-spacing-6);
    border: 1px solid var(--vscode-panel-border);
    border-radius: var(--wsb-radius-sm);
    background: var(--vscode-input-background);
    color: var(--vscode-foreground);
    min-width: var(--wb-control-size-60);
    text-align: center;
  }

  .shortcut-action {
    font-size: var(--wb-font-size-12);
    color: var(--vscode-foreground);
  }
</style>