@necrolab/dashboard 0.5.13 → 0.5.15

package/docs/plans/2026-02-08-tailwind-consolidation.md

@@ -17,6 +17,7 @@
 ### Task 1.1: Extend Tailwind Color Tokens
 
 **Files:**
+
 - Modify: `tailwind.config.js:30-77`
 
 **Step 1: Add extended dark scale for rgba replacements**
@@ -98,6 +99,7 @@ git commit -m "feat: extend Tailwind color tokens for theme consolidation
 ### Task 1.2: Extend Shadow System
 
 **Files:**
+
 - Modify: `tailwind.config.js:135-138`
 
 **Step 1: Replace boxShadow extend section**
@@ -171,6 +173,7 @@ git commit -m "feat: extend Tailwind design tokens
 ### Task 2.1: Clean Up App.vue iPhone Landscape Code
 
 **Files:**
+
 - Modify: `src/App.vue`
 
 **Step 1: Read current App.vue**
@@ -180,6 +183,7 @@ Run: Read `src/App.vue`
 **Step 2: Remove iPhone landscape lock overlay**
 
 Find and remove:
+
 - `.landscape-lock` class styles (lines ~739-796)
 - `.landscape-lock-content` styles
 - `LandscapeLockIcon` component
@@ -189,6 +193,7 @@ Find and remove:
 **Step 3: Remove mobile-landscape breakpoint styles**
 
 Search for `@media` queries containing:
+
 - `mobile-landscape`
 - `(orientation: landscape) and (max-height: 500px)`
 
@@ -217,6 +222,7 @@ git commit -m "refactor: remove iPhone landscape support
 ### Task 2.2: Update Tailwind Config - Remove Landscape Breakpoints
 
 **Files:**
+
 - Modify: `tailwind.config.js:92-116`
 
 **Step 1: Remove mobile-landscape breakpoint**
@@ -261,6 +267,7 @@ git commit -m "refactor: remove mobile-landscape breakpoint
 ### Task 3.1: Create StatusBadge Component
 
 **Files:**
+
 - Create: `src/components/ui/StatusBadge.vue`
 - Test: Manual testing in Account.vue, Profile.vue
 
@@ -268,48 +275,47 @@ git commit -m "refactor: remove mobile-landscape breakpoint
 
 ```vue
 <script setup>
-import { defineProps } from 'vue'
-import CheckmarkIcon from '@/assets/icons/checkmark.svg'
-import CloseXIcon from '@/assets/icons/close-x.svg'
+import CheckmarkIcon from "@/assets/icons/checkmark.svg";
+import CloseXIcon from "@/assets/icons/close-x.svg";
 
 const props = defineProps({
-  enabled: {
-    type: Boolean,
-    required: true
-  },
-  size: {
-    type: String,
-    default: 'small',
-    validator: (value) => ['small', 'large'].includes(value)
-  }
-})
+    enabled: {
+        type: Boolean,
+        required: true
+    },
+    size: {
+        type: String,
+        default: "small",
+        validator: (value) => ["small", "large"].includes(value)
+    }
+});
 
 const sizeClasses = {
-  small: 'w-6 h-6',
-  large: 'w-[26px] h-[26px]'
-}
+    small: "w-6 h-6",
+    large: "w-[26px] h-[26px]"
+};
 
-const enabledClasses = 'bg-accent-green/20 border-accent-green/30'
-const disabledClasses = 'bg-red-500/20 border-red-500/30'
+const enabledClasses = "bg-accent-green/20 border-accent-green/30";
+const disabledClasses = "bg-red-500/20 border-red-500/30";
 </script>
 
 <template>
-  <div
-    :class="[
-      'flex items-center justify-center rounded-full border-2 transition-all duration-200',
-      enabled ? enabledClasses : disabledClasses,
-      sizeClasses[size]
-    ]"
-  >
-    <CheckmarkIcon v-if="enabled" class="w-3 h-3 text-accent-green" />
-    <CloseXIcon v-else class="w-3 h-3 text-red-500" />
-  </div>
+    <div
+        :class="[
+            'flex items-center justify-center rounded-full border-2 transition-all duration-200',
+            enabled ? enabledClasses : disabledClasses,
+            sizeClasses[size]
+        ]">
+        <CheckmarkIcon v-if="enabled" class="h-3 w-3 text-accent-green" />
+        <CloseXIcon v-else class="h-3 w-3 text-red-500" />
+    </div>
 </template>
 ```
 
 **Step 2: Test component in isolation**
 
 Create temporary test in a view to verify rendering:
+
 - Enabled state
 - Disabled state
 - Small size
@@ -332,6 +338,7 @@ git commit -m "feat: create StatusBadge component
 ### Task 3.2: Replace StatusBadge in Account.vue
 
 **Files:**
+
 - Modify: `src/components/Editors/Account/Account.vue`
 
 **Step 1: Import StatusBadge**
@@ -339,7 +346,7 @@ git commit -m "feat: create StatusBadge component
 Add to imports:
 
 ```javascript
-import StatusBadge from '@/components/ui/StatusBadge.vue'
+import StatusBadge from "@/components/ui/StatusBadge.vue";
 ```
 
 **Step 2: Replace enabled badge markup**
@@ -353,6 +360,7 @@ Find lines with class `enabled-badge` or `disabled-badge` and replace with:
 **Step 3: Remove old badge styles**
 
 Remove from `<style scoped>`:
