feat: upgraded to next 15 and tailwind 4

heristop · heristop · commit 882c800b73ab · 2025-10-13T09:40:29.000+02:00
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,4 @@
+shamefully-hoist=true
+node-linker=hoisted
+auto-install-peers=true
+strict-peer-dependencies=false
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -0,0 +1,67 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Clover Map is a Nuxt 4 project management application that visualizes workflows using interactive treemap visualizations. It's a client-side application with no backend database - all data is stored locally in the browser using Pinia's persisted state.
+
+## Commands
+
+### Development
+- `pnpm run dev` - Start the development server at http://localhost:3000
+- `pnpm run build` - Build the application for production
+- `pnpm run start` - Start production server
+
+### Testing
+- `pnpm run test` - Run unit tests with Vitest in watch mode
+- `pnpm run test:coverage` - Run tests with coverage report
+- `pnpm run test:e2e` - Run Playwright E2E tests
+- `pnpm run test:precommit` - Run tests once (used by pre-commit hooks)
+
+### Code Quality
+- `pnpm run lint` - Run ESLint on all files
+- `pnpm run lint --fix` - Auto-fix linting issues
+
+## Architecture
+
+### Tech Stack
+- **Framework**: Nuxt 4.1.3 with Vue 3.5.7 composition API
+- **Styling**: Tailwind CSS v4 with dark mode support
+- **State Management**: Pinia v3 with pinia-plugin-persistedstate (browser storage)
+- **Testing**: Vitest v3 for unit tests, Playwright for E2E tests
+- **Package Manager**: pnpm
+
+### Core Data Model
+The application revolves around three main types (defined in `types/index.ts`):
+- **Project**: Contains sections and custom statuses
+- **Section**: Hierarchical tree nodes with key, name, optional status, and children
+- **Status**: Customizable workflow states with name and color
+
+### Application Structure
+- **app/components/** - Vue components organized by feature
+  - `TreeMap.vue` and `TreeNode.vue` - Core treemap visualization
+  - `ProjectPanel.vue` - Sidebar project management interface
+  - `config/` - Configuration drawer components for status and view settings
+  - `project/` - Project creation and editing components
+  - `ui/` - Reusable UI components
+- **app/composables/** - Shared logic and Pinia store
+  - `store.ts` - Central Pinia store for all application state
+  - Other composables provide feature-specific logic
+- **app/pages/** - Nuxt page routing
+  - `index.vue` - Main project list
+  - `projects/[id].vue` - Individual project treemap view
+
+### State Management
+The entire application state is managed through a single Pinia store (`app/composables/store.ts`) that:
+- Manages projects, sections, and their relationships
+- Handles UI state (panel collapse, dark mode, view settings)
+- Persists all data to browser storage automatically
+- Maintains a parent-child mapping for efficient tree navigation
+
+### Key Features Implementation
+- **Treemap Visualization**: Recursive components render hierarchical data with dynamic sizing based on viewport settings
+- **Drag & Drop**: Native HTML5 drag and drop for reorganizing sections
+- **Status Management**: Customizable statuses with color coding that cycle on click
+- **Data Persistence**: All changes automatically save to browser storage via Pinia plugin
+- **Import/Export**: JSON file upload/download for project backup and sharing
diff --git a/app/assets/css/tailwind.css b/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;
diff --git a/app/components/ProjectPanel.vue b/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"
         >
diff --git a/app/components/TreeMap.vue b/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"
           >
diff --git a/app/components/TreeNode.vue b/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
diff --git a/app/components/config/ConfigDrawer.vue b/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"
             >
diff --git a/app/components/config/StatusManager.vue b/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)"
diff --git a/app/components/project/ProjectForm.vue b/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 {
diff --git a/app/components/project/RecursiveSection.vue b/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
diff --git a/app/components/ui/CloverButton.vue b/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,
diff --git a/app/components/ui/DarkModeToggle.vue b/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',
   ]
 })
 
diff --git a/app/composables/capture.ts b/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,
diff --git a/app/composables/config.ts b/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
diff --git a/app/composables/store.ts b/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)
diff --git a/app/pages/index.vue b/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'
diff --git a/app/validator.js b/app/validator.js
diff --git a/app/validator.ts b/app/validator.ts
diff --git a/eslint.config.mjs b/eslint.config.mjs
diff --git a/nuxt.config.ts b/nuxt.config.ts
diff --git a/package.json b/package.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tests/setup.ts b/tests/setup.ts
diff --git a/vitest.config.ts b/vitest.config.ts

Original file line number	Diff line number	Diff line change
`@@ -328,7 +328,7 @@ onMounted(() => {`
`328`	`328`	`class="flex ml-4 space-x-2"`
`329`	`329`	`>`
`330`	`330`	`<button`
`331`		`- class="p-1 rounded-full bg-black/10 dark:bg-black/10"`
	`331`	`+ class="p-1 rounded-full bg-black/10 dark:bg-black/10 cursor-pointer"`
`332`	`332`	`@click.stop="addSiblingNode"`
`333`	`333`	`>`
`334`	`334`	`<svg`
`@@ -349,7 +349,7 @@ onMounted(() => {`
`349`	`349`	`</button>`
`350`	`350`
`351`	`351`	`<button`
`352`		`- class="p-1 rounded-full bg-black/10 dark:bg-black/10"`
	`352`	`+ class="p-1 rounded-full bg-black/10 dark:bg-black/10 cursor-pointer"`
`353`	`353`	`@click.stop="addChildNode"`
`354`	`354`	`>`
`355`	`355`	`<svg`
`@@ -371,7 +371,7 @@ onMounted(() => {`
`371`	`371`
`372`	`372`	`<button`
`373`	`373`	`:disabled="store.sections.length === 1 && !store.hasParent(props.node.key)"`
`374`		`- class="p-1 rounded-full bg-black/10 dark:bg-black/10 disabled:opacity-40"`
	`374`	`+ class="p-1 rounded-full bg-black/10 dark:bg-black/10 disabled:opacity-40 cursor-pointer"`
`375`	`375`	`@click.stop="deleteNode"`
`376`	`376`	`>`
`377`	`377`	`<svg`
Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ onMounted(() => {`
`44`	`44`	`>`
`45`	`45`	`<template v-if="drawerMinimized">`
`46`	`46`	`<button`
`47`		`- class="text-white rounded-full text-lg font-bold h-6 w-6 flex items-center justify-center"`
	`47`	`+ class="text-white rounded-full text-lg font-bold h-6 w-6 flex items-center justify-center cursor-pointer"`
`48`	`48`	`aria-label="Expand config"`
`49`	`49`	`@click="toggleMinimize"`
`50`	`50`	`>`
`@@ -83,7 +83,7 @@ onMounted(() => {`
`83`	`83`	`/>`
`84`	`84`
`85`	`85`	`<button`
`86`		`- 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"`
	`86`	`+ 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"`
`87`	`87`	`aria-label="Minimize config"`
`88`	`88`	`@click="toggleMinimize"`
`89`	`89`	`>`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ const loadConfigFromUserInput = async () => {`
`34`	`34`	`await loadFromUserInput(jsonPreview.value)`
`35`	`35`	`sampleError.value = ''`
`36`	`36`	`}`
`37`		`- catch (error) {`
	`37`	`+ catch {`
`38`	`38`	`sampleError.value = 'Invalid JSON format'`
`39`	`39`	`}`
`40`	`40`	`finally {`