feat: Implement drag-and-drop reordering for routine items and add corresponding E2E tests

Co-authored-by: Copilot <copilot@github.com>

frontend/src/components/child/RoutineAssignView.vue

@@ -12,15 +12,16 @@
           class="routine-item"
           @click="toggleRoutine(routine.id)"
         >
-          <input
-            type="checkbox"
-            :checked="selectedIds.includes(routine.id)"
-            @change="toggleRoutine(routine.id)"
-            :aria-label="`Select ${routine.name}`"
-          />
           <img v-if="routine.image_url" :src="routine.image_url" :alt="routine.name" />
           <span class="name">{{ routine.name }}</span>
           <span class="value">{{ routine.points }} pts</span>
+          <input
+            type="checkbox"
+            v-model="selectedIds"
+            :value="routine.id"
+            :aria-label="`Select ${routine.name}`"
+            @click.stop
+          />
         </div>
       </div>
     </div>
@@ -38,6 +39,7 @@ import { ref, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { setChildRoutines } from '@/common/api'
 import MessageBlock from '../shared/MessageBlock.vue'
+import { getCachedImageUrl } from '@/common/imageCache'
 import '@/assets/styles.css'
 import type { Routine } from '@/common/models'
 
@@ -61,11 +63,23 @@ async function fetchRoutines() {
     const childData = await childResp.json()
     selectedIds.value = childData.routines || []
 
-    // Fetch all routines
+    // Fetch all routines and resolve images
     const routinesResp = await fetch('/api/routine/list')
     if (!routinesResp.ok) throw new Error('Failed to fetch routines')
     const routinesData = await routinesResp.json()
-    routines.value = routinesData.routines || []
+    const rawRoutines: Routine[] = routinesData.routines || []
+    await Promise.all(
+      rawRoutines.map(async (r: any) => {
+        if (r.image_id) {
+          try {
+            r.image_url = await getCachedImageUrl(r.image_id)
+          } catch {
+            r.image_url = null
+          }
+        }
+      }),
+    )
+    routines.value = rawRoutines
   } catch (error) {
     console.error('Failed to fetch routines:', error)
   }
@@ -135,52 +149,65 @@ function onCancel() {
 }
 
 .routine-selection {
+  flex: 0 1 auto;
+  max-width: 480px;
+  width: 100%;
+  max-height: calc(100vh - 4.5rem);
+  overflow-y: auto;
+  margin: 0.2rem 0 0 0;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
-  max-width: 500px;
+  gap: 0.7rem;
+  background: var(--list-bg);
+  padding: 0.2rem;
+  border-radius: 12px;
 }
 
 .routine-item {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  border: 2px solid var(--list-item-border-good);
+  justify-content: space-between;
+  border: 2px outset var(--list-item-border-good);
   border-radius: 8px;
+  padding: 0.2rem 1rem;
   background: var(--list-item-bg-good);
+  font-size: 1.05rem;
+  font-weight: 500;
+  transition: border 0.18s;
+  margin-bottom: 0.2rem;
+  margin-left: 0.2rem;
+  margin-right: 0.2rem;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
+  box-sizing: border-box;
   cursor: pointer;
-  transition:
-    background 0.2s,
-    border-color 0.2s;
-}
-
-.routine-item:hover {
-  background: var(--list-item-bg-good-hover, var(--list-item-bg-good));
-  border-color: var(--list-item-border-good-hover, var(--list-item-border-good));
 }
 
 .routine-item input[type='checkbox'] {
   cursor: pointer;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1.2em;
+  height: 1.2em;
+  margin-left: 1rem;
+  accent-color: var(--checkbox-accent);
+  flex-shrink: 0;
 }
 
 .routine-item img {
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 6px;
+  width: 36px;
+  height: 36px;
   object-fit: cover;
+  border-radius: 8px;
+  margin-right: 0.7rem;
+  background: var(--list-image-bg);
+  flex-shrink: 0;
 }
 
-.routine-item .name {
+.name {
   flex: 1;
   text-align: left;
   font-weight: 600;
 }
 
-.routine-item .value {
+.value {
   min-width: 60px;
   text-align: right;
   font-weight: 600;