+
 - `.enabled-badge` class (lines ~60-105)
 - `.disabled-badge` class
 
@@ -377,6 +385,7 @@ git commit -m "refactor: use StatusBadge component in Account.vue
 ### Task 3.3: Replace StatusBadge in Profile.vue
 
 **Files:**
+
 - Modify: `src/components/Editors/Profile/Profile.vue`
 
 **Step 1: Import StatusBadge**
@@ -399,6 +408,7 @@ git commit -m "refactor: use StatusBadge component in Profile.vue"
 ### Task 3.4: Replace StatusBadge in CreateAccount.vue
 
 **Files:**
+
 - Modify: `src/components/Editors/Account/CreateAccount.vue`
 
 **Step 1-5:** Same as Task 3.3
@@ -415,6 +425,7 @@ git commit -m "refactor: use StatusBadge component in CreateAccount.vue"
 ### Task 3.5: Replace StatusBadge in CreateProfile.vue
 
 **Files:**
+
 - Modify: `src/components/Editors/Profile/CreateProfile.vue`
 
 **Step 1-5:** Same as Task 3.3
@@ -431,6 +442,7 @@ git commit -m "refactor: use StatusBadge component in CreateProfile.vue"
 ### Task 3.6: Create useRowSelection Composable
 
 **Files:**
+
 - Create: `src/composables/useRowSelection.js`
 
 **Step 1: Create composable file**
@@ -446,43 +458,43 @@ git commit -m "refactor: use StatusBadge component in CreateProfile.vue"
  * @returns {Object} Event handlers for @dblclick, @touchstart, @touchend
  */
 export function useRowSelection(toggleCallback) {
-  let lastTapTime = 0
-  const DOUBLE_TAP_DELAY = 300
-
-  const handleDoubleClick = (event) => {
-    // Don't trigger on button or checkbox clicks
-    if (event.target.closest('button') || event.target.closest('.checkbox')) {
-      return
-    }
-    toggleCallback()
-  }
-
-  const handleTouchStart = (event) => {
-    const currentTime = Date.now()
-    const tapGap = currentTime - lastTapTime
-
-    if (tapGap < DOUBLE_TAP_DELAY && tapGap > 0) {
-      // Don't trigger on button or checkbox taps
-      if (!event.target.closest('button') && !event.target.closest('.checkbox')) {
-        event.preventDefault()
-        toggleCallback()
-      }
-    }
-    lastTapTime = currentTime
-  }
-
-  const handleTouchEnd = (event) => {
-    // Prevent default touch behavior on buttons/checkboxes
-    if (event.target.closest('button') || event.target.closest('.checkbox')) {
-      return
-    }
-  }
-
-  return {
-    handleDoubleClick,
-    handleTouchStart,
-    handleTouchEnd
-  }
+    let lastTapTime = 0;
+    const DOUBLE_TAP_DELAY = 300;
+
+    const handleDoubleClick = (event) => {
+        // Don't trigger on button or checkbox clicks
+        if (event.target.closest("button") || event.target.closest(".checkbox")) {
+            return;
+        }
+        toggleCallback();
+    };
+
+    const handleTouchStart = (event) => {
+        const currentTime = Date.now();
+        const tapGap = currentTime - lastTapTime;
+
+        if (tapGap < DOUBLE_TAP_DELAY && tapGap > 0) {
+            // Don't trigger on button or checkbox taps
+            if (!event.target.closest("button") && !event.target.closest(".checkbox")) {
+                event.preventDefault();
+                toggleCallback();
+            }
+        }
+        lastTapTime = currentTime;
+    };
+
+    const handleTouchEnd = (event) => {
+        // Prevent default touch behavior on buttons/checkboxes
+        if (event.target.closest("button") || event.target.closest(".checkbox")) {
+            return;
+        }
+    };
+
+    return {
+        handleDoubleClick,
+        handleTouchStart,
+        handleTouchEnd
+    };
 }
 ```
 
@@ -502,12 +514,13 @@ git commit -m "feat: create useRowSelection composable
 ### Task 3.7: Use useRowSelection in Task.vue
 
 **Files:**
+
 - Modify: `src/components/Tasks/Task.vue`
 
 **Step 1: Import composable**
 
 ```javascript
-import { useRowSelection } from '@/composables/useRowSelection'
+import { useRowSelection } from "@/composables/useRowSelection";
 ```
 
 **Step 2: Use composable in setup**
@@ -516,8 +529,8 @@ Replace manual event handler logic with:
 
 ```javascript
 const { handleDoubleClick, handleTouchStart, handleTouchEnd } = useRowSelection(() => {
-  emit('toggle', props.task)
-})
+    emit("toggle", props.task);
+});
 ```
 
 **Step 3: Update template event handlers**
@@ -525,11 +538,7 @@ const { handleDoubleClick, handleTouchStart, handleTouchEnd } = useRowSelection(
 Replace existing `@dblclick`, `@touchstart`, `@touchend` with:
 
 ```vue
