switch to useOverlay

apps/shelve/app/components/ConfirmModal.vue

@@ -7,21 +7,20 @@ type ConfirmModalProps = {
 
 defineProps<ConfirmModalProps>()
 
-const modal = useModal()
-const emit = defineEmits(['success', 'cancel'])
+const emit = defineEmits<{ close: [boolean], success: [void], cancel: [void] }>()
 
 function onSuccess() {
   emit('success')
-  modal.close()
+  emit('close', false)
 }
 
 function onCancel() {
-  modal.close()
+  emit('close', false)
 }
 </script>
 
 <template>
-  <UModal :title :description>
+  <UModal :close="{ onClick: () => emit('close', false) }" :title :description>
     <template #footer>
       <div class="flex w-full justify-end gap-2">
         <UButton variant="ghost" @click="onCancel">

apps/shelve/app/components/layout/Navbar.vue

@@ -107,6 +107,7 @@ defineShortcuts({
               <input
                 id="search-input"
                 v-model="searchQuery"
+                autocomplete="off"
                 type="text"
                 placeholder="Search..."
                 class="bg-transparent border-none outline-none size-full text-(--ui-text-highlighted) placeholder:text-(--ui-text-muted)"

apps/shelve/app/components/variable/Selector.vue

@@ -11,7 +11,10 @@ const selectedVariables = defineModel<Variable[]>({ required: true })
 const { deleteVariables } = useVariablesService()
 
 const loading = ref(false)
-const modal = useModal()
+
+const overlay = useOverlay()
+const modal = overlay.create(ConfirmModal)
+
 const teamEnv = useEnvironments()
 
 function selectAllVisible() {
@@ -27,7 +30,7 @@ async function deleteSelectedVariables() {
 }
 
 function openDeleteModal() {
-  modal.open(ConfirmModal, {
+  modal.open({
     title: 'Are you sure?',
     description: `You are about to delete ${selectedVariables.value.length} variable${selectedVariables.value.length > 1 ? 's' : '' }, this action cannot be undone`,
     danger: true,

apps/shelve/app/pages/[teamSlug]/environments.vue

@@ -46,13 +46,15 @@ async function deleteEnv(env: Environment) {
   await fetchEnvironments()
 }
 
-const modal = useModal()
+const overlay = useOverlay()
+const modal = overlay.create(ConfirmModal)
+
 function openDeleteModal(env: Environment) {
   if (environments.value.length === 1) {
     toast.error('You cannot delete the last environment')
     return
   }
-  modal.open(ConfirmModal, {
+  modal.open({
     title: 'Are you sure?',
     description: `You are about to delete ${env.name}. This action cannot be undone and all variables associated with this environment will be lost.`,
     danger: true,

apps/shelve/app/pages/[teamSlug]/members.vue

@@ -22,7 +22,8 @@ function changeMemberRole(memberId: number, role: TeamRole) {
   })
 }
 
-const modal = useModal()
+const overlay = useOverlay()
+const modal = overlay.create(ConfirmModal)
 
 const items = (row: Member) => [
   [
@@ -70,7 +71,7 @@ const items = (row: Member) => [
           toast.error('Cannot delete team owner')
           return
         }
-        modal.open(ConfirmModal, {
+        modal.open({
           title: 'Are you sure?',
           description: `You are about to remove ${row.user.username} from the team.`,
           danger: true,

apps/shelve/app/pages/[teamSlug]/settings.vue

@@ -23,9 +23,11 @@ function updateCurrentTeam() {
   updateLoading.value = false
 }
 
-const modal = useModal()
+const overlay = useOverlay()
+const modal = overlay.create(ConfirmModal)
+
 function deleteCurrentTeam() {
-  modal.open(ConfirmModal, {
+  modal.open({
     title: 'Delete Team',
     description: 'Are you sure you want to delete this team?',
     danger: true,

apps/shelve/app/pages/admin/index.vue

@@ -106,7 +106,8 @@ const columns: TableColumn<User>[] = [
   },
 ]
 
-const modal = useModal()
+const overlay = useOverlay()
+const modal = overlay.create(ConfirmModal)
 
 const items = (row: User) => [
   [
@@ -139,7 +140,7 @@ const items = (row: User) => [
           toast.error('Cannot delete admin')
           return
         }
-        modal.open(ConfirmModal, {
+        modal.open({
           title: 'Are you sure?',
           description: `You are about to delete ${row.username ? row.username : row.email}, this action cannot be undone.`,
           danger: true,

apps/shelve/app/pages/user/integrations/github.vue

@@ -35,9 +35,11 @@ const manifest = {
   }
 }
 
-const modal = useModal()
+const overlay = useOverlay()
+const modal = overlay.create(ConfirmModal)
+
 function openDeleteModal(slug: string) {
-  modal.open(ConfirmModal, {
+  modal.open({
     title: 'Delete Github App',
     description: `You are about to delete ${slug}. This action cannot be undone.`,
     danger: true,

apps/shelve/app/pages/user/profile.vue

@@ -30,9 +30,11 @@ async function deleteUser() {
   await useRouter().push('/login')
 }
 
-const modal = useModal()
+const overlay = useOverlay()
+const modal = overlay.create(ConfirmModal)
+
 function deleteAccount() {
-  modal.open(ConfirmModal, {
+  modal.open({
     title: 'Delete my account',
     description: `You are about to delete ${user.value!.username}. This action cannot be undone and all data associated with this account will be lost.`,
     danger: true,

apps/shelve/app/pages/user/tokens.vue

@@ -38,7 +38,7 @@ const items = (row: Token) => [
       label: 'Delete',
       icon: 'lucide:trash',
       onSelect: () => {
-        modal.open(ConfirmModal, {
+        modal.open({
           title: 'Are you sure?',
           description: `You are about to delete ${row.name} token which is currently ${isTokenActive(row.updatedAt) ? 'active' : 'inactive'}, this action cannot be undone.`,
           danger: true,
@@ -76,7 +76,8 @@ async function fetchTokens() {
   loading.value = false
 }
 
-const modal = useModal()
+const overlay = useOverlay()
+const modal = overlay.create(ConfirmModal)
 
 async function deleteToken(token: Token) {
   await $fetch(`/api/tokens/${token.id}`, {