ui: add app icon to title bar and fix menu accessibility

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")}
+      onclick={(e) => { e.stopPropagation(); toggleMenu("file"); }}
-      on:mouseenter={() => handleMouseEnter("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")}
+      onclick={(e) => { e.stopPropagation(); toggleMenu("edit"); }}
-      on:mouseenter={() => handleMouseEnter("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")}
+      onclick={(e) => { e.stopPropagation(); toggleMenu("view"); }}
-      on:mouseenter={() => handleMouseEnter("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")}
+      onclick={(e) => { e.stopPropagation(); toggleMenu("playback"); }}
-      on:mouseenter={() => handleMouseEnter("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")}
+      onclick={(e) => { e.stopPropagation(); toggleMenu("help"); }}
-      on:mouseenter={() => handleMouseEnter("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>

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-height: 20px;
-    min-width: 18px;
+    min-width: 22px;
     background-position: center !important;
   }
 </style>