Lumotia/src/lib/components/Titlebar.svelte

<script lang="ts">
  import { getCurrentWindow } from "@tauri-apps/api/window";
  import { settings } from "$lib/stores/page.svelte.js";
  import { hasTauriRuntime } from "$lib/utils/runtime.js";

  let { compact = false } = $props();

  let maximised = $state(false);

  // Titlebar is normally gated behind useCustomChrome in the route layouts,
  // which is false on Linux (native KWin/Mutter decorations) and false in
  // any browser-preview context that mis-detects the OS. The defensive
  // guard here keeps the component from crashing in any future code path
  // that mounts it without a Tauri runtime — `getCurrentWindow()` reads
  // window.__TAURI_INTERNALS__.metadata which is undefined in plain browsers.
  const tauriPresent = hasTauriRuntime();

  async function handleMinimise() {
    if (!tauriPresent) return;
    await getCurrentWindow().minimize();
  }

  async function handleMaximise() {
    if (!tauriPresent) return;
    await getCurrentWindow().toggleMaximize();
    maximised = await getCurrentWindow().isMaximized();
  }

  async function handleClose() {
    if (!tauriPresent) return;
    await getCurrentWindow().hide();
  }

  function handleDragStart(e: PointerEvent) {
    if (!tauriPresent) return;
    if (e.button !== 0) return;
    if ((e.target as HTMLElement | null)?.closest("button")) return;
    try { (e.currentTarget as HTMLElement | null)?.setPointerCapture?.(e.pointerId); } catch {}
    getCurrentWindow().startDragging();
  }

  // Track maximise state. Skipped without Tauri; getCurrentWindow().onResized
  // throws because the underlying Window object has no `metadata`.
  $effect(() => {
    if (!tauriPresent) return;
    let unlisten: (() => void) | undefined;
    getCurrentWindow().onResized(async () => {
      maximised = await getCurrentWindow().isMaximized();
    }).then((fn) => unlisten = fn);
    return () => unlisten?.();
  });
</script>

<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
  class="flex items-center select-none bg-sidebar border-b border-border-subtle
    {compact ? 'h-[28px]' : 'h-[32px]'}"
  onpointerdown={handleDragStart}
>
  {#if !compact}
    <!-- Left spacer: aligns with sidebar width -->
    <div
      class="transition-all {settings.sidebarCollapsed ? 'w-[48px] min-w-[48px]' : 'w-[210px] min-w-[210px]'}"
      style="transition-duration: var(--duration-ui)"
    ></div>
  {/if}

  <!-- Centre: drag area -->
  <div class="flex-1"></div>

  <!-- Window controls -->
  <div class="flex items-center h-full">
    <button class="titlebar-btn hover:bg-hover" onclick={handleMinimise} aria-label="Minimise">
      <svg class="w-3 h-3" viewBox="0 0 12 12" aria-hidden="true">
        <rect y="5" width="12" height="1.5" rx="0.5" fill="currentColor" />
      </svg>
    </button>
    <button class="titlebar-btn hover:bg-hover" onclick={handleMaximise} aria-label="Maximise">
      {#if maximised}
        <svg class="w-3 h-3" viewBox="0 0 12 12" aria-hidden="true">
          <path d="M3 1h8v8h-2v2H1V3h2V1zm1 1v1h5v5h1V2H4zm-2 2v6h6V4H2z" fill="currentColor" />
        </svg>
      {:else}
        <svg class="w-3 h-3" viewBox="0 0 12 12" aria-hidden="true">
          <rect x="1" y="1" width="10" height="10" rx="1" fill="none" stroke="currentColor" stroke-width="1.5" />
        </svg>
      {/if}
    </button>
    <button class="titlebar-btn hover:bg-danger/20 hover:text-danger" onclick={handleClose} aria-label="Close">
      <svg class="w-3 h-3" viewBox="0 0 12 12" aria-hidden="true">
        <path d="M1 1l10 10M11 1L1 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
      </svg>
    </button>
  </div>
</div>