@meddleware/dashboard 0.1.13 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/dashboard",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "Meddleware tools hub — Vue 3 SPA listing hosted services (Walrus, Access Gate) with white-label deploy options.",
   "author": "Meddleware <dev@meddleware.co.uk>",
   "license": "0BSD",
@@ -29,7 +29,7 @@
     "@meddleware/access-gate-ui": "^0.1.5",
     "@meddleware/design-tokens": "^0.1.2",
     "@meddleware/seal-ui": "^0.0.7",
-    "@meddleware/ui": "^0.1.8",
+    "@meddleware/ui": "^0.1.9",
     "@meddleware/wallet-adapter": "^0.0.5",
     "@meddleware/walrus-ui": "^0.1.7",
     "pinia": "^4.0.2",

package/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useRoute, RouterView } from 'vue-router'
+import { useRoute, RouterView, RouterLink } from 'vue-router'
 import {
   AppHeader, AppSidebar,
   ColorModeControl, SidebarItem, StatusWidget, CopyableAddress,
@@ -12,6 +12,7 @@ import NetworkSelector from './components/NetworkSelector.vue'
 const { mode, set } = useColorMode('dark')
 const route = useRoute()
 
+const isHome = computed(() => route.path === '/')
 const isWalrus = computed(() => route.path === '/walrus')
 const isAccessGate = computed(() => route.path === '/access-gate')
 const isSealedStorage = computed(() => route.path === '/sealed-storage')
@@ -28,8 +29,10 @@ const { account, disconnect } = useWallet({
   <div class="app-shell">
     <AppHeader class="app-shell__header" variant="dark">
       <template #brand>
-        <span class="brand-mark" aria-hidden="true">◆</span>
-        <span>Meddleware</span>
+        <RouterLink to="/" class="brand-link">
+          <span class="brand-mark" aria-hidden="true">◆</span>
+          <span>Meddleware</span>
+        </RouterLink>
       </template>
       <template #actions>
         <ColorModeControl :model-value="mode" @update:model-value="set" />
@@ -38,6 +41,9 @@ const { account, disconnect } = useWallet({
 
     <AppSidebar class="app-shell__sidebar" variant="dark">
       <nav aria-label="Tools">
+        <router-link to="/" custom v-slot="{ navigate }">
+          <SidebarItem label="Home" icon="🏠" :active="isHome" @click="navigate" />
+        </router-link>
         <router-link to="/walrus" custom v-slot="{ navigate }">
           <SidebarItem label="Walrus" icon="🗄" :active="isWalrus" @click="navigate" />
         </router-link>
@@ -50,11 +56,6 @@ const { account, disconnect } = useWallet({
       </nav>
 
       <template #body>
-        <NetworkSelector />
-      </template>
-
-      <template #foot>
-        <StatusWidget class="sidebar-status" />
         <div v-if="account" class="wallet-connected">
           <CopyableAddress :address="account.address" />
           <button type="button" class="wallet-disconnect" @click="disconnect">Disconnect</button>
@@ -63,6 +64,11 @@ const { account, disconnect } = useWallet({
           <span class="wallet-status-dot" aria-hidden="true"></span>
           <span class="wallet-status-label">Not connected</span>
         </div>
+        <NetworkSelector />
+      </template>
+
+      <template #foot>
+        <StatusWidget class="sidebar-status" />
         <p class="sidebar-copyright">© {{ new Date().getFullYear() }} Meddleware</p>
       </template>
     </AppSidebar>
@@ -78,7 +84,7 @@ const { account, disconnect } = useWallet({
   display: grid;
   grid-template-columns: var(--mw-sidebar-width, 240px) 1fr;
   grid-template-rows: var(--mw-header-height, 56px) 1fr;
-  height: 100vh;
+  height: 100dvh;
   overflow: hidden;
 }
 
@@ -87,13 +93,32 @@ const { account, disconnect } = useWallet({
 }
 
 .app-shell__sidebar {
-  height: 100%;
-  overflow-y: auto;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .app-shell__main {
   overflow-y: auto;
-  height: 100%;
+  min-height: 0;
+  padding: 6px;
+}
+
+@media (max-width: 720px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+    grid-template-rows: var(--mw-header-height, 56px) 1fr;
+  }
+  .app-shell__sidebar {
+    display: none;
+  }
+}
+
+.brand-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: inherit;
+  text-decoration: none;
 }
 
 .brand-mark {
@@ -154,5 +179,6 @@ const { account, disconnect } = useWallet({
   color: var(--muted);
   margin: 0;
   opacity: 0.6;
+  text-align: center;
 }
 </style>

package/src/components/NetworkSelector.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // Network selector for the dashboard sidebar. Reads and writes the shared useNetwork()
 // singleton so every embedded tool view reacts to the chosen network immediately.
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import { useNetwork } from '@meddleware/wallet-adapter'
 import type { MwNetwork } from '@meddleware/wallet-adapter'
 
@@ -20,6 +20,10 @@ function commitLocalnetUrl(): void {
   const url = localnetInput.value.trim()
   if (url) setLocalnetRpc(url)
 }
+
+onMounted(() => {
+  if (network.value === 'mainnet') setNetwork('testnet')
+})
 </script>
 
 <template>
@@ -27,12 +31,10 @@ function commitLocalnetUrl(): void {
     <label class="ns-label" for="ns-select">Network</label>
     <select id="ns-select" class="ns-select" :value="network" @change="onNetworkChange">
       <option value="testnet">Testnet</option>
-      <option value="mainnet">Mainnet</option>
+      <option value="mainnet" disabled title="Coming soon">Mainnet</option>
       <option value="localnet">Localnet</option>
     </select>
 
-    <p v-if="network === 'mainnet'" class="ns-notice">Mainnet coming soon.</p>
-
     <template v-if="network === 'localnet'">
       <label class="ns-label ns-label--url" for="ns-localnet-url">RPC URL</label>
       <input
@@ -88,12 +90,6 @@ function commitLocalnetUrl(): void {
   outline-offset: 1px;
 }
 
-.ns-notice {
-  font-size: 0.75rem;
-  color: var(--muted, #888);
-  margin: 0;
-}
-
 .ns-input {
   background: var(--surface, transparent);
   border: 1px solid var(--border, #444);

package/src/styles.css

@@ -1,43 +1,11 @@
 /*
  * Dashboard app-layout styles. Design tokens + element defaults come from
  * @meddleware/design-tokens + @meddleware/ui/base.css (imported in main.ts).
- * This file holds only the app-shell grid and page-content helpers.
+ * App shell grid layout lives in App.vue scoped styles.
  */
 
 #app {
-  min-height: 100vh;
-}
-
-/*
- * App shell: full-width header on top; sidebar pinned left immediately under the
- * header down to the bottom of the page/viewport; main fills the central space;
- * footer spans from the sidebar's right edge to the viewport's right edge.
- */
-.app-shell {
-  display: grid;
-  grid-template-columns: var(--mw-sidebar-width, 240px) 1fr;
-  grid-template-rows: var(--mw-header-height, 56px) 1fr auto;
-  grid-template-areas:
-    "header header"
-    "sidebar main"
-    "sidebar footer";
-  min-height: 100vh;
-}
-
-.app-shell__header  { grid-area: header; }
-.app-shell__sidebar { grid-area: sidebar; }
-.app-shell__main    { grid-area: main; min-width: 0; padding: 1.5rem; }
-.app-shell__footer  { grid-area: footer; }
-
-@media (max-width: 720px) {
-  .app-shell {
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "header"
-      "main"
-      "footer";
-  }
-  .app-shell__sidebar { display: none; }
+  min-height: 100dvh;
 }
 
 .prose {