From c10f2ac22e8ec0f677e42efd578ce8c375c3f174 Mon Sep 17 00:00:00 2001
From: archipelago <archipelago@localhost>
Date: Wed, 17 Jun 2026 16:56:36 -0400
Subject: [PATCH] fix(apps): rename 'Websites' tab to 'Services' (#51)

Headless containers (databases, APIs, backends without a UI) belong in a
tab labelled 'Services', not 'Websites'. The categorisation logic already
routes UI-less packages there (built under #45); this finishes the rename
of the user-facing label across Apps, Marketplace, Discover and the mobile
nav, and makes 'services' the canonical tab state/query param. Old
?tab=websites bookmarks still resolve (back-compat acceptor kept).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 neode-ui/src/views/Apps.vue                         | 8 ++++----
 neode-ui/src/views/Discover.vue                     | 4 ++--
 neode-ui/src/views/Marketplace.vue                  | 4 ++--
 neode-ui/src/views/apps/appsConfig.ts               | 6 +++---
 neode-ui/src/views/dashboard/DashboardMobileNav.vue | 6 +++---
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/neode-ui/src/views/Apps.vue b/neode-ui/src/views/Apps.vue
index 621e3d2e..e85a8bfa 100644
--- a/neode-ui/src/views/Apps.vue
+++ b/neode-ui/src/views/Apps.vue
@@ -8,7 +8,7 @@
           <div class="mode-switcher hidden md:inline-flex">
             <button class="mode-switcher-btn" :class="{ 'mode-switcher-btn-active': activeTab === 'apps' }" @click="activeTab = 'apps'; router.replace({ query: {} })">My Apps</button>
             <RouterLink to="/dashboard/discover" class="mode-switcher-btn">App Store</RouterLink>
-            <button class="mode-switcher-btn" :class="{ 'mode-switcher-btn-active': activeTab === 'websites' }" @click="activeTab = 'websites'; router.replace({ query: { tab: 'websites' } })">Websites</button>
+            <button class="mode-switcher-btn" :class="{ 'mode-switcher-btn-active': activeTab === 'services' }" @click="activeTab = 'services'; router.replace({ query: { tab: 'services' } })">Services</button>
           </div>
         </div>
         <div v-show="activeTab === 'apps' && categoriesWithApps.length > 1 && !collapseCategories" class="mode-switcher category-tabs-wide hidden md:inline-flex">
@@ -73,7 +73,7 @@
         <div class="app-header-inline-tabs mode-switcher mode-switcher-full mb-3">
           <button class="mode-switcher-btn" :class="{ 'mode-switcher-btn-active': activeTab === 'apps' }" @click="activeTab = 'apps'; router.replace({ query: {} })">My Apps</button>
           <RouterLink to="/dashboard/discover" class="mode-switcher-btn">App Store</RouterLink>
-          <button class="mode-switcher-btn" :class="{ 'mode-switcher-btn-active': activeTab === 'websites' }" @click="activeTab = 'websites'; router.replace({ query: { tab: 'websites' } })">Websites</button>
+          <button class="mode-switcher-btn" :class="{ 'mode-switcher-btn-active': activeTab === 'services' }" @click="activeTab = 'services'; router.replace({ query: { tab: 'services' } })">Services</button>
         </div>
         <div v-if="activeTab === 'apps' && categoriesWithApps.length > 1" class="mobile-category-strip mb-3" aria-label="My Apps categories">
           <button
@@ -401,11 +401,11 @@ const showStagger = !appsAnimationDone
 
 // Tabs
 const activeTab = ref<AppsTab>(
-  route.query.tab === 'websites' || route.query.tab === 'services' ? 'websites' : 'apps'
+  route.query.tab === 'websites' || route.query.tab === 'services' ? 'services' : 'apps'
 )
 
 watch(() => route.query.tab, (tab) => {
-  activeTab.value = tab === 'websites' || tab === 'services' ? 'websites' : 'apps'
+  activeTab.value = tab === 'websites' || tab === 'services' ? 'services' : 'apps'
 })
 
 // Search (debounced)
diff --git a/neode-ui/src/views/Discover.vue b/neode-ui/src/views/Discover.vue
index 7ea73652..14aa2a0d 100644
--- a/neode-ui/src/views/Discover.vue
+++ b/neode-ui/src/views/Discover.vue
@@ -8,7 +8,7 @@
           <div class="mode-switcher hidden md:inline-flex">
             <RouterLink to="/dashboard/apps" class="mode-switcher-btn">My Apps</RouterLink>
             <RouterLink to="/dashboard/discover" class="mode-switcher-btn mode-switcher-btn-active">App Store</RouterLink>
-            <RouterLink to="/dashboard/apps?tab=websites" class="mode-switcher-btn">Websites</RouterLink>
+            <RouterLink to="/dashboard/apps?tab=services" class="mode-switcher-btn">Services</RouterLink>
           </div>
         </div>
         <div v-show="!collapseCategories" class="mode-switcher category-tabs-wide hidden md:inline-flex">
@@ -63,7 +63,7 @@
         <div class="app-header-inline-tabs mode-switcher mode-switcher-full mb-3">
           <RouterLink to="/dashboard/apps" class="mode-switcher-btn">My Apps</RouterLink>
           <RouterLink to="/dashboard/discover" class="mode-switcher-btn mode-switcher-btn-active">App Store</RouterLink>
-          <RouterLink to="/dashboard/apps?tab=websites" class="mode-switcher-btn">Websites</RouterLink>
+          <RouterLink to="/dashboard/apps?tab=services" class="mode-switcher-btn">Services</RouterLink>
         </div>
         <div class="flex items-center gap-2 mb-3">
           <span class="discover-terminal-tag">discover</span>
diff --git a/neode-ui/src/views/Marketplace.vue b/neode-ui/src/views/Marketplace.vue
index 1369a3d5..3625a856 100644
--- a/neode-ui/src/views/Marketplace.vue
+++ b/neode-ui/src/views/Marketplace.vue
@@ -8,7 +8,7 @@
           <div class="mode-switcher hidden md:inline-flex">
             <RouterLink to="/dashboard/apps" class="mode-switcher-btn">My Apps</RouterLink>
             <RouterLink to="/dashboard/discover" class="mode-switcher-btn mode-switcher-btn-active">App Store</RouterLink>
-            <RouterLink to="/dashboard/apps?tab=websites" class="mode-switcher-btn">Websites</RouterLink>
+            <RouterLink to="/dashboard/apps?tab=services" class="mode-switcher-btn">Services</RouterLink>
           </div>
         </div>
         <div v-show="!collapseCategories" class="mode-switcher category-tabs-wide hidden md:inline-flex">
@@ -64,7 +64,7 @@
         <div class="app-header-inline-tabs mode-switcher mode-switcher-full mb-3">
           <RouterLink to="/dashboard/apps" class="mode-switcher-btn">My Apps</RouterLink>
           <RouterLink to="/dashboard/discover" class="mode-switcher-btn mode-switcher-btn-active">App Store</RouterLink>
-          <RouterLink to="/dashboard/apps?tab=websites" class="mode-switcher-btn">Websites</RouterLink>
+          <RouterLink to="/dashboard/apps?tab=services" class="mode-switcher-btn">Services</RouterLink>
         </div>
         <div class="flex items-center gap-2 mb-3">
           <span class="discover-terminal-tag">discover</span>
diff --git a/neode-ui/src/views/apps/appsConfig.ts b/neode-ui/src/views/apps/appsConfig.ts
index 1b784f89..cb6456a4 100644
--- a/neode-ui/src/views/apps/appsConfig.ts
+++ b/neode-ui/src/views/apps/appsConfig.ts
@@ -79,9 +79,9 @@ export function isKnownApp(id: string, pkg?: PackageDataEntry): boolean {
 }
 
 // True when the package's manifest declares a front-end UI interface. This is
-// the authoritative "is this a user-facing app?" signal (#45): apps with a UI
-// belong in "My Apps", while headless services (databases, backends, workers)
-// declare no UI and belong in "Websites"/"Services".
+// the authoritative "is this a user-facing app?" signal (#45/#51): apps with a
+// UI belong in "My Apps", while headless services (databases, APIs, backends,
+// workers) declare no UI and belong in the "Services" tab.
 export function hasFrontendUi(pkg?: PackageDataEntry): boolean {
   return !!pkg?.manifest?.interfaces?.main?.ui
 }
diff --git a/neode-ui/src/views/dashboard/DashboardMobileNav.vue b/neode-ui/src/views/dashboard/DashboardMobileNav.vue
index a138c1cc..285bcd64 100644
--- a/neode-ui/src/views/dashboard/DashboardMobileNav.vue
+++ b/neode-ui/src/views/dashboard/DashboardMobileNav.vue
@@ -19,11 +19,11 @@
         :class="{ 'mode-switcher-btn-active': route.path === '/dashboard/marketplace' || route.path.startsWith('/dashboard/marketplace/') || route.path === '/dashboard/discover' }"
       >App Store</RouterLink>
       <RouterLink
-        to="/dashboard/apps?tab=websites"
+        to="/dashboard/apps?tab=services"
         class="mode-switcher-btn"
         :class="{ 'mode-switcher-btn-active': route.query.tab === 'services' || route.query.tab === 'websites' }"
-        @click.prevent="router.push({ path: '/dashboard/apps', query: { tab: 'websites' } })"
-      >Websites</RouterLink>
+        @click.prevent="router.push({ path: '/dashboard/apps', query: { tab: 'services' } })"
+      >Services</RouterLink>
     </div>
   </div>