From 49ab5d8b697ca04a900da1147d9be4b725178d59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20Mog=C3=A8re?= <heristop@yahoo.fr>
Date: Fri, 5 Jul 2024 22:03:36 +0200
Subject: [PATCH] refactor: use composables

---
 .github/workflows/vitest.yml                  |  19 ++
 .gitignore                                    |   2 +
 app/components/ConfigDrawer.vue               |   6 -
 app/components/StatusManager.vue              |  31 +--
 app/components/TreeNode.vue                   | 131 +++--------
 app/components/ViewportSettings.vue           |   4 +-
 app/composables/config.ts                     |   2 +-
 app/composables/node.ts                       |  39 ++++
 app/composables/section.ts                    |  58 +++++
 app/composables/status.ts                     |  60 +++++
 app/composables/store.ts                      | 153 ++++---------
 app/composables/style.ts                      |  52 +++++
 {tests => e2e}/index.spec.ts                  |   6 +-
 nuxt.config.ts                                |   1 +
 package.json                                  |   9 +-
 playwright.config.ts                          |   2 +-
 pnpm-lock.yaml                                | 214 ++++++++++++++++++
 tests/composables/useNodeOperations.test.ts   |  44 ++++
 tests/composables/useNodeStyles.test.ts       |  69 ++++++
 .../composables/useSectionManagement.test.ts  |  57 +++++
 tests/composables/useStatusManagement.test.ts |  74 ++++++
 tests/composables/useStore.test.ts            | 146 ++++++++++++
 22 files changed, 933 insertions(+), 246 deletions(-)
 create mode 100644 .github/workflows/vitest.yml
 create mode 100644 app/composables/node.ts
 create mode 100644 app/composables/section.ts
 create mode 100644 app/composables/status.ts
 create mode 100644 app/composables/style.ts
 rename {tests => e2e}/index.spec.ts (97%)
 create mode 100644 tests/composables/useNodeOperations.test.ts
 create mode 100644 tests/composables/useNodeStyles.test.ts
 create mode 100644 tests/composables/useSectionManagement.test.ts
 create mode 100644 tests/composables/useStatusManagement.test.ts
 create mode 100644 tests/composables/useStore.test.ts

