From d6f4fe3f1a3f8765d0b963e70d7d6565ffc2d6e5 Mon Sep 17 00:00:00 2001
From: abdelouahed oumoussa <abdelwahd.oumouss@gmail.com>
Date: Mon, 28 Apr 2025 02:11:03 +0100
Subject: [PATCH 1/6] chore: extract file selector logic into a composable

---
 src/composables/useFileSelector.ts | 119 ++++++++++++++++++++++++
 src/editor/FileSelector.vue        | 141 ++++++++---------------------
 2 files changed, 158 insertions(+), 102 deletions(-)
 create mode 100644 src/composables/useFileSelector.ts

diff --git a/src/composables/useFileSelector.ts b/src/composables/useFileSelector.ts
new file mode 100644
index 00000000..aaff452f
--- /dev/null
+++ b/src/composables/useFileSelector.ts
@@ -0,0 +1,119 @@
+import { Store, importMapFile, tsconfigFile, stripSrcPrefix } from '../store'
+import { computed, inject, ref, VNode, Ref } from 'vue'
+
+export function useFileSelector() {
+  const store = inject('store') as Store
+
+  /**
+   * When `true`: indicates adding a new file
+   * When `string`: indicates renaming a file, and holds the old filename in case
+   * of cancel.
+   */
+  const pending = ref<boolean | string>(false)
+  /**
+   * Text shown in the input box when editing a file's name
+   * This is a display name so it should always strip off the `src/` prefix.
+   */
+  const pendingFilename = ref('Comp.vue')
+  const linksFile = 'links.json'
+  const showTsConfig = inject<Ref<boolean>>('tsconfig')
+  const showImportMap = inject('import-map') as Ref<boolean>
+  const files = computed(() =>
+    Object.entries(store.state.files)
+      .filter(
+        ([name, file]) =>
+          ![importMapFile, linksFile, tsconfigFile].includes(name) &&
+          !file.hidden
+      )
+      .map(([name]) => name)
+  )
+
+  function startAddFile() {
+    let i = 0
+    let name = `Comp.vue`
+
+    while (true) {
+      let hasConflict = false
+      for (const filename in store.state.files) {
+        if (stripSrcPrefix(filename) === name) {
+          hasConflict = true
+          name = `Comp${++i}.vue`
+          break
+        }
+      }
+      if (!hasConflict) {
+        break
+      }
+    }
+
+    pendingFilename.value = name
+    pending.value = true
+  }
+
+  function cancelNameFile() {
+    pending.value = false
+  }
+
+  function focus({ el }: VNode) {
+    ;(el as HTMLInputElement).focus()
+  }
+
+  function doneNameFile() {
+    if (!pending.value) return
+    // add back the src prefix
+    const filename = 'src/' + pendingFilename.value
+    const oldFilename = pending.value === true ? '' : pending.value
+
+    if (!/\.(vue|js|ts|css|json)$/.test(filename)) {
+      store.state.errors = [
+        `Playground only supports *.vue, *.js, *.ts, *.css, *.json files.`,
+      ]
+      return
+    }
+
+    if (filename !== oldFilename && filename in store.state.files) {
+      store.state.errors = [`File "${filename}" already exists.`]
+      return
+    }
+
+    store.state.errors = []
+    cancelNameFile()
+
+    if (filename === oldFilename) {
+      return
+    }
+
+    if (oldFilename) {
+      store.renameFile(oldFilename, filename)
+    } else {
+      store.addFile(filename)
+    }
+  }
+
+  const fileSel = ref(null)
+
+  const activeFile = computed({
+    get: () => store.state.activeFile.filename,
+    set: (val) => {
+      if (!pending.value) store.setActive(val)
+    },
+  })
+
+  return {
+    files,
+    pending,
+    pendingFilename,
+    startAddFile,
+    cancelNameFile,
+    focus,
+    doneNameFile,
+    fileSel,
+    activeFile,
+    showTsConfig,
+    showImportMap,
+    linksFile,
+    tsconfigFile,
+    importMapFile,
+    stripSrcPrefix,
+  }
+}
diff --git a/src/editor/FileSelector.vue b/src/editor/FileSelector.vue
index b4dc17d6..2d041df5 100644
--- a/src/editor/FileSelector.vue
+++ b/src/editor/FileSelector.vue
@@ -9,14 +9,14 @@
     density="comfortable"
     show-arrows
   >
