From ea5d4c2613269f1fa02a3ba79025f5d4764ba528 Mon Sep 17 00:00:00 2001
From: Chris Malone <chrismrulz@hotmail.com>
Date: Fri, 26 Sep 2025 00:56:43 +1000
Subject: [PATCH] replaced unicode icons with SVG

---
 wgp.py | 33 +++++++++++++++++++++++++++------
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/wgp.py b/wgp.py
index 298c8f8..316e6b4 100644
--- a/wgp.py
+++ b/wgp.py
@@ -1453,7 +1453,7 @@ def generate_queue_html(queue):
     <table>
         <thead>
             <tr>
-                <th style="width:4%;" class="center-align" title="Drag to reorder">Drag</th>
+                <th style="width:4%;" class="center-align" title="Drag to reorder"></th>
                 <th style="width:5%;" class="center-align">Qty</th>
                 <th style="width:auto;" class="text-left">Prompt</th>
                 <th style="width:7%;" class="center-align">Length</th>
@@ -1496,9 +1496,20 @@ def generate_queue_html(queue):
         if end_img_uri:
             end_img_md = f'<div class="hover-image" onclick="showImageModal(\'end_{row_index}\')"><img src="{end_img_uri}" alt="{end_img_labels[0]}" /></div>'
 
-        drag_handle = f'<td draggable="true" class="drag-handle center-align" title="Drag to reorder">☰</td>'
-        edit_btn = f"""<button onclick="updateAndTrigger('edit_{row_index}')" class="action-button" title="Edit">✏️</button>"""
-        remove_btn = f"""<button onclick="updateAndTrigger('remove_{row_index}')" class="action-button" title="Remove">✖️</button>"""
+        drag_handle = f"""<td draggable="true" class="drag-handle center-align" title="Drag to reorder"><svg viewBox="0 0 64 64">
+<path d="M0 0 C1.43653931 -0.00472824 1.43653931 -0.00472824 2.90209961 -0.009552 C3.94374268 -0.00752777 4.98538574 -0.00550354 6.05859375 -0.00341797 C7.12021729 -0.00437469 8.18184082 -0.00533142 9.27563477 -0.00631714 C11.52522847 -0.00699911 13.77482412 -0.00514366 16.02441406 -0.00097656 C19.48116446 0.00437143 22.93778492 -0.00092101 26.39453125 -0.00732422 C28.57421904 -0.00666344 30.75390675 -0.00538228 32.93359375 -0.00341797 C34.49605835 -0.00645432 34.49605835 -0.00645432 36.09008789 -0.009552 C37.04778076 -0.00639984 38.00547363 -0.00324768 38.9921875 0 C39.83966553 0.00079559 40.68714355 0.00159119 41.56030273 0.00241089 C43.49609375 0.12939453 43.49609375 0.12939453 44.49609375 1.12939453 C44.62109375 4.12939453 44.62109375 4.12939453 44.49609375 7.12939453 C42.89557711 8.72991117 41.20763253 8.25670925 38.9921875 8.25878906 C37.55564819 8.2635173 37.55564819 8.2635173 36.09008789 8.26834106 C35.04844482 8.26631683 34.00680176 8.2642926 32.93359375 8.26220703 C31.87197021 8.26316376 30.81034668 8.26412048 29.71655273 8.2651062 C27.46695903 8.26578817 25.21736338 8.26393272 22.96777344 8.25976562 C19.51102304 8.25441763 16.05440258 8.25971007 12.59765625 8.26611328 C10.41796846 8.2654525 8.23828075 8.26417135 6.05859375 8.26220703 C5.01695068 8.26423126 3.97530762 8.26625549 2.90209961 8.26834106 C1.94440674 8.2651889 0.98671387 8.26203674 0 8.25878906 C-0.84747803 8.25799347 -1.69495605 8.25719788 -2.56811523 8.25637817 C-4.50390625 8.12939453 -4.50390625 8.12939453 -5.50390625 7.12939453 C-5.62890625 4.12939453 -5.62890625 4.12939453 -5.50390625 1.12939453 C-3.90338961 -0.47112211 -2.21544503 0.00207981 0 0 Z " fill="#42A4F4" transform="translate(12.50390625,27.87060546875)"/>
+<path d="M0 0 C4.55555556 0.55555556 4.55555556 0.55555556 6 2 C6.23363881 3.84891946 6.41303635 5.70488031 6.5625 7.5625 C6.68818359 9.08037109 6.68818359 9.08037109 6.81640625 10.62890625 C6.87699219 11.41136719 6.93757813 12.19382812 7 13 C7.43957031 12.49855469 7.87914063 11.99710938 8.33203125 11.48046875 C8.88246094 10.99191406 9.43289062 10.50335938 10 10 C12.6875 10.3125 12.6875 10.3125 15 11 C15.69921875 12.75 15.69921875 12.75 16 15 C14.70703125 17 14.70703125 17 12.8125 19 C12.16023438 19.6909375 11.50796875 20.381875 10.8359375 21.09375 C10.23007812 21.7228125 9.62421875 22.351875 9 23 C8.319375 23.825 7.63875 24.65 6.9375 25.5 C4.14403059 27.662686 2.47067068 27.42222271 -1 27 C-3.73828125 24.953125 -3.73828125 24.953125 -6.3125 22.25 C-7.17488281 21.36828125 -8.03726562 20.4865625 -8.92578125 19.578125 C-11.87130802 15.91701828 -11.87130802 15.91701828 -12 13 C-11.34 12.01 -10.68 11.02 -10 10 C-5.25 10.75 -5.25 10.75 -3 13 C-2.95101563 12.22914062 -2.90203125 11.45828125 -2.8515625 10.6640625 C-2.77679688 9.66117188 -2.70203125 8.65828125 -2.625 7.625 C-2.52058594 6.12839844 -2.52058594 6.12839844 -2.4140625 4.6015625 C-2 2 -2 2 0 0 Z " fill="#42A4F4" transform="translate(30,37)"/>
+<path d="M0 0 C2.73828125 2.046875 2.73828125 2.046875 5.3125 4.75 C6.17488281 5.63171875 7.03726563 6.5134375 7.92578125 7.421875 C10.87130802 11.08298172 10.87130802 11.08298172 11 14 C10.01 15.485 10.01 15.485 9 17 C4.25 16.25 4.25 16.25 2 14 C1.95101562 14.77085938 1.90203125 15.54171875 1.8515625 16.3359375 C1.77679688 17.33882812 1.70203125 18.34171875 1.625 19.375 C1.55539063 20.37273438 1.48578125 21.37046875 1.4140625 22.3984375 C1 25 1 25 -1 27 C-5.55555556 26.44444444 -5.55555556 26.44444444 -7 25 C-7.23363881 23.15108054 -7.41303635 21.29511969 -7.5625 19.4375 C-7.64628906 18.42558594 -7.73007812 17.41367187 -7.81640625 16.37109375 C-7.87699219 15.58863281 -7.93757813 14.80617188 -8 14 C-8.43957031 14.50144531 -8.87914062 15.00289062 -9.33203125 15.51953125 C-9.88246094 16.00808594 -10.43289062 16.49664063 -11 17 C-13.6875 16.6875 -13.6875 16.6875 -16 16 C-16.69921875 14.25 -16.69921875 14.25 -17 12 C-15.70703125 10 -15.70703125 10 -13.8125 8 C-13.16023438 7.3090625 -12.50796875 6.618125 -11.8359375 5.90625 C-11.23007812 5.2771875 -10.62421875 4.648125 -10 4 C-9.319375 3.175 -8.63875 2.35 -7.9375 1.5 C-5.14403059 -0.662686 -3.47067068 -0.42222271 0 0 Z " fill="#42A4F4" transform="translate(35,0)"/>
+</svg></td>"""
+        edit_btn = f"""<button onclick="updateAndTrigger('edit_{row_index}')" class="action-button" title="Edit"><svg viewBox="0 0 64 64">
+<path d="M0 0 C1.11826172 0.00322266 2.23652344 0.00644531 3.38867188 0.00976562 C4.55591797 0.01814453 5.72316406 0.02652344 6.92578125 0.03515625 C8.10462891 0.03966797 9.28347656 0.04417969 10.49804688 0.04882812 C13.41150914 0.06062352 16.32486988 0.07708355 19.23828125 0.09765625 C19.89828125 1.41765625 20.55828125 2.73765625 21.23828125 4.09765625 C20.57828125 5.08765625 19.91828125 6.07765625 19.23828125 7.09765625 C16.71630859 7.43823242 16.71630859 7.43823242 13.57421875 7.390625 C12.56407715 7.38313232 11.55393555 7.37563965 10.51318359 7.36791992 C9.22621582 7.34060791 7.93924805 7.3132959 6.61328125 7.28515625 C2.52953125 7.22328125 -1.55421875 7.16140625 -5.76171875 7.09765625 C-5.76171875 20.62765625 -5.76171875 34.15765625 -5.76171875 48.09765625 C7.76828125 48.09765625 21.29828125 48.09765625 35.23828125 48.09765625 C35.11973183 40.33403423 35.11973183 40.33403423 34.96801758 32.57104492 C34.9605249 31.60400635 34.95303223 30.63696777 34.9453125 29.640625 C34.92960205 28.6508667 34.9138916 27.6611084 34.89770508 26.64135742 C35.28781002 23.72773495 35.95836413 22.87267823 38.23828125 21.09765625 C39.55828125 21.75765625 40.87828125 22.41765625 42.23828125 23.09765625 C42.35462058 27.32659093 42.42558077 31.55511299 42.48828125 35.78515625 C42.53855469 37.58243164 42.53855469 37.58243164 42.58984375 39.41601562 C42.60273437 40.57294922 42.615625 41.72988281 42.62890625 42.921875 C42.64985352 43.98494873 42.67080078 45.04802246 42.69238281 46.14331055 C42.08668997 50.08389607 41.33970543 51.54877801 38.23828125 54.09765625 C34.80064189 54.82978838 31.42929782 54.77430179 27.92578125 54.7265625 C26.41697388 54.73018044 26.41697388 54.73018044 24.87768555 54.73387146 C22.75272679 54.73289272 20.62774263 54.71949279 18.50292969 54.69458008 C15.2497702 54.66027739 11.99932742 54.67391872 8.74609375 54.69335938 C6.68097802 54.68646084 4.6158693 54.67678839 2.55078125 54.6640625 C1.57778076 54.66902237 0.60478027 54.67398224 -0.39770508 54.67909241 C-4.22696801 54.61228762 -6.97272175 54.52167304 -10.37524414 52.69311523 C-12.57503646 48.57513809 -12.31211348 44.60130827 -12.2578125 40.00390625 C-12.25926773 39.02023071 -12.26072296 38.03655518 -12.26222229 37.02307129 C-12.26056374 34.94520096 -12.24900737 32.8673183 -12.22827148 30.78955078 C-12.19932355 27.60916966 -12.20766242 24.43045611 -12.22070312 21.25 C-12.21446541 19.23046065 -12.20607421 17.21092656 -12.1953125 15.19140625 C-12.19824814 14.24027954 -12.20118378 13.28915283 -12.20420837 12.3092041 C-12.1915242 11.42148315 -12.17884003 10.53376221 -12.16577148 9.61914062 C-12.1603685 8.84066772 -12.15496552 8.06219482 -12.1493988 7.26013184 C-11.65561813 4.50582801 -10.66022148 3.13054266 -8.76171875 1.09765625 C-5.58384334 0.03836445 -3.33582932 -0.01693314 0 0 Z " fill="#5F7D8B" transform="translate(11.76171875,9.90234375)"/>
+<path d="M0 0 C3.18086518 1.50946511 5.29869906 3.07941825 7.75 5.625 C8.67039062 6.57246094 8.67039062 6.57246094 9.609375 7.5390625 C10.29773437 8.26222656 10.29773437 8.26222656 11 9 C8.59523682 14.54812095 4.06412729 18.38524881 -0.125 22.625 C-0.95515625 23.49640625 -1.7853125 24.3678125 -2.640625 25.265625 C-7.55981439 30.24649701 -10.9212929 33.32655006 -18 34 C-19.67421842 33.70694442 -21.34358949 33.38104214 -23 33 C-22.73322255 23.701482 -19.99207397 18.8860205 -13.359375 12.48046875 C-12.36512148 11.56972466 -11.37032304 10.65957512 -10.375 9.75 C-9.37010113 8.79537851 -8.3674748 7.83835883 -7.3671875 6.87890625 C-4.93268233 4.56144459 -2.47807311 2.27066292 0 0 Z " fill="#42A5F5" transform="translate(45,8)"/>
+<path d="M0 0 C1.9375 1 1.9375 1 3 3 C3.73574144 8.06844106 3.73574144 8.06844106 3 11 C1.18277145 13.20174358 -0.58687091 14.39124727 -3 16 C-6.3 12.7 -9.6 9.4 -13 6 C-8.2454497 0.05681213 -7.32417654 -0.5139773 0 0 Z " fill="#42A5F5" transform="translate(61,0)"/>
+</svg></button>"""
+        remove_btn = f"""<button onclick="updateAndTrigger('remove_{row_index}')" class="action-button" title="Remove"><svg viewBox="0 0 64 64">
+<path d="M0 0 C0.91974609 -0.01224609 1.83949219 -0.02449219 2.78710938 -0.03710938 C3.67076172 -0.03904297 4.55441406 -0.04097656 5.46484375 -0.04296875 C6.27429443 -0.04707764 7.08374512 -0.05118652 7.91772461 -0.05541992 C10.0625 0.1875 10.0625 0.1875 13.0625 2.1875 C13.75 4.8125 13.75 4.8125 14.0625 7.1875 C15.42375 7.06375 15.42375 7.06375 16.8125 6.9375 C20.0625 7.1875 20.0625 7.1875 22.5 8.875 C24.0625 11.1875 24.0625 11.1875 23.9375 13.5625 C23.0625 16.1875 23.0625 16.1875 22.04296875 18.640625 C20.67104278 23.60360819 20.63408506 28.43456418 20.5 33.5625 C20.38290046 37.43924233 20.24089926 41.31308782 20.0625 45.1875 C20.02600342 46.35974121 20.02600342 46.35974121 19.98876953 47.55566406 C19.75385703 51.06553322 19.41343427 52.82998048 16.91577148 55.37451172 C13.52950324 57.5261698 11.60953176 57.70262762 7.625 57.71875 C5.78808594 57.72648437 5.78808594 57.72648437 3.9140625 57.734375 C2.64304687 57.71890625 1.37203125 57.7034375 0.0625 57.6875 C-1.84402344 57.71070312 -1.84402344 57.71070312 -3.7890625 57.734375 C-5.01367188 57.72921875 -6.23828125 57.7240625 -7.5 57.71875 C-8.61503906 57.71423828 -9.73007812 57.70972656 -10.87890625 57.70507812 C-14.62316268 57.07147151 -16.29526355 55.87931783 -18.9375 53.1875 C-19.5718301 50.34090421 -19.84799189 48.06242942 -19.9375 45.1875 C-19.97858887 44.29514648 -20.01967773 43.40279297 -20.06201172 42.48339844 C-20.22958856 38.48982026 -20.35059881 34.49569673 -20.45507812 30.5 C-20.63368241 25.36428436 -20.93861234 20.9970841 -22.9375 16.1875 C-23.8125 13.5625 -23.8125 13.5625 -23.9375 11.1875 C-22.375 8.875 -22.375 8.875 -19.9375 7.1875 C-16.6875 6.9375 -16.6875 6.9375 -13.9375 7.1875 C-13.64875 6.218125 -13.36 5.24875 -13.0625 4.25 C-10.91276671 -1.60205174 -5.44118975 0.00379706 0 0 Z M-9.9375 4.1875 C-9.6075 5.5075 -9.2775 6.8275 -8.9375 8.1875 C-2.6675 8.1875 3.6025 8.1875 10.0625 8.1875 C10.0625 6.8675 10.0625 5.5475 10.0625 4.1875 C3.4625 4.1875 -3.1375 4.1875 -9.9375 4.1875 Z M-19.9375 16.1875 C-19.9375 16.5175 -19.9375 16.8475 -19.9375 17.1875 C-6.7375 17.1875 6.4625 17.1875 20.0625 17.1875 C20.0625 16.8575 20.0625 16.5275 20.0625 16.1875 C6.8625 16.1875 -6.3375 16.1875 -19.9375 16.1875 Z M-9.9375 29.1875 C-9.9375 34.7975 -9.9375 40.4075 -9.9375 46.1875 C-9.6075 46.1875 -9.2775 46.1875 -8.9375 46.1875 C-8.9375 40.5775 -8.9375 34.9675 -8.9375 29.1875 C-9.2675 29.1875 -9.5975 29.1875 -9.9375 29.1875 Z M9.0625 29.1875 C9.0625 34.7975 9.0625 40.4075 9.0625 46.1875 C9.3925 46.1875 9.7225 46.1875 10.0625 46.1875 C10.0625 40.5775 10.0625 34.9675 10.0625 29.1875 C9.7325 29.1875 9.4025 29.1875 9.0625 29.1875 Z " fill="#2A8BFF" transform="translate(31.9375,3.8125)"/>
+</svg>
+</button>"""
 
         row_html = f"""
         <tr class="draggable-row" data-index="{row_index}">
@@ -9556,8 +9567,6 @@ def create_ui():
             color: #718096;
             transition: color 0.2s;
             line-height: 1;
-            position: relative;
-            left: -3px;
         }
         #queue_html_container .action-button:hover {
             color: #e2e8f0;
@@ -9589,6 +9598,18 @@ def create_ui():
         #queue_html_container tr.drag-over-bottom {
             border-bottom: 2px solid #4299e1;
         }
+        #queue_html_container .action-button svg {
+            width: 20px;
+            height: 20px;
+        }
+        
+        #queue_html_container .drag-handle svg {
+            width: 20px;
+            height: 20px;
+        }
+        #queue_html_container .action-button:hover svg {
+            fill: #e2e8f0;
+        }
         #image-modal-container {
             position: fixed;
             top: 0;