@meddleware/dao-ui 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/dao-ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Meddleware DAO console — treasury overview, proposals, and governance on Sui.",
   "author": "Meddleware <dev@meddleware.co.uk>",
   "license": "0BSD",

package/src/DaoView.vue

@@ -2,6 +2,10 @@
 // Core DAO tool UI — tab-based console with desktop-application aesthetics.
 // Rendered standalone by App.vue and embedded in the dashboard at the default route.
 // All chain reads are read-only; no wallet connection is required to view data.
+//
+// qt.css is imported here (not just in main.ts) so the styles are included when
+// DaoView is consumed as a library by the dashboard or any other host.
+import './styles/qt.css'
 import { ref, shallowRef, computed } from 'vue'
 import TabBar from './components/TabBar.vue'
 import StatusBar from './components/StatusBar.vue'

package/src/composables/useProposals.ts

@@ -1,5 +1,7 @@
-// Proposals are backed by mock data until vault_dao is deployed on-chain.
-// When vault_dao ships, replace this composable with one that queries the on-chain
+// Proposals will be sourced from the vault_dao on-chain module once it is deployed.
+// Until then this composable returns an empty list — the ProposalsTab shows a
+// "coming soon" notice when the list is empty.
+// When vault_dao ships, replace this file with a composable that queries the on-chain
 // proposal registry. The Proposal type and return shape are kept stable.
 
 import { ref, readonly } from 'vue'
@@ -16,41 +18,8 @@ export interface Proposal {
   status: ProposalStatus
 }
 
-const MOCK_PROPOSALS: Proposal[] = [
-  {
-    id: 'prop-001',
-    title: 'mwSUI Vault Strategy — Haedal LST Allocation',
-    description:
-      'Allocate 10% of vault AUM to haSUI (Haedal liquid-staked SUI) to diversify yield sources beyond Spring Finance sSUI. Requires at least 50 SUI in community endorsement to enact.',
-    targetMist: 50_000_000_000n,
-    contributedMist: 0n,
-    endEpoch: 620,
-    status: 'active',
-  },
-  {
-    id: 'prop-002',
-    title: 'Commission Rate Reduction — 0.20% → 0.15%',
-    description:
-      'Reduce the access-gate platform commission from 20 bps to 15 bps to stay competitive with comparable NFT-gated relay services.',
-    targetMist: 25_000_000_000n,
-    contributedMist: 0n,
-    endEpoch: 640,
-    status: 'active',
-  },
-  {
-    id: 'prop-003',
-    title: 'Sealed Storage Relay Integration',
-    description:
-      'Route Seal uploads through the Meddleware Walrus relay so relay tips are captured and included in the fee distribution cycle.',
-    targetMist: 100_000_000_000n,
-    contributedMist: 0n,
-    endEpoch: 680,
-    status: 'pending',
-  },
-]
-
 export function useProposals() {
-  const proposals = ref<Proposal[]>(MOCK_PROPOSALS)
+  const proposals = ref<Proposal[]>([])
   const loading = ref(false)
 
   return { proposals: readonly(proposals), loading: readonly(loading) }

package/src/styles/qt.css

@@ -61,36 +61,52 @@
 .dao-tabs {
   display: flex;
   align-items: flex-end;
+  /* 1px bottom border that active tabs "punch through" via margin-bottom: -1px */
   border-bottom: 1px solid var(--border);
   background: var(--surface);
   flex-shrink: 0;
   overflow-x: auto;
   scrollbar-width: none;
+  padding: 4px 4px 0;
+  gap: 2px;
 }
 
 .dao-tabs::-webkit-scrollbar { display: none; }
 
 .dao-tab {
-  padding: 7px 16px 6px;
+  /* Reset browser UA button defaults */
+  appearance: none;
+  border-radius: 0;
+  /* Classic raised-tab shape: visible top + sides, no bottom border on active */
+  padding: 5px 14px 6px;
   font-size: 0.8rem;
   font-weight: 500;
   color: var(--muted);
-  background: transparent;
-  border: none;
-  border-bottom: 2px solid transparent;
+  background: var(--lift);
+  border-top: 2px solid transparent;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: -1px;       /* sit flush on the tab bar bottom border */
   cursor: pointer;
   white-space: nowrap;
-  transition: color 0.1s, border-color 0.1s;
+  transition: color 0.1s, background 0.1s, border-color 0.1s;
   letter-spacing: 0.01em;
 }
 
-.dao-tab:hover {
+.dao-tab:hover:not(.dao-tab--active) {
   color: var(--text);
+  background: var(--surface);
 }
 
 .dao-tab--active {
   color: var(--text);
-  border-bottom-color: var(--accent);
+  background: var(--bg);     /* same as .dao-content — visually "opens" into content */
+  border-top-color: var(--accent);
+  border-left-color: var(--border);
+  border-right-color: var(--border);
+  border-bottom-color: var(--bg);  /* erase the bottom border, merging with content */
+  font-weight: 600;
 }
 
 /* ── Tab content area ────────────────────────────────────────────────────── */

package/src/tabs/ProposalsTab.vue

@@ -9,17 +9,17 @@ const { epoch } = useEpoch()
 
 <template>
   <div>
-    <div class="dao-notice">
-      Governance proposals are currently scaffolded with illustrative data.
-      On-chain voting and contributions will be enabled when <code>vault_dao</code> is deployed.
+    <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>
-
-    <p class="dao-section-title">Active &amp; Pending Proposals</p>
-    <ProposalRow
-      v-for="p in proposals"
-      :key="p.id"
-      :proposal="p"
-      :current-epoch="epoch"
-    />
   </div>
 </template>