diff --git a/.github/workflows/vitest.yml b/.github/workflows/vitest.yml
new file mode 100644
index 0000000..0605d6d
--- /dev/null
+++ b/.github/workflows/vitest.yml
@@ -0,0 +1,19 @@
+name: Vitest
+
+on: [push]
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm install -g pnpm && pnpm install
+      - name: test
+        run: |
+          pnpm test:coverage
diff --git a/.gitignore b/.gitignore
index 6b5a902..29cf1db 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,3 +36,5 @@ logs
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+/coverage
+/app/coverage
\ No newline at end of file
diff --git a/app/components/ConfigDrawer.vue b/app/components/ConfigDrawer.vue
index 1fe5c9d..d46a3d2 100644
--- a/app/components/ConfigDrawer.vue
+++ b/app/components/ConfigDrawer.vue
@@ -221,10 +221,4 @@ onMounted(() => {
   display: flex;
   justify-content: flex-end;
 }
-.status-item {
-  cursor: grab;
-}
-.status-item:active {
-  cursor: grabbing;
-}
 </style>
diff --git a/app/components/StatusManager.vue b/app/components/StatusManager.vue
index b9ac1a1..1d92ef7 100644
--- a/app/components/StatusManager.vue
+++ b/app/components/StatusManager.vue
@@ -1,28 +1,26 @@
 <script setup lang="ts">
 import { ref, computed, reactive } from 'vue'
 import { useStore, pastelColors } from '~/composables/store'
+import { useStatusManagement } from '~/composables/status'
 
+const { addStatus, removeStatus } = useStatusManagement()
 const store = useStore()
 const statuses = computed(() => store.statuses)
 const inputFocused = ref(false)
 
 const newStatus = reactive({
   name: '',
-  color: getNextColor() || '#FFFFFF', // Ensure it's always a string
+  color: getNextColor() || '#FFFFFF',
 })
 
 const addNewStatus = () => {
   if (newStatus.name && newStatus.color) {
-    store.addStatus({ name: newStatus.name, color: newStatus.color })
+    addStatus({ name: newStatus.name, color: newStatus.color })
     newStatus.name = ''
-    newStatus.color = getNextColor() || '#FFFFFF' // Ensure it's always a string
+    newStatus.color = getNextColor() || '#FFFFFF'
   }
 }
 
-const removeStatus = (index: number) => {
-  store.removeStatus(index)
-}
-
 const disableStatusDrag = () => {
   inputFocused.value = true
 }
@@ -67,13 +65,13 @@ function getNextColor() {
   <div
     v-for="(status, index) in statuses"
     :key="index"
-    class="flex items-center space-x-2 space-y-2 align-middle status-item text-stone-800"
+    class="flex items-center space-x-2 space-y-2 align-middle cursor-grab active:cursor-grabbing text-stone-800"
     :draggable="!inputFocused"
     @dragstart="startStatusDrag($event, index)"
     @dragover.prevent
     @drop="dropStatus($event, index)"
   >
-    <div class="text-stone-500 dark:text-stone-300 w-20 text-xs mt-2">
+    <div class="text-stone-600 dark:text-stone-300 w-20 text-xs mt-2">
       {{ index + 1 }}.
     </div>
 
@@ -94,7 +92,7 @@ function getNextColor() {
     >
     <button
       :disabled="statuses.length <= 1"
-      class="text-stone-500 dark:text-stone-300 hover:text-stone-400 dark:hover:text-stone-100 font-semibold w-[200px] disabled:text-stone-500 text-xs"
+      class="text-stone-600 dark:text-stone-300 hover:text-stone-400 dark:hover:text-stone-100 font-semibold w-[200px] disabled:text-stone-500 text-xs"
       @click="removeStatus(index)"
     >
       remove
@@ -102,7 +100,7 @@ function getNextColor() {
   </div>
 
   <div class="flex items-center space-x-2 space-y-2 align-middle status-item text-stone-600 mb-6">
-    <div class="text-stone-500 dark:text-stone-300 w-20 text-xs mt-2">
+    <div class="text-stone-600 dark:text-stone-300 w-20 text-xs mt-2">
       {{ statuses.length + 1 }}.
     </div>
     <input
@@ -122,19 +120,10 @@ function getNextColor() {
     >
     <button
       :disabled="!newStatus.name || !newStatus.color"
-      class="text-stone-500 dark:text-stone-300 hover:text-stone-400 dark:hover:text-stone-100 font-semibold w-[200px] text-xs disabled:cursor-not-allowed disabled:opacity-50"
+      class="text-stone-600 dark:text-stone-300 hover:text-stone-400 dark:hover:text-stone-100 font-semibold w-[200px] text-xs disabled:cursor-not-allowed disabled:opacity-50"
       @click="addNewStatus"
     >
       add
     </button>
   </div>
 </template>
-
-<style scoped>
-.status-item {
-  cursor: grab;
-}
-.status-item:active {
-  cursor: grabbing;
-}
-</style>
diff --git a/app/components/TreeNode.vue b/app/components/TreeNode.vue
index cba6581..913061d 100644
--- a/app/components/TreeNode.vue
+++ b/app/components/TreeNode.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, type StyleValue } from 'vue'
+import { ref, computed, onMounted, watchEffect } from 'vue'
 import { useStore } from '~/composables/store'
 import type { Section } from '~~/types'
+import { useSectionManagement } from '~/composables/section'
+import { useNodeOperations } from '~/composables/node'
+import { useNodeStyles } from '~/composables/style'
+import { useStatusManagement } from '~/composables/status'
 
 const props = defineProps<{ node: Section, depth: number }>()
 const emit = defineEmits(['status-updated'])
@@ -10,66 +14,33 @@ const isSuccessNode = ref(false)
 const nodeStatus = ref(props.node.status || store.statuses[0]?.name)
 const isDragging = ref(false)
 
+const { updateSectionKey, updateSectionName, deleteSection } = useSectionManagement()
+const { addSection, addSiblingSection, addRootSection } = useNodeOperations()
+const { getNodeStyles } = useNodeStyles()
+const { updateSectionStatus } = useStatusManagement()
+
 const localKey = ref(props.node.key)
 const localName = ref(props.node.name)
 
-const updateNodeKey = (newKey: string) => {
-  store.updateSectionKey(props.node.key, newKey)
-}
-
-const updateNodeName = (newName: string) => {
-  store.updateSectionName(props.node.key, newName)
-}
-
 const displayContent = computed({
   get: () => store.displayLabel === 'key' ? localKey.value : localName.value,
   set: (value) => {
     if (store.displayLabel === 'key') {
       localKey.value = value
-      updateNodeKey(value)
+      updateSectionKey(props.node.key, value)
     }
     else {
       localName.value = value
-      updateNodeName(value)
+      updateSectionName(props.node.key, value)
     }
   },
 })
 
-const minWidth = computed(() => store.minWidth)
-const minHeight = computed(() => store.minHeight)
-const duplicateKeys = computed(() => store.duplicateProjects.keys)
-
-const getNodeStyles = (node: Section, depth: number) => {
-  const statusObj = store.statuses.find((s: { name: string | undefined }) => s.name === node.status)
-  let backgroundColor = statusObj ? statusObj.color : '#D44D8'
-  backgroundColor = darkenColor(backgroundColor, depth * 6)
-
-  const isDuplicate = duplicateKeys.value.includes(node.key)
-
-  return {
-    backgroundColor: backgroundColor,
-    borderColor: isDuplicate ? '#FF7B7B' : backgroundColor,
-    minWidth: `${minWidth.value}px`,
-    minHeight: `${minHeight.value}px`,
-    margin: '4px',
-    padding: '8px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '8px',
-    boxSizing: 'border-box',
-    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
-    transition: 'transform 0.2s, box-shadow 0.2s, background-color 0.3s',
-    borderStyle: isDuplicate ? 'dashed' : 'solid',
-  } as StyleValue
-}
-
 const checkIfSuccessNode = (node: Section) => {
   if (store.statuses?.length > 0 && node.status === store.statuses[store.statuses.length - 1]?.name) {
     isSuccessNode.value = true
     return
   }
-
   isSuccessNode.value = false
 }
 
@@ -77,37 +48,15 @@ const updateParentStatus = () => {
   emit('status-updated')
 }
 
-const darkenColor = (color: string, percent: number) => {
-  if (!/^#[0-9A-F]{6}$/i.test(color)) {
-    return color
-  }
-
-  const num = parseInt(color.replace('#', ''), 16),
-    amt = Math.round(2.55 * percent),
-    R = Math.max((num >> 16) - amt, 0),
-    G = Math.max((num >> 8 & 0x00FF) - amt, 0),
-    B = Math.max((num & 0x0000FF) - amt, 0)
-
-  return '#' + (0x1000000 + R * 0x10000 + G * 0x100 + B).toString(16).slice(1).toUpperCase()
-}
-
 const toggleCollapse = (event: MouseEvent) => {
   event.stopPropagation()
-
-  if (document.startViewTransition) {
-    document.startViewTransition(() => {
-      store.updateSectionCollapse(props.node.key)
-    })
-  }
-  else {
-    store.updateSectionCollapse(props.node.key)
-  }
+  store.updateSectionCollapse(props.node.key)
 }
 
 const getUniqueKeyName = (base: string, type: 'key' | 'name') => {
   let index = 1
   let newName = `${base}${index}`
-  const allSections = []
+  const allSections: Section[] = []
 
   const gatherSections = (sections: Section[]) => {
     sections.forEach((section) => {
@@ -139,15 +88,7 @@ const addNode = (event: MouseEvent) => {
     isCollapsed: false,
   }
 
-  if (document.startViewTransition) {
-    document.startViewTransition(() => {
-      store.addSection(props.node.key, newNode)
-    })
-
-    return
-  }
-
-  store.addSection(props.node.key, newNode)
+  addSection(props.node.key, newNode)
 }
 
 const addSiblingNode = (event: MouseEvent) => {
@@ -166,43 +107,22 @@ const addSiblingNode = (event: MouseEvent) => {
   const parentKey = store.parentMap[props.node.key]
 
   if (parentKey) {
-    if (document.startViewTransition) {
-      document.startViewTransition(() => {
-        store.addSiblingSection(parentKey, props.node.key, newNode)
-      })
-    }
-    else {
-      store.addSiblingSection(parentKey, props.node.key, newNode)
-    }
+    addSiblingSection(parentKey, props.node.key, newNode)
   }
   else {
-    if (document.startViewTransition) {
-      document.startViewTransition(() => {
-        store.addRootSection(newNode)
-      })
-    }
-    else {
-      store.addRootSection(newNode)
-    }
+    addRootSection(newNode)
   }
 }
 
 const deleteNode = (event: MouseEvent) => {
   event.stopPropagation()
-
-  if (document.startViewTransition) {
-    document.startViewTransition(() => {
-      store.deleteSection(props.node.key)
-    })
-
-    return
-  }
-
-  store.deleteSection(props.node.key)
+  deleteSection(props.node.key)
 }
 
 const handleDragStart = (event: DragEvent) => {
-  if (isDragging.value) return
+  if (isDragging.value) {
+    return
+  }
 
   event.stopPropagation()
   event.dataTransfer?.setData('text/plain', props.node.key)
@@ -212,6 +132,7 @@ const handleDrop = (event: DragEvent) => {
   event.preventDefault()
   event.stopPropagation()
   const draggedKey = event.dataTransfer?.getData('text/plain')
+
   if (draggedKey && draggedKey !== props.node.key) {
     store.swapSections(props.node.key, draggedKey)
   }
@@ -246,6 +167,7 @@ const handleClick = (event: MouseEvent) => {
 
   if (!props.node.children || !props.node.children.length) {
     updateStatus()
+
     return
   }
 }
@@ -256,7 +178,7 @@ const updateStatus = () => {
     const nextStatusIndex = (store.statuses.indexOf(newStatus!) + 1) % store.statuses.length
     const nextStatus = store.statuses[nextStatusIndex]?.name
     nodeStatus.value = nextStatus
-    store.updateSectionStatus(props.node.key || '', nextStatus || '')
+    updateSectionStatus(props.node.key || '', nextStatus || '')
 
     if (store.statuses.length > 0 && nextStatus === store.statuses[store.statuses.length - 1]?.name) {
       applySuccessAnimation(props.node)
@@ -291,7 +213,7 @@ const applySuccessAnimation = (node: Section) => {
     :class="{ 'success-animation': isSuccessNode }"
     :style="nodeStyle"
     :data-node-key="node.key"
-    draggable="true"
+    :draggable="!store.isEditingMode"
     @dragstart="handleDragStart"
     @drop="handleDrop"
     @dragover="handleDragOver"
@@ -346,7 +268,9 @@ const applySuccessAnimation = (node: Section) => {
         @focus="isDragging = true"
         @blur="isDragging = false"
       >
+
       <span v-else>{{ displayContent }}</span>
+
       <div
         v-if="store.isEditingMode"
         class="flex ml-4 space-x-2"
@@ -506,6 +430,7 @@ const applySuccessAnimation = (node: Section) => {
   background-color: rgba(0, 0, 0, 0.25);
   pointer-events: auto;
   padding: 8px;
+  margin: 2px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/app/components/ViewportSettings.vue b/app/components/ViewportSettings.vue
index 5b8cea6..d172719 100644
--- a/app/components/ViewportSettings.vue
+++ b/app/components/ViewportSettings.vue
@@ -101,7 +101,7 @@ const captureTreeMap = () => {
 
   <div class="flex items-center space-x-4 mb-4 px-2">
     <div class="flex flex-col items-start space-y-2">
-      <span class="text-xs text-stone-500 dark:text-stone-300">Width</span>
+      <span class="text-xs text-stone-600 dark:text-stone-300">Width</span>
       <input
         v-model="minWidth"
         type="range"
@@ -112,7 +112,7 @@ const captureTreeMap = () => {
     </div>
 
     <div class="flex flex-col items-start space-y-2">
-      <span class="text-xs text-stone-500 dark:text-stone-300">Height</span>
+      <span class="text-xs text-stone-600 dark:text-stone-300">Height</span>
       <input
         v-model="minHeight"
         type="range"
diff --git a/app/composables/config.ts b/app/composables/config.ts
index cd0f5c8..19ed9be 100644
--- a/app/composables/config.ts
+++ b/app/composables/config.ts
@@ -64,7 +64,7 @@ export function useConfig() {
     const url = URL.createObjectURL(blob)
     const link = document.createElement('a')
     link.href = url
-    link.download = `tree-pulse-${new Date().toISOString()}.json`
+    link.download = `treemap-pulse-${new Date().toISOString()}.json`
     link.click()
     URL.revokeObjectURL(url)
   }
diff --git a/app/composables/node.ts b/app/composables/node.ts
new file mode 100644
index 0000000..39a8a96
--- /dev/null
+++ b/app/composables/node.ts
@@ -0,0 +1,39 @@
+import { useStore } from '~/composables/store'
+import type { Section } from '~~/types'
+
+export function useNodeOperations() {
+  const store = useStore()
+
+  const addSection = (parentKey: string, newSection: Section) => {
+    const parent = store.findSectionByKey(parentKey)
+
+    if (parent) {
+      parent.children = parent.children || []
+      parent.children.push(newSection)
+      store.parentMap[newSection.key] = parentKey
+    }
+  }
+
+  const addSiblingSection = (parentKey: string, siblingKey: string, newSibling: Section) => {
+    const parent = store.findSectionByKey(parentKey)
+    if (parent && parent.children) {
+      const index = parent.children.findIndex(child => child.key === siblingKey)
+
+      if (index !== -1) {
+        parent.children.splice(index + 1, 0, newSibling)
+        store.parentMap[newSibling.key] = parentKey
+      }
+    }
+  }
+
+  const addRootSection = (newSection: Section) => {
+    store.sections.push(newSection)
+    store.parentMap[newSection.key] = null
+  }
+
+  return {
+    addSection,
+    addSiblingSection,
+    addRootSection,
+  }
+}
diff --git a/app/composables/section.ts b/app/composables/section.ts
new file mode 100644
index 0000000..43681b1
--- /dev/null
+++ b/app/composables/section.ts
@@ -0,0 +1,58 @@
+import { useStore } from '~/composables/store'
+import type { Section } from '~~/types'
+
+export function useSectionManagement() {
+  const store = useStore()
+
+  const updateSectionKey = (key: string, newKey: string) => {
+    const section = findSectionByKey(key)
+    if (section) {
+      section.key = newKey
+    }
+  }
+
+  const updateSectionName = (key: string, newName: string) => {
+    const section = findSectionByKey(key)
+    if (section) {
+      section.name = newName
+    }
+  }
+
+  const deleteSection = (key: string) => {
+    const deleteRecursively = (sections: Section[], key: string): boolean => {
+      const index = sections.findIndex(section => section.key === key)
+      if (index !== -1) {
+        sections.splice(index, 1)
+        Reflect.deleteProperty(store.parentMap, key)
+        return true
+      }
+      return sections.some(section => section.children && deleteRecursively(section.children, key))
+    }
+    deleteRecursively(store.sections, key)
+  }
+
+  const findSectionByKey = (key: string): Section | null | undefined => {
+    const findRecursively = (sections: Section[]): Section | null | undefined => {
+      for (const section of sections) {
+        if (section.key === key) {
+          return section
+        }
+        if (section.children) {
+          const found = findRecursively(section.children)
+          if (found) {
+            return found
+          }
+        }
+      }
+      return null
+    }
+    return findRecursively(store.sections)
+  }
+
+  return {
+    updateSectionKey,
+    updateSectionName,
+    deleteSection,
+    findSectionByKey,
+  }
+}
diff --git a/app/composables/status.ts b/app/composables/status.ts
new file mode 100644
index 0000000..941ce08
--- /dev/null
+++ b/app/composables/status.ts
@@ -0,0 +1,60 @@
+import { useStore } from '~/composables/store'
+import type { Status, Section } from '~~/types'
+
+export function useStatusManagement() {
+  const store = useStore()
+
+  const addStatus = (status: Status) => {
+    store.statuses.push(status)
+  }
+
+  const updateStatus = (index: number, status: Status) => {
+    store.statuses[index] = status
+  }
+
+  const removeStatus = (index: number) => {
+    store.statuses.splice(index, 1)
+  }
+
+  const updateSectionStatus = (key: string, status: string) => {
+    const section = store.findSectionByKey(key)
+    if (section) {
+      section.status = status
+      updateParentStatuses()
+    }
+  }
+
+  const updateParentStatuses = () => {
+    const getStatusIndex = (status: string) => store.statuses.findIndex(s => s.name === status)
+
+    const updateStatusRecursively = (node: Section) => {
+      if (!node.children || !node.children.length) {
+        return
+      }
+
+      node.children.forEach(updateStatusRecursively)
+      const statuses = node.children.map(child => child.status)
+      const uniqueStatuses = [...new Set(statuses)]
+
+      if (uniqueStatuses.length === 1) {
+        node.status = uniqueStatuses[0]
+        return
+      }
+
+      const leastAdvancedStatus = uniqueStatuses.reduce((prev, curr) => {
+        return getStatusIndex(curr || '') < getStatusIndex(prev || '') ? curr : prev || ''
+      }, uniqueStatuses[0] || '')
+      node.status = leastAdvancedStatus
+    }
+
+    store.sections.forEach(updateStatusRecursively)
+  }
+
+  return {
+    addStatus,
+    updateStatus,
+    removeStatus,
+    updateSectionStatus,
+    updateParentStatuses,
+  }
+}
diff --git a/app/composables/store.ts b/app/composables/store.ts
index c3c7d32..0c24a38 100644
--- a/app/composables/store.ts
+++ b/app/composables/store.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
 import type { Section, Status } from '~~/types'
+import { useStatusManagement } from '~/composables/status'
+import { useSectionManagement } from '~/composables/section'
 
 const defaultStatus = [
   { name: 'To Do', color: '#FFB3BA' },
@@ -28,8 +29,22 @@ export const pastelColors = [
   '#B19CD9', // Pastel Lilac
 ]
 
+type State = {
+  sections: Section[]
+  parentMap: { [key: string]: string | null }
+  configLoaded: boolean
+  dialogMinimized: boolean
+  minWidth: number
+  minHeight: number
+  displayLabel: string
+  statuses: Status[]
+  viewMode: string
+  darkMode: boolean
+  isEditingMode: boolean
+}
+
 export const useStore = defineStore('store', {
-  state: () => ({
+  state: (): State => ({
     sections: [] as Section[],
     parentMap: {} as { [key: string]: string | null },
     configLoaded: false,
@@ -37,7 +52,7 @@ export const useStore = defineStore('store', {
     minWidth: 80,
     minHeight: 10,
     displayLabel: 'name',
-    statuses: ref<Status[]>(defaultStatus),
+    statuses: defaultStatus,
     viewMode: 'flex',
     darkMode: false,
     isEditingMode: false,
@@ -60,6 +75,8 @@ export const useStore = defineStore('store', {
       return $fetch(`/api/config?model=${model}`, { method: 'get' })
     },
     setSections(sections: Section[]) {
+      const { updateParentStatuses } = useStatusManagement()
+
       const sectionArray = Object.values(sections)
       const extractedStatuses = this.extractStatuses(sectionArray)
 
@@ -69,8 +86,8 @@ export const useStore = defineStore('store', {
 
       const formattedSections = this.formatSections(sectionArray)
 
-      this.sections = this.applyDefaultStatus(formattedSections, this.sections)
-      this.updateParentStatuses()
+      this.sections = this.applyDefaultStatus(formattedSections)
+      updateParentStatuses()
       this.configLoaded = true
     },
     formatSections(sections: Section[]): Section[] {
@@ -87,9 +104,11 @@ export const useStore = defineStore('store', {
         }
       })
     },
-    applyDefaultStatus(sections: Section[], existingProjects: Section[]): Section[] {
+    applyDefaultStatus(sections: Section[]): Section[] {
+      const { findSectionByKey } = useSectionManagement()
+
       return sections.map((node) => {
-        const existingProject = this.findSectionByKey(node.key, existingProjects)
+        const existingProject = findSectionByKey(node.key)
 
         if (!node.status) {
           if (existingProject) {
@@ -102,7 +121,7 @@ export const useStore = defineStore('store', {
         }
 
         if (node.children) {
-          node.children = this.applyDefaultStatus(node.children, existingProject?.children ?? [])
+          node.children = this.applyDefaultStatus(node.children)
         }
 
         return node
@@ -136,33 +155,13 @@ export const useStore = defineStore('store', {
         color: statusColors[status] || '',
       }))
     },
-    updateSectionStatus(key: string, status: string) {
-      const section = this.findSectionByKey(key, this.sections)
-
-      if (section) {
-        section.status = status
-        this.updateParentStatuses()
-      }
-    },
     updateSectionCollapse(key: string) {
-      const section = this.findSectionByKey(key, this.sections)
+      const section = this.findSectionByKey(key)
 
       if (section) {
         section.isCollapsed = !section.isCollapsed
       }
     },
-    updateSectionKey(key: string, newKey: string) {
-      const section = this.findSectionByKey(key, this.sections)
-      if (section) {
-        section.key = newKey
-      }
-    },
-    updateSectionName(key: string, newName: string) {
-      const section = this.findSectionByKey(key, this.sections)
-      if (section) {
-        section.name = newName
-      }
-    },
     initializeParentMap(sections: Section[]) {
       const buildParentMap = (sections: Section[], parentKey: string | null = null) => {
         sections.forEach((section) => {
@@ -177,30 +176,8 @@ export const useStore = defineStore('store', {
       this.parentMap = {}
       buildParentMap(sections)
     },
-    addSection(parentKey: string, newSection: Section) {
-      const parent = this.findSectionByKey(parentKey, this.sections)
-      if (parent) {
-        parent.children = parent.children || []
-        parent.children.push(newSection)
-        this.parentMap[newSection.key] = parentKey
-      }
-    },
-    addSiblingSection(parentKey: string, siblingKey: string, newSibling: Section) {
-      const parent = this.findSectionByKey(parentKey)
-      if (parent && parent.children) {
-        const index = parent.children.findIndex((child: Section) => child.key === siblingKey)
-        if (index !== -1) {
-          parent.children.splice(index + 1, 0, newSibling)
-          this.parentMap[newSibling.key] = parentKey
-        }
-      }
-    },
-    addRootSection(newSection: Section) {
-      this.sections.push(newSection)
-      this.parentMap[newSection.key] = null
-    },
-    findSectionByKey(key: string): Section | null {
-      const findRecursively = (sections: Section[]): Section | null => {
+    findSectionByKey(key: string): Section | null | undefined {
+      const findRecursively = (sections: Section[]): Section | null | undefined => {
         for (const section of sections) {
           if (section.key === key) {
             return section
@@ -217,33 +194,25 @@ export const useStore = defineStore('store', {
       }
       return findRecursively(this.sections)
     },
-
-    deleteSection(key: string) {
-      const deleteRecursively = (sections: Section[], key: string): boolean => {
-        const index = sections.findIndex(section => section.key === key)
-        if (index !== -1) {
-          sections.splice(index, 1)
-          Reflect.deleteProperty(this.parentMap, key)
-          return true
-        }
-        return sections.some(section => section.children && deleteRecursively(section.children, key))
-      }
-      deleteRecursively(this.sections, key)
-    },
     swapSections(key1: string, key2: string) {
       const parentKey1 = this.parentMap[key1]
       const parentKey2 = this.parentMap[key2]
 
       if (parentKey1 && parentKey2) {
-        const parentSection1 = this.findSectionByKey(parentKey1, this.sections)
-        const parentSection2 = this.findSectionByKey(parentKey2, this.sections)
+        const parentSection1 = this.findSectionByKey(parentKey1)
+        const parentSection2 = this.findSectionByKey(parentKey2)
 
         if (parentSection1 && parentSection2) {
-          const index1 = parentSection1.children!.findIndex(child => child.key === key1)
-          const index2 = parentSection2.children!.findIndex(child => child.key === key2)
+          const index1 = parentSection1.children?.findIndex(child => child.key === key1) ?? -1
+          const index2 = parentSection2.children?.findIndex(child => child.key === key2) ?? -1
 
           if (index1 !== -1 && index2 !== -1) {
-            [parentSection1.children![index1], parentSection2.children![index2]] = [parentSection2.children![index2], parentSection1.children![index1]]
+            const child1 = parentSection1.children?.[index1]
+            const child2 = parentSection2.children?.[index2]
+
+            if (child1 && child2) {
+              [parentSection1.children![index1], parentSection2.children![index2]] = [child2, child1]
+            }
           }
         }
       }
@@ -252,51 +221,21 @@ export const useStore = defineStore('store', {
         const index2 = this.sections.findIndex(section => section.key === key2)
 
         if (index1 !== -1 && index2 !== -1) {
-          [this.sections[index1], this.sections[index2]] = [this.sections[index2], this.sections[index1]]
+          const section1 = this.sections[index1]
+          const section2 = this.sections[index2]
+
+          if (section1 && section2) {
+            [this.sections[index1], this.sections[index2]] = [section2, section1]
+          }
         }
       }
     },
     hasParent(key: string): boolean {
       return key in this.parentMap
     },
-    updateParentStatuses() {
-      const getStatusIndex = (status: string) => this.statuses.findIndex(s => s.name === status)
-
-      const updateStatusRecursively = (node: Section) => {
-        if (!node.children || !node.children.length) {
-          return
-        }
-
-        node.children.forEach(updateStatusRecursively)
-        const statuses = node.children.map(child => child.status)
-        const uniqueStatuses = [...new Set(statuses)]
-
-        if (uniqueStatuses.length === 1) {
-          node.status = uniqueStatuses[0]
-
-          return
-        }
-
-        const leastAdvancedStatus = uniqueStatuses.reduce((prev, curr) => {
-          return getStatusIndex(curr || '') < getStatusIndex(prev || '') ? curr : prev || ''
-        }, uniqueStatuses[0] || '')
-        node.status = leastAdvancedStatus
-      }
-
-      this.sections.forEach(updateStatusRecursively)
-    },
     toggleMinimize() {
       this.dialogMinimized = !this.dialogMinimized
     },
-    addStatus(status: Status) {
-      this.statuses.push(status)
-    },
-    updateStatus(index: number, status: Status) {
-      this.statuses[index] = status
-    },
-    removeStatus(index: number) {
-      this.statuses.splice(index, 1)
-    },
     toggleEditingMode() {
       this.isEditingMode = !this.isEditingMode
     },
diff --git a/app/composables/style.ts b/app/composables/style.ts
new file mode 100644
index 0000000..4916e94
--- /dev/null
+++ b/app/composables/style.ts
@@ -0,0 +1,52 @@
+import { computed } from 'vue'
+import { useStore } from '~/composables/store'
+import type { Section } from '~~/types'
+
+export function useNodeStyles() {
+  const store = useStore()
+  const duplicateKeys = computed(() => store.duplicateProjects.keys)
+
+  const getNodeStyles = (node: Section, depth: number) => {
+    const statusObj = store.statuses.find((s: { name: string | undefined }) => s.name === node.status)
+    let backgroundColor = statusObj ? statusObj.color : '#D44D8'
+    backgroundColor = darkenColor(backgroundColor, depth * 6)
+
+    const isDuplicate = duplicateKeys.value.includes(node.key)
+
+    return {
+      backgroundColor: backgroundColor,
+      borderColor: isDuplicate ? '#FF7B7B' : backgroundColor,
+      minWidth: `${store.minWidth}px`,
+      minHeight: `${store.minHeight}px`,
+      margin: '4px',
+      padding: '8px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: '8px',
+      boxSizing: 'border-box',
+      boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+      transition: 'transform 0.2s, box-shadow 0.2s, background-color 0.3s',
+      borderStyle: isDuplicate ? 'dashed' : 'solid',
+    }
+  }
+
+  const darkenColor = (color: string, percent: number) => {
+    if (!/^#[0-9A-F]{6}$/i.test(color)) {
+      return color
+    }
+
+    const num = parseInt(color.replace('#', ''), 16),
+      amt = Math.round(2.55 * percent),
+      R = Math.max((num >> 16) - amt, 0),
+      G = Math.max((num >> 8 & 0x00FF) - amt, 0),
+      B = Math.max((num & 0x0000FF) - amt, 0)
+
+    return '#' + (0x1000000 + R * 0x10000 + G * 0x100 + B).toString(16).slice(1).toUpperCase()
+  }
+
+  return {
+    getNodeStyles,
+    darkenColor,
+  }
+}
diff --git a/tests/index.spec.ts b/e2e/index.spec.ts
similarity index 97%
rename from tests/index.spec.ts
rename to e2e/index.spec.ts
index 0cccb28..a5e6231 100644
--- a/tests/index.spec.ts
+++ b/e2e/index.spec.ts
@@ -62,8 +62,7 @@ test.describe('TreemapPulse Page Tests', () => {
     await fileInput.setInputFiles('public/configs/bug-tracking.json')
 
     // Click the button to trigger the file upload
-    /*
-    await uploadFileButton.click();
+    /* await uploadFileButton.click();
 
     // Wait for a reasonable amount of time to ensure the file is uploaded and configuration is loaded
     await page.waitForTimeout(5000);
@@ -72,8 +71,7 @@ test.describe('TreemapPulse Page Tests', () => {
     await expect(page.locator('text=File Config')).toBeVisible({ timeout: 10000 });
 
     const resetButton = page.locator('button[aria-label="Reset configuration"]')
-    await resetButton.click()
-    */
+    await resetButton.click() */
   })
 
   test('Load custom configuration from user input', async ({ page }) => {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 69902d1..5f5f3ac 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -13,6 +13,7 @@ export default defineNuxtConfig({
     '@pinia-plugin-persistedstate/nuxt',
     '@nuxtjs/google-fonts',
     'nuxt-snackbar',
+    '@nuxt/test-utils',
   ],
 
   app: {
diff --git a/package.json b/package.json
index 843967b..c6af2e7 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,8 @@
     "dev": "nuxi dev",
     "build": "nuxi build",
     "start": "nuxi start",
+    "test": "vitest",
+    "test:coverage": "vitest --run --coverage",
     "test:e2e": "playwright test",
     "test:precommit": "vitest --run",
     "postinstall": "nuxt prepare",
@@ -25,6 +27,7 @@
     "@commitlint/config-conventional": "^19.2.2",
     "@nuxt/eslint": "^0.3.13",
     "@nuxt/eslint-config": "^0.3.13",
+    "@nuxt/test-utils": "^3.13.1",
     "@nuxtjs/google-fonts": "^3.2.0",
     "@nuxtjs/tailwindcss": "^6.12.0",
     "@pinia-plugin-persistedstate/nuxt": "^1.2.1",
@@ -32,6 +35,7 @@
     "@playwright/test": "^1.45.1",
     "@types/dom-to-image": "^2.6.7",
     "@types/node": "^20.14.9",
+    "@vitest/coverage-v8": "^1.6.0",
     "ajv": "^8.16.0",
     "ajv-cli": "^5.0.0",
     "autoprefixer": "^10.4.19",
@@ -44,6 +48,9 @@
     "vitest": "^1.6.0"
   },
   "lint-staged": {
-    "**/*.{ts,js,vue,html,css,scss,yml,json}": "pnpm run lint --fix"
+    "**/*.{ts,js,vue,html,css,scss,yml,json}": "pnpm run lint --fix",
+    "**/*.ts": [
+      "pnpm run test:precommit --"
+    ]
   }
 }
diff --git a/playwright.config.ts b/playwright.config.ts
index c5cf36d..222d4ea 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -11,7 +11,7 @@ import { defineConfig, devices } from '@playwright/test'
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: './tests',
+  testDir: './e2e',
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fda7ce4..3159c85 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,6 +36,9 @@ importers:
       '@nuxt/eslint-config':
         specifier: ^0.3.13
         version: 0.3.13(eslint@9.6.0)(typescript@5.5.3)
+      '@nuxt/test-utils':
+        specifier: ^3.13.1
+        version: 3.13.1(@playwright/test@1.45.1)(h3@1.12.0)(happy-dom@14.12.3)(magicast@0.3.4)(nitropack@2.9.7(@opentelemetry/api@1.9.0)(encoding@0.1.13)(magicast@0.3.4))(playwright-core@1.45.1)(rollup@4.18.0)(vite@5.3.3(@types/node@20.14.9)(terser@5.31.1))(vitest@1.6.0(@types/node@20.14.9)(happy-dom@14.12.3)(terser@5.31.1))(vue-router@4.4.0(vue@3.4.31(typescript@5.5.3)))(vue@3.4.31(typescript@5.5.3))
       '@nuxtjs/google-fonts':
         specifier: ^3.2.0
         version: 3.2.0(magicast@0.3.4)(rollup@4.18.0)
@@ -57,6 +60,9 @@ importers:
       '@types/node':
         specifier: ^20.14.9
         version: 20.14.9
+      '@vitest/coverage-v8':
+        specifier: ^1.6.0
+        version: 1.6.0(vitest@1.6.0(@types/node@20.14.9)(happy-dom@14.12.3)(terser@5.31.1))
       ajv:
         specifier: ^8.16.0
         version: 8.16.0
@@ -273,6 +279,9 @@ packages:
     resolution: {integrity: sha512-XEFXSlxiG5td2EJRe8vOmRbaXVgfcBlszKujvVmWIK/UpywWljQCfzAv3RQCGujWQ1RD4YYWEAqDXfuJiy8f5Q==}
     engines: {node: '>=6.9.0'}
 
+  '@bcoe/v8-coverage@0.2.3':
+    resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
+
   '@cloudflare/kv-asset-handler@0.3.4':
     resolution: {integrity: sha512-YLPHc8yASwjNkmcDMQMY35yiWjoKAKnhUbPRszBRS0YgH+IXtsMp61j+yTcnCE3oO2DgP0U3iejLC8FTtKDC8Q==}
     engines: {node: '>=16.13'}
@@ -842,6 +851,10 @@ packages:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
 
+  '@istanbuljs/schema@0.1.3':
+    resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
+    engines: {node: '>=8'}
+
   '@jest/schemas@29.6.3':
     resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -967,6 +980,47 @@ packages:
     resolution: {integrity: sha512-KH6wxzsNys69daSO0xUv0LEBAfhwwjK1M+0Cdi1/vxmifCslMIY7lN11B4eywSfscbyVPAYJvANyc7XiVPImBQ==}
     hasBin: true
 
+  '@nuxt/test-utils@3.13.1':
+    resolution: {integrity: sha512-rqNnjArhFUU8qMHtpEZzjfF6fGTzeXxZsreNLUy9X5AoUuS37HgnobNJIirTrA0xzlzitKVm/mB9r4gXZGzWdQ==}
+    engines: {node: '>=18.20.2'}
+    peerDependencies:
+      '@cucumber/cucumber': ^10.3.1
+      '@jest/globals': ^29.5.0
+      '@playwright/test': ^1.43.1
+      '@testing-library/vue': ^7.0.0 || ^8.0.1
+      '@vitest/ui': ^0.34.6 || ^1.0.0
+      '@vue/test-utils': ^2.4.2
+      h3: '*'
+      happy-dom: ^9.10.9 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0
+      jsdom: ^22.0.0 || ^23.0.0 || ^24.0.0
+      nitropack: '*'
+      playwright-core: ^1.43.1
+      vite: '*'
+      vitest: ^0.34.6 || ^1.0.0
+      vue: ^3.3.4
+      vue-router: ^4.0.0
+    peerDependenciesMeta:
+      '@cucumber/cucumber':
+        optional: true
+      '@jest/globals':
+        optional: true
+      '@playwright/test':
+        optional: true
+      '@testing-library/vue':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      '@vue/test-utils':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+      playwright-core:
+        optional: true
+      vitest:
+        optional: true
+
   '@nuxt/vite-builder@3.12.3':
     resolution: {integrity: sha512-8xfeOgSUaXTYgLx1DA5qEFwU3/vL5DVAIv8sgPn2rnmB50nPJVXrVa+tXhO0I1Q8L4ycXRqq2dxOPGq8CSYo+A==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -1573,6 +1627,11 @@ packages:
       vite: ^5.0.0
       vue: ^3.2.25
 
+  '@vitest/coverage-v8@1.6.0':
+    resolution: {integrity: sha512-KvapcbMY/8GYIG0rlwwOKCVNRc0OL20rrhFkg/CHNzncV03TE2XWvO5w9uZYoxNiMEBacAJt3unSOiZ7svePew==}
+    peerDependencies:
+      vitest: 1.6.0
+
   '@vitest/expect@1.6.0':
     resolution: {integrity: sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==}
 
@@ -2607,6 +2666,10 @@ packages:
   externality@1.0.2:
     resolution: {integrity: sha512-LyExtJWKxtgVzmgtEHyQtLFpw1KFhQphF9nTG8TpAIVkiI/xQ3FJh75tRFLYl4hkn7BNIIdLJInuDAavX35pMw==}
 
+  fake-indexeddb@5.0.2:
+    resolution: {integrity: sha512-cB507r5T3D55DfclY01GLkninZLfU7HXV/mhVRTnTRm5k2u+fY7Fof2dBkr80p5t7G7dlA/G5dI87QiMdPpMCQ==}
+    engines: {node: '>=18'}
+
   fast-deep-equal@2.0.1:
     resolution: {integrity: sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w==}
 
@@ -2860,6 +2923,9 @@ packages:
   hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
 
+  html-escaper@2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
+
   html-tags@3.3.1:
     resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
     engines: {node: '>=8'}
@@ -3077,6 +3143,22 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
+  istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
+    engines: {node: '>=8'}
+
+  istanbul-lib-report@3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
+    engines: {node: '>=10'}
+
+  istanbul-lib-source-maps@5.0.6:
+    resolution: {integrity: sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==}
+    engines: {node: '>=10'}
+
+  istanbul-reports@3.1.7:
+    resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==}
+    engines: {node: '>=8'}
+
   jackspeak@3.4.0:
     resolution: {integrity: sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==}
     engines: {node: '>=14'}
@@ -3323,6 +3405,10 @@ packages:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}
 
+  make-dir@4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
+
   mdn-data@2.0.28:
     resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
 
@@ -4491,6 +4577,10 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  test-exclude@6.0.0:
+    resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
+    engines: {node: '>=8'}
+
   text-decoder@1.1.0:
     resolution: {integrity: sha512-TmLJNj6UgX8xcUZo4UDStGQtDiTzF7BzWlzn9g7UWrjkpHr5uJTK1ld16wZ3LXb2vb6jH8qU89dW5whuMdXYdw==}
 
@@ -4812,6 +4902,9 @@ packages:
       terser:
         optional: true
 
+  vitest-environment-nuxt@1.0.0:
+    resolution: {integrity: sha512-AWMO9h4HdbaFdPWZw34gALFI8gbBiOpvfbyeZwHIPfh4kWg/TwElYHvYMQ61WPUlCGaS5LebfHkaI0WPyb//Iw==}
+
   vitest@1.6.0:
     resolution: {integrity: sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -5269,6 +5362,8 @@ snapshots:
       '@babel/helper-validator-identifier': 7.24.7
       to-fast-properties: 2.0.0
 
+  '@bcoe/v8-coverage@0.2.3': {}
+
   '@cloudflare/kv-asset-handler@0.3.4':
     dependencies:
       mime: 3.0.0
@@ -5695,6 +5790,8 @@ snapshots:
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: wrap-ansi@7.0.0
 
+  '@istanbuljs/schema@0.1.3': {}
+
   '@jest/schemas@29.6.3':
     dependencies:
       '@sinclair/typebox': 0.27.8
@@ -6004,6 +6101,46 @@ snapshots:
       - rollup
       - supports-color
 
+  '@nuxt/test-utils@3.13.1(@playwright/test@1.45.1)(h3@1.12.0)(happy-dom@14.12.3)(magicast@0.3.4)(nitropack@2.9.7(@opentelemetry/api@1.9.0)(encoding@0.1.13)(magicast@0.3.4))(playwright-core@1.45.1)(rollup@4.18.0)(vite@5.3.3(@types/node@20.14.9)(terser@5.31.1))(vitest@1.6.0(@types/node@20.14.9)(happy-dom@14.12.3)(terser@5.31.1))(vue-router@4.4.0(vue@3.4.31(typescript@5.5.3)))(vue@3.4.31(typescript@5.5.3))':
+    dependencies:
+      '@nuxt/kit': 3.12.3(magicast@0.3.4)(rollup@4.18.0)
+      '@nuxt/schema': 3.12.3(rollup@4.18.0)
+      c12: 1.11.1(magicast@0.3.4)
+      consola: 3.2.3
+      defu: 6.1.4
+      destr: 2.0.3
+      estree-walker: 3.0.3
+      execa: 8.0.1
+      fake-indexeddb: 5.0.2
+      get-port-please: 3.1.2
+      h3: 1.12.0
+      local-pkg: 0.5.0
+      magic-string: 0.30.10
+      nitropack: 2.9.7(@opentelemetry/api@1.9.0)(encoding@0.1.13)(magicast@0.3.4)
+      node-fetch-native: 1.6.4
+      ofetch: 1.3.4
+      pathe: 1.1.2
+      perfect-debounce: 1.0.0
+      radix3: 1.1.2
+      scule: 1.3.0
+      std-env: 3.7.0
+      ufo: 1.5.3
+      unenv: 1.9.0
+      unplugin: 1.11.0
+      vite: 5.3.3(@types/node@20.14.9)(terser@5.31.1)
+      vitest-environment-nuxt: 1.0.0(@playwright/test@1.45.1)(h3@1.12.0)(happy-dom@14.12.3)(magicast@0.3.4)(nitropack@2.9.7(@opentelemetry/api@1.9.0)(encoding@0.1.13)(magicast@0.3.4))(playwright-core@1.45.1)(rollup@4.18.0)(vite@5.3.3(@types/node@20.14.9)(terser@5.31.1))(vitest@1.6.0(@types/node@20.14.9)(happy-dom@14.12.3)(terser@5.31.1))(vue-router@4.4.0(vue@3.4.31(typescript@5.5.3)))(vue@3.4.31(typescript@5.5.3))
+      vue: 3.4.31(typescript@5.5.3)
+      vue-router: 4.4.0(vue@3.4.31(typescript@5.5.3))
+    optionalDependencies:
+      '@playwright/test': 1.45.1
+      happy-dom: 14.12.3
+      playwright-core: 1.45.1
+      vitest: 1.6.0(@types/node@20.14.9)(happy-dom@14.12.3)(terser@5.31.1)
+    transitivePeerDependencies:
+      - magicast
+      - rollup
+      - supports-color
+
   '@nuxt/vite-builder@3.12.3(@types/node@20.14.9)(eslint@9.6.0)(magicast@0.3.4)(optionator@0.9.4)(rollup@4.18.0)(terser@5.31.1)(typescript@5.5.3)(vue@3.4.31(typescript@5.5.3))':
     dependencies:
       '@nuxt/kit': 3.12.3(magicast@0.3.4)(rollup@4.18.0)
@@ -6731,6 +6868,25 @@ snapshots:
       vite: 5.3.3(@types/node@20.14.9)(terser@5.31.1)
       vue: 3.4.31(typescript@5.5.3)
 
+  '@vitest/coverage-v8@1.6.0(vitest@1.6.0(@types/node@20.14.9)(happy-dom@14.12.3)(terser@5.31.1))':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@bcoe/v8-coverage': 0.2.3
+      debug: 4.3.5
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-lib-source-maps: 5.0.6
+      istanbul-reports: 3.1.7
+      magic-string: 0.30.10
+      magicast: 0.3.4
+      picocolors: 1.0.1
+      std-env: 3.7.0
+      strip-literal: 2.1.0
+      test-exclude: 6.0.0
+      vitest: 1.6.0(@types/node@20.14.9)(happy-dom@14.12.3)(terser@5.31.1)
+    transitivePeerDependencies:
+      - supports-color
+
   '@vitest/expect@1.6.0':
     dependencies:
       '@vitest/spy': 1.6.0
@@ -7932,6 +8088,8 @@ snapshots:
       pathe: 1.1.2
       ufo: 1.5.3
 
+  fake-indexeddb@5.0.2: {}
+
   fast-deep-equal@2.0.1: {}
 
   fast-deep-equal@3.1.3: {}
@@ -8212,6 +8370,8 @@ snapshots:
 
   hosted-git-info@2.8.9: {}
 
+  html-escaper@2.0.2: {}
+
   html-tags@3.3.1: {}
 
   http-assert@1.5.0:
@@ -8406,6 +8566,27 @@ snapshots:
 
   isexe@2.0.0: {}
 
+  istanbul-lib-coverage@3.2.2: {}
+
+  istanbul-lib-report@3.0.1:
+    dependencies:
+      istanbul-lib-coverage: 3.2.2
+      make-dir: 4.0.0
+      supports-color: 7.2.0
+
+  istanbul-lib-source-maps@5.0.6:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.25
+      debug: 4.3.5
+      istanbul-lib-coverage: 3.2.2
+    transitivePeerDependencies:
+      - supports-color
+
+  istanbul-reports@3.1.7:
+    dependencies:
+      html-escaper: 2.0.2
+      istanbul-lib-report: 3.0.1
+
   jackspeak@3.4.0:
     dependencies:
       '@isaacs/cliui': 8.0.2
@@ -8698,6 +8879,10 @@ snapshots:
     dependencies:
       semver: 6.3.1
 
+  make-dir@4.0.0:
+    dependencies:
+      semver: 7.6.2
+
   mdn-data@2.0.28: {}
 
   mdn-data@2.0.30: {}
@@ -10034,6 +10219,12 @@ snapshots:
       commander: 2.20.3
       source-map-support: 0.5.21
 
+  test-exclude@6.0.0:
+    dependencies:
+      '@istanbuljs/schema': 0.1.3
+      glob: 7.2.3
+      minimatch: 3.1.2
+
   text-decoder@1.1.0:
     dependencies:
       b4a: 1.6.6
@@ -10345,6 +10536,29 @@ snapshots:
       fsevents: 2.3.3
       terser: 5.31.1
 
+  vitest-environment-nuxt@1.0.0(@playwright/test@1.45.1)(h3@1.12.0)(happy-dom@14.12.3)(magicast@0.3.4)(nitropack@2.9.7(@opentelemetry/api@1.9.0)(encoding@0.1.13)(magicast@0.3.4))(playwright-core@1.45.1)(rollup@4.18.0)(vite@5.3.3(@types/node@20.14.9)(terser@5.31.1))(vitest@1.6.0(@types/node@20.14.9)(happy-dom@14.12.3)(terser@5.31.1))(vue-router@4.4.0(vue@3.4.31(typescript@5.5.3)))(vue@3.4.31(typescript@5.5.3)):
+    dependencies:
+      '@nuxt/test-utils': 3.13.1(@playwright/test@1.45.1)(h3@1.12.0)(happy-dom@14.12.3)(magicast@0.3.4)(nitropack@2.9.7(@opentelemetry/api@1.9.0)(encoding@0.1.13)(magicast@0.3.4))(playwright-core@1.45.1)(rollup@4.18.0)(vite@5.3.3(@types/node@20.14.9)(terser@5.31.1))(vitest@1.6.0(@types/node@20.14.9)(happy-dom@14.12.3)(terser@5.31.1))(vue-router@4.4.0(vue@3.4.31(typescript@5.5.3)))(vue@3.4.31(typescript@5.5.3))
+    transitivePeerDependencies:
+      - '@cucumber/cucumber'
+      - '@jest/globals'
+      - '@playwright/test'
+      - '@testing-library/vue'
+      - '@vitest/ui'
+      - '@vue/test-utils'
+      - h3
+      - happy-dom
+      - jsdom
+      - magicast
+      - nitropack
+      - playwright-core
+      - rollup
+      - supports-color
+      - vite
+      - vitest
+      - vue
+      - vue-router
+
   vitest@1.6.0(@types/node@20.14.9)(happy-dom@14.12.3)(terser@5.31.1):
     dependencies:
       '@vitest/expect': 1.6.0
diff --git a/tests/composables/useNodeOperations.test.ts b/tests/composables/useNodeOperations.test.ts
new file mode 100644
index 0000000..9bad7c5
--- /dev/null
+++ b/tests/composables/useNodeOperations.test.ts
@@ -0,0 +1,44 @@
+import { setActivePinia, createPinia } from 'pinia'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { useNodeOperations } from '~/composables/node'
+import { useStore } from '~/composables/store'
+import type { Section } from '~~/types'
+
+describe('useNodeOperations', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it('should add a section', () => {
+    const store = useStore()
+    store.sections = [{ key: '1', name: 'Section 1', children: [] }] as Section[]
+    const { addSection } = useNodeOperations()
+
+    const newSection = { key: '1.1', name: 'New Section', status: '', children: [] }
+    addSection('1', newSection)
+
+    expect(store.sections[0]?.children ?? []).toContainEqual(newSection)
+  })
+
+  it('should add a sibling section', () => {
+    const store = useStore()
+    store.sections = [{ key: '1', name: 'Section 1', children: [{ key: '1.1', name: 'Section 1.1' }] }] as Section[]
+    const { addSiblingSection } = useNodeOperations()
+
+    const newSibling = { key: '1.2', name: 'New Sibling Section', status: '', children: [] }
+    addSiblingSection('1', '1.1', newSibling)
+
+    expect(store.sections[0]?.children).toContainEqual(newSibling)
+  })
+
+  it('should add a root section', () => {
+    const store = useStore()
+    store.sections = [] as Section[]
+    const { addRootSection } = useNodeOperations()
+
+    const newRootSection = { key: '1', name: 'New Root Section', status: '', children: [] }
+    addRootSection(newRootSection)
+
+    expect(store.sections).toContainEqual(newRootSection)
+  })
+})
diff --git a/tests/composables/useNodeStyles.test.ts b/tests/composables/useNodeStyles.test.ts
new file mode 100644
index 0000000..1272afe
--- /dev/null
+++ b/tests/composables/useNodeStyles.test.ts
@@ -0,0 +1,69 @@
+import { setActivePinia, createPinia } from 'pinia'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { useNodeStyles } from '~/composables/style'
+import { useStore } from '~/composables/store'
+import type { Section } from '~~/types'
+
+describe('useNodeStyles', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it('should return correct styles for a node', () => {
+    const store = useStore()
+    store.minWidth = 80
+    store.minHeight = 10
+    store.statuses = [
+      { name: 'To Do', color: '#FFB3BA' },
+      { name: 'In Progress', color: '#FFDFBA' },
+    ]
+    store.duplicateProjects.keys = []
+
+    const { getNodeStyles } = useNodeStyles()
+    const node: Section = { key: '1', name: 'Section 1', status: 'To Do', children: [] }
+    const styles = getNodeStyles(node, 1)
+
+    expect(styles).toEqual({
+      backgroundColor: '#F0A4AB', // #FFB3BA darkened by 6%
+      borderColor: '#F0A4AB',
+      minWidth: '80px',
+      minHeight: '10px',
+      margin: '4px',
+      padding: '8px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: '8px',
+      boxSizing: 'border-box',
+      boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+      transition: 'transform 0.2s, box-shadow 0.2s, background-color 0.3s',
+      borderStyle: 'solid',
+    })
+  })
+
+  it('should darken color correctly', () => {
+    const { darkenColor } = useNodeStyles()
+    const color = '#FFB3BA'
+    const darkenedColor = darkenColor(color, 6)
+
+    expect(darkenedColor).toBe('#F0A4AB') // #FFB3BA darkened by 6%
+  })
+
+  it('should return dashed border for duplicate keys', () => {
+    const store = useStore()
+    store.minWidth = 80
+    store.minHeight = 10
+    store.statuses = [
+      { name: 'To Do', color: '#FFB3BA' },
+      { name: 'In Progress', color: '#FFDFBA' },
+    ]
+    store.duplicateProjects.keys = ['1']
+
+    const { getNodeStyles } = useNodeStyles()
+    const node: Section = { key: '1', name: 'Section 1', status: 'To Do', children: [] }
+    const styles = getNodeStyles(node, 1)
+
+    expect(styles.borderStyle).toBe('dashed')
+    expect(styles.borderColor).toBe('#FF7B7B')
+  })
+})
diff --git a/tests/composables/useSectionManagement.test.ts b/tests/composables/useSectionManagement.test.ts
new file mode 100644
index 0000000..3753e82
--- /dev/null
+++ b/tests/composables/useSectionManagement.test.ts
@@ -0,0 +1,57 @@
+import { setActivePinia, createPinia } from 'pinia'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { useSectionManagement } from '~/composables/section'
+import { useStore } from '~/composables/store'
+import type { Section } from '~~/types'
+
+describe('useSectionManagement', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it('should update section key', () => {
+    const store = useStore()
+    store.sections = [{ key: '1', name: 'Section 1' }] as Section[]
+    const { updateSectionKey, findSectionByKey } = useSectionManagement()
+
+    updateSectionKey('1', '2')
+    const section = findSectionByKey('2')
+
+    expect(section).toBeDefined()
+    expect(section?.key).toBe('2')
+  })
+
+  it('should update section name', () => {
+    const store = useStore()
+    store.sections = [{ key: '1', name: 'Section 1' }] as Section[]
+    const { updateSectionName, findSectionByKey } = useSectionManagement()
+
+    updateSectionName('1', 'Updated Section')
+    const section = findSectionByKey('1')
+
+    expect(section).toBeDefined()
+    expect(section?.name).toBe('Updated Section')
+  })
+
+  it('should delete a section', () => {
+    const store = useStore()
+    store.sections = [{ key: '1', name: 'Section 1' }] as Section[]
+    const { deleteSection, findSectionByKey } = useSectionManagement()
+
+    deleteSection('1')
+    const section = findSectionByKey('1')
+
+    expect(section).toBeNull()
+  })
+
+  it('should find section by key', () => {
+    const store = useStore()
+    store.sections = [{ key: '1', name: 'Section 1' }] as Section[]
+    const { findSectionByKey } = useSectionManagement()
+
+    const section = findSectionByKey('1')
+
+    expect(section).toBeDefined()
+    expect(section?.key).toBe('1')
+  })
+})
diff --git a/tests/composables/useStatusManagement.test.ts b/tests/composables/useStatusManagement.test.ts
new file mode 100644
index 0000000..1fd104c
--- /dev/null
+++ b/tests/composables/useStatusManagement.test.ts
@@ -0,0 +1,74 @@
+import { setActivePinia, createPinia } from 'pinia'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { useStatusManagement } from '~/composables/status'
+import { useStore } from '~/composables/store'
+import type { Section, Status } from '~~/types'
+
+describe('useStatusManagement', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it('should add a status', () => {
+    const store = useStore()
+    const { addStatus } = useStatusManagement()
+
+    const newStatus = { name: 'New Status', color: '#FFFFFF' }
+    addStatus(newStatus)
+
+    expect(store.statuses).toContainEqual(newStatus)
+  })
+
+  it('should update a status', () => {
+    const store = useStore()
+    store.statuses = [{ name: 'Old Status', color: '#FFFFFF' }] as Status[]
+    const { updateStatus } = useStatusManagement()
+
+    const updatedStatus = { name: 'Updated Status', color: '#000000' }
+    updateStatus(0, updatedStatus)
+
+    expect(store.statuses[0]).toEqual(updatedStatus)
+  })
+
+  it('should remove a status', () => {
+    const store = useStore()
+    store.statuses = [{ name: 'Status to be removed', color: '#FFFFFF' }] as Status[]
+    const { removeStatus } = useStatusManagement()
+
+    removeStatus(0)
+
+    expect(store.statuses).not.toContain({ name: 'Status to be removed', color: '#FFFFFF' })
+  })
+
+  it('should update section status', () => {
+    const store = useStore()
+    store.sections = [{ key: '1', name: 'Section 1', status: 'Old Status' }] as Section[]
+    const { updateSectionStatus } = useStatusManagement()
+
+    updateSectionStatus('1', 'New Status')
+    const section = store.sections.find(s => s.key === '1')
+
+    expect(section?.status).toBe('New Status')
+  })
+
+  it('should update parent statuses', () => {
+    const store = useStore()
+    store.sections = [
+      {
+        key: '1',
+        name: 'Parent Section',
+        status: '',
+        children: [
+          { key: '1.1', name: 'Child Section 1', status: 'Status 1' },
+          { key: '1.2', name: 'Child Section 2', status: 'Status 2' },
+        ],
+      },
+    ] as Section[]
+    const { updateParentStatuses } = useStatusManagement()
+
+    updateParentStatuses()
+    const parentSection = store.sections.find(s => s.key === '1')
+
+    expect(parentSection?.status).toBe('Status 1')
+  })
+})
diff --git a/tests/composables/useStore.test.ts b/tests/composables/useStore.test.ts
new file mode 100644
index 0000000..47460db
--- /dev/null
+++ b/tests/composables/useStore.test.ts
@@ -0,0 +1,146 @@
+import { setActivePinia, createPinia } from 'pinia'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { useStore } from '~/composables/store'
+import type { Section } from '~~/types'
+
+const defaultStatus = [
+  { name: 'To Do', color: '#FFB3BA' },
+  { name: 'In Progress', color: '#FFDFBA' },
+  { name: 'Done', color: '#FFFFBA' },
+  { name: 'Closed', color: '#BAFFC9' },
+]
+
+describe('useStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it('should initialize with default state', () => {
+    const store = useStore()
+    expect(store.sections).toEqual([])
+    expect(store.parentMap).toEqual({})
+    expect(store.configLoaded).toBe(false)
+    expect(store.dialogMinimized).toBe(false)
+    expect(store.minWidth).toBe(80)
+    expect(store.minHeight).toBe(10)
+    expect(store.displayLabel).toBe('name')
+    expect(store.statuses).toEqual(defaultStatus)
+    expect(store.viewMode).toBe('flex')
+    expect(store.darkMode).toBe(false)
+    expect(store.isEditingMode).toBe(false)
+  })
+
+  it('should fetch sections from URL', async () => {
+    const store = useStore()
+    const sections = [{ key: '1', name: 'Section 1' }] as Section[]
+    vi.spyOn(global, '$fetch').mockResolvedValue(sections)
+
+    const result = await store.fetchSectionsFromUrl('/fake-url')
+    expect(result).toEqual(sections)
+  })
+
+  it('should fetch sections by model', async () => {
+    const store = useStore()
+    const sections = [{ key: '1', name: 'Section 1' }] as Section[]
+    vi.spyOn(store, 'getSections').mockResolvedValue(sections)
+    vi.spyOn(store, 'setSections')
+
+    await store.fetchSections('model1')
+
+    expect(store.getSections).toHaveBeenCalledWith('model1')
+    expect(store.setSections).toHaveBeenCalledWith(sections)
+    expect(store.configLoaded).toBe(true)
+  })
+
+  it('should update section collapse state', () => {
+    const store = useStore()
+    store.sections = [{ key: '1', name: 'Section 1', isCollapsed: false }] as Section[]
+
+    store.updateSectionCollapse('1')
+    expect(store.sections[0]?.isCollapsed).toBe(true)
+
+    store.updateSectionCollapse('1')
+    expect(store.sections[0]?.isCollapsed).toBe(false)
+  })
+
+  it('should initialize parent map', () => {
+    const store = useStore()
+    const sections = [
+      { key: '1', name: 'Section 1', children: [{ key: '1.1', name: 'Section 1.1' }] },
+    ] as Section[]
+
+    store.initializeParentMap(sections)
+    expect(store.parentMap).toEqual({ 1.1: '1' })
+  })
+
+  it('should find section by key', () => {
+    const store = useStore()
+    const sections = [
+      { key: '1', name: 'Section 1', children: [{ key: '1.1', name: 'Section 1.1' }] },
+    ] as Section[]
+
+    store.sections = sections
+
+    const section = store.findSectionByKey('1.1')
+    expect(section).toEqual({ key: '1.1', name: 'Section 1.1' })
+  })
+
+  it('should swap sections', () => {
+    const store = useStore()
+    store.sections = [
+      { key: '1', name: 'Section 1' },
+      { key: '2', name: 'Section 2' },
+    ] as Section[]
+
+    store.swapSections('1', '2')
+    expect(store.sections[0]?.key).toBe('2')
+    expect(store.sections[1]?.key).toBe('1')
+  })
+
+  it('should clear store state', () => {
+    const store = useStore()
+    store.sections = [{ key: '1', name: 'Section 1' }] as Section[]
+    store.configLoaded = true
+
+    store.clear()
+    expect(store.sections).toEqual([])
+    expect(store.statuses).toEqual(defaultStatus)
+    expect(store.configLoaded).toBe(false)
+  })
+
+  it('should toggle dialog minimized state', () => {
+    const store = useStore()
+    store.dialogMinimized = false
+
+    store.toggleMinimize()
+    expect(store.dialogMinimized).toBe(true)
+
+    store.toggleMinimize()
+    expect(store.dialogMinimized).toBe(false)
+  })
+
+  it('should toggle editing mode state', () => {
+    const store = useStore()
+    store.isEditingMode = false
+
+    store.toggleEditingMode()
+    expect(store.isEditingMode).toBe(true)
+
+    store.toggleEditingMode()
+    expect(store.isEditingMode).toBe(false)
+  })
+
+  it('should identify duplicate projects', () => {
+    const store = useStore()
+    const sections = [
+      { key: '1', name: 'Section 1', children: [{ key: '1.1', name: 'Section 1.1' }] },
+      { key: '2', name: 'Section 1', children: [{ key: '2.1', name: 'Section 2.1' }] },
+    ] as Section[]
+
+    store.sections = sections
+
+    const duplicates = store.duplicateProjects
+    expect(duplicates.sections).toEqual(['Section 1'])
+    expect(duplicates.keys).toEqual([])
+  })
+})