-<tr
-  @dblclick="handleDoubleClick"
-  @touchstart="handleTouchStart"
-  @touchend="handleTouchEnd"
->
+<tr @dblclick="handleDoubleClick" @touchstart="handleTouchStart" @touchend="handleTouchEnd"></tr>
 ```
 
 **Step 4: Remove old event handler code**
@@ -558,6 +567,7 @@ git commit -m "refactor: use useRowSelection composable in Task.vue
 ### Task 3.8: Use useRowSelection in Account.vue
 
 **Files:**
+
 - Modify: `src/components/Editors/Account/Account.vue`
 
 **Step 1-6:** Same as Task 3.7, adapted for Account component
@@ -574,6 +584,7 @@ git commit -m "refactor: use useRowSelection composable in Account.vue"
 ### Task 3.9: Use useRowSelection in Profile.vue
 
 **Files:**
+
 - Modify: `src/components/Editors/Profile/Profile.vue`
 
 **Step 1-6:** Same as Task 3.7, adapted for Profile component
@@ -590,12 +601,13 @@ git commit -m "refactor: use useRowSelection composable in Profile.vue"
 ### Task 3.10: Create useCopyToClipboard Composable
 
 **Files:**
+
 - Create: `src/composables/useCopyToClipboard.js`
 
 **Step 1: Create composable**
 
 ```javascript
-import { useUIStore } from '@/stores/ui'
+import { useUIStore } from "@/stores/ui";
 
 /**
  * useCopyToClipboard - Composable for copying text with user feedback
@@ -603,22 +615,23 @@ import { useUIStore } from '@/stores/ui'
  * @returns {Object} Copy function with success notification
  */
 export function useCopyToClipboard() {
-  const ui = useUIStore()
-
-  const copy = (text, message = 'Copied to clipboard') => {
-    if (!text) return
-
-    navigator.clipboard.writeText(text)
-      .then(() => {
-        ui.showSuccess(message)
-      })
-      .catch((err) => {
-        ui.showError('Failed to copy')
-        console.error('Copy failed:', err)
-      })
-  }
-
-  return { copy }
+    const ui = useUIStore();
+
+    const copy = (text, message = "Copied to clipboard") => {
+        if (!text) return;
+
+        navigator.clipboard
+            .writeText(text)
+            .then(() => {
+                ui.showSuccess(message);
+            })
+            .catch((err) => {
+                ui.showError("Failed to copy");
+                console.error("Copy failed:", err);
+            });
+    };
+
+    return { copy };
 }
 ```
 
@@ -638,14 +651,15 @@ git commit -m "feat: create useCopyToClipboard composable
 ### Task 3.11: Use useCopyToClipboard in Task.vue
 
 **Files:**
+
 - Modify: `src/components/Tasks/Task.vue`
 
 **Step 1: Import and use composable**
 
 ```javascript
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+import { useCopyToClipboard } from "@/composables/useCopyToClipboard";
 
-const { copy } = useCopyToClipboard()
+const { copy } = useCopyToClipboard();
 ```
 
 **Step 2: Replace manual copy logic**
@@ -653,7 +667,7 @@ const { copy } = useCopyToClipboard()
 Replace `navigator.clipboard.writeText()` calls with:
 
 ```javascript
-copy(task.id, 'Copied task ID')
+copy(task.id, "Copied task ID");
 ```
 
 **Step 3: Remove old copy code**
@@ -674,6 +688,7 @@ git commit -m "refactor: use useCopyToClipboard composable in Task.vue"
 ### Task 3.12: Use useCopyToClipboard in ViewTask.vue
 
 **Files:**
+
 - Modify: `src/components/Tasks/ViewTask.vue`
 
 **Step 1-5:** Same as Task 3.11
@@ -690,6 +705,7 @@ git commit -m "refactor: use useCopyToClipboard composable in ViewTask.vue"
 ### Task 3.13: Use useCopyToClipboard in Account.vue
 
 **Files:**
+
 - Modify: `src/components/Editors/Account/Account.vue`
 
 **Step 1-5:** Same as Task 3.11
@@ -708,6 +724,7 @@ git commit -m "refactor: use useCopyToClipboard composable in Account.vue"
 ### Task 4.1: Clean Up App.vue Global Styles
 
 **Files:**
+
 - Modify: `src/App.vue`
 
 **Step 1: Read current App.vue styles**
@@ -717,10 +734,11 @@ Run: Read `src/App.vue` focusing on `<style>` section
 **Step 2: Remove global !important overrides**
 
 Find and remove/replace:
+
 - `html, body` with !important on overflow, width, height, touch-action (lines ~679-688)
-  - Replace with proper overflow utilities on specific elements
+    - Replace with proper overflow utilities on specific elements
 - Global `* { touch-action: manipulation !important }` (lines ~699-702)
-  - Remove entirely, use `touch-manipulation` class where needed
+    - Remove entirely, use `touch-manipulation` class where needed
 
 **Step 3: Convert .layout to Tailwind**
 
@@ -728,15 +746,15 @@ Replace:
 
 ```css
 .layout {
-  min-height: 90vh;
-  height: 100vh !important;
+    min-height: 90vh;
+    height: 100vh !important;
 }
 ```
 
 With template classes:
 
 ```vue
