Refactor install wizard and mail configuration

resources/scripts/features/installation/views/RequirementsView.vue

@@ -3,52 +3,39 @@
     :title="$t('wizard.req.system_req')"
     :description="$t('wizard.req.system_req_desc')"
   >
-    <div class="w-full">
-      <div class="mb-6">
-        <div
-          v-if="phpSupportInfo"
-          class="grid grid-flow-row grid-cols-3 p-3 border border-line-default lg:gap-24 sm:gap-4"
-        >
-          <div class="col-span-2 text-sm">
-            {{ $t('wizard.req.php_req_version', { version: phpSupportInfo.minimum }) }}
-          </div>
-          <div class="text-right">
-            {{ phpSupportInfo.current }}
-            <span
-              v-if="phpSupportInfo.supported"
-              class="inline-block w-4 h-4 ml-3 mr-2 bg-green-500 rounded-full"
-            />
-            <span
-              v-else
-              class="inline-block w-4 h-4 ml-3 mr-2 bg-red-500 rounded-full"
-            />
-          </div>
-        </div>
-
-        <div v-if="requirements">
-          <div
-            v-for="(fulfilled, name) in requirements"
-            :key="name"
-            class="grid grid-flow-row grid-cols-3 p-3 border border-line-default lg:gap-24 sm:gap-4"
-          >
-            <div class="col-span-2 text-sm">{{ name }}</div>
-            <div class="text-right">
-              <span
-                v-if="fulfilled"
-                class="inline-block w-4 h-4 ml-3 mr-2 bg-green-500 rounded-full"
-              />
-              <span
-                v-else
-                class="inline-block w-4 h-4 ml-3 mr-2 bg-red-500 rounded-full"
-              />
-            </div>
-          </div>
-        </div>
+    <div
+      v-if="phpSupportInfo || requirements"
+      class="w-full overflow-hidden rounded-lg border border-line-default divide-y divide-line-default"
+    >
+      <!-- PHP version row — first so it's visually grouped with the extension list -->
+      <div
+        v-if="phpSupportInfo"
+        class="flex items-center justify-between px-4 py-3 hover:bg-hover transition-colors"
+      >
+        <span class="text-sm text-body">
+          {{ $t('wizard.req.php_req_version', { version: phpSupportInfo.minimum }) }}
+        </span>
+        <span class="flex items-center gap-2 text-sm font-medium text-body">
+          <span class="text-muted">{{ phpSupportInfo.current }}</span>
+          <RequirementBadge :ok="phpSupportInfo.supported" />
+        </span>
       </div>
 
+      <!-- Extension rows -->
+      <div
+        v-for="(fulfilled, name) in requirements"
+        :key="name"
+        class="flex items-center justify-between px-4 py-3 hover:bg-hover transition-colors"
+      >
+        <span class="text-sm text-body font-mono">{{ name }}</span>
+        <RequirementBadge :ok="fulfilled" />
+      </div>
+    </div>
+
+    <div class="mt-8 flex justify-end">
       <BaseButton v-if="hasNext" @click="next">
         {{ $t('wizard.continue') }}
-        <template #left="slotProps">
+        <template #right="slotProps">
           <BaseIcon name="ArrowRightIcon" :class="slotProps.class" />
         </template>
       </BaseButton>
@@ -67,7 +54,10 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { client } from '../../../api/client'
+import { useRouter } from 'vue-router'
+import { installClient } from '../../../api/install-client'
+import RequirementBadge from '../components/RequirementBadge.vue'
+import { useInstallationFeedback } from '../use-installation-feedback'
 
 interface PhpSupportInfo {
   minimum: string
@@ -75,11 +65,8 @@ interface PhpSupportInfo {
   supported: boolean
 }
 
-interface Emits {
-  (e: 'next'): void
-}
-
-const emit = defineEmits<Emits>()
+const router = useRouter()
+const { showRequestError } = useInstallationFeedback()
 
 const requirements = ref<Record<string, boolean> | null>(null)
 const phpSupportInfo = ref<PhpSupportInfo | null>(null)
@@ -98,17 +85,22 @@ onMounted(() => {
 async function getRequirements(): Promise<void> {
   isSaving.value = true
   try {
-    const { data } = await client.get('/api/v1/installation/requirements')
+    const { data } = await installClient.get('/api/v1/installation/requirements')
     requirements.value = data?.requirements?.requirements?.php ?? null
     phpSupportInfo.value = data?.phpSupportInfo ?? null
+  } catch (error: unknown) {
+    showRequestError(error)
   } finally {
     isSaving.value = false
   }
 }
 
-function next(): void {
+async function next(): Promise<void> {
   isSaving.value = true
-  emit('next')
-  isSaving.value = false
+  try {
+    await router.push({ name: 'installation.permissions' })
+  } finally {
+    isSaving.value = false
+  }
 }
 </script>