-    <v-tab
-      v-for="(file, i) in files"
-      :value="file"
-      class="file"
-      size="small"
-    >
+    <v-tab v-for="(file, i) in files" :value="file" class="file" size="small">
       <span>{{ stripSrcPrefix(file) }}</span>
-      <v-icon v-if="i > 0" @click.stop="store.deleteFile(file)" icon="$close" class="ms-2 remove" />
+      <v-icon
+        v-if="i > 0"
+        @click.stop="store.deleteFile(file)"
+        icon="$close"
+        class="ms-2 remove"
+      />
     </v-tab>
     <v-tab v-if="pending" class="file pending" size="small">
       <input
@@ -32,114 +32,51 @@
       <v-icon :icon="`svg:${mdiPlus}`" />
     </v-btn>
 
-    <v-tab v-if="showTsConfig" class="file import-map" size="small" :value="tsconfigFile">
+    <v-tab
+      v-if="showTsConfig"
+      class="file import-map"
+      size="small"
+      :value="tsconfigFile"
+    >
       tsconfig.json
     </v-tab>
 
-    <v-tab v-if="showImportMap" class="file" size="small" :value="importMapFile">
+    <v-tab
+      v-if="showImportMap"
+      class="file"
+      size="small"
+      :value="importMapFile"
+    >
       Import Map
     </v-tab>
-    <v-tab class="file" size="small" :value="linksFile">
-      Links
-    </v-tab>
+    <v-tab class="file" size="small" :value="linksFile"> Links </v-tab>
   </v-tabs>
 </template>
 
 <script setup lang="ts">
-import { Store, importMapFile, tsconfigFile, stripSrcPrefix } from '../store'
-import { computed, inject, ref, VNode, Ref } from 'vue'
 import { mdiPlus } from '@mdi/js'
+import { inject } from 'vue'
+import { Store } from '../store'
+import { useFileSelector } from '../composables/useFileSelector'
 
 const store = inject('store') as Store
 
-/**
- * When `true`: indicates adding a new file
- * When `string`: indicates renaming a file, and holds the old filename in case
- * of cancel.
- */
-const pending = ref<boolean | string>(false)
-/**
- * Text shown in the input box when editing a file's name
- * This is a display name so it should always strip off the `src/` prefix.
- */
-const pendingFilename = ref('Comp.vue')
-const linksFile = 'links.json'
-const showTsConfig = inject<Ref<boolean>>('tsconfig')
-const showImportMap = inject('import-map') as Ref<boolean>
-const files = computed(() =>
-  Object.entries(store.state.files)
-    .filter(([name, file]) => ![importMapFile, linksFile, tsconfigFile].includes(name) && !file.hidden)
-    .map(([name]) => name)
-)
-
-function startAddFile() {
-  let i = 0
-  let name = `Comp.vue`
-
-  while (true) {
-    let hasConflict = false
-    for (const filename in store.state.files) {
-      if (stripSrcPrefix(filename) === name) {
-        hasConflict = true
-        name = `Comp${++i}.vue`
-        break
-      }
-    }
-    if (!hasConflict) {
-      break
-    }
-  }
-
-  pendingFilename.value = name
-  pending.value = true
-}
-
-function cancelNameFile() {
-  pending.value = false
-}
-
-function focus({ el }: VNode) {
-  ;(el as HTMLInputElement).focus()
-}
-
-function doneNameFile() {
-  if (!pending.value) return
-  // add back the src prefix
-  const filename = 'src/' + pendingFilename.value
-  const oldFilename = pending.value === true ? '' : pending.value
-
-  if (!/\.(vue|js|ts|css|json)$/.test(filename)) {
-    store.state.errors = [
-      `Playground only supports *.vue, *.js, *.ts, *.css, *.json files.`,
-    ]
-    return
-  }
-
-  if (filename !== oldFilename && filename in store.state.files) {
-    store.state.errors = [`File "${filename}" already exists.`]
-    return
-  }
-
-  store.state.errors = []
-  cancelNameFile()
-
-  if (filename === oldFilename) {
-    return
-  }
-
-  if (oldFilename) {
-    store.renameFile(oldFilename, filename)
-  } else {
-    store.addFile(filename)
-  }
-}
-
-const fileSel = ref(null)
-
-const activeFile = computed({
-  get: () => store.state.activeFile.filename,
-  set: val => { if (!pending.value) store.setActive(val) }
-})
+const {
+  activeFile,
+  showImportMap,
+  files,
+  stripSrcPrefix,
+  pending,
+  pendingFilename,
+  doneNameFile,
+  cancelNameFile,
+  focus,
+  startAddFile,
+  tsconfigFile,
+  showTsConfig,
+  importMapFile,
+  linksFile,
+} = useFileSelector()
 </script>
 
 <style scoped>

