#6: cleaning up some code, adding shortcuts for history panel mimicing vscode's sidebar

Author: ackzell

src/components/YvRepl.vue

@@ -21,21 +21,27 @@ useIntervalFn(() => {
 </script>
 
 <template>
-  <Repl
-    :editor="Monaco"
-    :show-compile-output="false"
-    :show-import-map="false"
-    :show-ts-config="false"
-    :theme="settings.theme"
-    :layout="settings.layout"
-    :editor-options="{
-      autoSaveText: false,
-    }"
-    :preview-theme="true"
-    :store="fm.replStore"
+  <div
+    class="yv-repl"
+    w-full h-full
     @keydown.ctrl.s.prevent="fm.saveSnapshot({ type: 'manual', message: 'Manually saved' })"
     @keydown.meta.s.capture.prevent="fm.saveSnapshot({ type: 'manual', message: 'Manually saved' })"
-    @keydown.ctrl.shift.h.prevent="fm.isDrawerOpen = true"
-    @keydown.meta.shift.h.prevent="fm.isDrawerOpen = true"
-  />
+    @keydown.meta.b="fm.isDrawerOpen = !fm.isDrawerOpen"
+    @keydown.ctrl.b.capture.prevent.stop="fm.isDrawerOpen = !fm.isDrawerOpen"
+  >
+    <Repl
+      :editor="Monaco"
+      :show-compile-output="false"
+      :show-import-map="false"
+      :show-ts-config="false"
+      :theme="settings.theme"
+      :layout="settings.layout"
+      :editor-options="{
+        autoSaveText: false,
+      }"
+      :preview-theme="true"
+      :store="fm.replStore"
+      @update:model-value="() => { console.log('updated the contents of the editor in the repl') }"
+    />
+  </div>
 </template>

src/components/toasts/YvToasts.vue

@@ -168,9 +168,10 @@ const hiddenCount = computed(() => {
           :key="activeToast.id"
           sc-toast-base bg="opacity-90 background"
           flex="~ items-center gap-3"
-          p-2
+          p-2 cursor-pointer select-none
+          hover="opacity-100 scale-105"
           transition="transition-all duration-200 ease-in-out"
-          class="border rounded-lg cursor-pointer pointer-events-auto select-none hover:opacity-100 hover:scale-103 active:scale-98"
+          class="border rounded-lg pointer-events-auto active:scale-98"
           :class="getToastClasses(activeToast.type || 'info')"
           @click="handleToastClick(activeToast.id)"
           @mouseenter="pauseAutoDissmiss(activeToast.id)"

src/composables/useFileManagerStore.ts

@@ -15,7 +15,6 @@ import { snapshots } from '@/db/snapshots';
 export const useFileManagerStore = defineStore('file-manager', () => {
   const currentSession = ref<Session>();
   const replStore = useStore();
-  const errorMessage = ref('');
   const isDrawerOpen = ref(false);
 
   const sessionList = ref<Session[]>([]);
@@ -57,7 +56,6 @@ export const useFileManagerStore = defineStore('file-manager', () => {
         // toast.dismissAll();
 
         console.error('[yehyecoa-vue]: Server reported an issue:', error);
-        errorMessage.value = error;
         toast.error('Error', {
           description: error,
           duration: Infinity,
@@ -69,7 +67,6 @@ export const useFileManagerStore = defineStore('file-manager', () => {
       replStore.setFiles(files);
 
       if (lessonName) {
-        errorMessage.value = '';
         // only create if there is no session with the same name
         const session = await sessions.getByName(lessonName);
         if (session) {
@@ -166,7 +163,6 @@ export const useFileManagerStore = defineStore('file-manager', () => {
 
     sessionList,
 
-    errorMessage,
   };
 });
 

vite.config.ts

@@ -24,22 +24,5 @@ export default defineConfig({
         inlineDynamicImports: false,
       },
     },
-    // terserOptions: {
-    //   compress: {
-    //     drop_console: false,
-    //     drop_debugger: true,
-    //     passes: 2,
-    //     pure_funcs: ['console.log'],
-    //   },
-    //   mangle: true,
-    //   format: {
-    //     comments: false,
-    //   },
-    // },
-  },
-  // This is key - force dependency optimization
-  optimizeDeps: {
-    include: ['@vue/repl', '@vue/repl/monaco-editor'],
-    force: true,
   },
 });