Tweak layout and behaviour of tab bar

Author: chvp

src/frontend/components/AddFileButton.ts

@@ -24,6 +24,7 @@ export class AddFileButton extends PapyrosElement {
             .add-btn {
                 padding: 0.375rem 0.5rem;
                 border: none;
+                border-bottom: 2px solid var(--md-sys-color-outline-variant);
                 border-radius: 0.375rem 0.375rem 0 0;
                 cursor: pointer;
                 font-size: 1rem;
@@ -63,8 +64,20 @@ export class AddFileButton extends PapyrosElement {
         this.invalid = !isValidFileName(value) || this.papyros.io.files.some((f) => f.name === value);
     }
 
+    private onBlur(): void {
+        if (!this.adding) return;
+        const name = this.addInputRef.value?.value.trim() ?? "";
+        if (name.length > 0) {
+            this.confirmAdd();
+            if (this.adding) this.cancelAdd();
+        } else {
+            this.cancelAdd();
+        }
+    }
+
     private onAddKeydown(e: KeyboardEvent): void {
         if (e.key === "Enter") {
+            e.preventDefault();
             this.confirmAdd();
         } else if (e.key === "Escape") {
             this.cancelAdd();
@@ -85,10 +98,15 @@ export class AddFileButton extends PapyrosElement {
                 placeholder=${this.t("Papyros.add_file_placeholder")}
                 @input=${this.onAddInput}
                 @keydown=${this.onAddKeydown}
-                @blur=${this.cancelAdd}
+                @blur=${this.onBlur}
             />`;
         }
-        return html`<button class="add-btn" aria-label=${this.t("Papyros.add_file")} @click=${this.startAdding}>
+        return html`<button
+            class="add-btn"
+            title=${this.t("Papyros.add_file")}
+            aria-label=${this.t("Papyros.add_file")}
+            @click=${this.startAdding}
+        >
             +
         </button>`;
     }

src/frontend/components/EditorTab.ts

@@ -45,10 +45,6 @@ export class EditorTab extends PapyrosElement {
                 opacity: 0.6;
             }
 
-            button:hover .rename-btn,
-            button:hover .close-btn,
-            button:focus-within .rename-btn,
-            button:focus-within .close-btn,
             button.active .rename-btn,
             button.active .close-btn {
                 display: inline-flex;
@@ -76,6 +72,7 @@ export class EditorTab extends PapyrosElement {
 
     private closeFile(e: Event): void {
         e.stopPropagation();
+        if (!confirm(this.t("Papyros.close_file_confirm"))) return;
         this.papyros.io.removeFile(this.file.name);
         void this.papyros.runner.deleteFile(this.file.name);
     }
@@ -187,14 +184,28 @@ export class EditorTab extends PapyrosElement {
                               class="rename-btn"
                               role="button"
                               tabindex="0"
+                              title=${this.t("Papyros.rename_file_tab")}
                               aria-label=${this.t("Papyros.rename_file_tab")}
                               @click=${this.onRenameClick}
                               @keydown=${this.onRenameBtnKeydown}
-                              >✎</span
-                          ><span
+                          >
+                              <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  viewBox="0 0 24 24"
+                                  width="12"
+                                  height="12"
+                                  fill="currentColor"
+                              >
+                                  <path
+                                      d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
+                                  />
+                              </svg>
+                          </span>
+                          <span
                               class="close-btn"
                               role="button"
                               tabindex="0"
+                              title=${this.t("Papyros.close_file_tab")}
                               aria-label=${this.t("Papyros.close_file_tab")}
                               @click=${this.closeFile}
                               @keydown=${this.onCloseBtnKeydown}

src/frontend/components/shared-styles.ts

@@ -4,6 +4,7 @@ export const tabButtonStyles: CSSResult = css`
     button {
         padding: 0.375rem 0.75rem;
         border: none;
+        border-bottom: 2px solid var(--md-sys-color-outline-variant);
         border-radius: 0.375rem 0.375rem 0 0;
         cursor: pointer;
         font-size: 0.875rem;
@@ -18,6 +19,8 @@ export const tabButtonStyles: CSSResult = css`
     button.active {
         background-color: var(--md-sys-color-surface);
         color: var(--md-sys-color-on-surface);
+        font-weight: 600;
+        border-bottom: 2px solid var(--md-sys-color-primary);
     }
 
     button:hover:not(.active) {

src/frontend/state/Translations.ts

@@ -71,7 +71,8 @@ export const ENGLISH_TRANSLATION = {
             stop: "Stop debugging",
         },
         editor_tab_code: "Code",
-        close_file_tab: "Close file",
+        close_file_tab: "Remove file",
+        close_file_confirm: "Are you sure you want to remove this file?",
         rename_file_tab: "Rename file",
         add_file: "Add file",
         add_file_placeholder: "filename\u2026",
@@ -166,7 +167,8 @@ export const DUTCH_TRANSLATION = {
             stop: "Stop debugger",
         },
         editor_tab_code: "Code",
-        close_file_tab: "Bestand sluiten",
+        close_file_tab: "Bestand verwijderen",
+        close_file_confirm: "Weet je zeker dat je dit bestand wilt verwijderen?",
         rename_file_tab: "Bestand hernoemen",
         add_file: "Bestand toevoegen",
         add_file_placeholder: "bestandsnaam\u2026",