From 346c31456d1f15f837aa1acb9d1fe02320955a3b Mon Sep 17 00:00:00 2001
From: Dsaquel <noblet.ouwaysgta5@gmail.com>
Date: Mon, 28 Apr 2025 13:20:06 +0200
Subject: [PATCH 1/2] chore: resolve conflicts & cleanup

---
 src/App.vue               |  6 +++++-
 src/components.d.ts       |  1 +
 src/components/Header.vue | 26 ++++++++++++++++++++++++++
 src/composables/store.ts  | 15 +++++++++++++++
 4 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 2af78f02..196cde68 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -66,12 +66,16 @@ const refreshPreview = () => {
   replRef.value?.reload()
 }
 
+const resetFiles = () => {
+  store.resetFiles()
+}
+
 watch(autoSave, setAutoSaveState)
 </script>
 
 <template>
   <div v-if="!loading" antialiased>
-    <Header :store="store" @refresh="refreshPreview" />
+    <Header :store="store" @refresh="refreshPreview" @reset="resetFiles" />
     <Repl
       ref="replRef"
       v-model="autoSave"
diff --git a/src/components.d.ts b/src/components.d.ts
index 6a2b862b..fb5eded1 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 812f442a..a8422533 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -13,8 +13,10 @@ const replVersion = import.meta.env.REPL_VERSION
 
 const emit = defineEmits<{
   (e: 'refresh'): void
+  (e: 'reset'): void
 }>()
 const nightly = ref(false)
+const showReset = ref(false)
 const dark = useDark()
 const toggleDark = useToggle(dark)
 
@@ -65,6 +67,10 @@ async function copyLink() {
 function refreshView() {
   emit('refresh')
 }
+function resetFiles() {
+  showReset.value = false
+  emit('reset')
+}
 </script>
 
 <template>
@@ -149,6 +155,26 @@ function refreshView() {
       </div>
 
       <div flex="~ gap-4" text-lg>
+        <el-popover
+          v-model:visible="showReset"
+          popper-class="flex flex-col gap-1"
+          trigger="click"
+          width="200px"
+        >
+          <div flex justify-center>Want to reset the editor ?</div>
+          <el-button
+            flex
+            self-end
+            size="small"
+            type="primary"
+            @click="resetFiles"
+          >
+            Yes
+          </el-button>
+          <template #reference>
+            <button i-ri-delete-bin-line hover:color-primary />
+          </template>
+        </el-popover>
         <button
           i-ri-refresh-line
           title="Refresh sandbox"
diff --git a/src/composables/store.ts b/src/composables/store.ts
index cae50d7e..023b8a01 100644
--- a/src/composables/store.ts
+++ b/src/composables/store.ts
@@ -249,6 +249,20 @@ export const useStore = (initial: Initial) => {
     }
   }
 
+  const resetFiles = () => {
+    const { files, addFile } = store
+
+    const isRandomFile = (filename: string) =>
+      ![MAIN_FILE, TSCONFIG, IMPORT_MAP, ELEMENT_PLUS_FILE].includes(
+        filename,
+      )
+    for (const filename in files)
+      if (isRandomFile(filename)) delete files[filename]
+
+    const appFile = new File(APP_FILE, welcomeCode, false)
+    addFile(appFile)
+  }
+
   const utils = {
     versions,
     pr,
@@ -257,6 +271,7 @@ export const useStore = (initial: Initial) => {
     serialize,
     init,
     vuePr,
+    resetFiles,
   }
   Object.assign(store, utils)
 

From 67078d762b00a2101b5d0d1d32cb261d931bdd2d Mon Sep 17 00:00:00 2001
From: Dsaquel <291874700n@gmail.com>
Date: Sat, 26 Jul 2025 12:45:34 +0200
Subject: [PATCH 2/2] chore: cleanup

---
 src/App.vue               | 6 +-----
 src/auto-imports.d.ts     | 7 ++++++-
 src/components.d.ts       | 3 ++-
 src/components/Header.vue | 4 ++--
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 196cde68..2af78f02 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -66,16 +66,12 @@ const refreshPreview = () => {
   replRef.value?.reload()
 }
 
-const resetFiles = () => {
-  store.resetFiles()
-}
-
 watch(autoSave, setAutoSaveState)
 </script>
 
 <template>
   <div v-if="!loading" antialiased>
-    <Header :store="store" @refresh="refreshPreview" @reset="resetFiles" />
+    <Header :store="store" @refresh="refreshPreview" />
     <Repl
       ref="replRef"
       v-model="autoSave"
diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index abb3903e..661d58ac 100644
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -3,6 +3,7 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
@@ -25,6 +26,7 @@ declare global {
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createRef: typeof import('@vueuse/core')['createRef']
   const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
   const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
@@ -296,6 +298,9 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
+  // @ts-ignore
+  export type { Initial, VersionKey, Versions, UserOptions, SerializeState, Store } from './composables/store'
+  import('./composables/store')
 }
diff --git a/src/components.d.ts b/src/components.d.ts
index fb5eded1..2435931d 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -2,6 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
 export {}
 
 /* prettier-ignore */
@@ -20,7 +21,7 @@ declare module 'vue' {
     Header: typeof import('./components/Header.vue')['default']
     Settings: typeof import('./components/Settings.vue')['default']
   }
-  export interface ComponentCustomProperties {
+  export interface GlobalDirectives {
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']
   }
 }
diff --git a/src/components/Header.vue b/src/components/Header.vue
index a8422533..a74d5c21 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -69,7 +69,7 @@ function refreshView() {
 }
 function resetFiles() {
   showReset.value = false
-  emit('reset')
+  store.resetFiles()
 }
 </script>
 
@@ -166,7 +166,7 @@ function resetFiles() {
             flex
             self-end
             size="small"
-            type="primary"
+            plain
             @click="resetFiles"
           >
             Yes