summaryrefslogtreecommitdiffhomepage
path: root/src/features/workspaces/ui/TileActionBar.svelte
blob: ffb8f1d83281386067f9136a28830d16e946aec3 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<script lang="ts">
  import { fly } from "svelte/transition";
  import type { WorkspaceEntry } from "@dispatch/wire";

  let {
    ws,
    withPlugins = false,
    onOpen,
    onRename,
    onResize,
    onToggleStar,
    onDetails,
    onPlugins,
    onArchive,
    onDelete,
    onClose,
  }: {
    ws: WorkspaceEntry;
    /** The plugins port is present → the Plugins action renders. */
    withPlugins?: boolean;
    onOpen: () => void;
    onRename: () => void;
    onResize: () => void;
    onToggleStar: () => void;
    /** The details flyout (default cwd + default computer). */
    onDetails: () => void;
    onPlugins: () => void;
    /** Archive the workspace (hide from the home grid; reversible). */
    onArchive: () => void;
    onDelete: () => void;
    onClose: () => void;
  } = $props();
</script>

<!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
<div
  class="fixed inset-x-0 bottom-0 z-40 flex justify-center p-4"
  transition:fly={{ y: 80, duration: 150 }}
  onclick={(e) => {
    // The bar owns its clicks — don't let them deselect via the backdrop.
    e.stopPropagation();
  }}
>
  <div
    class="flex flex-wrap items-center justify-center gap-1 rounded-box border border-base-content/15 bg-base-100 p-2 shadow-2xl"
    role="toolbar"
    aria-label={`Actions for ${ws.title}`}
  >
    <button type="button" class="btn btn-primary btn-sm" onclick={onOpen}>Open</button>
    <button type="button" class="btn btn-ghost btn-sm" onclick={onRename}>Rename</button>
    <button type="button" class="btn btn-ghost btn-sm" onclick={onResize}>Resize</button>
    <button type="button" class="btn btn-ghost btn-sm" onclick={onDetails}>Details</button>
    <button type="button" class="btn btn-ghost btn-sm" onclick={onToggleStar}>
      {ws.starred ? "Unstar" : "Star"}
    </button>
    {#if withPlugins}
      <button type="button" class="btn btn-ghost btn-sm" onclick={onPlugins}>Plugins</button>
    {/if}
    <button type="button" class="btn btn-ghost btn-sm" onclick={onArchive}>Archive</button>
    <button
      type="button"
      class="btn btn-ghost btn-sm text-error"
      onclick={onDelete}>Delete</button
    >
    <button
      type="button"
      class="btn btn-circle btn-ghost btn-sm"
      aria-label="Close actions"
      title="Close"
      onclick={onClose}>✕</button
    >
  </div>
</div>