-<div class="layout min-h-screen h-screen">
+<div class="layout h-screen min-h-screen"></div>
 ```
 
 Remove CSS block.
@@ -747,14 +765,14 @@ Replace:
 
 ```css
 .component-container {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-@media (min-width: 480px) {
-  .component-container {
     padding-left: 1rem;
     padding-right: 1rem;
-  }
+}
+@media (min-width: 480px) {
+    .component-container {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
 }
 /* etc */
 ```
@@ -762,7 +780,7 @@ Replace:
 With template classes:
 
 ```vue
-<div class="component-container px-4 xs:px-4 md:px-2 lg:px-6 xl:px-10">
+<div class="component-container px-4 xs:px-4 md:px-2 lg:px-6 xl:px-10"></div>
 ```
 
 Remove CSS block.
@@ -795,6 +813,7 @@ git commit -m "refactor: clean up App.vue global styles
 ### Task 4.2: Clean Up Navbar.vue
 
 **Files:**
+
 - Modify: `src/components/ui/Navbar.vue`
 
 **Step 1: Read Navbar.vue styles**
@@ -822,15 +841,15 @@ Replace:
 
 ```css
 svg {
-  width: 20px !important;
-  height: 20px !important;
+    width: 20px !important;
+    height: 20px !important;
 }
 ```
 
 With template classes on SVG components:
 
 ```vue
-<SomeIcon class="w-5 h-5" />
+<SomeIcon class="h-5 w-5" />
 ```
 
 **Step 4: Convert .navbar-link height**
@@ -839,8 +858,8 @@ Replace:
 
 ```css
 .navbar-link {
-  height: 40px;
-  border-bottom: 2px solid transparent;
+    height: 40px;
+    border-bottom: 2px solid transparent;
 }
 ```
 
@@ -873,7 +892,7 @@ Replace:
 
 ```css
 .force-z {
-  z-index: 20000;
+    z-index: 20000;
 }
 ```
 
@@ -915,6 +934,7 @@ git commit -m "refactor: clean up Navbar.vue styles
 ### Task 4.3: Clean Up Modal.vue
 
 **Files:**
+
 - Modify: `src/components/ui/Modal.vue`
 
 **Step 1: Read Modal.vue styles**
@@ -927,23 +947,23 @@ Replace:
 
 ```css
 .modal-mask {
-  position: fixed;
-  z-index: 25000;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(17, 17, 17, 0.85);
-  backdrop-filter: blur(4px);
-  display: flex;
-  padding-top: 3.5rem;
+    position: fixed;
+    z-index: 25000;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(17, 17, 17, 0.85);
+    backdrop-filter: blur(4px);
+    display: flex;
+    padding-top: 3.5rem;
 }
 ```
 
 With template classes:
 
 ```vue
-<div class="modal-mask fixed inset-0 z-modal bg-overlay-dark backdrop-blur-xs flex pt-14">
+<div class="modal-mask bg-overlay-dark backdrop-blur-xs fixed inset-0 z-modal flex pt-14"></div>
 ```
 
 **Step 3: Simplify .component-modal bottom margin**
@@ -953,7 +973,7 @@ Replace:
 ```css
 margin-bottom: 20rem;
 @media (max-width: 480px) {
-  margin-bottom: 25rem;
+    margin-bottom: 25rem;
 }
 ```
 
@@ -981,6 +1001,7 @@ class="pb-60 md:pb-12"
 **Step 5: Test modal**
 
 Open any modal, test:
+
 - Overlay appearance
 - Modal positioning
 - Scroll behavior
@@ -1005,6 +1026,7 @@ git commit -m "refactor: clean up Modal.vue styles
 ### Task 4.4: Clean Up Task.vue
 
 **Files:**
+
 - Modify: `src/components/Tasks/Task.vue`
 
 **Step 1: Read Task.vue styles**
@@ -1017,7 +1039,7 @@ Replace:
 
 ```css
 min-width: 10px !important;
-stroke: oklch(0.60 0 0) !important;
+stroke: oklch(0.6 0 0) !important;
 ```
 
 With proper component props or Tailwind classes:
@@ -1048,9 +1070,9 @@ Replace:
 
 ```css
 @media (max-width: 480px) {
-  left: 4rem !important;
-  top: 0.25rem !important;
-  z-index: 1 !important;
+    left: 4rem !important;
+    top: 0.25rem !important;
+    z-index: 1 !important;
 }
 ```
 
@@ -1112,6 +1134,7 @@ git commit -m "refactor: clean up Task.vue styles
 ### Task 4.5: Clean Up Dropdown.vue
 
 **Files:**
+
 - Modify: `src/components/ui/controls/atomic/Dropdown.vue`
 
 **Step 1: Read Dropdown.vue styles**
@@ -1201,109 +1224,97 @@ git commit -m "refactor: clean up Dropdown.vue styles
 ### Task 5.1: Create FormField Component
 
 **Files:**
+
 - Create: `src/components/ui/FormField.vue`
 
 **Step 1: Create component**
 
 ```vue
 <script setup>
-import { defineProps, defineEmits, useAttrs } from 'vue'
-import UpIcon from '@/assets/icons/up.svg'
-import DownIcon from '@/assets/icons/down.svg'
+import { defineEmits, useAttrs } from "vue";
+import UpIcon from "@/assets/icons/up.svg";
+import DownIcon from "@/assets/icons/down.svg";
 
 const props = defineProps({
-  label: {
-    type: String,
-    required: true
-  },
-  icon: {
-    type: Object,
-    default: null
-  },
-  modelValue: {
-    type: [String, Number],
-    default: ''
-  },
-  type: {
-    type: String,
-    default: 'text'
-  },
-  placeholder: {
-    type: String,
-    default: ''
-  },
-  required: {
-    type: Boolean,
-    default: false
-  },
-  hasError: {
-    type: Boolean,
-    default: false
-  },
-  incrementer: {
-    type: Boolean,
-    default: false
-  },
-  zIndex: {
-    type: String,
-    default: '0',
-    validator: (value) => ['dropdown', 'tooltip', '0', '1', '2'].includes(value)
-  }
-})
-
-const emit = defineEmits(['update:modelValue', 'increment', 'decrement'])
-const attrs = useAttrs()
+    label: {
+        type: String,
+        required: true
+    },
+    icon: {
+        type: Object,
+        default: null
+    },
+    modelValue: {
+        type: [String, Number],
+        default: ""
+    },
+    type: {
+        type: String,
+        default: "text"
+    },
+    placeholder: {
+        type: String,
+        default: ""
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    hasError: {
+        type: Boolean,
+        default: false
+    },
+    incrementer: {
+        type: Boolean,
+        default: false
+    },
+    zIndex: {
+        type: String,
+        default: "0",
+        validator: (value) => ["dropdown", "tooltip", "0", "1", "2"].includes(value)
+    }
+});
+
+const emit = defineEmits(["update:modelValue", "increment", "decrement"]);
+const attrs = useAttrs();
 
 const zIndexClasses = {
-  dropdown: 'z-dropdown',
-  tooltip: 'z-tooltip',
-  '0': 'z-0',
-  '1': 'z-10',
-  '2': 'z-20'
-}
+    dropdown: "z-dropdown",
+    tooltip: "z-tooltip",
+    0: "z-0",
+    1: "z-10",
+    2: "z-20"
+};
 </script>
 
 <template>