From 5cbd26b19ed5c3f56394a954ef57dbe85e204a2e Mon Sep 17 00:00:00 2001
From: abdelouahed oumoussa <abdelwahd.oumouss@gmail.com>
Date: Mon, 28 Apr 2025 23:00:12 +0100
Subject: [PATCH 2/6] chore: added file explorer using navigation drawer

---
 src/Repl.vue                   |  38 ++++++----
 src/editor/EditorContainer.vue |  12 +--
 src/editor/FileExplorer.vue    | 129 +++++++++++++++++++++++++++++++++
 3 files changed, 153 insertions(+), 26 deletions(-)
 create mode 100644 src/editor/FileExplorer.vue

diff --git a/src/Repl.vue b/src/Repl.vue
index 5e49e299..991ee2ed 100644
--- a/src/Repl.vue
+++ b/src/Repl.vue
@@ -5,6 +5,7 @@ import { Store, ReplStore, SFCOptions } from './store'
 import { provide, ref, toRef } from 'vue'
 import type { EditorComponentType } from './editor/types'
 import EditorContainer from './editor/EditorContainer.vue'
+import FileExplorer from './editor/FileExplorer.vue'
 
 export interface Props {
   theme?: 'dark' | 'light'
@@ -90,19 +91,25 @@ defineExpose({ reload })
 
 <template>
   <v-theme-provider with-background class="vue-repl">
-    <SplitPane :layout="layout">
-      <template #left>
-        <EditorContainer :editorComponent="editor" />
-      </template>
-      <template #right>
-        <Output
-          ref="outputRef"
-          :editorComponent="editor"
-          :showCompileOutput="props.showCompileOutput"
-          :ssr="!!props.ssr"
-        />
-      </template>
-    </SplitPane>
+    <v-layout class="h-100">
+      <FileExplorer />
+
+      <v-main class="h-100">
+        <SplitPane :layout="layout">
+          <template #left>
+            <EditorContainer :editorComponent="editor" />
+          </template>
+          <template #right>
+            <Output
+              ref="outputRef"
+              :editorComponent="editor"
+              :showCompileOutput="props.showCompileOutput"
+              :ssr="!!props.ssr"
+            />
+          </template>
+        </SplitPane>
+      </v-main>
+    </v-layout>
   </v-theme-provider>
 </template>
 
@@ -121,8 +128,9 @@ defineExpose({ reload })
   margin: 0;
   overflow: hidden;
   font-size: 13px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   background-color: var(--bg-soft);
 }
 </style>
diff --git a/src/editor/EditorContainer.vue b/src/editor/EditorContainer.vue
index 40b3de41..3ea4353f 100644
--- a/src/editor/EditorContainer.vue
+++ b/src/editor/EditorContainer.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import FileSelector from './FileSelector.vue'
 import Message from '../Message.vue'
 import WrapToggle from './WrapToggle.vue'
 import { debounce } from '../utils'
