From 1d8cd1081f469dcb4d47fd9b94d56aebeb1fb2e3 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Wed, 7 May 2025 15:44:01 +0700
Subject: [PATCH 1/9] feat: add initial app layout with Nuxt components

---
 app.vue | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 app.vue

diff --git a/app.vue b/app.vue
new file mode 100644
index 0000000000..5acf3c1764
--- /dev/null
+++ b/app.vue
@@ -0,0 +1,7 @@
+<template>
+  <UApp>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </UApp>
+</template>

From b0374c9fd60eeb1683ec25940a6e38eac45ea2eb Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Wed, 7 May 2025 15:44:21 +0700
Subject: [PATCH 2/9] feat: add app configuration for modal UI components

---
 app.config.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 app.config.ts

diff --git a/app.config.ts b/app.config.ts
new file mode 100644
index 0000000000..6ba67eb0e4
--- /dev/null
+++ b/app.config.ts
@@ -0,0 +1,16 @@
+export default defineAppConfig({
+  ui: {
+    modal: {
+      slots: {
+        header: 'border-black border-b',
+      },
+      variants: {
+        fullscreen: {
+          false: {
+            content: 'rounded-none border max-w-[25rem] shadow-primary ring-0',
+          },
+        },
+      },
+    },
+  },
+})

From 5819a8f8ac3a1bb53c4883290b81554fae2037b2 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Wed, 7 May 2025 15:44:48 +0700
Subject: [PATCH 3/9] refactor: replace NeoModal with UModal for improved modal
 handling in TestItem component

---
 components/codeChecker/TestItem.vue | 43 ++++++++++++++---------------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/components/codeChecker/TestItem.vue b/components/codeChecker/TestItem.vue
index 26f0a0c253..b4b8f52d15 100644
--- a/components/codeChecker/TestItem.vue
+++ b/components/codeChecker/TestItem.vue
@@ -7,35 +7,32 @@
       />
       <span class="ml-[20px]">{{ description }}</span>
     </div>
-    <span
-      v-if="props.passed === false"
-      class="text-k-blue cursor-pointer hover:text-k-blue-hover"
-      @click="showResolveIssuesModal = true"
-    >
-      {{ $t('codeChecker.resolveIssue') }}
-    </span>
 
-    <NeoModal
-      append-to-body
-      :value="showResolveIssuesModal"
-      @close="showResolveIssuesModal = false"
+    <UModal
+      v-model:open="showResolveIssuesModal"
+      :title="$t('codeChecker.resolveIssue')"
     >