-  <div class="flex flex-col" :class="zIndexClasses[zIndex]">
-    <label class="mb-2 text-sm font-medium text-light-400 flex items-center gap-2">
-      {{ label }}
-      <component :is="icon" v-if="icon" class="w-4 h-4" />
-    </label>
-    <div
-      class="relative flex items-center bg-dark-500 border rounded-md transition-colors"
-      :class="[
-        hasError ? 'border-error-500' : 'border-dark-600',
-        required ? 'ring-2 ring-primary/20' : ''
-      ]"
-    >
-      <slot>
-        <input
-          :type="type"
-          :placeholder="placeholder"
-          :value="modelValue"
-          @input="emit('update:modelValue', $event.target.value)"
-          v-bind="attrs"
-          class="w-full px-3 py-2 bg-transparent text-light-300 outline-none"
-        />
-      </slot>
-      <div v-if="incrementer" class="flex flex-col border-l border-dark-600">
-        <button
-          @click="emit('increment')"
-          type="button"
-          class="px-2 py-1 hover:bg-dark-650 transition-colors"
-        >
-          <UpIcon class="w-3 h-3 text-light-400" />
-        </button>
-        <button
-          @click="emit('decrement')"
-          type="button"
-          class="px-2 py-1 hover:bg-dark-650 transition-colors"
-        >
-          <DownIcon class="w-3 h-3 text-light-400" />
-        </button>
-      </div>
+    <div class="flex flex-col" :class="zIndexClasses[zIndex]">
+        <label class="mb-2 flex items-center gap-2 text-sm font-medium text-light-400">
+            {{ label }}
+            <component :is="icon" v-if="icon" class="h-4 w-4" />
+        </label>
+        <div
+            class="relative flex items-center rounded-md border bg-dark-500 transition-colors"
+            :class="[hasError ? 'border-error-500' : 'border-dark-600', required ? 'ring-primary/20 ring-2' : '']">
+            <slot>
+                <input
+                    :type="type"
+                    :placeholder="placeholder"
+                    :value="modelValue"
+                    @input="emit('update:modelValue', $event.target.value)"
+                    v-bind="attrs"
+                    class="w-full bg-transparent px-3 py-2 text-light-300 outline-none" />
+            </slot>
+            <div v-if="incrementer" class="flex flex-col border-l border-dark-600">
+                <button @click="emit('increment')" type="button" class="px-2 py-1 transition-colors hover:bg-dark-650">
+                    <UpIcon class="h-3 w-3 text-light-400" />
+                </button>
+                <button @click="emit('decrement')" type="button" class="px-2 py-1 transition-colors hover:bg-dark-650">
+                    <DownIcon class="h-3 w-3 text-light-400" />
+                </button>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 ```
 
@@ -1324,12 +1335,13 @@ git commit -m "feat: create FormField component
 ### Task 5.2: Replace FormField in CreateTaskAXS.vue
 
 **Files:**
+
 - Modify: `src/components/Tasks/CreateTaskAXS.vue`
 
 **Step 1: Import FormField**
 
 ```javascript
-import FormField from '@/components/ui/FormField.vue'
+import FormField from "@/components/ui/FormField.vue";
 ```
 
 **Step 2: Replace input wrapper markup**
@@ -1351,12 +1363,7 @@ Find all instances of:
 Replace with:
 
 ```vue
