exchange tast to tactilea

src/lib/components/HudPanel.svelte

@@ -41,7 +41,6 @@
   export let isExporting = false;
   export let isExportDisabled = false;
   export let isWindowMaximized = false;
-  let csvInputEl: HTMLInputElement | undefined;
 
   const dispatch = createEventDispatcher<{
     windowcontrol: WindowControlAction;
@@ -51,7 +50,8 @@
     serialrefresh: void;
     serialconnect: string;
     serialexport: void;
-    csvimport: File;
+    csvimport: void;
+    noticeclear: void;
   }>();
 
   const connectionToneByState: Record<ConnectionState, "ok" | "warn" | "idle"> = {
@@ -106,17 +106,12 @@
     dispatch("serialexport");
   }
 
-  function openCsvPicker(): void {
-    csvInputEl?.click();
+  function emitCsvImport(): void {
+    dispatch("csvimport");
   }
 
-  function emitCsvImport(event: Event): void {
-    const target = event.currentTarget as HTMLInputElement;
-    const file = target.files?.[0];
-    if (file) {
-      dispatch("csvimport", file);
-    }
-    target.value = "";
+  function emitNoticeClear(): void {
+    dispatch("noticeclear");
   }
 </script>
 
@@ -246,7 +241,7 @@
         <span>{exportButtonText}</span>
       </button>
 
-      <button type="button" class="import-btn" on:click={openCsvPicker}>
+      <button type="button" class="import-btn" on:click={emitCsvImport}>
         <svg viewBox="0 0 16 16" aria-hidden="true">
           <path d="M8 10.8V3.6"></path>
           <path d="M5.4 6.3L8 3.6l2.6 2.7"></path>
@@ -254,13 +249,6 @@
         </svg>
         <span>{importActionLabel}</span>
       </button>
-      <input
-        bind:this={csvInputEl}
-        class="hidden-input"
-        type="file"
-        accept=".csv,text/csv"
-        on:change={emitCsvImport}
-      />
 
       <section class="locale-switch" aria-label="Language">
         <button
@@ -283,9 +271,17 @@
     </div>
 
     {#if connectionNotice}
-      <p class="connection-notice tone-{connectionNoticeTone}" role={connectionNoticeTone === "warn" ? "alert" : "status"}>
-        {connectionNotice}
-      </p>
+      <div class="connection-notice tone-{connectionNoticeTone}" role={connectionNoticeTone === "warn" ? "alert" : "status"}>
+        <p class="connection-notice-text">{connectionNotice}</p>
+        <button
+          type="button"
+          class="notice-close-btn"
+          aria-label={locale === "zh-CN" ? "关闭提示" : "Dismiss notice"}
+          on:click={emitNoticeClear}
+        >
+          ×
+        </button>
+      </div>
     {/if}
 
     <section class="info-grid">
@@ -724,20 +720,22 @@
       0 0 12px rgb(122 198 255 / 0.14);
   }
 
-  .hidden-input {
-    position: absolute;
-    inline-size: 0;
-    block-size: 0;
-    opacity: 0;
-    pointer-events: none;
-  }
-
   .connection-notice {
     margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.6rem;
     border: 1px solid rgb(95 132 158 / 0.32);
     border-radius: 0.5rem;
-    padding: 0.45rem 0.7rem;
+    padding: 0.38rem 0.45rem 0.38rem 0.7rem;
     background: rgb(8 14 19 / 0.72);
+  }
+
+  .connection-notice-text {
+    margin: 0;
+    flex: 1;
+    min-width: 0;
     color: rgb(214 236 248 / 0.96);
     font-size: 0.72rem;
     letter-spacing: 0.03em;
@@ -758,7 +756,41 @@
   .connection-notice.tone-info {
     border-color: rgb(62 232 255 / 0.34);
     background: rgb(8 17 22 / 0.76);
-    color: rgb(214 236 248 / 0.96);
+  }
+
+  .notice-close-btn {
+    inline-size: 1.36rem;
+    block-size: 1.36rem;
+    border: 1px solid rgb(116 151 176 / 0.4);
+    border-radius: 0.28rem;
+    background: rgb(7 12 16 / 0.82);
+    color: rgb(194 225 245 / 0.92);
+    font-size: 0.92rem;
+    line-height: 1;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition:
+      border-color 180ms ease,
+      color 180ms ease,
+      background-color 180ms ease;
+  }
+
+  .notice-close-btn:hover {
+    border-color: rgb(62 232 255 / 0.5);
+    color: rgb(237 250 255 / 0.98);
+    background: rgb(9 16 22 / 0.92);
+  }
+
+  .connection-notice.tone-warn .notice-close-btn:hover {
+    border-color: rgb(255 91 63 / 0.6);
+    color: rgb(255 227 220 / 0.98);
+    background: rgb(34 13 12 / 0.9);
+  }
+
+  .connection-notice.tone-ok .notice-close-btn:hover {
+    border-color: rgb(133 255 68 / 0.56);
+    color: rgb(236 255 227 / 0.98);
+    background: rgb(17 28 14 / 0.9);
   }
 
   .info-grid {