From 5820736a3118815465069ed74c8677823b0f794e Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Thu, 19 Dec 2024 21:11:02 +0600
Subject: [PATCH] web/ProcessingQueue: use the heading component with the beta
 tag

---
 .../components/queue/ProcessingQueue.svelte   | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/web/src/components/queue/ProcessingQueue.svelte b/web/src/components/queue/ProcessingQueue.svelte
index 728d31af..326346f0 100644
--- a/web/src/components/queue/ProcessingQueue.svelte
+++ b/web/src/components/queue/ProcessingQueue.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
     import { onNavigate } from "$app/navigation";
-    import type { SvelteComponent } from "svelte";
 
+    import settings from "$lib/state/settings";
+    import { addToQueue, nukeEntireQueue, queue } from "$lib/state/queue";
+
+    import type { SvelteComponent } from "svelte";
+    import type { QueueItem } from "$lib/types/queue";
+
+    import SectionHeading from "$components/misc/SectionHeading.svelte";
     import PopoverContainer from "$components/misc/PopoverContainer.svelte";
     import ProcessingStatus from "$components/queue/ProcessingStatus.svelte";
     import ProcessingQueueItem from "$components/queue/ProcessingQueueItem.svelte";
@@ -17,10 +23,6 @@
     import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte";
     import IconVolume3 from "@tabler/icons-svelte/IconVolume3.svelte";
 
-    import settings from "$lib/state/settings";
-    import { addToQueue, nukeEntireQueue, queue } from "$lib/state/queue";
-    import type { QueueItem } from "$lib/types/queue";
-
     let popover: SvelteComponent;
     $: expanded = false;
 
@@ -74,7 +76,12 @@
         expandStart="right"
     >
         <div id="processing-header">
-            <div class="header-title">{$t("queue.title")}</div>
+            <SectionHeading
+                title={$t("queue.title")}
+                sectionId="queue"
+                beta
+                nolink
+            />
             <div class="header-buttons">
                 {#if queueLength > 0}
                     <button class="clear-button" on:click={nukeEntireQueue}>
@@ -137,11 +144,6 @@
         align-items: center;
     }
 
-    .header-title {
-        font-size: 15px;
-        font-weight: 500;
-    }
-
     .header-buttons {
         display: flex;
         flex-direction: row;