refactor: update app.vue and various components to enhance UI consistency, replace color classes for improved accessibility, and refine layout for better user experience

components/CoopBuilderSubnav.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-12">
+  <div v-if="isSetupCompleted" class="mb-12">
     <div class="w-full mx-auto">
       <nav
         class="flex flex-wrap items-center space-x-1 font-mono uppercase justify-self-center"
@@ -24,16 +24,17 @@
 
 <script setup lang="ts">
 const route = useRoute();
+const coop = useCoopBuilder();
 
 const coopBuilderItems = [
   {
     id: "coop-builder",
-    name: "Setup Wizard",
+    name: "Settings",
     path: "/coop-builder",
   },
   {
     id: "budget",
-    name: "Budget",
+    name: "Studio Budget",
     path: "/budget",
   },
   {
@@ -43,6 +44,31 @@ const coopBuilderItems = [
   },
 ];
 
+// Check if setup wizard is completed using the same validation logic as coop-builder page
+const isSetupCompleted = computed(() => {
+  // Members validation: at least one member with name and positive hours
+  const membersValid = coop.members.value.some((m: any) => {
+    const hasName = typeof m.name === "string" && m.name.trim().length > 0;
+    const hours = Number((m as any).hoursPerMonth ?? 0);
+    return hasName && Number.isFinite(hours) && hours > 0;
+  });
+
+  // Streams validation: at least one stream with name and non-negative monthly amount
+  const streamsValid = coop.streams.value.length > 0 &&
+    coop.streams.value.every((s: any) => {
+      const monthly = Number((s as any).monthly ?? 0);
+      return (s.label || "").toString().trim().length > 0 && monthly >= 0;
+    });
+
+  // Policies validation: has members (same logic as coop-builder page)
+  const policiesValid = coop.members.value.length > 0;
+
+  // Costs are always valid (optional)
+  const costsValid = true;
+
+  return policiesValid && membersValid && costsValid && streamsValid;
+});
+
 function isActive(path: string): boolean {
   return route.path === path;
 }