-      <NeoModalHead
-        :title="$t('codeChecker.resolveIssue')"
-        @close="showResolveIssuesModal = false"
-      />
-      <div class="max-w-[380px] px-6 pt-4 pb-5">
-        <p class="text-base font-bold mb-4">
-          {{ description }}
-        </p>
-        <slot name="modalContent" />
-      </div>
-    </NeoModal>
+      <span
+        v-if="props.passed === false"
+        class="text-k-blue cursor-pointer hover:text-k-blue-hover"
+        @click="showResolveIssuesModal = true"
+      >
+        {{ $t('codeChecker.resolveIssue') }}
+      </span>
+
+      <template #body>
+        <div>
+          <p class="text-base font-bold mb-4">
+            {{ description }}
+          </p>
+          <slot name="modalContent" />
+        </div>
+      </template>
+    </UModal>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { NeoModal, NeoModalHead } from '@kodadot1/brick'
 import type { Passed } from './types'
 
 const props = defineProps<{

From 3860e87243f11151cfd1a53002108b63bae31999 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Wed, 7 May 2025 19:38:54 +0700
Subject: [PATCH 4/9] refactor: update modal components and adjust layout for
 improved user experience

---
 app.config.ts                        |  2 +-
 components/create/EntryModal.vue     | 24 ++++++++++--------------
 components/navbar/CreateDropdown.vue | 10 ++--------
 3 files changed, 13 insertions(+), 23 deletions(-)

diff --git a/app.config.ts b/app.config.ts
index 6ba67eb0e4..9409f56c9f 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -7,7 +7,7 @@ export default defineAppConfig({
       variants: {
         fullscreen: {
           false: {
-            content: 'rounded-none border max-w-[25rem] shadow-primary ring-0',
+            content: 'rounded-none border max-w-[23rem] shadow-primary ring-0',
           },
         },
       },
diff --git a/components/create/EntryModal.vue b/components/create/EntryModal.vue
index 30530631da..ea08dc7d57 100644
--- a/components/create/EntryModal.vue
+++ b/components/create/EntryModal.vue
@@ -1,20 +1,17 @@
 <template>
-  <NeoModal
-    append-to-body
-    :value="isModalActive"
-    @close="isModalActive = false"
+  <UModal
+    v-model:open="isModalActive"
+    :title="$t('create')"
   >
-    <NeoModalHead
-      :title="$t('create')"
-      @close="isModalActive = false"
-    />
-    <div class="px-6 pt-6 pb-5">
+    <slot />
+
+    <template #body>
       <div class="space-y-4">
         <div
           v-for="item in createOptionsConfig"
           :key="item.path"
           :data-testid="item.testId"
-          class="cursor-pointer max-w-[316px] w-full bg-k-grey-light border border-k-grey-light hover:bg-blue-light-cards hover:border-k-blue-hover px-[20px] py-2 flex items-center group"
+          class="cursor-pointer w-full bg-k-grey-light border border-k-grey-light hover:bg-blue-light-cards hover:border-k-blue-hover px-[20px] py-2 flex items-center group"
           @click="onClickCreateOption(item.path)"
         >
           <KIcon
@@ -36,12 +33,11 @@
       <div class="text-center text-sm text-k-grey mt-[20px] capitalize">
         {{ $t('mint.modal.availableOn', enableCreateChains) }}
       </div>
-    </div>
-  </NeoModal>
+    </template>
+  </UModal>
 </template>
 
 <script setup lang="ts">
-import { NeoModal, NeoModalHead } from '@kodadot1/brick'
 import { enableCreateChains } from '@/utils/chain'
 
 type CreateConfig = {
@@ -52,7 +48,7 @@ type CreateConfig = {
   testId?: string
 }
 
-const isModalActive = defineModel({ type: Boolean, default: false })
+const isModalActive = ref(false)
 
 const { doAfterLogin } = useDoAfterlogin()
 const { urlPrefix } = usePrefix()
diff --git a/components/navbar/CreateDropdown.vue b/components/navbar/CreateDropdown.vue
index eca4c219bf..8a81993628 100644
--- a/components/navbar/CreateDropdown.vue
+++ b/components/navbar/CreateDropdown.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <CreateEntryModal>
     <div
       data-testid="classic"
       class="navbar-item"
@@ -7,10 +7,7 @@
     >
       {{ $t('create') }}
     </div>
-    <CreateEntryModal
-      v-model="isModalActive"
-    />
-  </div>
+  </CreateEntryModal>
 </template>
 
 <script lang="ts" setup>
@@ -19,10 +16,7 @@ defineProps<{
 }>()
 const emit = defineEmits(['select'])
 
-const isModalActive = ref(false)
-
 const handleButtonClick = () => {
-  isModalActive.value = true
   emit('select')
 }
 </script>

From 0b46df2f25f204ce5fe66512833613ae96a96b40 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Wed, 7 May 2025 19:39:06 +0700
Subject: [PATCH 5/9] refactor: replace NeoModal with UModal in HeroButtons for
 consistency and improved functionality

---
 components/collection/HeroButtons.vue | 32 +++++++++++++--------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/components/collection/HeroButtons.vue b/components/collection/HeroButtons.vue
index e30884deee..04fd63e4f9 100644
--- a/components/collection/HeroButtons.vue
+++ b/components/collection/HeroButtons.vue
@@ -109,22 +109,22 @@
         </NeoDropdown>
       </div>
     </div>
-    <NeoModal
-      :value="QRModalActive"
-      header=""
-      @close="QRModalActive = false"
+    <UModal
+      v-model:open="QRModalActive"
+      :title="collection?.name"
     >
-      <NeoModalHead
-        :title="collection?.name"
-        @close="QRModalActive = false"
-      />
-      <div
-        class="card-content"
-        data-testid="hero-share-qrcode-modal"
-      >
-        <QRCode :text="currentCollectionUrl" />
-      </div>
-    </NeoModal>
+      <template #body>
+        <div
+          class="card-content"
+          data-testid="hero-share-qrcode-modal"
+        >
+          <QRCode
+            :text="currentCollectionUrl"
+            class="w-full h-full"
+          />
+        </div>
+      </template>
+    </UModal>
   </div>
 </template>
 
@@ -133,8 +133,6 @@ import {
   NeoButton,
   NeoDropdown,
   NeoDropdownItem,
-  NeoModal,
-  NeoModalHead,
 } from '@kodadot1/brick'
 import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
 import { hasOperationsDisabled } from '@/utils/prefix'

From fbbdf787edd54a8b301f876a60a0ba7f9cbd79a9 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Wed, 7 May 2025 20:36:07 +0700
Subject: [PATCH 6/9] refactor: introduce ModalHead component and replace
 NeoModalHead in ConnectWalletModal and ShoppingCartModal for consistency

---
 .../ConnectWallet/ConnectWalletModal.vue      |  3 +-
 components/common/ModalHead.vue               | 42 +++++++++++++++++++
 .../common/shoppingCart/ShoppingCartModal.vue |  9 ++--
 3 files changed, 48 insertions(+), 6 deletions(-)
 create mode 100644 components/common/ModalHead.vue

diff --git a/components/common/ConnectWallet/ConnectWalletModal.vue b/components/common/ConnectWallet/ConnectWalletModal.vue
index 8b15522cd2..49407144d9 100644
--- a/components/common/ConnectWallet/ConnectWalletModal.vue
+++ b/components/common/ConnectWallet/ConnectWalletModal.vue
@@ -3,7 +3,7 @@
     class="wallet-modal-container flex flex-col"
     data-testid="wallet-connect-sidebar-modal"
   >
-    <NeoModalHead
+    <ModalHead
       :title="
         showAccount ? $t('profile.page') : $t('walletConnect.walletHeading')
       "
@@ -49,7 +49,6 @@
 </template>
 
 <script setup lang="ts">
-import { NeoModalHead } from '@kodadot1/brick'
 import { type ChainVM, type Prefix } from '@kodadot1/static'
 import { DEFAULT_VM_PREFIX } from '@kodadot1/static'
 import WalletAsset from '@/components/common/ConnectWallet/WalletAsset.vue'
diff --git a/components/common/ModalHead.vue b/components/common/ModalHead.vue
new file mode 100644
index 0000000000..e09e5e3e8d
--- /dev/null
+++ b/components/common/ModalHead.vue
@@ -0,0 +1,42 @@
+<template>
+  <header
+    class="flex lg:hidden py-0 px-tw-5 min-h-[64px] items-center border-b border-border-color bg-background-color-inverse"
+  >
+    <button
+      type="button"
+      class="w-full h-full text-left cursor-pointer p-0 bg-transparent text-base/normal text-text-color-inverse flex items-center gap-2"
+      data-testid="modal-close-button"
+      @click="emit('close')"
+    >
+      <KIcon name="i-mdi:chevron-left" />
+      <span>{{ title }}</span>
+    </button>
+  </header>
+
+  <header
+    class="hidden lg:flex py-4 px-tw-8 justify-between items-center border-b border-border-color bg-background-color"
+  >
+    <span class="text-base font-bold">
+      {{ title }}
+    </span>
+    <NeoButton
+      class="py-1 px-2"
+      variant="text"
+      no-shadow
+      icon="xmark"
+      size="medium"
+      data-testid="modal-close-button"
+      @click="emit('close')"
+    />
+  </header>
+</template>
+
+<script lang="ts" setup>
+import { NeoButton } from '@kodadot1/brick'
+
+defineProps<{
+  title: string
+}>()
+
+const emit = defineEmits(['close'])
+</script>
diff --git a/components/common/shoppingCart/ShoppingCartModal.vue b/components/common/shoppingCart/ShoppingCartModal.vue
index 93c9b7b095..92d526c852 100644
--- a/components/common/shoppingCart/ShoppingCartModal.vue
+++ b/components/common/shoppingCart/ShoppingCartModal.vue
@@ -4,7 +4,7 @@
       class="shopping-cart-modal-container bg-background-color border-l flex flex-col"
       data-testid="shopping-cart-modal-container"
     >
-      <NeoModalHead
+      <ModalHead
         :title="$t('shoppingCart.title')"
         @close="closeShoppingCart(ModalCloseType.BACK)"
       />
@@ -104,7 +104,7 @@
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoModalHead } from '@kodadot1/brick'
+import { NeoButton } from '@kodadot1/brick'
 import ShoppingCartItemRow from './ShoppingCartItemRow.vue'
 import { totalPriceUsd } from './utils'
 import { usePreferencesStore } from '@/stores/preferences'
@@ -197,11 +197,12 @@ const onCompletePurchase = () => {
     position: fixed;
     top: 0;
     right: 0;
-    height: 100%;
     max-width: 360px;
     width: 100%;
 
-    @apply bulma-mobile:max-w-[100vw] pt-navbar-desktop bulma-mobile:pt-navbar-mobile;
+    @apply h-[calc(100%_-_var(--navbar-desktop))] mt-navbar-desktop;
+
+    @apply bulma-mobile:max-w-[100vw] bulma-mobile:pt-navbar-mobile;
   }
 }
 

From 3ad57442f00781b6c41fd7a73fc6f37f88a542ec Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Wed, 7 May 2025 20:38:19 +0700
Subject: [PATCH 7/9] refactor: remove NeoModalHead component to streamline
 modal structure

---
 .../components/NeoModalHead/NeoModalHead.vue  | 30 -------------------
 libs/ui/src/index.ts                          |  1 -
 2 files changed, 31 deletions(-)
 delete mode 100644 libs/ui/src/components/NeoModalHead/NeoModalHead.vue

diff --git a/libs/ui/src/components/NeoModalHead/NeoModalHead.vue b/libs/ui/src/components/NeoModalHead/NeoModalHead.vue
deleted file mode 100644
index 83a39a1872..0000000000
--- a/libs/ui/src/components/NeoModalHead/NeoModalHead.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <header
-    class="flex lg:hidden py-0 px-tw-5 min-h-[64px] items-center border-b border-border-color bg-background-color-inverse"
-  >
-    <button
-      type="button"
-      class="w-full h-full text-left cursor-pointer p-0 bg-transparent text-base/normal text-text-color-inverse flex items-center gap-2"
-      data-testid="modal-close-button"
-      @click="emit('close')"
-    >
-      <KIcon name="i-mdi:chevron-left" />
-      <span>{{ title }}</span>
-    </button>
-  </header>
-  <NeoCommonHead
-    class="hidden lg:flex"
-    :title="title"
-    @close="emit('close')"
-  />
-</template>
-
-<script lang="ts" setup>
-import NeoCommonHead from '../NeoCommonHead/NeoCommonHead.vue'
-
-defineProps<{
-  title: string
-}>()
-
-const emit = defineEmits(['close'])
-</script>
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
index a7e7cb8527..523e3776c6 100644
--- a/libs/ui/src/index.ts
+++ b/libs/ui/src/index.ts
@@ -50,7 +50,6 @@ export { default as Neo } from '@oruga-ui/oruga-next'
 
 export { default as NeoModalExtend } from './components/NeoModalExtend/NeoModalExtend.vue'
 export { default as NeoModalExtendProgrammatic } from './components/NeoModalExtend/plugin'
-export { default as NeoModalHead } from './components/NeoModalHead/NeoModalHead.vue'
 export { default as NeoCommonHead } from './components/NeoCommonHead/NeoCommonHead.vue'
 
 export { default as NeoNotification } from './components/NeoNotification/NeoNotification.vue'

From 77258332d93f2aab90ebd6b24b3bb12a15160370 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Wed, 7 May 2025 20:38:28 +0700
Subject: [PATCH 8/9] refactor: remove NeoModalHead

---
 pages/nuxt-ui.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 pages/nuxt-ui.vue

diff --git a/pages/nuxt-ui.vue b/pages/nuxt-ui.vue
new file mode 100644
index 0000000000..bbe10fb8d8
--- /dev/null
+++ b/pages/nuxt-ui.vue
@@ -0,0 +1,15 @@
+<template>
+  <USlideover title="Slideover with title">
+    <UButton
+      label="Open"
+      color="neutral"
+      variant="subtle"
+    />
+
+    <template #body>
+      <div class="h-full">
+        asflsakdmfaslfkm
+      </div>
+    </template>
+  </USlideover>
+</template>

From 3b1dce79dc4ab22e343b591c66af957554e02b7f Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Wed, 7 May 2025 20:40:07 +0700
Subject: [PATCH 9/9] refactor: remove nuxt-ui.vue to streamline component
 structure

---
 pages/nuxt-ui.vue | 15 ---------------
 1 file changed, 15 deletions(-)
 delete mode 100644 pages/nuxt-ui.vue

diff --git a/pages/nuxt-ui.vue b/pages/nuxt-ui.vue
deleted file mode 100644
index bbe10fb8d8..0000000000
--- a/pages/nuxt-ui.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <USlideover title="Slideover with title">
-    <UButton
-      label="Open"
-      color="neutral"
-      variant="subtle"
-    />
-
-    <template #body>
-      <div class="h-full">
-        asflsakdmfaslfkm
-      </div>
-    </template>
-  </USlideover>
-</template>