<script setup>
/**
 * Resolves `/settings` to the first settings child the user may open (permission order).
 */
import { useAuth } from "../../composables/useAuth";
import { getFirstPermittedSettingsPath } from "../../composables/useSettingsNavigation";

import ProgressSpinner from "primevue/progressspinner";

import { onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const { permissions } = useAuth();

onMounted(() => {
  router.replace(
    getFirstPermittedSettingsPath(permissions.value ?? []),
  );
});
</script>

<template>
  <div class="flex items-center justify-center min-h-[8rem]" aria-busy="true">
    <ProgressSpinner aria-label="Loading settings" stroke-width="3" />
  </div>
</template>
