refactor: uniform validation, fix create form UX, dedupe filter dropdowns

- Remove dead registerValidator (Auth/register.ts), unused since signupValidator
  is the one actually wired to NewAccountController
- computers/create.vue: switch to useForm() + @submit.prevent so the form
  submits on Enter and shows a processing state, matching components/create.vue
- components/edit.vue: drop the 'origin' field, which was never provided by
  the backend (edit() never shared it) and therefore always undefined
- Extract FilterDropdown.vue and reuse it in ComponentsViewer/ComputersViewer,
  removing ~80 lines of duplicated dropdown markup/logic and fixing duplicate
  HTML ids (id="used" appeared twice in ComputersViewer)
- Move MIGRATION_*.md artifacts into docs/migration-history/

inertia/pages/widgets/ComputersViewer.vue

@@ -3,106 +3,45 @@ import { noImagePlaceholder } from '~/assets/images'
 import { usePage } from '@inertiajs/vue3'
 import Computer from '#models/computer'
 import ComputerCard from '~/pages/widgets/ComputerCard.vue'
-import { computed, reactive, ref } from 'vue'
+import FilterDropdown from '~/pages/widgets/FilterDropdown.vue'
+import { computed, ref } from 'vue'
 
 const { computers } = usePage<{ computers: Computer[] }>().props
-const stateDropdownOpen = ref(false)
 
-function toggleDropdown() {
-  stateDropdownOpen.value = !stateDropdownOpen.value
-}
-
-const filters = reactive({
+const filters = ref<Record<string, boolean>>({
   onGoing: true,
   finished: true,
   sold: false,
 })
+
+const stateToFilterKey: Record<string, string> = {
+  ON_GOING: 'onGoing',
+  FINISHED: 'finished',
+  SOLD: 'sold',
+}
+
 const filteredComputers = computed(() => {
   return computers.filter((computer) => {
-    const isOnGoing = filters.onGoing && computer.state.name == 'ON_GOING'
-    const isFinished = filters.finished && computer.state.name == 'FINISHED'
-    const isSold = filters.sold && computer.state.name == 'SOLD'
-    return isOnGoing || isFinished || isSold
+    const key = stateToFilterKey[computer.state.name]
+    return key ? filters.value[key] : false
   })
 })
 </script>
 
 <template>
   <div>
-    <!-- Dropdown pour les filtres -->
     <div class="relative">
       <h4 class="text-xl underline">Filters</h4>
       <div class="flex gap-2">
-        <!-- Usage Dropdown -->
-        <div id="usage-selector" class="relative" style="width: fit-content">
-          <button
-            @click="toggleDropdown()"
-            class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition text-center inline-flex items-center"
-            type="button"
-          >
-            Usage
-            <svg
-              class="w-4 h-4 ml-2"
-              aria-hidden="true"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M19 9l-7 7-7-7"
-              ></path>
-            </svg>
-          </button>
-
-          <!-- Dropdown menu -->
-          <div
-            v-show="stateDropdownOpen"
-            class="absolute right-0 z-20 py-2 mt-2 bg-white rounded-md shadow-xl"
-          >
-            <ul class="space-y-2 text-sm px-4 py-2">
-              <li class="flex items-center">
-                <input
-                  id="unused"
-                  type="checkbox"
-                  v-model="filters.onGoing"
-                  class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
-                />
-                <label
-                  for="unused"
-                  class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100"
-                >
-                  On Going
-                </label>
-              </li>
-              <li class="flex items-center">
-                <input
-                  id="used"
-                  type="checkbox"
-                  v-model="filters.finished"
-                  class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
-                />
-                <label for="used" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">
-                  Finished
-                </label>
-              </li>
-              <li class="flex items-center">
-                <input
-                  id="used"
-                  type="checkbox"
-                  v-model="filters.sold"
-                  class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
-                />
-                <label for="used" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">
-                  Sold
-                </label>
-              </li>
-            </ul>
-          </div>
-        </div>
+        <FilterDropdown
+          v-model="filters"
+          label="Usage"
+          :options="[
+            { id: 'onGoing', label: 'On Going' },
+            { id: 'finished', label: 'Finished' },
+            { id: 'sold', label: 'Sold' },
+          ]"
+        />
       </div>
       <div class="mt-4 mb-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
         <ComputerCard
@@ -119,5 +58,3 @@ const filteredComputers = computed(() => {
     </div>
   </div>
 </template>
-
-<style scoped></style>