Izk componen

src/apps/admin/executequery/Overlays/LoadQueryOverlay.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import ActionBar from "$lib/Window/ActionBar.svelte";
+  import ActionButton from "$lib/Window/ActionBar/ActionButton.svelte";
   import type { LoadQueryOverlayRuntime } from "../LoadQuery/runtime";
 
   const { process }: { process: LoadQueryOverlayRuntime } = $props();
@@ -13,7 +15,10 @@
     </button>
   {/each}
 </div>
-<div class="actions">
-  <button onclick={() => process.closeWindow()}>Cancel</button>
-  <button class="suggested" disabled={!$selectedQuery} onclick={() => process.Confirm()}>Load</button>
-</div>
+
+<ActionBar>
+  {#snippet rightContent()}
+    <ActionButton onclick={() => process.closeWindow()}>Cancel</ActionButton>
+    <ActionButton suggested disabled={!$selectedQuery} onclick={() => process.Confirm()}>Load</ActionButton>
+  {/snippet}
+</ActionBar>

src/apps/admin/executequery/Overlays/SaveQueryOverlay.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import ActionBar from "$lib/Window/ActionBar.svelte";
+  import ActionButton from "$lib/Window/ActionBar/ActionButton.svelte";
   import type { SaveQueryOverlayRuntime } from "../SaveQuery/runtime";
 
   const { process }: { process: SaveQueryOverlayRuntime } = $props();
@@ -10,7 +12,9 @@
   <input type="text" bind:value={$queryName} placeholder="Users called 'banana'" />
 </div>
 
-<div class="actions">
-  <button onclick={() => process.closeWindow()}>Cancel</button>
-  <button onclick={() => process.Confirm()} class="suggested">Save</button>
-</div>
+<ActionBar>
+  {#snippet rightContent()}
+    <ActionButton onclick={() => process.closeWindow()}>Cancel</ActionButton>
+    <ActionButton suggested disabled={!$queryName} onclick={() => process.Confirm()}>Save</ActionButton>
+  {/snippet}
+</ActionBar>

src/apps/components/addserver/AddServer.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
+  import ActionBar from "$lib/Window/ActionBar.svelte";
+  import ActionButton from "$lib/Window/ActionBar/ActionButton.svelte";
   import type { AddServerRuntime } from "./runtime";
 
   const { process }: { process: AddServerRuntime } = $props();
+  const { loading, action } = process;
 
   let hostname = $state<string>("");
   let authCode = $state<string>("");
@@ -39,16 +42,25 @@
   </div>
 </div>
 
-<div class="actions">
-  <button
-    class="test"
-    disabled={!hostname || port <= 100 || port > 65535}
-    onclick={() => process.testServer(hostname, port, authCode)}>Test</button
-  >
-  <button class="cancel" onclick={() => process.closeWindow()}>Cancel</button>
-  <button
-    class="suggested"
-    disabled={!hostname || port <= 100 || port > 65535}
-    onclick={() => process.addServer(hostname, port, authCode)}>Add</button
-  >
-</div>
+<ActionBar floating>
+  {#snippet leftContent()}
+    <ActionButton
+      disabled={!hostname || port <= 100 || port > 65535 || $loading}
+      onclick={() => process.testServer(hostname, port, authCode)}
+      loading={$action === "callServer"}
+    >
+      Test
+    </ActionButton>
+  {/snippet}
+  {#snippet rightContent()}
+    <ActionButton onclick={() => process.closeWindow()}>Cancel</ActionButton>
+    <ActionButton
+      disabled={!hostname || port <= 100 || port > 65535 || $loading}
+      onclick={() => process.addServer(hostname, port, authCode)}
+      loading={$action === "addServer"}
+      suggested
+    >
+      Add
+    </ActionButton>
+  {/snippet}
+</ActionBar>

src/apps/components/addserver/runtime.ts

@@ -3,10 +3,13 @@ import { Server } from "$ts/env";
 import { ErrorIcon, WarningIcon } from "$ts/images/dialog";
 import { GoodStatusIcon } from "$ts/images/status";
 import { MessageBox } from "$ts/util/dialog";
+import { Store } from "$ts/writable";
 import type { AppProcessData } from "$types/app";
 import axios from "axios";
 
 export class AddServerRuntime extends AppProcess {
+  loading = Store<boolean>(false);
+  action = Store<string>("");
   //#region LIFECYCLE
 
   constructor(pid: number, parentPid: number, app: AppProcessData) {
@@ -26,6 +29,8 @@ export class AddServerRuntime extends AppProcess {
   async addServer(hostname: string, port: number, authCode?: string) {
     this.Log(`addServer: ${hostname}:${port}`);
 
+    this.action.set("addServer");
+
     const url = this.createServerUrl(hostname, port);
 
     if (Server.isAdded(url)) {
@@ -58,13 +63,16 @@ export class AddServerRuntime extends AppProcess {
         true
       );
 
+      this.action.set("");
+
       return;
     }
 
     Server.addServer({
       url,
       authCode,
     });
+    this.action.set("");
     this.closeWindow();
   }
 
@@ -77,6 +85,9 @@ export class AddServerRuntime extends AppProcess {
 
   private async callServer(url: string, authCode?: string) {
     this.Log(`callServer: ${url}`);
+    this.loading.set(true);
+
+    if (this.action() === "") this.action.set("callServer");
 
     try {
       const response = await axios.get(`/ping`, {
@@ -85,11 +96,15 @@ export class AddServerRuntime extends AppProcess {
         baseURL: url,
         params: authCode ? { authcode: authCode } : {},
       });
+
       if (response.status !== 200) return false;
 
       return true;
     } catch {
       return false;
+    } finally {
+      this.loading.set(false);
+      this.action.set("");
     }
   }
 

src/apps/components/appinfo/AppInfo/Actions.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import InfoBlock from "$lib/InfoBlock.svelte";
-  import InfoRow from "$lib/InfoBlock/InfoRow.svelte";
+  import ActionBar from "$lib/Window/ActionBar.svelte";
+  import ActionButton from "$lib/Window/ActionBar/ActionButton.svelte";
   import { onMount } from "svelte";
   import type { AppInfoRuntime } from "../runtime";
+  import ActionSubtle from "$lib/Window/ActionBar/ActionSubtle.svelte";
 
   const { appId, process }: { appId: string; process: AppInfoRuntime } = $props();
   const { userPreferences } = process;
@@ -18,11 +19,13 @@
   });
 </script>
 
-<InfoBlock className="actions">
-  <InfoRow>
-    <p class="id" title={appId}>{appId}</p>
-    <button onclick={() => process.openPermissions()} {disabled}>Permissions</button>
-    <button onclick={() => process.killAll()} {disabled}>Kill all</button>
-    <button class="suggested" onclick={() => process.closeWindow()}>Close</button>
-  </InfoRow>
-</InfoBlock>
+<ActionBar floating>
+  {#snippet leftContent()}
+    <ActionSubtle mono text={appId} />
+  {/snippet}
+  {#snippet rightContent()}
+    <ActionButton onclick={() => process.openPermissions()}>Permissions</ActionButton>
+    <ActionButton onclick={() => process.killAll()}>Kill all</ActionButton>
+    <ActionButton suggested onclick={() => process.closeWindow()}>Close</ActionButton>
+  {/snippet}
+</ActionBar>

src/apps/components/apppermissions/AppPermissions/Actions.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
-  import InfoBlock from "$lib/InfoBlock.svelte";
-  import InfoRow from "$lib/InfoBlock/InfoRow.svelte";
+  import ActionBar from "$lib/Window/ActionBar.svelte";
+  import ActionButton from "$lib/Window/ActionBar/ActionButton.svelte";
   import { Permissions } from "$ts/permissions";
   import type { AppPermissionsRuntime } from "../runtime";
 
   const { process, permissionId }: { process: AppPermissionsRuntime; permissionId: string } = $props();
 </script>
 
-<InfoBlock>
-  <InfoRow className="actions">
-    <button onclick={() => Permissions.resetPermissionsById(permissionId)} disabled={!permissionId}>Reset all</button>
-    <button class="suggested" onclick={() => process.closeWindow()}>Close</button>
-  </InfoRow>
-</InfoBlock>
+<ActionBar floating>
+  {#snippet leftContent()}
+    <ActionButton onclick={() => Permissions.resetPermissionsById(permissionId)} disabled={!permissionId}>Reset all</ActionButton>
+  {/snippet}
+  {#snippet rightContent()}
+    <ActionButton suggested onclick={() => process.closeWindow()}>Close</ActionButton>
+  {/snippet}
+</ActionBar>

src/apps/components/arctermcolors/ArcTermColors.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import ActionBar from "$lib/Window/ActionBar.svelte";
+  import ActionButton from "$lib/Window/ActionBar/ActionButton.svelte";
+  import ActionIconButton from "$lib/Window/ActionBar/ActionIconButton.svelte";
   import Custom from "./ArcTermColors/Custom.svelte";
   import Presets from "./ArcTermColors/Presets.svelte";
   import type { ArcTermColorsRuntime } from "./runtime";
@@ -33,16 +36,13 @@
   {/if}
 </div>
 
-<div class="actions">
-  <button class="lucide icon-folder-open" aria-label="Load colorset..." onclick={() => process.openPreset()}></button>
-  <button
-    class="lucide icon-save"
-    disabled={$mode === "presets"}
-    aria-label="Save current colorset"
-    onclick={() => process.savePresetToFile()}
-  ></button>
-  <div class="master">
-    <button class="cancel" onclick={() => process.closeWindow()}>Cancel</button>
-    <button class="apply suggested" onclick={() => process.applyConfiguration()} disabled={!$changed}>Apply</button>
-  </div>
-</div>
+<ActionBar floating>
+  {#snippet leftContent()}
+    <ActionIconButton icon="folder-open" title="Load colorset..." onclick={() => process.openPreset()} />
+    <ActionIconButton icon="save" title="Save current colorset" onclick={() => process.savePresetToFile()} />
+  {/snippet}
+  {#snippet rightContent()}
+    <ActionButton onclick={() => process.closeWindow()}>Cancel</ActionButton>
+    <ActionButton suggested onclick={() => process.applyConfiguration()} disabled={!$changed}>Apply</ActionButton>
+  {/snippet}
+</ActionBar>

src/apps/components/driveinfo/DriveInfo.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import CircularProgress from "$lib/CircularProgress.svelte";
   import Spinner from "$lib/Spinner.svelte";
+  import ActionBar from "$lib/Window/ActionBar.svelte";
+  import ActionButton from "$lib/Window/ActionBar/ActionButton.svelte";
   import AdvancedInfo from "./DriveInfo/AdvancedInfo.svelte";
   import Quota from "./DriveInfo/Quota.svelte";
   import Usage from "./DriveInfo/Usage.svelte";
@@ -28,9 +30,14 @@
     <Spinner height={32} />
   </div>
 {/if}
-<div class="actions">
-  {#if isUserFs}
-    <button class="advanced" onclick={() => (advanced = !advanced)}>{advanced ? "Simple" : "Advanced"}</button>
-  {/if}
-  <button class="suggested" onclick={() => process.closeWindow()}>Close</button>
-</div>
+
+<ActionBar floating>
+  {#snippet leftContent()}
+    {#if isUserFs}
+      <ActionButton onclick={() => (advanced = !advanced)}>{advanced ? "Simple" : "Advanced"}</ActionButton>
+    {/if}
+  {/snippet}
+  {#snippet rightContent()}
+    <ActionButton suggested onclick={() => process.closeWindow()}>Close</ActionButton>
+  {/snippet}
+</ActionBar>

src/apps/components/fsnewfile/NewFile.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import ActionBar from "$lib/Window/ActionBar.svelte";
+  import ActionButton from "$lib/Window/ActionBar/ActionButton.svelte";
   import { Daemon } from "$ts/daemon";
   import { onMount } from "svelte";
   import type { NewFileRuntime } from "./runtime";
@@ -24,7 +26,10 @@
     <input type="text" bind:value={$newFile} />
   </div>
 </div>
-<div class="bottom">
-  <button onclick={() => process.closeWindow()}>Cancel</button>
-  <button class="suggested" disabled={!$newFile} onclick={() => process.createFile()}> Create </button>
-</div>
+
+<ActionBar>
+  {#snippet rightContent()}
+    <ActionButton onclick={() => process.closeWindow()}>Cancel</ActionButton>
+    <ActionButton suggested disabled={!$newFile} onclick={() => process.createFile()}>Create</ActionButton>
+  {/snippet}
+</ActionBar>

src/apps/components/fsnewfolder/NewFolder.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import ActionBar from "$lib/Window/ActionBar.svelte";
+  import ActionButton from "$lib/Window/ActionBar/ActionButton.svelte";
   import type { NewFolderRuntime } from "./runtime";
 
   const { process }: { process: NewFolderRuntime } = $props();
@@ -13,7 +15,10 @@
     <input type="text" bind:value={$newFolder} />
   </div>
 </div>
-<div class="bottom">
-  <button onclick={() => process.closeWindow()}>Cancel</button>
-  <button class="suggested" disabled={!$newFolder} onclick={() => process.createFolder()}> Create </button>
-</div>
+
+<ActionBar>
+  {#snippet rightContent()}
+    <ActionButton onclick={() => process.closeWindow()}>Cancel</ActionButton>
+    <ActionButton suggested disabled={!$newFolder} onclick={() => process.createFolder()}>Create</ActionButton>
+  {/snippet}
+</ActionBar>

src/apps/components/fsprogress/FsProgress/Bottom.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import ActionBar from "$lib/Window/ActionBar.svelte";
+  import ActionButton from "$lib/Window/ActionBar/ActionButton.svelte";
+  import ActionSubtle from "$lib/Window/ActionBar/ActionSubtle.svelte";
   import { formatBytes } from "$ts/util/fs";
   import type { FsProgressRuntime } from "../runtime";
 
@@ -16,15 +19,15 @@
   }
 </script>
 
-<div class="bottom">
-  {#if $Progress.max > 0}
-    <p class="status">
-      {#if $Progress.type == "quantity"}
-        {$Progress.done} / {$Progress.max} done
-      {:else if $Progress.type == "size"}
-        {formatBytes($Progress.done)} / {formatBytes($Progress.max)} done
-      {/if}
-    </p>
-  {/if}
-  <button class="cancel" disabled={!$Progress.cancel || canceling} onclick={cancel}> Cancel </button>
-</div>
+<ActionBar>
+  {#snippet leftContent()}
+    {#if $Progress.type == "quantity"}
+      <ActionSubtle text="{$Progress.done} / {$Progress.max} done" />
+    {:else if $Progress.type == "size"}
+      <ActionSubtle text="{formatBytes($Progress.done)} / {formatBytes($Progress.max)} done" />
+    {/if}
+  {/snippet}
+  {#snippet rightContent()}
+    <ActionButton disabled={!$Progress.cancel || canceling} onclick={cancel}>Cancel</ActionButton>
+  {/snippet}
+</ActionBar>

src/apps/components/fsprogress/runtime.ts

@@ -2,7 +2,6 @@ import { AppProcess } from "$ts/apps/process";
 import { Stack } from "$ts/env";
 import { Store } from "$ts/writable";
 import type { AppProcessData } from "$types/app";
-import type { RenderArgs } from "$types/process";
 import type { ReadableStore } from "$types/writable";
 import type { FsProgressOperation } from "./types";
 

src/apps/components/fsrenameitem/RenameItem.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import ActionBar from "$lib/Window/ActionBar.svelte";
+  import ActionButton from "$lib/Window/ActionBar/ActionButton.svelte";
   import type { RenameItemRuntime } from "./runtime";
 
   const { process }: { process: RenameItemRuntime } = $props();
@@ -13,7 +15,10 @@
     <input type="text" bind:value={$newName} />
   </div>
 </div>
-<div class="bottom">
-  <button onclick={() => process.closeWindow()}>Cancel</button>
-  <button class="suggested" disabled={!$newName} onclick={() => process.rename()}> Rename </button>
-</div>
+
+<ActionBar>
+  {#snippet rightContent()}
+    <ActionButton onclick={() => process.closeWindow()}>Cancel</ActionButton>
+    <ActionButton suggested disabled={!$newName} onclick={() => process.rename()}>Rename</ActionButton>
+  {/snippet}
+</ActionBar>