feat: migrated to nuxt 4 and tailwind 4

.nvmrc

@@ -0,0 +1 @@
+22

app/assets/css/tailwind.css

@@ -1,7 +1,8 @@
 /* assets/css/tailwind.css */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+/* Enable class-based dark mode in Tailwind v4 */
+@custom-variant dark (&:where(.dark, .dark *));
 
 body {
   font-family: 'Nunito', sans-serif;

app/components/ProjectPanel.vue

@@ -229,7 +229,7 @@ onMounted(() => {
               </span>
             </div>
             <button
-              class="text-rose-500 hover:text-rose-700 dark:text-rose-400 dark:hover:text-rose-600 transition-colors duration-200 ml-2 flex-shrink-0"
+              class="text-rose-500 hover:text-rose-700 dark:text-rose-400 dark:hover:text-rose-600 transition-colors duration-200 ml-2 flex-shrink-0 cursor-pointer"
               aria-label="Delete project"
               @click="initiateDelete($event, project.id)"
             >
@@ -258,7 +258,7 @@ onMounted(() => {
       class="flex-grow flex flex-col items-center space-y-4 p-2"
     >
       <button
-        class="w-10 h-10 rounded-full flex items-center justify-center bg-stone-300 hover:bg-stone-400 dark:bg-stone-500 dark:hover:bg-stone-400 text-stone-800 dark:text-stone-100 transition-colors duration-200"
+        class="w-10 h-10 rounded-full flex items-center justify-center bg-stone-300 hover:bg-stone-400 dark:bg-stone-500 dark:hover:bg-stone-400 text-stone-800 dark:text-stone-100 transition-colors duration-200 cursor-pointer"
         @click="openAddProjectModal"
       >
         <svg
@@ -279,7 +279,7 @@ onMounted(() => {
       <button
         v-for="project in sortedProjects"
         :key="project.id"
-        class="w-10 h-10 rounded-full flex items-center justify-center transition-colors duration-200"
+        class="w-10 h-10 rounded-full flex items-center justify-center transition-colors duration-200 cursor-pointer"
         :class="[
           project.id === currentProjectId
             ? 'bg-stone-300 dark:bg-stone-500 text-stone-800 dark:text-stone-100'
@@ -421,7 +421,7 @@ onMounted(() => {
       <button
         v-for="(action, index) in ['configure', 'upload', 'export', 'home']"
         :key="index"
-        class="w-full p-2 rounded flex items-center justify-center bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500 text-stone-700 dark:text-stone-200 transition-colors duration-200"
+        class="w-full p-2 rounded flex items-center justify-center bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500 text-stone-700 dark:text-stone-200 transition-colors duration-200 cursor-pointer"
         @click="handleAction(action)"
       >
         <svg
@@ -485,13 +485,13 @@ onMounted(() => {
         </p>
         <div class="flex justify-end space-x-2">
           <button
-            class="px-4 py-2 bg-stone-300 text-stone-800 rounded hover:bg-stone-400 transition-colors duration-200"
+            class="px-4 py-2 bg-stone-300 text-stone-800 rounded hover:bg-stone-400 transition-colors duration-200 cursor-pointer"
             @click="cancelDelete"
           >
             Cancel
           </button>
           <button
-            class="px-4 py-2 bg-rose-500 text-white rounded hover:bg-rose-600 transition-colors duration-200"
+            class="px-4 py-2 bg-rose-500 text-white rounded hover:bg-rose-600 transition-colors duration-200 cursor-pointer"
             @click="confirmDeleteProject"
           >
             Delete
@@ -507,7 +507,7 @@ onMounted(() => {
     >
       <div class="bg-white dark:bg-stone-800 p-6 rounded-lg shadow-xl w-full max-w-lg relative">
         <button
-          class="absolute top-4 right-4 text-stone-400 hover:text-stone-600 dark:text-stone-300 dark:hover:text-white transition-colors duration-300"
+          class="absolute top-4 right-4 text-stone-400 hover:text-stone-600 dark:text-stone-300 dark:hover:text-white transition-colors duration-300 cursor-pointer"
           aria-label="Close Modal"
           @click="closeAddProjectModal"
         >

app/components/TreeMap.vue

@@ -6,7 +6,7 @@ import ConfigDrawer from '~/components/config/ConfigDrawer.vue'
 import { useStore } from '~/composables/store'
 import { useProjects } from '~/composables/project'
 
-const chart = ref < HTMLElement | null > (null)
+const chart = ref <HTMLElement | null> (null)
 const store = useStore()
 const { currentProject, renameProject } = useProjects()
 
@@ -61,7 +61,7 @@ const cancelEdit = () => {
             @keyup.esc="cancelEdit"
           >
           <button
-            class="ml-2 text-teal-600 hover:text-teal-700 dark:text-teal-400 dark:hover:text-teal-300"
+            class="ml-2 text-teal-600 hover:text-teal-700 dark:text-teal-400 dark:hover:text-teal-300 cursor-pointer"
             aria-label="Save project name"
             @click="saveEdit"
           >
@@ -82,7 +82,7 @@ const cancelEdit = () => {
           </button>
 
           <button
-            class="ml-2 text-rose-600 hover:text-rose-700 dark:text-rose-400 dark:hover:text-rose-300"
+            class="ml-2 text-rose-600 hover:text-rose-700 dark:text-rose-400 dark:hover:text-rose-300 cursor-pointer"
             aria-label="Cancel editing"
             @click="cancelEdit"
           >
@@ -107,7 +107,7 @@ const cancelEdit = () => {
           <span @dblclick="startEditing">{{ currentProject.name }}</span>
 
           <button
-            class="ml-2 text-stone-600 hover:text-stone-700 dark:text-stone-300 dark:hover:text-stone-200"
+            class="ml-2 text-stone-600 hover:text-stone-700 dark:text-stone-300 dark:hover:text-stone-200 cursor-pointer"
             aria-label="Edit project name"
             @click="startEditing"
           >

app/components/TreeNode.vue

@@ -328,7 +328,7 @@ onMounted(() => {
         class="flex ml-4 space-x-2"
       >
         <button
-          class="p-1 rounded-full bg-black/10 dark:bg-black/10"
+          class="p-1 rounded-full bg-black/10 dark:bg-black/10 cursor-pointer"
           @click.stop="addSiblingNode"
         >
           <svg
@@ -349,7 +349,7 @@ onMounted(() => {
         </button>
 
         <button
-          class="p-1 rounded-full bg-black/10 dark:bg-black/10"
+          class="p-1 rounded-full bg-black/10 dark:bg-black/10 cursor-pointer"
           @click.stop="addChildNode"
         >
           <svg
@@ -371,7 +371,7 @@ onMounted(() => {
 
         <button
           :disabled="store.sections.length === 1 && !store.hasParent(props.node.key)"
-          class="p-1 rounded-full bg-black/10 dark:bg-black/10 disabled:opacity-40"
+          class="p-1 rounded-full bg-black/10 dark:bg-black/10 disabled:opacity-40 cursor-pointer"
           @click.stop="deleteNode"
         >
           <svg

app/components/config/ConfigDrawer.vue

@@ -44,7 +44,7 @@ onMounted(() => {
       >
         <template v-if="drawerMinimized">
           <button
-            class="text-white rounded-full text-lg font-bold h-6 w-6 flex items-center justify-center"
+            class="text-white rounded-full text-lg font-bold h-6 w-6 flex items-center justify-center cursor-pointer"
             aria-label="Expand config"
             @click="toggleMinimize"
           >
@@ -83,7 +83,7 @@ onMounted(() => {
             />
 
             <button
-              class="text-stone-100 hover:text-white bg-stone-600 hover:bg-stone-500 rounded-full p-1 text-lg font-bold flex items-center justify-center transition duration-200"
+              class="text-stone-100 hover:text-white bg-stone-600 hover:bg-stone-500 rounded-full p-1 text-lg font-bold flex items-center justify-center cursor-pointer transition duration-200"
               aria-label="Minimize config"
               @click="toggleMinimize"
             >

app/components/config/StatusManager.vue

@@ -203,7 +203,7 @@ const closeColorPicker = () => {
         />
         <button
           :disabled="safeStatuses.length <= 1"
-          class="p-1 rounded-full bg-stone-200 dark:bg-stone-700 text-stone-600 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-stone-300"
+          class="p-1 rounded-full bg-stone-200 dark:bg-stone-700 text-stone-600 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-600 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition-all duration-300 transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-stone-300"
           aria-label="Remove status"
           @click="removeStatus(index)"
         >
@@ -248,7 +248,7 @@ const closeColorPicker = () => {
     />
     <button
       :disabled="!newStatus.name || !newStatus.color"
-      class="p-1 rounded-full bg-stone-200 dark:bg-stone-700 text-stone-600 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-stone-300"
+      class="p-1 rounded-full bg-stone-200 dark:bg-stone-700 text-stone-600 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-600 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition-all duration-300 transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-stone-300"
       aria-label="Add new status"
       @click="addNewStatus"
     >
@@ -281,7 +281,7 @@ const closeColorPicker = () => {
               Choose a Color
             </h3>
             <button
-              class="text-stone-400 hover:text-stone-600 dark:text-stone-300 dark:hover:text-white transition-colors duration-300"
+              class="text-stone-400 hover:text-stone-600 dark:text-stone-300 dark:hover:text-white cursor-pointer transition-colors duration-300"
               aria-label="Close Color Picker"
               @click="closeColorPicker"
             >
@@ -306,7 +306,7 @@ const closeColorPicker = () => {
             <button
               v-for="color in pastelColors"
               :key="color"
-              class="w-full pt-full rounded-full border border-stone-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-400 transition-transform duration-200 hover:scale-110"
+              class="w-full pt-full rounded-full border border-stone-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-400 transition-transform duration-200 hover:scale-110"
               :style="{ backgroundColor: color }"
               :aria-label="`Select color ${color}`"
               @click="updateStatusColor(color)"

app/components/project/ProjectForm.vue

@@ -34,7 +34,7 @@ const loadConfigFromUserInput = async () => {
     await loadFromUserInput(jsonPreview.value)
     sampleError.value = ''
   }
-  catch (error) {
+  catch {
     sampleError.value = 'Invalid JSON format'
   }
   finally {

app/components/project/RecursiveSection.vue

@@ -72,7 +72,7 @@ const removeNode = () => {
 
         <div class="flex space-x-1">
           <button
-            class="text-stone-500 hover:text-stone-600 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-300 p-1"
+            class="text-stone-500 hover:text-stone-600 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-300 p-1 cursor-pointer"
             @click="addSibling"
           >
             <svg
@@ -91,7 +91,7 @@ const removeNode = () => {
           </button>
 
           <button
-            class="text-stone-500 hover:text-stone-600 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-300 p-1"
+            class="text-stone-500 hover:text-stone-600 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-300 p-1 cursor-pointer"
             @click="addChild"
           >
             <svg
@@ -112,7 +112,7 @@ const removeNode = () => {
           </button>
 
           <button
-            class="text-stone-500 hover:text-stone-600 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-300 p-1"
+            class="text-stone-500 hover:text-stone-600 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-300 p-1 cursor-pointer"
             @click="removeNode"
           >
             <svg

app/components/ui/CloverButton.vue

@@ -50,7 +50,7 @@ const stateClasses = computed(() => {
 })
 
 const buttonClasses = computed(() => [
-  'flex items-center justify-center rounded shadow transition-all duration-200',
+  'flex items-center justify-center rounded shadow transition-all duration-200 cursor-pointer',
   'focus:ring-2 focus:ring-offset-2 focus:ring-stone-500/20',
   sizeClasses.value,
   stateClasses.value,

app/components/ui/DarkModeToggle.vue

@@ -41,7 +41,7 @@ const buttonClasses = computed(() => {
     props.position,
     props.dark ? 'text-stone-100 hover:text-white bg-stone-600 hover:bg-stone-500 dark:bg-stone-600 dark:hover:text-stone-200 dark:hover:bg-stone-500' : 'text-stone-600 hover:text-stone-800 bg-stone-100 hover:bg-white dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-100 dark:hover:text-white',
     props.size === 'sm' ? 'p-1' : 'p-2',
-    'transition-colors duration-300 rounded-full shadow-sm',
+    'transition-colors duration-300 rounded-full shadow-sm cursor-pointer',
   ]
 })
 

app/composables/capture.ts

@@ -44,7 +44,7 @@ export function useTreemapCapture() {
     })
 
     try {
-      treemapElement.offsetHeight // Force layout recalculation
+      void treemapElement.offsetHeight // Force layout recalculation
 
       const dataUrl = await domtoimage.toPng(treemapElement, {
         height: contentHeight,

app/composables/config.ts

@@ -50,7 +50,7 @@ export function useConfig() {
       createProject(model, sections)
       router.push(`/projects/${store.currentProject?.id}`)
     }
-    catch (error) {
+    catch {
       snackbar.add({
         type: 'error',
         title: 'Error loading data from model.',
@@ -79,7 +79,7 @@ export function useConfig() {
 
           return true
         }
-        catch (error) {
+        catch {
           displayInvalidDataError()
 
           return false
@@ -130,7 +130,7 @@ export function useConfig() {
 
       return true
     }
-    catch (error) {
+    catch {
       snackbar.add({
         type: 'error',
         title: 'Error fetching data. Please check the URL and try again.',
@@ -155,8 +155,7 @@ export function useConfig() {
 
       return true
     }
-    catch (error) {
-      console.log(error)
+    catch {
       displayInvalidDataError()
 
       return false

app/composables/store.ts

@@ -53,9 +53,7 @@ export const useStore = defineStore('store', {
     darkMode: false,
     isEditingMode: false,
   }),
-  persist: {
-    storage: persistedState.localStorage,
-  },
+  persist: true,
   actions: {
     addProject(project: Project, sections: Section[] = []) {
       this.projects.push(project)

app/pages/index.vue

@@ -273,6 +273,7 @@ onMounted(() => {
               <!-- Tab Navigation -->
               <div class="flex flex-col md:flex-row md:space-x-4 mb-6">
                 <button
+                  class="cursor-pointer"
                   :class="[
                     ' flex-1 py-2 px-4 rounded-t-lg font-medium transition-colors duration-200',
                     activeTab === 'sample'
@@ -284,6 +285,7 @@ onMounted(() => {
                   Sample Data
                 </button>
                 <button
+                  class="cursor-pointer"
                   :class="[
                     'flex-1 py-2 px-4 rounded-t-lg font-medium transition-colors duration-200',
                     activeTab === 'custom'