From df9c99ce3a479ab0939c3e6263dc0cf614fc929f Mon Sep 17 00:00:00 2001
From: Markury <mr.catborg@gmail.com>
Date: Tue, 30 Sep 2025 14:35:05 -0400
Subject: [PATCH] ui: add app icon to title bar and fix menu accessibility

---
 src/lib/MenuBar.svelte  |  32 ++++++++++++++++----------------
 src/lib/TitleBar.svelte |  22 ++++++++++++++++++----
 static/icons/cat.png    | Bin 0 -> 893 bytes
 3 files changed, 34 insertions(+), 20 deletions(-)
 create mode 100644 static/icons/cat.png

diff --git a/src/lib/MenuBar.svelte b/src/lib/MenuBar.svelte
index 152d600..f017851 100644
--- a/src/lib/MenuBar.svelte
+++ b/src/lib/MenuBar.svelte
@@ -24,20 +24,20 @@
   }
 </script>
 
-<svelte:window on:click={closeMenus} />
+<svelte:window onclick={closeMenus} />
 
 <nav class="menu-bar">
   <div class="menu-item">
     <button
       class="menu-button"
       class:active={activeMenu === "file"}
-      on:click|stopPropagation={() => toggleMenu("file")}
-      on:mouseenter={() => handleMouseEnter("file")}
+      onclick={(e) => { e.stopPropagation(); toggleMenu("file"); }}
+      onmouseenter={() => handleMouseEnter("file")}
     >
       <u>F</u>ile
     </button>
     {#if activeMenu === "file"}
-      <ul class="menu-dropdown" on:click|stopPropagation>
+      <ul class="menu-dropdown" role="menu" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
         <li><button disabled>New</button></li>
         <li><button disabled>Open...</button></li>
         <li><button disabled>Save</button></li>
@@ -51,13 +51,13 @@
     <button
       class="menu-button"
       class:active={activeMenu === "edit"}
-      on:click|stopPropagation={() => toggleMenu("edit")}
-      on:mouseenter={() => handleMouseEnter("edit")}
+      onclick={(e) => { e.stopPropagation(); toggleMenu("edit"); }}
+      onmouseenter={() => handleMouseEnter("edit")}
     >
       <u>E</u>dit
     </button>
     {#if activeMenu === "edit"}
-      <ul class="menu-dropdown" on:click|stopPropagation>
+      <ul class="menu-dropdown" role="menu" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
         <li><button disabled>Undo</button></li>
         <li><button disabled>Redo</button></li>
         <li class="separator"></li>
@@ -72,13 +72,13 @@
     <button
       class="menu-button"
       class:active={activeMenu === "view"}
-      on:click|stopPropagation={() => toggleMenu("view")}
-      on:mouseenter={() => handleMouseEnter("view")}
+      onclick={(e) => { e.stopPropagation(); toggleMenu("view"); }}
+      onmouseenter={() => handleMouseEnter("view")}
     >
       <u>V</u>iew
     </button>
     {#if activeMenu === "view"}
-      <ul class="menu-dropdown" on:click|stopPropagation>
+      <ul class="menu-dropdown" role="menu" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
         <li><button disabled>Toolbar</button></li>
         <li><button disabled>Status Bar</button></li>
         <li class="separator"></li>
@@ -91,13 +91,13 @@
     <button
       class="menu-button"
       class:active={activeMenu === "playback"}
-      on:click|stopPropagation={() => toggleMenu("playback")}
-      on:mouseenter={() => handleMouseEnter("playback")}
+      onclick={(e) => { e.stopPropagation(); toggleMenu("playback"); }}
+      onmouseenter={() => handleMouseEnter("playback")}
     >
       <u>P</u>layback
     </button>
     {#if activeMenu === "playback"}
-      <ul class="menu-dropdown" on:click|stopPropagation>
+      <ul class="menu-dropdown" role="menu" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
         <li><button disabled>Play</button></li>
         <li><button disabled>Pause</button></li>
         <li><button disabled>Stop</button></li>
@@ -112,13 +112,13 @@
     <button
       class="menu-button"
       class:active={activeMenu === "help"}
-      on:click|stopPropagation={() => toggleMenu("help")}
-      on:mouseenter={() => handleMouseEnter("help")}
+      onclick={(e) => { e.stopPropagation(); toggleMenu("help"); }}
+      onmouseenter={() => handleMouseEnter("help")}
     >
       <u>H</u>elp
     </button>
     {#if activeMenu === "help"}
-      <ul class="menu-dropdown" on:click|stopPropagation>
+      <ul class="menu-dropdown" role="menu" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
         <li><button disabled>Help Topics</button></li>
         <li class="separator"></li>
         <li><button disabled>About</button></li>
diff --git a/src/lib/TitleBar.svelte b/src/lib/TitleBar.svelte
index 6a4347e..892c8e8 100644
--- a/src/lib/TitleBar.svelte
+++ b/src/lib/TitleBar.svelte
@@ -17,7 +17,10 @@
 </script>
 
 <div class="title-bar" data-tauri-drag-region>
-  <div class="title-bar-text">Shark!</div>
+  <div class="title-bar-text">
+    <img src="/icons/cat.png" alt="cat" class="title-icon" />
+    Shark!
+  </div>
   <div class="title-bar-controls">
     <button aria-label="Minimize" on:click={minimize}></button>
     <button aria-label="Maximize" on:click={toggleMaximize}></button>
@@ -30,12 +33,23 @@
     position: sticky;
     top: 0;
     z-index: 1000;
-    padding: 4px 3px 4px 4px;
+    padding: 2px 2px 2px 3px;
+  }
+
+  .title-bar-text {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .title-icon {
+    width: 18px;
+    height: 18px;
   }
 
   .title-bar-controls button {
-    min-height: 16px;
-    min-width: 18px;
+    min-height: 20px;
+    min-width: 22px;
     background-position: center !important;
   }
 </style>
\ No newline at end of file
diff --git a/static/icons/cat.png b/static/icons/cat.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec160cf2bc0615d080aa3a26c3a910f50ce30952
GIT binary patch
literal 893
zcmV-@1A_dCP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF0009rNkl<ZcmeF1
zjdG(f420>u|2yYaO1}&iHnwqc7r+^dMZY#Hkxo1Pv)ueM3Ap(HEOP?p1l*i~`3l^8
z0OptAd<DWQ@Q|JpnNPKNhU%f`1XL+{1~fDJ4F7M}?sLuw$o1;+cq}<lY&XNo`4{W(
zxo$TBu^W+q9|ipAvzX}Km))DV^1K{o{F(l?>+m@u0dG6mSqha1NG2ioePA{{<ZuU6
z<H+)T?F>2TDOe()r^cycYXl^dz?0hdfeE_MJ0kqlqP`<tZ`jP^_u^^<?B!m<*GfP#
z33MQ$7=dw6rlI9^*r&A;@u2d&j&QSD3D_iF#qbsa?EAn3#zBz;^AY9RUBvGOm7I1K
z6a1O;;F^CB8JYlN*<{7AGix>zS9HM-nkk6X`Xb+Io76Mv5kmyj%YT1FD*^sa#txwK
znAQ~&>|pexN5AaJKGL%*lb4NaF}4!WQtOm4hX{xru&$d#JB*mm1V4yh=$#iPi#W?Q
zNt`<hc`;;Vf9-dOfLQpO_1f8n2(Yf0te8#qGoMMTzZ4hkR&!61LsXO@0xGpn;T|F&
zc7`XWJH3ALs8d4fmavqUvkwuFD|j~BM+l%ZkqkN<{Uv+MAJy4Mb^Nzm;rv~oHUa+g
zGIq?EJ0hhzC4284bhw17_v*avebor?petX72!QEUf_md)UGht)csg7{g`{hUfV9*(
zwMc-!^Li9V-c1;nJz3Eo<Iq9klOi1o`4KxxY(gUen}DkuvIM{|506eKLHrT%lLyAQ
zQJsBOb$oJHdi6F-KsD<^0ZjyCn05-V(_zq^y5I+8>RRN1B%`w*h+o(|2~7m3;AvLx
zL3as&X^Li;b{BD=jPd8NOpE`|0WmGO{C?P%9Q0rJt1fm>{^}&`5}*Q?Us(cRnx}`+
zl|6Pi>ZF3vU(?BRWZ!s>X!l@UGWOymWC>7>+pI`H?2Houqf+qe_M?k^6673A0*D>N
z&IwogW)dO+<lF{p1SB2!0#^JybQ;vT+zw)oh+p_xH3D9NSG_qa0ZGR*&53^WP3Tz(
z*gVKl!zAD+b63fm6L6JI9(|5E0Y{npmb}q(`~?62|Nja*L013(00v1!K~w_(Y~DJb
T1)OU`00000NkvXXu0mjfSL&g2

literal 0
HcmV?d00001