-<FormField
-  label="Name"
-  :icon="NameIcon"
-  v-model="name"
-  type="text"
-/>
+<FormField label="Name" :icon="NameIcon" v-model="name" type="text" />
 ```
 
 **Step 3: Remove old input-wrapper styles**
@@ -1380,6 +1387,7 @@ git commit -m "refactor: use FormField component in CreateTaskAXS.vue
 ### Task 5.3: Replace FormField in CreateTaskTM.vue
 
 **Files:**
+
 - Modify: `src/components/Tasks/CreateTaskTM.vue`
 
 **Step 1-5:** Same as Task 5.2
@@ -1396,6 +1404,7 @@ git commit -m "refactor: use FormField component in CreateTaskTM.vue"
 ### Task 5.4: Replace FormField in CreateAccount.vue
 
 **Files:**
+
 - Modify: `src/components/Editors/Account/CreateAccount.vue`
 
 **Step 1-5:** Same as Task 5.2
@@ -1412,6 +1421,7 @@ git commit -m "refactor: use FormField component in CreateAccount.vue"
 ### Task 5.5: Replace FormField in CreateProfile.vue
 
 **Files:**
+
 - Modify: `src/components/Editors/Profile/CreateProfile.vue`
 
 **Step 1-5:** Same as Task 5.2
@@ -1428,71 +1438,63 @@ git commit -m "refactor: use FormField component in CreateProfile.vue"
 ### Task 5.6: Create InfoRow Component
 
 **Files:**
+
 - Create: `src/components/ui/InfoRow.vue`
 
 **Step 1: Create component**
 
 ```vue
 <script setup>
-import { defineProps } from 'vue'
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+import { useCopyToClipboard } from "@/composables/useCopyToClipboard";
 
 const props = defineProps({
-  icon: {
-    type: Object,
-    default: null
-  },
-  label: {
-    type: String,
-    required: true
-  },
-  value: {
-    type: [String, Number],
-    default: ''
-  },
-  valueClass: {
-    type: String,
-    default: ''
-  },
-  copyable: {
-    type: Boolean,
-    default: false
-  },
-  copyText: {
-    type: String,
-    default: ''
-  }
-})
-
-const { copy } = useCopyToClipboard()
+    icon: {
+        type: Object,
+        default: null
+    },
+    label: {
+        type: String,
+        required: true
+    },
+    value: {
+        type: [String, Number],
+        default: ""
+    },
+    valueClass: {
+        type: String,
+        default: ""
+    },
+    copyable: {
+        type: Boolean,
+        default: false
+    },
+    copyText: {
+        type: String,
+        default: ""
+    }
+});
+
+const { copy } = useCopyToClipboard();
 
 const handleCopy = () => {
-  if (props.copyable) {
-    copy(props.copyText || props.value, 'Copied')
-  }
-}
+    if (props.copyable) {
+        copy(props.copyText || props.value, "Copied");
+    }
+};
 </script>
 
 <template>
-  <div
-    class="flex items-center gap-3 py-2 px-3 rounded-md hover:bg-dark-400/50 transition-colors"
-    :class="{ 'cursor-pointer': copyable }"
-    @click="handleCopy"
-  >
-    <component
-      :is="icon"
-      v-if="icon"
-      class="w-5 h-5 text-light-500 flex-shrink-0"
-    />
-    <span class="text-sm text-light-500 min-w-[100px]">{{ label }}</span>
-    <span
-      class="text-sm text-light-300 flex-1 text-right"
-      :class="valueClass"
-    >
-      <slot>{{ value }}</slot>
-    </span>
-    <slot name="actions" />
-  </div>
+    <div
+        class="flex items-center gap-3 rounded-md px-3 py-2 transition-colors hover:bg-dark-400/50"
+        :class="{ 'cursor-pointer': copyable }"
+        @click="handleCopy">
+        <component :is="icon" v-if="icon" class="h-5 w-5 flex-shrink-0 text-light-500" />
+        <span class="min-w-[100px] text-sm text-light-500">{{ label }}</span>
+        <span class="flex-1 text-right text-sm text-light-300" :class="valueClass">
+            <slot>{{ value }}</slot>
+        </span>
+        <slot name="actions" />
+    </div>
 </template>
 ```
 
@@ -1514,12 +1516,13 @@ git commit -m "feat: create InfoRow component
 ### Task 5.7: Replace InfoRow in ViewTask.vue
 
 **Files:**
+
 - Modify: `src/components/Tasks/ViewTask.vue`
 
 **Step 1: Import InfoRow**
 
 ```javascript
-import InfoRow from '@/components/ui/InfoRow.vue'
+import InfoRow from "@/components/ui/InfoRow.vue";
 ```
 
 **Step 2: Replace info row markup**
@@ -1537,13 +1540,7 @@ Find instances like:
 Replace with:
 
 ```vue
-<InfoRow
-  :icon="IdIcon"
-  label="ID"
-  :value="task.id"
-  copyable
-  :copy-text="task.id"
-/>
+<InfoRow :icon="IdIcon" label="ID" :value="task.id" copyable :copy-text="task.id" />
 ```
 
 **Step 3: Test**
@@ -1566,32 +1563,28 @@ git commit -m "refactor: use InfoRow component in ViewTask.vue
 ### Task 5.8: Create SectionCard Component
 
 **Files:**
+
 - Create: `src/components/ui/SectionCard.vue`
 
 **Step 1: Create component**
 
 ```vue
 <script setup>
-import { defineProps } from 'vue'
-
 const props = defineProps({
-  title: {
-    type: String,
-    default: ''
-  }
-})
+    title: {
+        type: String,
+        default: ""
+    }
+});
 </script>
 
 <template>
