feat: add theme management feature drag-and-drop reordering

Author: liorcodev

app/assets/docs/quick-start.md

@@ -12,6 +12,33 @@
 
 ---
 
+## Managing Saved Themes
+
+### Reordering Themes
+
+- **Drag and drop** any saved theme to reorder them in your list
+- The entire theme card is draggable - just click and drag to your preferred position
+- Great for organizing themes by priority or project
+
+### Theme Actions
+
+Each saved theme has quick actions:
+
+- **🎨 Apply** - Load the theme color into the color picker for editing
+- **⭐ Star** - Set as the default theme (marked with a star icon)
+- **🗑️ Remove** - Delete the theme from your collection
+
+### Tips
+
+- **Hover** over truncated theme names to see the full name in a tooltip
+- **Export/Import** your entire theme collection as JSON to share or backup
+  - Exports include all themes, the default theme, and your export options (Tailwind/Nuxt UI
+    settings)
+  - Importing restores themes and settings automatically
+- The **default theme** (marked with ⭐) is highlighted in exports
+
+---
+
 ## Generated Files
 
 When you click **Download ZIP**, you get three ready-to-use files:

app/components/ThemeList.vue

@@ -26,18 +26,30 @@
       <div class="text-xs text-muted font-medium uppercase tracking-wide">Saved themes</div>
 
       <div
-        v-for="theme in themes"
+        v-for="(theme, index) in themes"
         :key="theme.name"
-        class="flex items-center gap-2 px-3 py-2 rounded-lg border border-default bg-elevated hover:bg-accented transition-colors"
+        draggable="true"
+        class="flex items-center gap-2.5 px-3 py-2 rounded-lg border border-default bg-elevated hover:bg-accented transition-colors cursor-move"
+        :class="{
+          'opacity-50': draggedIndex === index,
+          'border-primary': dropTargetIndex === index
+        }"
+        @dragstart="handleDragStart(index, $event)"
+        @dragend="handleDragEnd"
+        @dragover="handleDragOver(index, $event)"
+        @dragleave="handleDragLeave"
+        @drop="handleDrop(index, $event)"
       >
         <!-- Color dot -->
         <div
           class="w-3 h-3 rounded-full shrink-0 ring-1 ring-default"
           :style="{ backgroundColor: theme.shades['500'] }"
         />
 
-        <!-- Name -->
-        <span class="flex-1 text-sm font-mono truncate">{{ theme.name }}</span>
+        <!-- Name with tooltip -->
+        <UTooltip :text="theme.name" class="flex-1 min-w-0">
+          <span class="block text-sm font-mono truncate">{{ theme.name }}</span>
+        </UTooltip>
 
         <!-- Apply to picker -->
         <UTooltip text="Apply to color picker">
@@ -125,6 +137,7 @@ const {
   removeTheme,
   setDefault,
   setColor,
+  reorderThemes,
   exportThemes,
   importThemes
 } = useThemeStore();
@@ -133,6 +146,48 @@ const fileInput = ref<HTMLInputElement | null>(null);
 const importMessage = ref('');
 const importError = ref(false);
 
+// Drag and drop state
+const draggedIndex = ref<number | null>(null);
+const dropTargetIndex = ref<number | null>(null);
+
+function handleDragStart(index: number, event: DragEvent) {
+  draggedIndex.value = index;
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.setData('text/plain', index.toString());
+  }
+}
+
+function handleDragEnd() {
+  draggedIndex.value = null;
+  dropTargetIndex.value = null;
+}
+
+function handleDragOver(index: number, event: DragEvent) {
+  event.preventDefault();
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'move';
+  }
+  if (draggedIndex.value !== null && draggedIndex.value !== index) {
+    dropTargetIndex.value = index;
+  }
+}
+
+function handleDragLeave() {
+  dropTargetIndex.value = null;
+}
+
+function handleDrop(toIndex: number, event: DragEvent) {
+  event.preventDefault();
+
+  if (draggedIndex.value !== null && draggedIndex.value !== toIndex) {
+    reorderThemes(draggedIndex.value, toIndex);
+  }
+
+  draggedIndex.value = null;
+  dropTargetIndex.value = null;
+}
+
 function applyTheme(theme: ThemeEntry) {
   // Apply the theme's base color (500 shade) to the color picker
   const baseColor = theme.shades['500'];

app/composables/useThemeStore.ts

@@ -70,6 +70,18 @@ function setDefault(name: string) {
   defaultTheme.value = name;
 }
 
+function reorderThemes(fromIndex: number, toIndex: number) {
+  if (fromIndex === toIndex) return;
+  if (fromIndex < 0 || fromIndex >= themes.value.length) return;
+  if (toIndex < 0 || toIndex >= themes.value.length) return;
+
+  const newThemes = [...themes.value];
+  const [movedTheme] = newThemes.splice(fromIndex, 1);
+  if (!movedTheme) return;
+  newThemes.splice(toIndex, 0, movedTheme);
+  themes.value = newThemes;
+}
+
 // Security validation functions
 function isValidHexColor(color: unknown): color is string {
   return typeof color === 'string' && HEX_COLOR_REGEX.test(color);
@@ -318,6 +330,7 @@ export function useThemeStore() {
     addTheme,
     removeTheme,
     setDefault,
+    reorderThemes,
     exportThemes,
     importThemes
   };

package.json

@@ -38,7 +38,7 @@
     "marked": "^18.0.2",
     "marked-highlight": "^2.2.4",
     "nuxt": "^4.4.2",
-    "tailwindcss": "^4.2.3",
+    "tailwindcss": "^4.2.4",
     "vue": "^3.5.32",
     "vue-router": "^5.0.4"
   },