@@ -44,8 +43,7 @@ watch(
 </script>
 
 <template>
-  <FileSelector />
-  <div class="editor-container">
+  <div class="h-100 overflow-hidden position-relative pt-1">
     <props.editorComponent
       @change="onChange($event, store.state.activeFile.filename)"
       :value="store.state.activeFile.code"
@@ -56,11 +54,3 @@ watch(
     <WrapToggle v-model="store.state.wordWrap" />
   </div>
 </template>
-
-<style scoped>
-.editor-container {
-  height: calc(100% - var(--header-height));
-  overflow: hidden;
-  position: relative;
-}
-</style>
diff --git a/src/editor/FileExplorer.vue b/src/editor/FileExplorer.vue
new file mode 100644
index 00000000..a4b01e23
--- /dev/null
+++ b/src/editor/FileExplorer.vue
@@ -0,0 +1,129 @@
+<template>
+  <v-navigation-drawer v-model="drawer" :width="220">
+    <v-list-item title="Files">
+      <template v-slot:append>
+        <v-icon-btn
+          :icon="`svg:${mdiFilePlus}`"
+          variant="tonal"
+          color="primary"
+          v-tooltip="'New file'"
+          size="10px"
+          icon-size="24px"
+          @click="startAddFile"
+        />
+      </template>
+    </v-list-item>
+
+    <v-divider></v-divider>
+
+    <v-list
+      :selected="[activeFile]"
+      class="py-1 px-1 overflow-y-scroll"
+      density="compact"
+      :style="{ 'max-height': 'calc(100% - 44px)' }"
+    >
+      <v-list-item
+        v-for="file in files"
+        :key="file"
+        :value="file"
+        rounded
+        slim
+        :prepend-icon="`svg:${mdiFileCode}`"
+        @click="activeFile = file"
+      >
+        <v-list-item-title :title="stripSrcPrefix(file)">
+          {{ stripSrcPrefix(file) }}
+        </v-list-item-title>
+        <template v-slot:append>
+          <v-icon-btn
+            icon="$close"
+            size="20px"
+            icon-size="20px"
+            variant="text"
+            @click.stop="store.deleteFile(file)"
+          />
+        </template>
+      </v-list-item>
+
+      <v-list-item v-if="pending" :prepend-icon="`svg:${mdiFileCode}`" slim>
+        <v-list-item-title>
+          <v-text-field
+            v-model="pendingFilename"
+            density="compact"
+            hide-details
+            autofocus
+            single-line
+            @blur="doneNameFile"
+            @keyup.enter="doneNameFile"
+            @keyup.esc="cancelNameFile"
+          />
+        </v-list-item-title>
+      </v-list-item>
+    </v-list>
+
+    <template v-slot:append>
+      <v-divider></v-divider>
+      <v-list
+        :selected="[activeFile]"
+        @update:selected="(v) => (activeFile = v[0])"
+        density="compact"
+        class="px-1"
+        slim
+      >
+        <v-list-item v-if="showTsConfig" :value="tsconfigFile" rounded>
+          <template v-slot:prepend>
+            <v-icon size="small" :icon="`svg:${mdiLanguageTypescript}`" />
+          </template>
+          <v-list-item-title>tsconfig.json</v-list-item-title>
+        </v-list-item>
+
+        <v-list-item v-if="showImportMap" :value="importMapFile" rounded>
+          <template v-slot:prepend>
+            <v-icon size="small" :icon="`svg:${mdiMap}`" />
+          </template>
+          <v-list-item-title>import-map.json</v-list-item-title>
+        </v-list-item>
+
+        <v-list-item v-if="linksFile" :value="linksFile" rounded>
+          <template v-slot:prepend>
+            <v-icon size="small" :icon="`svg:${mdiLink}`" />
+          </template>
+          <v-list-item-title>links.json</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </template>
+  </v-navigation-drawer>
+</template>
+
+<script setup lang="ts">
+import type { Store } from 'src/store'
+import { inject } from 'vue'
+import { useFileSelector } from '../composables/useFileSelector'
+import { VIconBtn } from 'vuetify/labs/components'
+import {
+  mdiFilePlus,
+  mdiFileCode,
+  mdiLanguageTypescript,
+  mdiMap,
+  mdiLink,
+} from '@mdi/js'
+
+const drawer = defineModel<boolean>({ default: true })
+const store = inject('store') as Store
+
+const {
+  activeFile,
+  showImportMap,
+  files,
+  stripSrcPrefix,
+  pending,
+  pendingFilename,
+  doneNameFile,
+  cancelNameFile,
+  startAddFile,
+  tsconfigFile,
+  showTsConfig,
+  importMapFile,
+  linksFile,
+} = useFileSelector()
+</script>

From 6246ae670a8287c9fed19282815daaa7d887791a Mon Sep 17 00:00:00 2001
From: abdelouahed oumoussa <abdelwahd.oumouss@gmail.com>
Date: Tue, 29 Apr 2025 00:34:59 +0100
Subject: [PATCH 3/6] chore: added ability to open and close file explorer

---
 src/editor/FileExplorer.vue |  6 ++----
 src/monaco/Monaco.vue       | 21 +++++++++++++--------
 src/store.ts                | 16 +++++++++++-----
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/editor/FileExplorer.vue b/src/editor/FileExplorer.vue
index a4b01e23..f2d80c01 100644
--- a/src/editor/FileExplorer.vue
+++ b/src/editor/FileExplorer.vue
@@ -1,12 +1,11 @@
 <template>
-  <v-navigation-drawer v-model="drawer" :width="220">
+  <v-navigation-drawer v-model="store.state.showFileExplorer" :width="220">
     <v-list-item title="Files">
       <template v-slot:append>
         <v-icon-btn
           :icon="`svg:${mdiFilePlus}`"
           variant="tonal"
           color="primary"
-          v-tooltip="'New file'"
           size="10px"
           icon-size="24px"
           @click="startAddFile"
@@ -65,7 +64,7 @@
       <v-divider></v-divider>
       <v-list
         :selected="[activeFile]"
-        @update:selected="(v) => (activeFile = v[0])"
+        @update:selected="(v) => (activeFile = v[0] ?? activeFile)"
         density="compact"
         class="px-1"
         slim
@@ -108,7 +107,6 @@ import {
   mdiLink,
 } from '@mdi/js'
 
-const drawer = defineModel<boolean>({ default: true })
 const store = inject('store') as Store
 
 const {
diff --git a/src/monaco/Monaco.vue b/src/monaco/Monaco.vue
index d8e2c843..58d5d41c 100644
--- a/src/monaco/Monaco.vue
+++ b/src/monaco/Monaco.vue
@@ -161,19 +161,24 @@ onMounted(async () => {
     store.state.wordWrap = !store.state.wordWrap
   })
 
+  editorInstance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyB, () => {
+    store.state.showFileExplorer = !store.state.showFileExplorer
+  })
+
   editorInstance.onDidChangeModelContent(() => {
     emit('change', editorInstance.getValue())
   })
 
   editorInstance.onDidBlurEditorWidget(async () => {
-    const parser = {
-      vue: 'html',
-      html: 'html',
-      css: 'css',
-      js: 'babel',
-      ts: 'babel',
-      json: 'json',
-    }[extension.value!] || props.mode
+    const parser =
+      {
+        vue: 'html',
+        html: 'html',
+        css: 'css',
+        js: 'babel',
+        ts: 'babel',
+        json: 'json',
+      }[extension.value!] || props.mode
 
     const options = {
       parser,
diff --git a/src/store.ts b/src/store.ts
index 3c4509a1..4413f0f7 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -94,6 +94,7 @@ export interface StoreState {
   /** \{ dependencyName: version \} */
   dependencyVersion?: Record<string, string>
   wordWrap?: boolean
+  showFileExplorer: boolean
 }
 
 export interface SFCOptions {
@@ -179,6 +180,7 @@ export class ReplStore implements Store {
       typescriptVersion: 'latest',
       typescriptLocale: undefined,
       resetFlip: true,
+      showFileExplorer: true,
     })
 
     this.initImportMap()
@@ -392,9 +394,13 @@ export class ReplStore implements Store {
     if (!links) {
       this.state.files[linksFile] = new File(
         linksFile,
-        JSON.stringify({
-          css: []
-        }, null, 2)
+        JSON.stringify(
+          {
+            css: [],
+          },
+          null,
+          2
+        )
       )
     }
   }
@@ -461,7 +467,7 @@ export class ReplStore implements Store {
       return JSON.parse(this.state.files[linksFile].code)
     } catch (e) {
       this.state.errors = [
-        `Syntax error in links.json: ${(e as Error).message}`
+        `Syntax error in links.json: ${(e as Error).message}`,
       ]
     }
   }
@@ -475,7 +481,7 @@ function setFile(
   // prefix user files with src/
   // for cleaner Volar path completion when using Monaco editor
   const normalized =
-    ![importMapFile, tsconfigFile, linksFile].includes(filename) && 
+    ![importMapFile, tsconfigFile, linksFile].includes(filename) &&
     !filename.startsWith('src/')
       ? `src/${filename}`
       : filename

From fb54b0ae85cdafa45e3cba0cf5d51d913a077bc1 Mon Sep 17 00:00:00 2001
From: abdelouahed oumoussa <abdelwahd.oumouss@gmail.com>
Date: Tue, 29 Apr 2025 00:35:32 +0100
Subject: [PATCH 4/6] chore: use file selector as recent files explorer

---
 src/editor/EditorContainer.vue |  10 ++-
 src/editor/FileSelector.vue    | 137 +++++++++++----------------------
 2 files changed, 52 insertions(+), 95 deletions(-)

diff --git a/src/editor/EditorContainer.vue b/src/editor/EditorContainer.vue
index 3ea4353f..772ede22 100644
--- a/src/editor/EditorContainer.vue
+++ b/src/editor/EditorContainer.vue
@@ -6,6 +6,7 @@ import { inject, ref, watch } from 'vue'
 import { Store } from '../store'
 import MessageToggle from './MessageToggle.vue'
 import type { EditorComponentType } from './types'
+import FileSelector from './FileSelector.vue'
 
 const SHOW_ERROR_KEY = 'repl_show_error'
 const TOGGLE_WRAP_KEY = 'repl_toggle_wrap'
@@ -43,7 +44,8 @@ watch(
 </script>
 
 <template>
-  <div class="h-100 overflow-hidden position-relative pt-1">
+  <FileSelector />
+  <div class="overflow-hidden position-relative pt-1 editor-container">
     <props.editorComponent
       @change="onChange($event, store.state.activeFile.filename)"
       :value="store.state.activeFile.code"
@@ -54,3 +56,9 @@ watch(
     <WrapToggle v-model="store.state.wordWrap" />
   </div>
 </template>
+
+<style scoped>
+.editor-container {
+  height: calc(100% - 44px);
+}
+</style>
diff --git a/src/editor/FileSelector.vue b/src/editor/FileSelector.vue
index 2d041df5..3b45e9ae 100644
--- a/src/editor/FileSelector.vue
+++ b/src/editor/FileSelector.vue
@@ -1,107 +1,56 @@
 <template>
-  <v-tabs
-    v-model="activeFile"
-    class="file-selector"
-    :class="{ 'has-import-map': showImportMap }"
-    ref="fileSel"
-    color="primary"
-    bg-color="background"
-    density="comfortable"
-    show-arrows
-  >
-    <v-tab v-for="(file, i) in files" :value="file" class="file" size="small">
-      <span>{{ stripSrcPrefix(file) }}</span>
-      <v-icon
-        v-if="i > 0"
-        @click.stop="store.deleteFile(file)"
-        icon="$close"
-        class="ms-2 remove"
-      />
-    </v-tab>
-    <v-tab v-if="pending" class="file pending" size="small">
-      <input
-        v-model="pendingFilename"
-        spellcheck="false"
-        @blur="doneNameFile"
-        @keyup.enter="doneNameFile"
-        @keyup.esc="cancelNameFile"
-        @vue:mounted="focus"
-      />
-    </v-tab>
-    <v-btn variant="text" height="100%" @click="startAddFile">
-      <v-icon :icon="`svg:${mdiPlus}`" />
-    </v-btn>
-
-    <v-tab
-      v-if="showTsConfig"
-      class="file import-map"
-      size="small"
-      :value="tsconfigFile"
-    >
-      tsconfig.json
-    </v-tab>
-
-    <v-tab
-      v-if="showImportMap"
-      class="file"
+  <div class="d-flex gap-1">
+    <v-btn
+      :icon="`svg:${mdiFileMultipleOutline}`"
+      :ripple="false"
+      variant="plain"
       size="small"
-      :value="importMapFile"
+      @click="store.state.showFileExplorer = !store.state.showFileExplorer"
+    />
+    <v-tabs
+      :model-value="localActiveFile"
+      color="primary"
+      bg-color="background"
+      density="comfortable"
+      show-arrows
+      class="flex-grow-1"
     >
-      Import Map
-    </v-tab>
-    <v-tab class="file" size="small" :value="linksFile"> Links </v-tab>
-  </v-tabs>
+      <v-tab
+        v-for="file in recentFiles"
+        :key="file"
+        :value="file"
+        @click="activeFile = file"
+        class="file"
+        size="small"
+      >
+        <span>{{ stripSrcPrefix(file) }}</span>
+      </v-tab>
+    </v-tabs>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { mdiPlus } from '@mdi/js'
-import { inject } from 'vue'
+import { inject, watch, ref, nextTick } from 'vue'
 import { Store } from '../store'
 import { useFileSelector } from '../composables/useFileSelector'
+import { mdiFileMultipleOutline } from '@mdi/js'
 
-const store = inject('store') as Store
+const MAX_RECENT_FILES = 5
 
-const {
-  activeFile,
-  showImportMap,
-  files,
-  stripSrcPrefix,
-  pending,
-  pendingFilename,
-  doneNameFile,
-  cancelNameFile,
-  focus,
-  startAddFile,
-  tsconfigFile,
-  showTsConfig,
-  importMapFile,
-  linksFile,
-} = useFileSelector()
-</script>
+const store = inject('store') as Store
 
-<style scoped>
-.remove {
-  align-self: flex-end;
-}
+const { activeFile, stripSrcPrefix } = useFileSelector()
+const recentFiles = ref([activeFile.value])
+const localActiveFile = ref(activeFile.value)
 
-.file.import-map {
-  /*position: sticky;*/
-  /*right: 0;*/
-  margin-left: auto;
-  background: rgb(var(--v-theme-background)) !important;
-}
+watch(activeFile, async (newVal) => {
+  if (newVal && !recentFiles.value.includes(newVal)) {
+    if (recentFiles.value.length >= MAX_RECENT_FILES)
+      recentFiles.value.splice(0, 1, newVal)
+    else recentFiles.value.push(newVal)
+  }
 
-.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;
-  font-family: var(--font-code);
-  font-size: 12px;
-}
-</style>
+  await nextTick()
+  localActiveFile.value = activeFile.value
+})
+</script>

From 7448f59993a0f33c37751700e8a9503796c15beb Mon Sep 17 00:00:00 2001
From: abdelouahed oumoussa <abdelwahd.oumouss@gmail.com>
Date: Tue, 29 Apr 2025 20:38:20 +0100
Subject: [PATCH 5/6] chore: added close button to file selector tab items

---
 src/editor/FileSelector.vue | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/editor/FileSelector.vue b/src/editor/FileSelector.vue
index 3b45e9ae..e21afbde 100644
--- a/src/editor/FileSelector.vue
+++ b/src/editor/FileSelector.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="d-flex gap-1">
     <v-btn
-      :icon="`svg:${mdiFileMultipleOutline}`"
+      :icon="`svg:${mdiFileMultiple}`"
       :ripple="false"
       variant="plain"
       size="small"
+      min-width="46px"
       @click="store.state.showFileExplorer = !store.state.showFileExplorer"
     />
     <v-tabs
@@ -24,6 +25,15 @@
         size="small"
       >
         <span>{{ stripSrcPrefix(file) }}</span>
+        <v-icon-btn
+          v-if="recentFiles.length > 1"
+          icon="$close"
+          size="20px"
+          icon-size="15px"
+          variant="text"
+          class="ms-2"
+          @click.stop="closeFile(file)"
+        />
       </v-tab>
     </v-tabs>
   </div>
@@ -33,9 +43,10 @@
 import { inject, watch, ref, nextTick } from 'vue'
 import { Store } from '../store'
 import { useFileSelector } from '../composables/useFileSelector'
-import { mdiFileMultipleOutline } from '@mdi/js'
+import { mdiFileMultiple } from '@mdi/js'
+import { VIconBtn } from 'vuetify/labs/components'
 
-const MAX_RECENT_FILES = 5
+const MAX_RECENT_FILES = 10
 
 const store = inject('store') as Store
 
@@ -53,4 +64,13 @@ watch(activeFile, async (newVal) => {
   await nextTick()
   localActiveFile.value = activeFile.value
 })
+
+function closeFile(file: string) {
+  const index = recentFiles.value.indexOf(file)
+  if (index == -1) return
+
+  recentFiles.value.splice(index, 1)
+  if (activeFile.value === file)
+    activeFile.value = recentFiles.value[recentFiles.value.length - 1] || ''
+}
 </script>

From 7f78647d8ddda73855a0c5c826f707019743eb27 Mon Sep 17 00:00:00 2001
From: abdelouahed oumoussa <abdelwahd.oumouss@gmail.com>
Date: Tue, 29 Apr 2025 20:40:04 +0100
Subject: [PATCH 6/6] chore: minor UI updates

---
 src/editor/EditorContainer.vue |  2 +-
 src/editor/FileExplorer.vue    | 16 +++++++---------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/editor/EditorContainer.vue b/src/editor/EditorContainer.vue
index 772ede22..917248db 100644
--- a/src/editor/EditorContainer.vue
+++ b/src/editor/EditorContainer.vue
@@ -45,7 +45,7 @@ watch(
 
 <template>
   <FileSelector />
-  <div class="overflow-hidden position-relative pt-1 editor-container">
+  <div class="overflow-hidden position-relative editor-container">
     <props.editorComponent
       @change="onChange($event, store.state.activeFile.filename)"
       :value="store.state.activeFile.code"
diff --git a/src/editor/FileExplorer.vue b/src/editor/FileExplorer.vue
index f2d80c01..8b43c463 100644
--- a/src/editor/FileExplorer.vue
+++ b/src/editor/FileExplorer.vue
@@ -1,19 +1,17 @@
 <template>
   <v-navigation-drawer v-model="store.state.showFileExplorer" :width="220">
-    <v-list-item title="Files">
+    <v-list-item title="Explorer" height="43px">
       <template v-slot:append>
         <v-icon-btn
           :icon="`svg:${mdiFilePlus}`"
-          variant="tonal"
-          color="primary"
-          size="10px"
-          icon-size="24px"
+          size="20px"
+          icon-size="20px"
           @click="startAddFile"
         />
       </template>
     </v-list-item>
 
-    <v-divider></v-divider>
+    <v-divider />
 
     <v-list
       :selected="[activeFile]"
@@ -36,7 +34,7 @@
         <template v-slot:append>
           <v-icon-btn
             icon="$close"
-            size="20px"
+            size="26px"
             icon-size="20px"
             variant="text"
             @click.stop="store.deleteFile(file)"
@@ -61,10 +59,10 @@
     </v-list>
 
     <template v-slot:append>
-      <v-divider></v-divider>
+      <v-divider />
       <v-list
         :selected="[activeFile]"
-        @update:selected="(v) => (activeFile = v[0] ?? activeFile)"
+        @update:selected="activeFile = $event[0] ?? activeFile"
         density="compact"
         class="px-1"
         slim