@meddleware/access-gate-ui 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/access-gate-ui",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Operator console for creating and managing on-chain Sui access gates — create gates, configure settings, airdrop NFTs, and freeze gates via a wallet-connected SPA.",
   "author": "Meddleware <dev@meddleware.co.uk>",
   "license": "0BSD",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@meddleware/design-tokens": "^0.1.2",
-    "@meddleware/ui": "^0.1.10",
+    "@meddleware/ui": "^0.1.11",
     "@meddleware/nft-gate-client": "^0.0.6",
     "@meddleware/wallet-adapter": "^0.0.5",
     "@mysten/sui": "^2.30.0",

package/src/components/AccessGateView.vue

@@ -7,7 +7,7 @@
 // Gate loading is driven by watching the connected account, so it works whether the connection
 // is made from this app's own header (standalone) or the dashboard's shared control (embedded).
 import { ref, watch } from 'vue'
-import { UiNotice } from '@meddleware/ui'
+import { AppTabNav, UiNotice, type AppTab } from '@meddleware/ui'
 import { WalletGuard } from '@meddleware/wallet-adapter'
 import type { OwnedGate } from '@meddleware/nft-gate-client'
 import { NETWORK } from '../config.js'
@@ -16,8 +16,16 @@ import { useWallet } from '../wallet.js'
 import CreateGateForm from './CreateGateForm.vue'
 import GateList from './GateList.vue'
 
-type Tab = 'create' | 'gates'
-const activeTab = ref<Tab>('gates')
+const TABS: AppTab[] = [
+  { id: 'gates', label: 'My gates' },
+  { id: 'create', label: 'Create gate' },
+]
+const activeTab = ref<string>('gates')
+
+function onTabChange(id: string): void {
+  activeTab.value = id
+  if (id === 'gates') void reloadGates()
+}
 
 const { account } = useWallet()
 
@@ -66,14 +74,7 @@ function onCreated(): void {
     </UiNotice>
 
     <WalletGuard v-else message="Connect a Sui wallet to create and manage your access gates.">
-      <nav class="tabs" aria-label="Sections">
-        <button type="button" class="tab" :class="{ active: activeTab === 'gates' }" @click="activeTab = 'gates'; reloadGates()">
-          My gates
-        </button>
-        <button type="button" class="tab" :class="{ active: activeTab === 'create' }" @click="activeTab = 'create'">
-          Create gate
-        </button>
-      </nav>
+      <AppTabNav :tabs="TABS" :model-value="activeTab" aria-label="Sections" style="margin: 0 0 1rem" @update:model-value="onTabChange" />
 
       <UiNotice v-if="loadError" type="error">{{ loadError }}</UiNotice>
 
@@ -100,27 +101,4 @@ function onCreated(): void {
   margin: 0.25rem 0 1.25rem;
 }
 
-.tabs {
-  display: flex;
-  gap: 0.25rem;
-  margin: 0 0 1rem;
-  border-bottom: 2px solid var(--border);
-}
-
-.tab {
-  background: none;
-  border: none;
-  border-bottom: 2px solid transparent;
-  padding: 0.5rem 1rem;
-  margin-bottom: -2px;
-  cursor: pointer;
-  font-size: 0.95rem;
-  color: var(--muted);
-}
-
-.tab.active {
-  border-bottom-color: var(--accent);
-  color: var(--text);
-  font-weight: 600;
-}
 </style>

package/src/components/CreateGateForm.vue

@@ -68,9 +68,9 @@ async function submit(): Promise<void> {
       </label>
 
       <label class="field">
-        <span>Default uses</span>
+        <span>Default credits</span>
         <input v-model="defaultUses" type="number" min="0" step="1" />
-        <small>0 = unlimited pass; N = single-use NFT with N uses.</small>
+        <small>0 = unlimited pass; N = NFT granting N upload credits.</small>
       </label>
 
       <label class="check">
@@ -80,7 +80,7 @@ async function submit(): Promise<void> {
 
       <label class="check">
         <input v-model="autoBurnAtZero" type="checkbox" />
-        <span>Auto-burn single-use NFTs at zero uses</span>
+        <span>Auto-burn NFTs at zero credits</span>
       </label>
 
       <label class="field">

package/src/components/GateCard.vue

@@ -34,7 +34,7 @@ function priceLabel(mist: bigint): string {
       </div>
       <div class="badges">
         <span class="badge">{{ priceLabel(gate.priceMist) }}</span>
-        <span class="badge">{{ gate.defaultUses === 0n ? 'Unlimited' : `${gate.defaultUses} uses` }}</span>
+        <span class="badge">{{ gate.defaultUses === 0n ? 'Unlimited' : `${gate.defaultUses} credits` }}</span>
         <span v-if="gate.soulbound" class="badge">Soulbound</span>
         <span v-if="gate.paused" class="badge badge--warn">Paused</span>
         <span v-if="gate.frozen" class="badge badge--warn">Frozen</span>

package/src/components/GateSettingsPanel.vue

@@ -78,7 +78,7 @@ const ctx = () => adminContext(props.gate)
     </div>
 
     <div class="row">
-      <label>Default uses</label>
+      <label>Default credits</label>
       <input v-model="defaultUses" type="number" min="0" step="1" />
       <UiButton variant="secondary" :disabled="busy !== null" @click="run('uses', () => buildSetDefaultUsesTx(ctx(), BigInt(defaultUses || '0')))">
         {{ busy === 'uses' ? '…' : 'Update' }}