From 2ed2d233d9bb52017275068b979bb7d7c80abbb8 Mon Sep 17 00:00:00 2001
From: Aydin Hassan <aydin@hotmail.co.uk>
Date: Thu, 1 Feb 2024 00:11:11 +0100
Subject: [PATCH] More mobile improvements

---
 assets/components/Online/ConfirmDialog.vue    |   8 +-
 .../components/Online/EditorBreadcrumbs.vue   |   2 +-
 assets/components/Online/EditorTabs.vue       |   6 +-
 assets/components/Online/ExerciseEntry.vue    |  19 +-
 assets/components/Online/ExerciseVerify.vue   |   4 +-
 assets/components/Online/FileTree.vue         |  14 +-
 assets/components/Online/ModalDialog.vue      |   2 +-
 assets/components/Online/PageDashboard.vue    |   4 +-
 .../components/Online/PageExerciseEditor.vue  | 132 +++++++-----
 assets/components/Online/ProgressBar.vue      |   2 +-
 .../components/Online/Results/ResultList.vue  |   2 +-
 assets/components/Online/StudentProgress.vue  |   2 +-
 assets/components/Online/TreeItem.vue         |  16 +-
 .../Online/WorkshopExerciseSelectionList.vue  |  32 ++-
 package-lock.json                             | 188 ++++++++++++++++++
 package.json                                  |  14 +-
 16 files changed, 358 insertions(+), 89 deletions(-)