-  <div class="bg-dark-400 rounded-lg p-4 border border-dark-600">
-    <h3
-      v-if="title"
-      class="text-lg font-semibold text-light-300 mb-4 pb-2 border-b border-dark-600"
-    >
-      {{ title }}
-    </h3>
-    <slot />
-  </div>
+    <div class="rounded-lg border border-dark-600 bg-dark-400 p-4">
+        <h3 v-if="title" class="mb-4 border-b border-dark-600 pb-2 text-lg font-semibold text-light-300">
+            {{ title }}
+        </h3>
+        <slot />
+    </div>
 </template>
 ```
 
@@ -1611,6 +1604,7 @@ git commit -m "feat: create SectionCard component
 ### Task 5.9: Use SectionCard in ViewTask.vue
 
 **Files:**
+
 - Modify: `src/components/Tasks/ViewTask.vue`
 
 **Step 1: Import SectionCard**
@@ -1650,15 +1644,16 @@ git commit -m "refactor: use SectionCard component in ViewTask.vue"
 ### Task 5.10: Create ActionButtonGroup Component
 
 **Files:**
+
 - Create: `src/components/ui/ActionButtonGroup.vue`
 
 **Step 1: Create component**
 
 ```vue
 <template>
-  <ul class="flex items-center gap-1 mobile-portrait:gap-0.5">
-    <slot />
-  </ul>
+    <ul class="flex items-center gap-1 mobile-portrait:gap-0.5">
+        <slot />
+    </ul>
 </template>
 
 <style scoped>
@@ -1682,6 +1677,7 @@ git commit -m "feat: create ActionButtonGroup component
 ### Task 5.11: Use ActionButtonGroup in Task.vue
 
 **Files:**
+
 - Modify: `src/components/Tasks/Task.vue`
 
 **Step 1: Import ActionButtonGroup**
@@ -1725,6 +1721,7 @@ git commit -m "refactor: use ActionButtonGroup in Task.vue
 ### Task 5.12: Use ActionButtonGroup in Account.vue
 
 **Files:**
+
 - Modify: `src/components/Editors/Account/Account.vue`
 
 **Step 1-5:** Same as Task 5.11
@@ -1741,6 +1738,7 @@ git commit -m "refactor: use ActionButtonGroup in Account.vue"
 ### Task 5.13: Use ActionButtonGroup in Profile.vue
 
 **Files:**
+
 - Modify: `src/components/Editors/Profile/Profile.vue`
 
 **Step 1-5:** Same as Task 5.11
@@ -1759,6 +1757,7 @@ git commit -m "refactor: use ActionButtonGroup in Profile.vue"
 ### Task 6.1: Replace Hardcoded Gray Colors
 
 **Files:**
+
 - Modify: `src/components/Editors/Account/AccountView.vue`
 - Modify: `src/components/Editors/Profile/ProfileView.vue`
 - Modify: `src/components/Tasks/TaskView.vue`
@@ -1792,6 +1791,7 @@ git commit -m "refactor: replace hardcoded gray text colors with theme tokens
 ### Task 6.2: Replace rgba Gray Backgrounds in Filter.vue
 
 **Files:**
+
 - Modify: `src/components/Filter/Filter.vue`
 
 **Step 1: Replace rgba(61, 62, 68, X)**
@@ -1836,6 +1836,7 @@ git commit -m "refactor: replace rgba gray backgrounds with dark scale tokens
 ### Task 6.3: Replace Error Color Variations
 
 **Files:**
+
 - Modify: `src/components/Filter/Filter.vue`
 - Modify: `src/components/Editors/Profile/CreateProfile.vue`
 - Modify: `src/components/Editors/Account/CreateAccount.vue`
@@ -1870,6 +1871,7 @@ git commit -m "refactor: standardize error colors
 ### Task 6.4: Replace Modal Overlay Color
 
 **Files:**
+
 - Modify: `src/components/ui/Modal.vue` (if not done in Task 4.3)
 
 **Step 1: Replace rgba(17, 17, 17, 0.85)**
@@ -1893,6 +1895,7 @@ git commit -m "refactor: use overlay-dark token for modal background"
 ### Task 6.5: Replace Accent Color Variations in ReconnectIndicator
 
 **Files:**
+
 - Modify: `src/components/ui/ReconnectIndicator.vue`
 
 **Step 1: Replace rgba(136, 201, 153, X)**
@@ -1929,6 +1932,7 @@ git commit -m "refactor: use accent-green token for reconnect indicator
 ### Task 7.1: Clean Up CountryChooser.vue
 
 **Files:**
+
 - Modify: `src/components/ui/controls/CountryChooser.vue`
 
 **Step 1: Replace circular button hack**
@@ -1988,6 +1992,7 @@ git commit -m "refactor: clean up CountryChooser.vue
 ### Task 7.2: Clean Up Table.vue
 
 **Files:**
+
 - Modify: `src/components/Table/Table.vue`
 
 **Step 1: Remove scroll !important**
@@ -2016,8 +2021,8 @@ Remove:
 
 ```css
 @media (orientation: landscape) {
-  max-height: calc(100vh - 160px) !important;
-  margin-bottom: 2rem !important;
+    max-height: calc(100vh - 160px) !important;
+    margin-bottom: 2rem !important;
 }
 ```
 
