@meddleware/dao-ui 0.1.18 → 0.1.20

package/src/tabs/OverviewTab.vue

@@ -2,13 +2,21 @@
 // Overview tab: treasury balance + commission, platform activity counters (active gates,
 // accesses minted/consumed derived from the event feed), and a recent-activity list.
 import { computed } from 'vue'
-import Panel from '../components/Panel.vue'
 import AmountCell from '../components/AmountCell.vue'
 import { usePlatformConfig } from '../composables/usePlatformConfig.js'
 import { useTreasury } from '../composables/useTreasury.js'
 import { useDaoEvents } from '../composables/useDaoEvents.js'
 import { useGates } from '../composables/useGates.js'
-import { CopyableAddress, ExplorerLink, suiExplorerUrl } from '@meddleware/ui'
+import {
+  CopyableAddress,
+  ExplorerLink,
+  suiExplorerUrl,
+  UiPanel,
+  UiStatGrid,
+  UiStatRow,
+  UiActivityFeed,
+  UiActivityItem,
+} from '@meddleware/ui'
 import { NETWORK } from '../config.js'
 import type { DaoEvent } from '../composables/useDaoEvents.js'
 
@@ -34,50 +42,41 @@ const accessesConsumed = computed(() => events.value.filter((e) => e.type === 'A
 <template>
   <div class="dao-overview-cols">
     <!-- Left: treasury summary -->
-    <div style="display: flex; flex-direction: column; gap: 8px">
-      <Panel title="Treasury Balance">
-        <div class="dao-stat-grid">
-          <span class="dao-stat-grid__label">SUI balance</span>
-          <AmountCell class="dao-stat-grid__value" :mist="balance" />
-
-          <span class="dao-stat-grid__label">Commission rate</span>
-          <span class="dao-stat-grid__value dao-mono">{{ commissionPct }}</span>
-
-          <span class="dao-stat-grid__label">Treasury address</span>
-          <span class="dao-stat-grid__value" style="text-align: left">
+    <div class="dao-stack dao-stack--tight">
+      <UiPanel title="Treasury Balance">
+        <UiStatGrid>
+          <UiStatRow label="SUI balance"><AmountCell :mist="balance" /></UiStatRow>
+          <UiStatRow label="Commission rate">{{ commissionPct }}</UiStatRow>
+          <UiStatRow label="Treasury address" align="left">
             <CopyableAddress v-if="config?.treasury" :address="config.treasury">
               <ExplorerLink :href="suiExplorerUrl('account', config.treasury, NETWORK)" :value="config.treasury" />
             </CopyableAddress>
-            <span v-else class="dao-mono" style="font-size: 0.7rem">—</span>
-          </span>
-        </div>
-      </Panel>
-
-      <Panel title="Platform Activity">
-        <div class="dao-stat-grid">
-          <span class="dao-stat-grid__label">Active gates</span>
-          <span class="dao-stat-grid__value dao-mono">{{ gatesLoading ? '…' : gates.length }}</span>
-
-          <span class="dao-stat-grid__label">Accesses minted</span>
-          <span class="dao-stat-grid__value dao-mono">{{ accessesMinted || '—' }}</span>
+            <span v-else class="dao-mono dao-mono--sm">—</span>
+          </UiStatRow>
+        </UiStatGrid>
+      </UiPanel>
 
-          <span class="dao-stat-grid__label">Accesses consumed</span>
-          <span class="dao-stat-grid__value dao-mono">{{ accessesConsumed || '—' }}</span>
-        </div>
-      </Panel>
+      <UiPanel title="Platform Activity">
+        <UiStatGrid>
+          <UiStatRow label="Active gates">{{ gatesLoading ? '…' : gates.length }}</UiStatRow>
+          <UiStatRow label="Accesses minted">{{ accessesMinted || '—' }}</UiStatRow>
+          <UiStatRow label="Accesses consumed">{{ accessesConsumed || '—' }}</UiStatRow>
+        </UiStatGrid>
+      </UiPanel>
     </div>
 
     <!-- Right: recent activity -->
-    <Panel title="Recent Activity">
-      <p v-if="eventsLoading" class="dao-muted" style="margin: 0">Loading events…</p>
-      <ul v-else-if="events.length" class="dao-feed">
-        <li v-for="ev in events" :key="ev.txDigest" class="dao-feed__item">
-          <span class="dao-feed__dot" />
-          <span class="dao-feed__type">{{ eventLabel[ev.type] }}</span>
-          <span class="dao-feed__time">ckpt {{ ev.checkpoint ?? '?' }}</span>
-        </li>
-      </ul>
+    <UiPanel title="Recent Activity">
+      <p v-if="eventsLoading" class="dao-muted dao-flush">Loading events…</p>
+      <UiActivityFeed v-else-if="events.length">
+        <UiActivityItem
+          v-for="ev in events"
+          :key="ev.txDigest"
+          :type="eventLabel[ev.type]"
+          :time="`ckpt ${ev.checkpoint ?? '?'}`"
+        />
+      </UiActivityFeed>
       <p v-else class="dao-placeholder">No recent events.</p>
-    </Panel>
+    </UiPanel>
   </div>
 </template>

package/src/tabs/ProposalsTab.vue

@@ -10,18 +10,13 @@ const { epoch } = useEpoch()
 </script>
 
 <template>
-  <div>
-    <template v-if="proposals.length > 0">
-      <p class="dao-section-title">Active &amp; Pending Proposals</p>
-      <ProposalRow
-        v-for="p in proposals"
-        :key="p.id"
-        :proposal="p"
-        :current-epoch="epoch"
-      />
-    </template>
-    <div v-else class="dao-placeholder">
-      No proposals yet.
-    </div>
-  </div>
+  <template v-if="proposals.length > 0">
+    <h2 class="dao-section-title">Active &amp; Pending Proposals</h2>
+    <ul role="list">
+      <li v-for="p in proposals" :key="p.id">
+        <ProposalRow :proposal="p" :current-epoch="epoch" />
+      </li>
+    </ul>
+  </template>
+  <p v-else class="dao-placeholder">No proposals yet.</p>
 </template>

package/src/tabs/TreasuryTab.vue

@@ -2,13 +2,19 @@
 // Treasury tab: commission rate + live SUI balance + treasury address, plus the table
 // of Community Gates the treasury controls (discovered via AdminCap ownership).
 import { computed } from 'vue'
-import Panel from '../components/Panel.vue'
 import AmountCell from '../components/AmountCell.vue'
-import DataTable from '../components/DataTable.vue'
 import { usePlatformConfig } from '../composables/usePlatformConfig.js'
 import { useTreasury } from '../composables/useTreasury.js'
 import { useGates } from '../composables/useGates.js'
-import { CopyableAddress, ExplorerLink, suiExplorerUrl } from '@meddleware/ui'
+import {
+  CopyableAddress,
+  ExplorerLink,
+  suiExplorerUrl,
+  UiPanel,
+  UiStatGrid,
+  UiStatRow,
+  UiDataTable,
+} from '@meddleware/ui'
 import { NETWORK } from '../config.js'
 
 const { config, loading: cfgLoading, error: cfgErr } = usePlatformConfig()
@@ -26,32 +32,27 @@ function formatPrice(mist: bigint): string {
 </script>
 
 <template>
-  <div style="display: flex; flex-direction: column; gap: 10px">
-    <Panel title="Treasury">
+  <div class="dao-stack">
+    <UiPanel title="Treasury">
       <p v-if="cfgLoading" class="dao-muted">Loading…</p>
       <p v-else-if="cfgErr" class="dao-muted">{{ cfgErr }}</p>
       <template v-else-if="config">
-        <div class="dao-stat-grid" style="max-width: 480px">
-          <span class="dao-stat-grid__label">Commission rate</span>
-          <span class="dao-stat-grid__value dao-mono">{{ commissionPct }} ({{ config.commissionBps }} bps)</span>
-
-          <span class="dao-stat-grid__label">Current balance</span>
-          <AmountCell class="dao-stat-grid__value" :mist="balance" />
-
-          <span class="dao-stat-grid__label">Treasury address</span>
-          <span class="dao-stat-grid__value" style="text-align: left">
+        <UiStatGrid class="dao-stat-grid">
+          <UiStatRow label="Commission rate">{{ commissionPct }} ({{ config.commissionBps }} bps)</UiStatRow>
+          <UiStatRow label="Current balance"><AmountCell :mist="balance" /></UiStatRow>
+          <UiStatRow label="Treasury address" align="left">
             <CopyableAddress :address="config.treasury">
               <ExplorerLink :href="suiExplorerUrl('account', config.treasury, NETWORK)" :value="config.treasury" />
             </CopyableAddress>
-          </span>
-        </div>
+          </UiStatRow>
+        </UiStatGrid>
       </template>
       <p v-else class="dao-muted">PlatformConfig not loaded.</p>
-    </Panel>
+    </UiPanel>
 
-    <Panel title="Community Gates">
+    <UiPanel title="Community Gates">
       <p v-if="gatesLoading" class="dao-muted">Loading gates…</p>
-      <DataTable v-else-if="gates.length" :empty="'No gates found'">
+      <UiDataTable v-else-if="gates.length" :empty="'No gates found'">
         <template #head>
           <th>Gate name</th>
           <th>Price</th>
@@ -60,14 +61,14 @@ function formatPrice(mist: bigint): string {
         <tr v-for="gate in gates" :key="gate.id">
           <td>{{ gate.name }}</td>
           <td class="dao-amount">{{ formatPrice(gate.price) }}</td>
-          <td class="dao-mono" style="font-size: 0.7rem; white-space: nowrap">
+          <td class="dao-mono dao-mono--sm dao-nowrap">
             <CopyableAddress :address="gate.id" label="Copy object ID">
               <ExplorerLink :href="suiExplorerUrl('object', gate.id, NETWORK)" :value="gate.id" />
             </CopyableAddress>
           </td>
         </tr>
-      </DataTable>
+      </UiDataTable>
       <p v-else class="dao-placeholder">No gates found.</p>
-    </Panel>
+    </UiPanel>
   </div>
 </template>

package/src/components/DataTable.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-// Scrollable table shell with a `head` slot (header cells) and default slot (rows).
-// Renders the `empty` message when no rows are provided.
-defineProps<{ empty?: string }>()
-
-const slots = defineSlots<{
-  head(): unknown
-  default(): unknown
-}>()
-</script>
-
-<template>
-  <div style="overflow-x: auto">
-    <table class="dao-table">
-      <thead>
-        <tr>
-          <slot name="head" />
-        </tr>
-      </thead>
-      <tbody>
-        <slot />
-      </tbody>
-    </table>
-    <p v-if="empty && !slots.default" class="dao-placeholder">{{ empty }}</p>
-  </div>
-</template>

package/src/components/Panel.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-// Titled content panel — the console's basic surface primitive. Optional heading + default slot.
-defineProps<{ title?: string }>()
-</script>
-
-<template>
-  <div class="dao-panel">
-    <div v-if="title" class="dao-panel__head">{{ title }}</div>
-    <div class="dao-panel__body">
-      <slot />
-    </div>
-  </div>
-</template>

package/src/components/StatusBar.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-// Bottom status bar: network + health dot (error-driven), current epoch, and a
-// relative "refreshed Ns ago" timestamp. Purely presentational.
-import { computed } from 'vue'
-import { NETWORK } from '../config.js'
-
-const props = defineProps<{
-  epoch: number | null
-  lastRefresh: Date | null
-  error?: boolean
-}>()
-
-const dotClass = computed(() => (props.error ? 'dao-statusbar__dot--error' : 'dao-statusbar__dot--ok'))
-
-function timeAgo(d: Date): string {
-  const s = Math.floor((Date.now() - d.getTime()) / 1000)
-  if (s < 5) return 'just now'
-  if (s < 60) return `${s}s ago`
-  return `${Math.floor(s / 60)}m ago`
-}
-</script>
-
-<template>
-  <footer class="dao-statusbar">
-    <span class="dao-statusbar__item">
-      <span class="dao-statusbar__dot" :class="dotClass" />
-      {{ NETWORK.charAt(0).toUpperCase() + NETWORK.slice(1) }}
-    </span>
-    <span class="dao-statusbar__sep">│</span>
-    <span v-if="epoch !== null" class="dao-statusbar__item">Epoch {{ epoch }}</span>
-    <span v-else class="dao-statusbar__item dao-muted">Epoch —</span>
-    <span class="dao-statusbar__sep">│</span>
-    <span v-if="lastRefresh" class="dao-statusbar__item">Refreshed {{ timeAgo(lastRefresh) }}</span>
-    <span v-else class="dao-statusbar__item dao-muted">Loading…</span>
-  </footer>
-</template>

package/src/components/TabBar.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-// Thin wrapper over AppTabNav variant="raised" from @meddleware/ui.
-// Keeps dao-ui's internal import path stable while using the shared component.
-import { AppTabNav } from '@meddleware/ui'
-export type { AppTab as Tab } from '@meddleware/ui'
-
-defineProps<{ tabs: { id: string; label: string }[]; modelValue: string }>()
-const emit = defineEmits<{ 'update:modelValue': [id: string] }>()
-</script>
-
-<template>
-  <AppTabNav
-    :tabs="tabs"
-    :model-value="modelValue"
-    variant="raised"
-    aria-label="DAO sections"
-    @update:model-value="emit('update:modelValue', $event)"
-  />
-</template>