fix: easier scanning by aligning labels

Author: chenasraf

src/components/ChecklistItemRow/ChecklistItemRow.test.ts

@@ -9,6 +9,7 @@ vi.mock('@icons/Repeat.vue', () => createIconMock('RepeatIcon'))
 vi.mock('@icons/Pencil.vue', () => createIconMock('PencilIcon'))
 vi.mock('@icons/Eye.vue', () => createIconMock('EyeIcon'))
 vi.mock('@icons/Delete.vue', () => createIconMock('DeleteIcon'))
+vi.mock('@icons/ArrowRight.vue', () => createIconMock('ArrowRightIcon'))
 
 vi.mock('@nextcloud/vue/components/NcButton', () => ({
   default: {
@@ -195,6 +196,15 @@ describe('ChecklistItemRow', () => {
       expect(wrapper.emitted('edit')![0]).toEqual([item])
     })
 
+    it('emits move with item on move action click', async () => {
+      const item = makeItem()
+      const wrapper = mount(ChecklistItemRow, { props: { ...defaultProps, item } })
+      const moveBtn = wrapper.findAll('.nc-action-button').find((b) => b.text() === 'Move to list')!
+      await moveBtn.trigger('click')
+      expect(wrapper.emitted('move')).toBeTruthy()
+      expect(wrapper.emitted('move')![0]).toEqual([item])
+    })
+
     it('emits remove with item id on remove action click', async () => {
       const item = makeItem({ id: 9 })
       const wrapper = mount(ChecklistItemRow, { props: { ...defaultProps, item } })

src/components/ChecklistItemRow/ChecklistItemRow.vue

@@ -24,14 +24,14 @@
     </NcCheckboxRadioSwitch>
     <div class="checklist-row__meta">
       <span v-if="item.quantity" class="checklist-row__quantity">&times; {{ item.quantity }}</span>
-      <span v-if="category" class="checklist-row__category" :style="{ color: category.color }">
-        <component :is="categoryIconComponent(category.icon)" :size="14" />
-        {{ category.name }}
-      </span>
       <span v-if="item.rrule" class="checklist-row__recurrence" :title="item.rrule">
         <RepeatIcon :size="14" />
         {{ formatRrule(item.rrule) }}
       </span>
+      <span v-if="category" class="checklist-row__category" :style="{ color: category.color }">
+        <component :is="categoryIconComponent(category.icon)" :size="14" />
+        {{ category.name }}
+      </span>
     </div>
     <div class="checklist-row__actions">
       <NcButton variant="tertiary" :aria-label="strings.viewItem" @click="$emit('view', item)">