Mycelium-ui-private/src/App.vue

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted } from "vue";
import { RouterLink, RouterView, useRoute } from "vue-router";
import {
  Activity,
  Users,
  Route as RouteIcon,
  MessageSquare,
  Hash,
  Settings as SettingsIcon,
  Power,
  PowerOff,
} from "lucide-vue-next";
import StartupOverlay from "@/components/StartupOverlay.vue";
import { useNodeStore } from "@/stores/node";
import { storeToRefs } from "pinia";

const route = useRoute();
const node = useNodeStore();
const { phase, info, error } = storeToRefs(node);

const navItems = [
  { to: "/status", label: "Status", icon: Activity },
  { to: "/peers", label: "Peers", icon: Users },
  { to: "/routes", label: "Routes", icon: RouteIcon },
  { to: "/messages", label: "Messages", icon: MessageSquare },
  { to: "/topics", label: "Topics", icon: Hash },
  { to: "/settings", label: "Settings", icon: SettingsIcon },
];

const currentTitle = computed(() => (route.meta?.title as string) ?? "Mycellium");

onMounted(() => {
  node.bootstrap();
});

onBeforeUnmount(() => {
  node.dispose();
});

async function handleStart() {
  try {
    await node.start();
  } catch {
    // error already in store
  }
}

async function handleStop() {
  await node.stop();
}
</script>

<template>
  <div
    class="relative flex h-screen w-screen overflow-hidden bg-background text-foreground"
  >
    <aside class="flex w-56 shrink-0 flex-col border-r border-border bg-card">
      <div class="flex h-14 items-center px-4 border-b border-border">
        <span class="font-semibold text-base">Mycellium</span>
        <span
          class="ml-auto inline-block h-2 w-2 rounded-full"
          :class="
            phase === 'ready'
              ? 'bg-emerald-500'
              : phase === 'starting'
              ? 'bg-yellow-500 animate-pulse'
              : phase === 'error'
              ? 'bg-destructive'
              : 'bg-muted-foreground'
          "
          :title="phase"
        />
      </div>
      <nav class="flex-1 overflow-y-auto px-2 py-3 space-y-1">
        <RouterLink
          v-for="item in navItems"
          :key="item.to"
          :to="item.to"
          class="flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
          active-class="bg-secondary text-secondary-foreground"
          exact-active-class="bg-secondary text-secondary-foreground"
        >
          <component :is="item.icon" class="h-4 w-4" />
          <span>{{ item.label }}</span>
        </RouterLink>
      </nav>
      <div
        v-if="info"
        class="border-t border-border px-3 py-3 text-xs space-y-1"
      >
        <div class="text-muted-foreground">Overlay subnet</div>
        <div class="font-mono break-all">{{ info.nodeSubnet }}</div>
        <button
          class="mt-2 inline-flex w-full items-center justify-center gap-2 rounded-md border border-border px-2 py-1 text-xs hover:bg-secondary"
          @click="handleStop"
        >
          <PowerOff class="h-3 w-3" />
          Stop daemon
        </button>
      </div>
      <div
        v-else-if="phase === 'idle' || phase === 'error'"
        class="border-t border-border px-3 py-3"
      >
        <button
          class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-primary px-2 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90"
          @click="handleStart"
        >
          <Power class="h-3 w-3" />
          Start daemon
        </button>
      </div>
    </aside>

    <main class="flex flex-1 flex-col overflow-hidden">
      <header class="flex h-14 items-center border-b border-border px-6 shrink-0">
        <h1 class="text-lg font-semibold">{{ currentTitle }}</h1>
      </header>
      <div class="flex-1 overflow-y-auto p-6">
        <RouterView />
      </div>
    </main>

    <StartupOverlay
      v-if="phase !== 'ready' && phase !== 'idle'"
      :phase="phase as 'starting' | 'error'"
      :error="error"
      @start="handleStart"
      @retry="handleStart"
    />
  </div>
</template>