diff --git a/assets/components/Online/ConfirmDialog.vue b/assets/components/Online/ConfirmDialog.vue
index 50edc9db..78dc9c0c 100644
--- a/assets/components/Online/ConfirmDialog.vue
+++ b/assets/components/Online/ConfirmDialog.vue
@@ -89,7 +89,7 @@ defineExpose({
 <template>
   <focus-trap v-model:active="focusActive" :initial-focus="() => confirmButton">
     <div v-show="isOpen" class="fixed inset-0 z-40 flex h-full w-full flex-col justify-start rounded-lg bg-gray-800 bg-opacity-80">
-      <div class="bg-grey-800 flex h-full w-full items-center justify-center drop-shadow-xl">
+      <div class="bg-grey-800 flex h-full w-full items-center justify-center p-2 drop-shadow-xl md:p-0">
         <div class="max-h-[calc(1/2*100%)] max-w-sm rounded-lg bg-gray-900">
           <div class="items-top flex flex-none justify-between rounded-t border-b border-solid border-slate-600 p-8">
             <div class="flex items-center">
@@ -105,12 +105,12 @@ defineExpose({
             </div>
           </div>
           <div class="flex-none rounded-b border-solid border-slate-600 p-6">
-            <div class="flex justify-end">
+            <div class="flex justify-end gap-x-2">
               <button
                 v-if="showCancel"
                 @click="decline"
                 type="button"
-                class="inline-flex w-full items-center justify-center rounded-full border border-pink-600 px-8 py-2 text-base font-medium text-gray-400 shadow-sm hover:bg-pink-600 hover:text-white focus:outline-none focus:outline-none focus:ring focus:ring-pink-800 sm:ml-3 sm:w-auto sm:text-sm"
+                class="inline-flex w-full items-center justify-center rounded-full border border-pink-600 px-8 py-2 text-sm font-medium text-gray-400 shadow-sm hover:bg-pink-600 hover:text-white focus:outline-none focus:outline-none focus:ring focus:ring-pink-800 sm:ml-3 sm:w-auto md:text-base"
               >
                 {{ cancelMessage }}
               </button>
@@ -118,7 +118,7 @@ defineExpose({
                 ref="confirmButton"
                 @click="confirm"
                 type="button"
-                class="inline-flex w-full items-center justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-base font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none focus:outline-none focus:ring focus:ring-pink-800 sm:ml-3 sm:w-auto sm:text-sm"
+                class="inline-flex w-full items-center justify-center rounded-full border border-transparent bg-pink-600 px-8 py-2 text-sm font-medium text-white shadow-sm hover:bg-pink-700 focus:outline-none focus:outline-none focus:ring focus:ring-pink-800 sm:ml-3 sm:w-auto md:text-base"
               >
                 {{ okMessage }}
               </button>
diff --git a/assets/components/Online/EditorBreadcrumbs.vue b/assets/components/Online/EditorBreadcrumbs.vue
index ab908204..20582e6c 100644
--- a/assets/components/Online/EditorBreadcrumbs.vue
+++ b/assets/components/Online/EditorBreadcrumbs.vue
@@ -16,7 +16,7 @@ const exerciseCompleted = computed(() => {
 </script>
 
 <template>
-  <nav class="flex w-full md:w-auto justify-center" aria-label="Breadcrumb">
+  <nav class="flex w-full justify-center md:w-auto" aria-label="Breadcrumb">
     <ol class="inline-flex items-center space-x-1 font-mono md:space-x-3">
       <li class="inline-flex items-center">
         <router-link to="/online" class="inline-flex items-center text-sm font-medium text-white hover:text-pink-500">
diff --git a/assets/components/Online/EditorTabs.vue b/assets/components/Online/EditorTabs.vue
index 5a6fa34a..f85524f2 100644
--- a/assets/components/Online/EditorTabs.vue
+++ b/assets/components/Online/EditorTabs.vue
@@ -30,20 +30,20 @@ const changeTab = (tab) => {
 
 <template>
   <div class="tabs flex flex-1 flex-col">
-    <ul class="tabs list-reset flex flex-none justify-start border-solid border-gray-600">
+    <ul class="tabs list-reset flex flex-none justify-start">
       <li
         v-for="(tab, index) in tabList"
         :key="index"
         @click="changeTab(index)"
         class="inline-block flex items-center justify-between border-r border-solid border-r-gray-600 pl-2 pr-1 text-xs text-white no-underline hover:text-pink-500"
-        :class="[activeTab === index ? '-mt-[1px] border-t border-t-pink-600' : 'border-b border-b-gray-600']"
+        :class="[activeTab === index ? 'border-t border-t-pink-600' : 'border-b border-t border-gray-600 ']"
       >
         <a href="#" class="py-6 pl-1 text-gray-300 hover:no-underline" :class="[activeTab === index ? 'text-pink-600' : '']">
           {{ tab }}
         </a>
         <XMarkIcon v-show="disableClose === false" @click.stop="closeTab(tab)" class="ml-2 mr-1 h-3 w-3 cursor-pointer text-zinc-400 hover:text-white" />
       </li>
-      <li class="flex-1 border-b border-solid border-gray-600"></li>
+      <li class="flex-1 border-b border-t border-solid border-gray-600"></li>
     </ul>
     <template v-for="(tab, index) in tabList">
       <div class="tabs-panel flex h-full flex-1" :key="index" v-if="index === activeTab">
diff --git a/assets/components/Online/ExerciseEntry.vue b/assets/components/Online/ExerciseEntry.vue
index 4b907832..e6eb7890 100644
--- a/assets/components/Online/ExerciseEntry.vue
+++ b/assets/components/Online/ExerciseEntry.vue
@@ -47,7 +47,7 @@ const isNextWorkshop = computed(() => {
 
 <template>
   <li @click="selectExercise" class="group flex flex-row hover:bg-gray-600 last:hover:rounded-b-lg">
-    <div class="flex flex-1 cursor-pointer select-none items-center p-4">
+    <div class="hidden flex-1 cursor-pointer select-none items-center p-4 md:flex">
       <div class="mr-4 flex h-10 w-10 flex-col items-center justify-center">
         <a href="#" class="relative block">
           <img alt="workshop" src="../../img/cloud/core-workshops.png" class="mx-auto h-10 w-10 object-cover" />
@@ -65,5 +65,22 @@ const isNextWorkshop = computed(() => {
         <ArrowRightCircleIcon v-else class="h-8 w-8 rounded-full border-2 border-solid border-pink-500 !fill-none text-pink-200" :class="{ 'animate-bounce': isNextWorkshop }" />
       </a>
     </div>
+    <div class="flex flex-1 cursor-pointer select-none flex-col items-center p-4 md:hidden">
+      <div class="flex w-full items-center justify-between">
+        <div class="mr-4 flex-1 text-white group-hover:text-pink-600">
+          <div class="font-medium">{{ exercise.name }}</div>
+          <div class="text-xs text-gray-300">{{ exercise.description }}</div>
+        </div>
+        <a href="#" class="flex justify-end text-right">
+          <CheckCircleIcon v-if="isCurrentExerciseComplete" class="h-8 w-8 rounded-full border-2 border-solid border-pink-300 text-pink-500" />
+          <ArrowRightCircleIcon v-else class="h-8 w-8 rounded-full border-2 border-solid border-pink-500 !fill-none text-pink-200" :class="{ 'animate-bounce': isNextWorkshop }" />
+        </a>
+      </div>
+      <div class="mt-4 flex w-full items-center justify-between">
+        <div class="rounded-full bg-pink-600 px-3 py-1 text-xs text-gray-200">
+          {{ exercise.type }}
+        </div>
+      </div>
+    </div>
   </li>
 </template>
diff --git a/assets/components/Online/ExerciseVerify.vue b/assets/components/Online/ExerciseVerify.vue
index 7ddc2886..9f687768 100644
--- a/assets/components/Online/ExerciseVerify.vue
+++ b/assets/components/Online/ExerciseVerify.vue
@@ -131,7 +131,7 @@ const verifySolution = () => {
   <div class="flex flex-1 items-center gap-y-2">
     <button
       id="run"
-      class="mr-2 mt-0 h-[48px] w-44 items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] hidden md:flex"
+      class="mr-2 mt-0 hidden h-[48px] w-44 items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] md:flex"
       @click.stop="runSolution"
       :disabled="loadingRun"
     >
@@ -141,7 +141,7 @@ const verifySolution = () => {
     </button>
     <button
       id="verify"
-      class="mr-0 md:mr-2 mt-0 flex h-[48px] w-full md:w-44 items-center justify-center rounded bg-gradient-to-r from-pink-600 to-purple-500 px-4 text-sm text-white transition-all duration-300 ease-in hover:bg-[#aa1145]"
+      class="mr-0 mt-0 flex h-[48px] w-full items-center justify-center rounded bg-gradient-to-r from-pink-600 to-purple-500 px-4 text-sm text-white transition-all duration-300 ease-in hover:bg-[#aa1145] md:mr-2 md:w-44"
       @click="verifySolution"
       :disabled="loadingVerify"
     >
diff --git a/assets/components/Online/FileTree.vue b/assets/components/Online/FileTree.vue
index 8d41f8fe..745f2823 100644
--- a/assets/components/Online/FileTree.vue
+++ b/assets/components/Online/FileTree.vue
@@ -76,13 +76,13 @@ const addFolder = () => {
 </script>
 
 <template>
-  <div class="">
-    <div class="flex flex-col sm:flex-row justify-between border-b border-solid border-gray-600 px-3 py-5">
-      <span class="font-mono text-base text-white mb-2 sm:mb-0 sm:mr-4">Files</span>
-      <div v-if="showControls" class="flex flex-wrap sm:flex-nowrap text-white">
-      <XMarkIcon @click="reset" class="mr-1 sm:mr-2 h-4 w-4 sm:h-5 sm:w-5 cursor-pointer hover:text-pink-500" style="fill: none !important" />
-        <FolderPlusIcon @click="addFolder" class="mr-1 sm:mr-2 h-4 w-4 sm:h-5 sm:w-5 cursor-pointer hover:text-pink-500" style="fill: none !important" />
-        <PlusIcon @click="addFile" class="mr-1 sm:mr-2 h-4 w-4 sm:h-5 sm:w-5 cursor-pointer hover:text-pink-500" style="fill: none !important" />
+  <div class="w-full">
+    <div class="flex flex-row items-center justify-between border-b border-solid border-gray-600 px-3 py-5">
+      <span class="font-mono text-base text-white">Files</span>
+      <div v-if="showControls" class="flex text-white">
+        <XMarkIcon @click="reset" class="mr-1 h-4 w-4 cursor-pointer hover:text-pink-500 sm:mr-2 sm:h-5 sm:w-5" style="fill: none !important" />
+        <FolderPlusIcon @click="addFolder" class="mr-1 h-4 w-4 cursor-pointer hover:text-pink-500 sm:mr-2 sm:h-5 sm:w-5" style="fill: none !important" />
+        <PlusIcon @click="addFile" class="mr-1 h-4 w-4 cursor-pointer hover:text-pink-500 sm:mr-2 sm:h-5 sm:w-5" style="fill: none !important" />
       </div>
     </div>
     <ul class="w-full font-mono text-gray-300">
diff --git a/assets/components/Online/ModalDialog.vue b/assets/components/Online/ModalDialog.vue
index 764fa7e6..2654ec2e 100644
--- a/assets/components/Online/ModalDialog.vue
+++ b/assets/components/Online/ModalDialog.vue
@@ -74,7 +74,7 @@ const closeModal = (event) => {
   <focus-trap :v-model:active="true">
     <div class="">
       <div class="fixed inset-0 z-40 bg-gray-900 bg-opacity-80" />
-      <div tabindex="-1" class="fixed left-0 right-0 top-0 z-50 flex w-full items-center justify-center overflow-x-hidden md:inset-0 h-full p-2 md:p-0">
+      <div tabindex="-1" class="fixed left-0 right-0 top-0 z-50 flex h-full w-full items-center justify-center overflow-x-hidden p-2 md:inset-0 md:p-0">
         <div
           :id="id"
           v-click-away="clickAway"
diff --git a/assets/components/Online/PageDashboard.vue b/assets/components/Online/PageDashboard.vue
index 5dd32617..5d2bd2d4 100644
--- a/assets/components/Online/PageDashboard.vue
+++ b/assets/components/Online/PageDashboard.vue
@@ -23,8 +23,8 @@ onMounted(async () => {
 </script>
 
 <template>
-  <section class="flex-1 overflow-hidden pb-4">
-    <div class="container mx-auto flex h-full flex-col overflow-hidden">
+  <section class="flex-1 overflow-y-scroll pb-4 md:overflow-hidden">
+    <div class="container mx-auto flex flex-col overflow-hidden md:h-full">
       <student-progress></student-progress>
 
       <workshop-exercise-selection-list></workshop-exercise-selection-list>
diff --git a/assets/components/Online/PageExerciseEditor.vue b/assets/components/Online/PageExerciseEditor.vue
index 49047950..8d9d2176 100644
--- a/assets/components/Online/PageExerciseEditor.vue
+++ b/assets/components/Online/PageExerciseEditor.vue
@@ -17,6 +17,8 @@ import toFilePath from "./Utils/toFilePath";
 import { useWorkshopStore } from "../../stores/workshops";
 import { useStudentStore } from "../../stores/student";
 import { FolderIcon } from "@heroicons/vue/24/outline";
+import { vOnClickOutside } from "@vueuse/components";
+import { TransitionChild, TransitionRoot } from "@headlessui/vue";
 
 const workshopStore = useWorkshopStore();
 const studentStore = useStudentStore();
@@ -51,6 +53,7 @@ const confirm = ref(null);
 const nextExercise = ref(workshopStore.findNextExercise(props.workshop, props.exercise));
 const problem = ref("");
 const openFileBrowser = ref(false);
+const openFileBrowserButton = ref(null);
 
 onMounted(async () => {
   const response = await fetch("/api/online/workshop/" + currentExercise.workshop.code + "/exercise/" + currentExercise.exercise.slug);
@@ -338,8 +341,34 @@ const deleteFileOrFolder = async (file) => {
       ></pass-notification>
 
       <div class="flex h-full flex-col">
-        <div class="relative flex h-full flex-1 border-t border-gray-600">
-          <div class="" :class="{'z-50 absolute left-0 flex h-full w-4/6 md:w-3/12 xl:w-2/12 bg-gray-900 border-r border-gray-600' : openFileBrowser, 'hidden md:flex md:w-3/12 xl:w-2/12':!openFileBrowser}">
+        <div class="relative flex h-full flex-1">
+          <TransitionRoot :show="openFileBrowser">
+            <TransitionChild
+              as="template"
+              enter="transform transition ease-in-out duration-500 sm:duration-700"
+              enter-from="-translate-x-full"
+              enter-to="translate-x-0"
+              leave="transform transition ease-in-out duration-500 sm:duration-700"
+              leave-from="translate-x-0"
+              leave-to="-translate-x-full"
+            >
+              <div class="absolute left-0 top-0 z-10 h-full w-4/6 border-r border-t border-gray-600 bg-gray-900" v-on-click-outside.bubble="() => (openFileBrowser = false)">
+                <FileTree
+                  :files="studentFiles"
+                  :file-select-function="studentSelectFile"
+                  :initial-selected-item="studentFiles[0]"
+                  :delete-function="deleteFileOrFolder"
+                  show-controls
+                  @reset="resetFiles"
+                  @add-file="addFile"
+                  @delete-file="deleteFile"
+                  @rename-file="renameFile"
+                />
+              </div>
+            </TransitionChild>
+          </TransitionRoot>
+
+          <div class="hidden h-full border-t border-gray-600 bg-gray-900 md:flex md:w-3/12 xl:w-2/12">
             <FileTree
               :files="studentFiles"
               :file-select-function="studentSelectFile"
@@ -352,75 +381,88 @@ const deleteFileOrFolder = async (file) => {
               @rename-file="renameFile"
             />
           </div>
-          <div class="flex h-full border-l border-solid border-gray-600" :class="[openResults ? 'w-6/12 xl:w-7/12' : 'w-full md:w-9/12 xl:w-10/12']">
+          <div class="flex h-full w-full border-solid border-gray-600 md:w-9/12 md:border-l xl:w-10/12">
             <EditorTabs :tabList="openFiles.map((file) => file.name)" @close-tab="closeTab" :active-tab="activeTab" @change-tab="(tab) => (activeTab = tab)">
               <template v-slot:[`tab-content-`+index] v-for="(file, index) in openFiles" :key="file.name">
                 <AceEditor :id="'editor-' + (index + 1)" v-model:value="file.content" @update:value="(content) => saveSolution(content, file)" class="h-full w-full border-0" />
               </template>
             </EditorTabs>
           </div>
-          <div v-show="openResults" id="results-col" class="absolute right-0 flex h-full w-3/12 flex-col overflow-y-scroll border-l border-solid border-gray-600 bg-gray-900">
-            <div class="flex items-center justify-between border-b border-solid border-gray-600 py-4 pl-4 pr-4">
-              <h1 class="flex items-center pt-0 font-mono text-xl text-white">
-                <AcademicCapIcon class="mr-3 h-5 w-5" />
-                Results
-              </h1>
-              <div>
-                <button @click="openResults = false" type="button" class="ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:hover:text-white">
-                  <XMarkIcon class="h-5 w-5" />
-                </button>
-              </div>
-            </div>
-
-            <div v-show="loadingResults" class="mt-4 flex animate-pulse space-x-4 px-4">
-              <div class="flex-1 space-y-6 py-1">
-                <div class="h-2 rounded bg-slate-700"></div>
-                <div class="space-y-3">
-                  <div class="grid grid-cols-3 gap-4">
-                    <div class="col-span-2 h-2 rounded bg-slate-700"></div>
-                    <div class="col-span-1 h-2 rounded bg-slate-700"></div>
+          <TransitionRoot :show="openResults">
+            <TransitionChild
+              as="template"
+              enter="transform transition ease-in-out duration-500 sm:duration-700"
+              enter-from="-translate-y-full"
+              enter-to="translate-y-0"
+              leave="transform transition ease-in-out duration-300 sm:duration-700"
+              leave-from="translate-y-0"
+              leave-to="-translate-y-full"
+            >
+              <div id="results-col" class="absolute right-0 z-10 flex h-full w-full flex-col overflow-y-scroll border-t border-solid border-gray-600 bg-gray-900 md:mt-0 md:w-3/12 md:border-l">
+                <div class="flex items-center justify-between border-b border-solid border-gray-600 py-4 pl-4 pr-4">
+                  <h1 class="flex items-center pt-0 font-mono text-xl text-white">
+                    <AcademicCapIcon class="mr-3 h-5 w-5" />
+                    Results
+                  </h1>
+                  <div>
+                    <button @click="openResults = false" type="button" class="ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:hover:text-white">
+                      <XMarkIcon class="h-5 w-5" />
+                    </button>
                   </div>
-                  <div class="h-2 rounded bg-slate-700"></div>
                 </div>
-                <div class="h-2 rounded bg-slate-700"></div>
-                <div class="space-y-3">
-                  <div class="grid grid-cols-3 gap-4">
-                    <div class="col-span-1 h-2 rounded bg-slate-700"></div>
-                    <div class="col-span-2 h-2 rounded bg-slate-700"></div>
+
+                <div v-show="loadingResults" class="mt-4 flex animate-pulse space-x-4 px-4">
+                  <div class="flex-1 space-y-6 py-1">
+                    <div class="h-2 rounded bg-slate-700"></div>
+                    <div class="space-y-3">
+                      <div class="grid grid-cols-3 gap-4">
+                        <div class="col-span-2 h-2 rounded bg-slate-700"></div>
+                        <div class="col-span-1 h-2 rounded bg-slate-700"></div>
+                      </div>
+                      <div class="h-2 rounded bg-slate-700"></div>
+                    </div>
+                    <div class="h-2 rounded bg-slate-700"></div>
+                    <div class="space-y-3">
+                      <div class="grid grid-cols-3 gap-4">
+                        <div class="col-span-1 h-2 rounded bg-slate-700"></div>
+                        <div class="col-span-2 h-2 rounded bg-slate-700"></div>
+                      </div>
+                      <div class="h-2 rounded bg-slate-700"></div>
+                    </div>
                   </div>
-                  <div class="h-2 rounded bg-slate-700"></div>
                 </div>
-              </div>
-            </div>
 
-            <ResultList :workshop="currentExercise.workshop" :results="results"></ResultList>
-          </div>
+                <ResultList :workshop="currentExercise.workshop" :results="results"></ResultList>
+              </div>
+            </TransitionChild>
+          </TransitionRoot>
         </div>
         <!-- start footer -->
-        <div class="flex flex-wrap items-center border-t border-solid border-gray-600 p-2 justify-between gap-y-3 md:mb-0">
-          <editor-breadcrumbs :current-exercise="currentExercise" class=""></editor-breadcrumbs>
-          <progress-bar class=""></progress-bar>
-          <div class="flex items-start justify-center w-full md:w-auto gap-x-2">
+        <div class="flex flex-wrap items-center justify-between gap-y-3 border-t border-solid border-gray-600 p-2 md:mb-0 md:gap-y-0">
+          <editor-breadcrumbs :current-exercise="currentExercise" class="order-3 md:order-1"></editor-breadcrumbs>
+          <progress-bar class="order-2"></progress-bar>
+          <div class="order-1 flex w-full items-start justify-center gap-x-2 md:order-3 md:w-auto md:gap-x-0">
             <button
-              class="mr-0 md:mr-2 lg:mb-0 flex h-[48px] w-auto md:w-44 items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63]"
-              @click="openFileBrowser = !openFileBrowser"
+              ref="openFileBrowserButton"
+              class="mr-0 flex h-[48px] w-auto items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] md:mr-2 md:hidden md:w-44 lg:mb-0"
+              @click.stop="openFileBrowser = !openFileBrowser"
             >
-              <FolderIcon v-cloak class="md:ml-2 h-5 w-5" />
+              <FolderIcon v-cloak class="h-5 w-5 md:ml-2" />
             </button>
             <button
-              class="mr-0 md:mr-2 lg:mb-0 flex h-[48px] w-auto md:w-44 items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63]"
+              class="mr-0 flex h-[48px] w-auto items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] md:mr-2 md:w-44 lg:mb-0"
               @click="openComposerModal = true"
             >
               <span class="hidden md:flex">Composer deps</span>
-              <CircleStackIcon v-cloak class="md:ml-2 h-5 w-5" />
+              <CircleStackIcon v-cloak class="h-5 w-5 md:ml-2" />
             </button>
             <button
               id="show-problem"
-              class="mr-0 md:mr-2 mt-0 flex h-[48px] w-auto md:w-44 items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63]"
+              class="mr-0 mt-0 flex h-[48px] w-auto items-center justify-center rounded border-2 border-solid border-[#E91E63] px-4 text-sm text-white hover:bg-[#E91E63] md:mr-2 md:w-44"
               @click="openProblemModal = true"
             >
               <span class="hidden md:flex">Show problem</span>
-              <MapIcon v-cloak class="md:ml-2 h-5 w-5" />
+              <MapIcon v-cloak class="h-5 w-5 md:ml-2" />
             </button>
             <exercise-verify
               @verify-loading="verifyLoading"
diff --git a/assets/components/Online/ProgressBar.vue b/assets/components/Online/ProgressBar.vue
index 9dd707df..9639515e 100644
--- a/assets/components/Online/ProgressBar.vue
+++ b/assets/components/Online/ProgressBar.vue
@@ -12,7 +12,7 @@ const percentComplete = computed(() => {
 </script>
 
 <template>
-  <div class="relative mt-0 flex h-5 w-full lg:w-1/6 items-center justify-center rounded-full bg-gray-200 bg-gray-700">
+  <div class="relative mt-0 flex h-5 w-full items-center justify-center rounded-full bg-gray-200 bg-gray-700 lg:w-1/6">
     <div class="absolute left-0 h-5 rounded-full bg-pink-500" :style="{ width: percentComplete + '%' }"></div>
     <p class="absolute mx-auto ml-2 inline-flex items-center text-xs font-bold text-white">{{ studentStore.totalCompleted() }} / {{ workshopStore.totalExercises }} completed</p>
   </div>
diff --git a/assets/components/Online/Results/ResultList.vue b/assets/components/Online/Results/ResultList.vue
index 5a5082e8..fdad6a13 100644
--- a/assets/components/Online/Results/ResultList.vue
+++ b/assets/components/Online/Results/ResultList.vue
@@ -20,7 +20,7 @@ const workshopResultRenderers = resultRenderers[props.workshop.code];
 </script>
 
 <template>
-  <ul v-show="results" class="my-8 h-full max-h-full space-y-4 overflow-y-scroll px-4 text-left text-gray-100">
+  <ul class="my-8 h-full max-h-full space-y-4 overflow-y-scroll px-4 text-left text-gray-100">
     <li v-for="success in successes" :key="success.name" class="flex items-start space-x-3">
       <CheckIcon fill="currentColor" class="h-5 w-5 flex-shrink-0 text-green-500" />
       <div class="flex w-full flex-col">
diff --git a/assets/components/Online/StudentProgress.vue b/assets/components/Online/StudentProgress.vue
index 3b68eb8f..5f7cbdaf 100644
--- a/assets/components/Online/StudentProgress.vue
+++ b/assets/components/Online/StudentProgress.vue
@@ -33,7 +33,7 @@ const login = async () => {
 </script>
 
 <template>
-  <div class="mx-auto mt-10 w-1/3 grow-0 rounded-xl bg-gray-800 p-8">
+  <div class="mx-4 mt-10 grow-0 rounded-xl bg-gray-800 p-8 md:mx-auto md:w-1/3">
     <div class="flex justify-between">
       <Button v-if="!studentStore.student" @click="login" class="flex items-center px-2 py-2">
         <GitHubIcon class="mr-2 h-5 w-5" />
diff --git a/assets/components/Online/TreeItem.vue b/assets/components/Online/TreeItem.vue
index 76b8f0e6..ebd5605b 100644
--- a/assets/components/Online/TreeItem.vue
+++ b/assets/components/Online/TreeItem.vue
@@ -185,18 +185,18 @@ const deleteChild = async (child) => {
   <li :class="[model === state.selectedFile ? customStyles?.selectedFileClasses ?? '' : '']" class="flex w-full flex-col py-2 pl-3">
     <div @click="selectNode(model)" class="group flex w-full cursor-pointer items-center justify-between">
       <div class="flex min-w-0 items-center">
-        <FolderIcon v-if="isFolder" v-show="!isOpen || !hasChildren" class="mr-1 h-5 w-5" style="fill: none !important" />
-        <FolderOpenIcon v-if="isFolder && hasChildren" v-show="isOpen" class="mr-1 h-5 w-5" style="fill: none !important" />
-        <DocumentIcon v-if="!isFolder" class="mr-1 h-5 w-5" style="fill: none !important" />
+        <FolderIcon v-if="isFolder" v-show="!isOpen || !hasChildren" class="mr-1 h-3.5 w-3.5 md:h-5 md:w-5" style="fill: none !important" />
+        <FolderOpenIcon v-if="isFolder && hasChildren" v-show="isOpen" class="mr-1 h-3.5 w-3.5 md:h-5 md:w-5" style="fill: none !important" />
+        <DocumentIcon v-if="!isFolder" class="mr-1 h-3.5 w-3.5 md:h-5 md:w-5" style="fill: none !important" />
         <span v-show="!isBeingEdited" class="flex-1 truncate text-sm hover:text-white">{{ model.name }}</span>
         <input ref="name" @keyup.enter="saveName" v-show="isBeingEdited" class="rounded-sm bg-gray-700 p-1" v-model="fileName" />
         <span class="ml-2 mr-2 text-sm" v-if="isFolder && hasChildren && !isBeingEdited">[{{ isOpen ? "-" : "+" }}]</span>
       </div>
-      <div v-if="showControls" v-show="!isBeingEdited" class="hidden group-hover:flex">
-        <PencilIcon @click.stop="edit" class="mr-2 h-5 w-5 cursor-pointer hover:text-pink-500" style="fill: none !important" />
-        <FolderPlusIcon @click.stop="addFolder" v-if="isFolder" class="mr-2 h-5 w-5 cursor-pointer hover:text-pink-500" style="fill: none !important" />
-        <PlusIcon @click.stop="addFile" v-if="isFolder" class="mr-2 h-5 w-5 cursor-pointer hover:text-pink-500" style="fill: none !important" />
-        <TrashIcon @click.stop="deleteChild(model)" class="mr-2 h-5 w-5 cursor-pointer fill-none hover:text-pink-500" style="fill: none !important" />
+      <div v-if="showControls" v-show="!isBeingEdited" class="flex group-hover:flex md:hidden">
+        <PencilIcon @click.stop="edit" class="mr-2 h-3.5 w-3.5 cursor-pointer hover:text-pink-500 md:h-5 md:w-5" style="fill: none !important" />
+        <FolderPlusIcon @click.stop="addFolder" v-if="isFolder" class="mr-2 h-3.5 w-3.5 cursor-pointer hover:text-pink-500 md:h-5 md:w-5" style="fill: none !important" />
+        <PlusIcon @click.stop="addFile" v-if="isFolder" class="mr-2 h-3.5 w-3.5 cursor-pointer hover:text-pink-500 md:h-5 md:w-5" style="fill: none !important" />
+        <TrashIcon @click.stop="deleteChild(model)" class="mr-2 h-3.5 w-3.5 cursor-pointer fill-none hover:text-pink-500 md:h-5 md:w-5" style="fill: none !important" />
       </div>
     </div>
 
diff --git a/assets/components/Online/WorkshopExerciseSelectionList.vue b/assets/components/Online/WorkshopExerciseSelectionList.vue
index a49a4e97..54ca3b43 100644
--- a/assets/components/Online/WorkshopExerciseSelectionList.vue
+++ b/assets/components/Online/WorkshopExerciseSelectionList.vue
@@ -26,8 +26,8 @@ const selectWorkshop = (workshopCode) => {
 
 <template>
   <alert type="error" @close="showNotLoggedInError = false" :show="showNotLoggedInError" :timeout="4000" message="You must be logged in to start an exercise"></alert>
-  <div class="mt-10 flex h-full w-full gap-4 overflow-hidden font-mono">
-    <div class="h-full w-1/2">
+  <div class="mx-4 mt-10 flex flex-wrap gap-4 overflow-hidden font-mono md:mx-0 md:w-full md:flex-nowrap">
+    <div class="h-full w-full md:w-1/2">
       <div id="workshops" class="flex flex-col items-center justify-center rounded-lg bg-gray-800 shadow">
         <div class="w-full px-4 py-5 sm:px-6">
           <h3 class="pt-[13.5px] text-lg font-medium leading-6 text-white">PHP School Workshops</h3>
@@ -43,7 +43,7 @@ const selectWorkshop = (workshopCode) => {
             }"
             class="group flex flex-row last:rounded-b-lg hover:bg-gray-600"
           >
-            <div class="flex flex-1 cursor-pointer select-none items-center p-4">
+            <div class="hidden flex-1 cursor-pointer select-none items-center p-4 md:flex">
               <div class="mr-4 flex h-10 w-10 flex-col items-center justify-center">
                 <a href="#" class="relative block">
                   <img alt="workshop" src="../../img/cloud/core-workshops.png" class="mx-auto h-10 w-10 object-cover" />
@@ -63,11 +63,31 @@ const selectWorkshop = (workshopCode) => {
                 <ArrowRightCircleIcon v-else class="h-9 w-9 rounded-full border-2 border-solid border-pink-500 !fill-none text-pink-200" />
               </a>
             </div>
+            <div class="flex flex-1 cursor-pointer select-none flex-col items-center p-4 md:hidden">
+              <div class="flex w-full items-center justify-between">
+                <div class="mr-4 flex-1 text-white group-hover:text-pink-600">
+                  <div class="font-medium">{{ workshop.name }}</div>
+                  <div class="text-xs text-gray-300">
+                    {{ workshop.description }}
+                  </div>
+                </div>
+                <a href="#" class="flex text-right">
+                  <CheckCircleIcon v-if="studentStore.isWorkshopComplete(workshop)" class="h-12 w-12 rounded-full border-2 border-solid border-pink-300 text-pink-500" />
+                  <ArrowRightCircleIcon v-else class="h-9 w-9 rounded-full border-2 border-solid border-pink-500 !fill-none text-pink-200" />
+                </a>
+              </div>
+
+              <div class="mt-4 flex w-full items-center justify-between">
+                <div class="rounded-full bg-pink-600 px-3 py-1 text-xs text-gray-200">
+                  {{ workshop.type }}
+                </div>
+              </div>
+            </div>
           </li>
         </ul>
       </div>
 
-      <div class="mt-20 flex items-center justify-center rounded-lg bg-gray-800 shadow hover:cursor-pointer">
+      <div class="mt-20 flex hidden items-center justify-center rounded-lg bg-gray-800 shadow hover:cursor-pointer md:flex">
         <router-link to="/offline" class="flex items-center justify-center">
           <CommandLineIcon class="mx-3 h-12 w-12 fill-pink-600 text-gray-900"></CommandLineIcon>
           <div class="flex-1 py-5 pr-4 sm:pr-6">
@@ -77,8 +97,8 @@ const selectWorkshop = (workshopCode) => {
         </router-link>
       </div>
     </div>
-    <div class="h-full w-1/2">
-      <div v-if="selectedWorkshop === null" class="flex flex-col items-center justify-center">
+    <div class="h-full w-full md:w-1/2">
+      <div v-if="selectedWorkshop === null" class="hidden flex-col items-center justify-center md:flex">
         <h1 class="pt-[13.5px] font-mono text-2xl text-[#e91e63]">Select a workshop</h1>
 
         <svg
diff --git a/package-lock.json b/package-lock.json
index 3a290b13..f0790a39 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,8 @@
         "@docsearch/js": "^3.5.2",
         "@headlessui/vue": "^1.7.4",
         "@heroicons/vue": "^2.0.13",
+        "@vueuse/components": "^10.7.2",
+        "@vueuse/core": "^10.7.2",
         "ace-builds": "^1.13.0",
         "chart.js": "^4.4.0",
         "cross-env": "^7.0.3",
@@ -1303,6 +1305,93 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.8.tgz",
       "integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw=="
     },
+    "node_modules/@vueuse/components": {
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-10.7.2.tgz",
+      "integrity": "sha512-r39DLLtRo1hEKI/SQzVQjCts7yelwFyUrTxDFi821NdyU3EfQ9GCNNBcMirXcn3IQApFBRKrvTTtQ9cJGrb/+A==",
+      "dependencies": {
+        "@vueuse/core": "10.7.2",
+        "@vueuse/shared": "10.7.2",
+        "vue-demi": ">=0.14.6"
+      }
+    },
+    "node_modules/@vueuse/components/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/core": {
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.7.2.tgz",
+      "integrity": "sha512-AOyAL2rK0By62Hm+iqQn6Rbu8bfmbgaIMXcE3TSr7BdQ42wnSFlwIdPjInO62onYsEMK/yDMU8C6oGfDAtZ2qQ==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.7.2",
+        "@vueuse/shared": "10.7.2",
+        "vue-demi": ">=0.14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+    },
+    "node_modules/@vueuse/core/node_modules/@vueuse/metadata": {
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.7.2.tgz",
+      "integrity": "sha512-kCWPb4J2KGrwLtn1eJwaJD742u1k5h6v/St5wFe8Quih90+k2a0JP8BS4Zp34XUuJqS2AxFYMb1wjUL8HfhWsQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vueuse/metadata": {
       "version": "8.9.4",
       "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.4.tgz",
@@ -1311,6 +1400,42 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@vueuse/shared": {
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.7.2.tgz",
+      "integrity": "sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==",
+      "dependencies": {
+        "vue-demi": ">=0.14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -7212,11 +7337,74 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.8.tgz",
       "integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw=="
     },
+    "@vueuse/components": {
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-10.7.2.tgz",
+      "integrity": "sha512-r39DLLtRo1hEKI/SQzVQjCts7yelwFyUrTxDFi821NdyU3EfQ9GCNNBcMirXcn3IQApFBRKrvTTtQ9cJGrb/+A==",
+      "requires": {
+        "@vueuse/core": "10.7.2",
+        "@vueuse/shared": "10.7.2",
+        "vue-demi": ">=0.14.6"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+          "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+          "requires": {}
+        }
+      }
+    },
+    "@vueuse/core": {
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.7.2.tgz",
+      "integrity": "sha512-AOyAL2rK0By62Hm+iqQn6Rbu8bfmbgaIMXcE3TSr7BdQ42wnSFlwIdPjInO62onYsEMK/yDMU8C6oGfDAtZ2qQ==",
+      "requires": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.7.2",
+        "@vueuse/shared": "10.7.2",
+        "vue-demi": ">=0.14.6"
+      },
+      "dependencies": {
+        "@types/web-bluetooth": {
+          "version": "0.0.20",
+          "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+          "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+        },
+        "@vueuse/metadata": {
+          "version": "10.7.2",
+          "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.7.2.tgz",
+          "integrity": "sha512-kCWPb4J2KGrwLtn1eJwaJD742u1k5h6v/St5wFe8Quih90+k2a0JP8BS4Zp34XUuJqS2AxFYMb1wjUL8HfhWsQ=="
+        },
+        "vue-demi": {
+          "version": "0.14.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+          "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+          "requires": {}
+        }
+      }
+    },
     "@vueuse/metadata": {
       "version": "8.9.4",
       "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.4.tgz",
       "integrity": "sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw=="
     },
+    "@vueuse/shared": {
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.7.2.tgz",
+      "integrity": "sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==",
+      "requires": {
+        "vue-demi": ">=0.14.6"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+          "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+          "requires": {}
+        }
+      }
+    },
     "abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
diff --git a/package.json b/package.json
index cc5e716f..54c70e31 100644
--- a/package.json
+++ b/package.json
@@ -13,20 +13,25 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@rushstack/eslint-patch": "^1.3.3",
     "@tailwindcss/forms": "^0.5.7",
     "@unhead/vue": "^1.8.8",
     "@vitejs/plugin-vue": "^4.0",
     "@vue/compiler-sfc": "^3.2.41",
+    "@vue/eslint-config-prettier": "^8.0.0",
     "autoprefixer": "^10.4.13",
     "bourbon": "^7.0.0",
     "bourbon-neat": "^4.0.0",
     "clean-css": "^5.1.2",
     "es6-promise": "^4.2.8",
+    "eslint": "^8.49.0",
+    "eslint-plugin-vue": "^9.17.0",
     "natives": "^1.1.6",
     "node-sass": "^8.0.0",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.19",
     "postcss-import": "^14.0.1",
+    "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.3",
     "sass": "^1.56.1",
     "tailwind-scrollbar": "^3.0.0",
@@ -34,17 +39,14 @@
     "vite": "^4.0",
     "vite-plugin-live-reload": "^3.0.1",
     "vite-ssg": "^0.23.5",
-    "vue-router": "^4.2.5",
-    "@rushstack/eslint-patch": "^1.3.3",
-    "@vue/eslint-config-prettier": "^8.0.0",
-    "eslint": "^8.49.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "prettier": "^3.0.3"
+    "vue-router": "^4.2.5"
   },
   "dependencies": {
     "@docsearch/js": "^3.5.2",
     "@headlessui/vue": "^1.7.4",
     "@heroicons/vue": "^2.0.13",
+    "@vueuse/components": "^10.7.2",
+    "@vueuse/core": "^10.7.2",
     "ace-builds": "^1.13.0",
     "chart.js": "^4.4.0",
     "cross-env": "^7.0.3",