@@ -2044,6 +2049,7 @@ git commit -m "refactor: clean up Table.vue
 ### Task 7.3: Clean Up Console.vue
 
 **Files:**
+
 - Modify: `src/views/Console.vue`
 
 **Step 1: Optimize responsive padding**
@@ -2053,7 +2059,7 @@ Replace:
 ```css
 padding-bottom: 4rem;
 @media (max-width: 480px) {
-  padding-bottom: 6rem;
+    padding-bottom: 6rem;
 }
 ```
 
@@ -2081,6 +2087,7 @@ git commit -m "refactor: clean up Console.vue responsive padding"
 ### Task 7.4: Clean Up Tasks.vue
 
 **Files:**
+
 - Modify: `src/views/Tasks.vue`
 
 **Step 1: Remove PWA padding hack**
@@ -2089,7 +2096,7 @@ Find:
 
 ```css
 @media (display-mode: standalone) {
-  padding-bottom: X !important;
+    padding-bottom: X !important;
 }
 ```
 
@@ -2113,6 +2120,7 @@ git commit -m "refactor: clean up Tasks.vue PWA hacks"
 ### Task 7.5: Clean Up Switch.vue
 
 **Files:**
+
 - Modify: `src/components/ui/controls/atomic/Switch.vue`
 
 **Step 1: Convert hardcoded px to Tailwind**
@@ -2135,6 +2143,7 @@ git commit -m "refactor: optimize Switch.vue with Tailwind where applicable"
 ### Task 7.6: Clean Up Splash.vue
 
 **Files:**
+
 - Modify: `src/components/ui/Splash.vue`
 
 **Step 1: Replace background-color**
@@ -2160,6 +2169,7 @@ git commit -m "refactor: use theme color in Splash.vue"
 ### Task 8.1: Run Automated Verification Plan
 
 **Files:**
+
 - Reference: `/Users/luca/Documents/GitHub/Necro/Dashboard/VERIFICATION_PLAN.md`
 
 **Step 1: Start both dev servers**
@@ -2170,6 +2180,7 @@ Expected: Servers on 5173 and 8081
 **Step 2: Manual quick check**
 
 Test critical paths:
+
 - Login flow
 - Navigate to each route
 - Open/close modals
@@ -2180,6 +2191,7 @@ Test critical paths:
 **Step 3: Responsive testing**
 
 Test at breakpoints:
+
 - Mobile portrait (375px)
 - iPad Pro (1024px)
 - Desktop (1920px)
@@ -2207,6 +2219,7 @@ git commit -m "docs: verification results for Tailwind consolidation"
 ### Task 8.2: Count Remaining CSS Lines
 
 **Files:**
+
 - All Vue files
 
 **Step 1: Count <style> blocks**
@@ -2220,10 +2233,12 @@ Run: `grep -r "!important" src/components src/views | wc -l`
 **Step 3: Compare with baseline**
 
 Baseline:
+
 - 53 files with `<style>` blocks
 - 378 `!important` declarations
 
 Target:
+
 - < 20 files with `<style>` blocks (animations only)
 - < 50 `!important` declarations
 
@@ -2236,6 +2251,7 @@ Create summary in docs/plans/2026-02-08-tailwind-consolidation-results.md
 ### Task 8.3: Create Final Summary Report
 
 **Files:**
+
 - Create: `docs/plans/2026-02-08-tailwind-consolidation-results.md`
 
 **Step 1: Document changes**
@@ -2246,12 +2262,14 @@ Create summary in docs/plans/2026-02-08-tailwind-consolidation-results.md
 ## Metrics
 
 **Before:**
+
 - Files with <style> blocks: 53
 - !important declarations: 378
 - Lines of CSS: ~2000
 - Duplicate components: 7 patterns identified
 
 **After:**
+
 - Files with <style> blocks: X
 - !important declarations: X
 - Lines of CSS: ~X
@@ -2275,7 +2293,7 @@ Create summary in docs/plans/2026-02-08-tailwind-consolidation-results.md
 - Dark scale extensions: 350, 450, 475, 625, 675
 - Error colors: 300, 400, 500
 - Overlay colors: dark, darker
-- Semantic tokens: text-*, bg-*, border-focus, primary
+- Semantic tokens: text-_, bg-_, border-focus, primary
 - Shadow system: 7 new shadows
 - Font sizes: xxs, xxxs
 
@@ -2310,6 +2328,7 @@ git commit -m "docs: Tailwind consolidation completion report"
 ### Task 9.1: Update README (if exists)
 
 **Files:**
+
 - Modify: `README.md` (if exists)
 
 **Step 1: Document new components**
@@ -2393,6 +2412,7 @@ All functionality verified, no regressions."
 **Estimated time:** 8-12 hours (depending on file complexity)
 
 **Recommended approach:**
+
 1. Execute phases sequentially
 2. Test after each phase before moving to next
 3. Commit frequently (after each task)
@@ -2400,12 +2420,14 @@ All functionality verified, no regressions."
 
 **Rollback strategy:**
 If any phase causes issues, rollback to previous phase commit:
+
 ```bash
 git log --oneline
 git reset --hard <commit-hash>
 ```
 
 **Testing checklist per phase:**
+
 - [ ] Phase 1: Dev server starts, no config errors
 - [ ] Phase 2: App loads without landscape lock
 - [ ] Phase 3: Components render correctly