From f31bce4609d689f9ed4529015a87570e7bdcd86b Mon Sep 17 00:00:00 2001
From: Dan Popescu <pdan.popescu@gmail.com>
Date: Wed, 13 Dec 2023 01:10:56 +0200
Subject: [PATCH 1/3] feat(FileSelector): improve aspect of file tabs when
 editing file name

- remove the ugly black on white input not respecting the theme
- position the editing on top of the original title
- autogrow the size of the tab while editing
---
 src/editor/FileSelector.vue | 29 +++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/editor/FileSelector.vue b/src/editor/FileSelector.vue
index d3cc1a9c..cd97b5d2 100644
--- a/src/editor/FileSelector.vue
+++ b/src/editor/FileSelector.vue
@@ -132,7 +132,9 @@ function horizontalScroll(e: WheelEvent) {
       <div
         v-if="(pending === true && i === files.length - 1) || pending === file"
         class="file pending"
+        :class="{ active: store.state.activeFile.filename === file }"
       >
+        <span class="file pending">{{ pendingFilename }}</span>
         <input
           v-model="pendingFilename"
           spellcheck="false"
@@ -196,6 +198,7 @@ function horizontalScroll(e: WheelEvent) {
 }
 
 .file {
+  position: relative;
   display: inline-block;
   font-size: 13px;
   font-family: var(--font-code);
@@ -213,18 +216,24 @@ function horizontalScroll(e: WheelEvent) {
   padding: 8px 10px 6px;
   line-height: 20px;
 }
+.file.pending span {
+  min-width: 50px;
+  padding-right: 32px;
+  background-color: rgba(200, 200, 200, 0.2);
+  color: transparent;
+}
 .file.pending input {
-  width: 90px;
-  height: 30px;
-  line-height: 30px;
-  outline: none;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 0 0 0 10px;
-  margin-top: 2px;
-  margin-left: 6px;
+  position: absolute;
+  inset: 8px 7px auto;
+  font-size: 13px;
   font-family: var(--font-code);
-  font-size: 12px;
+  line-height: 20px;
+  outline: none;
+  border: none;
+  padding: 0 3px;
+  min-width: 1px;
+  color: inherit;
+  background-color: transparent;
 }
 .file .remove {
   display: inline-block;

From 9f9e75680d8718a8ab2f20c80c830a21ba79ba55 Mon Sep 17 00:00:00 2001
From: Dan Popescu <pdan.popescu@gmail.com>
Date: Wed, 13 Dec 2023 09:32:20 +0200
Subject: [PATCH 2/3] fix(FileSelector): only mark edited tab as active if it
 is displayed in the editor below

When adding new files the old selected file is still displayed in the editor, so the active marker should stay only on that tab.

ref: https://github.com/vuejs/repl/pull/178#pullrequestreview-1778971029
---
 src/editor/FileSelector.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/editor/FileSelector.vue b/src/editor/FileSelector.vue
index cd97b5d2..0a597472 100644
--- a/src/editor/FileSelector.vue
+++ b/src/editor/FileSelector.vue
@@ -132,7 +132,7 @@ function horizontalScroll(e: WheelEvent) {
       <div
         v-if="(pending === true && i === files.length - 1) || pending === file"
         class="file pending"
-        :class="{ active: store.state.activeFile.filename === file }"
+        :class="{ active: pending === file }"
       >
         <span class="file pending">{{ pendingFilename }}</span>
         <input

From 1815e1066af08ecc32b1e5f30f3ec2e387adcf4f Mon Sep 17 00:00:00 2001
From: Dan Popescu <pdan.popescu@gmail.com>
Date: Wed, 13 Dec 2023 09:53:15 +0200
Subject: [PATCH 3/3] fix(FileSelector): keep edited tab bg height when file
 name is empty

ref: https://github.com/vuejs/repl/pull/178#issuecomment-1853403505
---
 src/editor/FileSelector.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/editor/FileSelector.vue b/src/editor/FileSelector.vue
index 0a597472..f6e60ac1 100644
--- a/src/editor/FileSelector.vue
+++ b/src/editor/FileSelector.vue
@@ -218,6 +218,7 @@ function horizontalScroll(e: WheelEvent) {
 }
 .file.pending span {
   min-width: 50px;
+  min-height: 34px;
   padding-right: 32px;
   background-color: rgba(200, 200, 200, 0.2);
   color: transparent;