@meddleware/access-gate-ui 0.1.9 → 0.1.11

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@meddleware/access-gate-ui",
-  "version": "0.1.9",
+  "version": "0.1.11",
+  "homepage": "https://docs.meddleware.co.uk/blockchain/sui/access-gate/",
   "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 +39,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/App.vue

@@ -10,6 +10,7 @@ import { NETWORK } from './config.js'
 import AccessGateView from './components/AccessGateView.vue'
 
 const { mode, set } = useColorMode('dark')
+const DOCS_URL = import.meta.env.VITE_DOCS_URL || 'https://docs.meddleware.co.uk/blockchain/sui/access-gate/'
 const { wallets, account, connect, disconnect } = useWallet()
 
 async function onConnect(): Promise<void> {
@@ -42,7 +43,7 @@ async function onConnect(): Promise<void> {
 
     <AccessGateView />
 
-    <AppFooter />
+    <AppFooter :docs-url="DOCS_URL" />
   </div>
 </template>
 

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>