From 2f0d733b10cb385dd7d4fc657df52e2d681e8d6a Mon Sep 17 00:00:00 2001
From: Jose Olarte III <jose.anomalist.design@gmail.com>
Date: Wed, 31 Dec 2025 14:04:42 +0800
Subject: [PATCH] feat(test-app): add back navigation and improve mobile layout

- Add back buttons to all sub-views (Schedule, Status, Notifications, History, Logs, Settings, UserZero, About)
- Fix router navigation by importing router instance directly (resolves TypeScript errors with vue-facing-decorator)
- Update back button styling: flex layout with page title, arrow-only label
- Fix "Check Status" action to navigate to StatusView instead of checking status inline
- Remove horizontal padding on mobile views (max-width 768px) for edge-to-edge layout
- Simplify badge styling in HomeView (remove padding and border-radius)
---
 .../src/views/AboutView.vue                   | 68 ++++++++++++++++++-
 .../src/views/HistoryView.vue                 | 57 +++++++++++++++-
 .../src/views/HomeView.vue                    | 19 ++----
 .../src/views/LogsView.vue                    | 54 ++++++++++++++-
 .../src/views/NotificationsView.vue           | 57 +++++++++++++++-
 .../src/views/ScheduleView.vue                | 54 ++++++++++++++-
 .../src/views/SettingsView.vue                | 57 +++++++++++++++-
 .../src/views/StatusView.vue                  | 54 ++++++++++++++-
 .../src/views/UserZeroView.vue                | 59 +++++++++++++++-
 9 files changed, 451 insertions(+), 28 deletions(-)

diff --git a/test-apps/daily-notification-test/src/views/AboutView.vue b/test-apps/daily-notification-test/src/views/AboutView.vue
index 756ad2a..841a4bf 100644
--- a/test-apps/daily-notification-test/src/views/AboutView.vue
+++ b/test-apps/daily-notification-test/src/views/AboutView.vue
@@ -1,10 +1,61 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <div class="view-header">
+      <div class="header-title-row">
+        <button class="back-button" @click="goBack" aria-label="Go back to home">
+          ←
+        </button>
+        <h1>This is an about page</h1>
+      </div>
+    </div>
   </div>
 </template>
 
-<style>
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+function goBack() {
+  router.push('/')
+}
+</script>
+
+<style scoped>
+.view-header {
+  text-align: center;
+}
+
+.header-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.back-button {
+  background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  height: 40px;
+}
+
+.back-button:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateX(-2px);
+}
+
 @media (min-width: 1024px) {
   .about {
     min-height: 100vh;
@@ -12,4 +63,17 @@
     align-items: center;
   }
 }
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .header-title-row {
+    gap: 8px;
+  }
+  
+  .back-button {
+    min-width: 36px;
+    height: 36px;
+    font-size: 16px;
+  }
+}
 </style>
diff --git a/test-apps/daily-notification-test/src/views/HistoryView.vue b/test-apps/daily-notification-test/src/views/HistoryView.vue
index e7c9f20..2f985c9 100644
--- a/test-apps/daily-notification-test/src/views/HistoryView.vue
+++ b/test-apps/daily-notification-test/src/views/HistoryView.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="history-view">
     <div class="view-header">
-      <h1 class="page-title">📋 History</h1>
+      <div class="header-title-row">
+        <button class="back-button" @click="goBack" aria-label="Go back to home">
+          ←
+        </button>
+        <h1 class="page-title">📋 History</h1>
+      </div>
       <p class="page-subtitle">Notification history and activity</p>
     </div>
     <div class="placeholder-content">
@@ -12,9 +17,14 @@
 
 <script lang="ts">
 import { Vue, Component, toNative } from 'vue-facing-decorator'
+import router from '../router'
 
 @Component
-class HistoryView extends Vue {}
+class HistoryView extends Vue {
+  goBack() {
+    router.push('/')
+  }
+}
 export default toNative(HistoryView)
 </script>
 
@@ -29,6 +39,36 @@ export default toNative(HistoryView)
   margin-bottom: 30px;
 }
 
+.header-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.back-button {
+  background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  height: 40px;
+}
+
+.back-button:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateX(-2px);
+}
+
 .page-title {
   margin: 0 0 8px 0;
   font-size: 28px;
@@ -51,4 +91,17 @@ export default toNative(HistoryView)
   color: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(10px);
 }
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .header-title-row {
+    gap: 8px;
+  }
+  
+  .back-button {
+    min-width: 36px;
+    height: 36px;
+    font-size: 16px;
+  }
+}
 </style>
diff --git a/test-apps/daily-notification-test/src/views/HomeView.vue b/test-apps/daily-notification-test/src/views/HomeView.vue
index 2886a24..4c1ec22 100644
--- a/test-apps/daily-notification-test/src/views/HomeView.vue
+++ b/test-apps/daily-notification-test/src/views/HomeView.vue
@@ -44,8 +44,7 @@
           icon="📊"
           title="Check Status"
           description="View notification system status"
-          @click="checkSystemStatus"
-          :loading="isCheckingStatus"
+          @click="navigateToStatus"
         />
         <ActionCard
           icon="🔐"
@@ -199,6 +198,11 @@ const navigateToSettings = (): void => {
   router.push('/settings')
 }
 
+const navigateToStatus = (): void => {
+  console.log('🔄 CLICK: Navigate to Status')
+  router.push('/status')
+}
+
 const checkSystemStatus = async (): Promise<void> => {
   console.log('🔄 CLICK: Check System Status')
   isCheckingStatus.value = true
@@ -653,8 +657,6 @@ onMounted(async () => {
 }
 
 .platform-badge {
-  padding: 6px 12px;
-  border-radius: 16px;
   font-size: 12px;
   font-weight: 500;
   text-transform: uppercase;
@@ -662,8 +664,6 @@ onMounted(async () => {
 }
 
 .status-badge {
-  padding: 6px 12px;
-  border-radius: 16px;
   font-size: 12px;
   font-weight: 500;
 }
@@ -697,7 +697,7 @@ onMounted(async () => {
 /* Mobile responsiveness */
 @media (max-width: 768px) {
   .home-view {
-    padding: 16px;
+    padding: 16px 0;
   }
   
   .welcome-title {
@@ -707,10 +707,5 @@ onMounted(async () => {
   .action-grid {
     grid-template-columns: 1fr;
   }
-  
-  .platform-info {
-    flex-direction: column;
-    align-items: center;
-  }
 }
 </style>
diff --git a/test-apps/daily-notification-test/src/views/LogsView.vue b/test-apps/daily-notification-test/src/views/LogsView.vue
index dc23032..164b3b1 100644
--- a/test-apps/daily-notification-test/src/views/LogsView.vue
+++ b/test-apps/daily-notification-test/src/views/LogsView.vue
@@ -12,7 +12,12 @@
 <template>
   <div class="logs-view">
     <div class="view-header">
-      <h1 class="page-title">📋 System Logs</h1>
+      <div class="header-title-row">
+        <button class="back-button" @click="goBack" aria-label="Go back to home">
+          ←
+        </button>
+        <h1 class="page-title">📋 System Logs</h1>
+      </div>
       <p class="page-subtitle">View and copy DailyNotification plugin logs</p>
     </div>
     
@@ -73,6 +78,7 @@
 
 <script lang="ts">
 import { Vue, Component, toNative } from 'vue-facing-decorator'
+import router from '../router'
 type LogLine = { ts: number; msg: string; level: string }
 
 @Component
@@ -82,6 +88,10 @@ class LogsView extends Vue {
   logs: LogLine[] = []
   lastUpdated: number | null = null
 
+  goBack() {
+    router.push('/')
+  }
+
   get hasLogs() { return this.logs.length > 0 }
 
   formatTimestamp(ts: number) { return new Date(ts).toLocaleString() }
@@ -130,6 +140,36 @@ export default toNative(LogsView)
   margin-bottom: 30px;
 }
 
+.header-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.back-button {
+  background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  height: 40px;
+}
+
+.back-button:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateX(-2px);
+}
+
 .page-title {
   margin: 0 0 8px 0;
   font-size: 28px;
@@ -278,7 +318,7 @@ export default toNative(LogsView)
 /* Mobile responsiveness */
 @media (max-width: 768px) {
   .logs-view {
-    padding: 16px;
+    padding: 16px 0;
   }
   
   .logs-controls {
@@ -301,5 +341,15 @@ export default toNative(LogsView)
   .log-timestamp {
     font-size: 11px;
   }
+  
+  .header-title-row {
+    gap: 8px;
+  }
+  
+  .back-button {
+    min-width: 36px;
+    height: 36px;
+    font-size: 16px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/test-apps/daily-notification-test/src/views/NotificationsView.vue b/test-apps/daily-notification-test/src/views/NotificationsView.vue
index 5ee8846..9d16559 100644
--- a/test-apps/daily-notification-test/src/views/NotificationsView.vue
+++ b/test-apps/daily-notification-test/src/views/NotificationsView.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="notifications-view">
     <div class="view-header">
-      <h1 class="page-title">🔔 Notifications</h1>
+      <div class="header-title-row">
+        <button class="back-button" @click="goBack" aria-label="Go back to home">
+          ←
+        </button>
+        <h1 class="page-title">🔔 Notifications</h1>
+      </div>
       <p class="page-subtitle">Manage scheduled notifications</p>
     </div>
     <div class="placeholder-content">
@@ -12,9 +17,14 @@
 
 <script lang="ts">
 import { Vue, Component, toNative } from 'vue-facing-decorator'
+import router from '../router'
 
 @Component
-class NotificationsView extends Vue {}
+class NotificationsView extends Vue {
+  goBack() {
+    router.push('/')
+  }
+}
 export default toNative(NotificationsView)
 </script>
 
@@ -29,6 +39,36 @@ export default toNative(NotificationsView)
   margin-bottom: 30px;
 }
 
+.header-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.back-button {
+  background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  height: 40px;
+}
+
+.back-button:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateX(-2px);
+}
+
 .page-title {
   margin: 0 0 8px 0;
   font-size: 28px;
@@ -51,4 +91,17 @@ export default toNative(NotificationsView)
   color: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(10px);
 }
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .header-title-row {
+    gap: 8px;
+  }
+  
+  .back-button {
+    min-width: 36px;
+    height: 36px;
+    font-size: 16px;
+  }
+}
 </style>
diff --git a/test-apps/daily-notification-test/src/views/ScheduleView.vue b/test-apps/daily-notification-test/src/views/ScheduleView.vue
index 06e1347..f6b0709 100644
--- a/test-apps/daily-notification-test/src/views/ScheduleView.vue
+++ b/test-apps/daily-notification-test/src/views/ScheduleView.vue
@@ -10,7 +10,12 @@
 <template>
   <div class="schedule-view">
     <div class="view-header">
-      <h1 class="page-title">📅 Schedule Notification</h1>
+      <div class="header-title-row">
+        <button class="back-button" @click="goBack" aria-label="Go back to home">
+          ←
+        </button>
+        <h1 class="page-title">📅 Schedule Notification</h1>
+      </div>
       <p class="page-subtitle">Schedule a new daily notification</p>
     </div>
     
@@ -41,6 +46,7 @@
 
 <script lang="ts">
 import { Vue, Component, toNative } from 'vue-facing-decorator'
+import router from '../router'
 
 @Component
 class ScheduleView extends Vue {
@@ -49,6 +55,10 @@ class ScheduleView extends Vue {
   notificationMessage = 'Your daily notification is ready!'
   isScheduling = false
 
+  goBack() {
+    router.push('/')
+  }
+
   async scheduleNotification() {
     this.isScheduling = true
     try {
@@ -106,6 +116,36 @@ export default toNative(ScheduleView)
   margin-bottom: 30px;
 }
 
+.header-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.back-button {
+  background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  height: 40px;
+}
+
+.back-button:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateX(-2px);
+}
+
 .page-title {
   margin: 0 0 8px 0;
   font-size: 28px;
@@ -192,11 +232,21 @@ export default toNative(ScheduleView)
 /* Mobile responsiveness */
 @media (max-width: 768px) {
   .schedule-view {
-    padding: 16px;
+    padding: 16px 0;
   }
   
   .schedule-form {
     padding: 20px;
   }
+  
+  .header-title-row {
+    gap: 8px;
+  }
+  
+  .back-button {
+    min-width: 36px;
+    height: 36px;
+    font-size: 16px;
+  }
 }
 </style>
diff --git a/test-apps/daily-notification-test/src/views/SettingsView.vue b/test-apps/daily-notification-test/src/views/SettingsView.vue
index bcfc829..df6c0f0 100644
--- a/test-apps/daily-notification-test/src/views/SettingsView.vue
+++ b/test-apps/daily-notification-test/src/views/SettingsView.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="settings-view">
     <div class="view-header">
-      <h1 class="page-title">⚙️ Settings</h1>
+      <div class="header-title-row">
+        <button class="back-button" @click="goBack" aria-label="Go back to home">
+          ←
+        </button>
+        <h1 class="page-title">⚙️ Settings</h1>
+      </div>
       <p class="page-subtitle">Configure app preferences</p>
     </div>
     <div class="placeholder-content">
@@ -12,9 +17,14 @@
 
 <script lang="ts">
 import { Vue, Component, toNative } from 'vue-facing-decorator'
+import router from '../router'
 
 @Component
-class SettingsView extends Vue {}
+class SettingsView extends Vue {
+  goBack() {
+    router.push('/')
+  }
+}
 export default toNative(SettingsView)
 </script>
 
@@ -29,6 +39,36 @@ export default toNative(SettingsView)
   margin-bottom: 30px;
 }
 
+.header-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.back-button {
+  background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  height: 40px;
+}
+
+.back-button:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateX(-2px);
+}
+
 .page-title {
   margin: 0 0 8px 0;
   font-size: 28px;
@@ -51,4 +91,17 @@ export default toNative(SettingsView)
   color: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(10px);
 }
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .header-title-row {
+    gap: 8px;
+  }
+  
+  .back-button {
+    min-width: 36px;
+    height: 36px;
+    font-size: 16px;
+  }
+}
 </style>
diff --git a/test-apps/daily-notification-test/src/views/StatusView.vue b/test-apps/daily-notification-test/src/views/StatusView.vue
index ad20b97..f7bff7f 100644
--- a/test-apps/daily-notification-test/src/views/StatusView.vue
+++ b/test-apps/daily-notification-test/src/views/StatusView.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="status-view">
     <div class="view-header">
-      <h1 class="page-title">📊 Status Matrix</h1>
+      <div class="header-title-row">
+        <button class="back-button" @click="goBack" aria-label="Go back to home">
+          ←
+        </button>
+        <h1 class="page-title">📊 Status Matrix</h1>
+      </div>
       <p class="page-subtitle">Comprehensive system status and diagnostics</p>
     </div>
 
@@ -87,6 +92,7 @@
 
 <script lang="ts">
 import { Vue, Component, toNative } from 'vue-facing-decorator'
+import router from '../router'
 import StatusCard from '../components/cards/StatusCard.vue'
 import { createTypedPlugin } from '../lib/typed-plugin'
 import { collectDiagnostics, copyDiagnosticsToClipboard, type ComprehensiveDiagnostics } from '../lib/diagnostics-export'
@@ -114,6 +120,10 @@ type Diagnostics = ComprehensiveDiagnostics
 class StatusView extends Vue {
   isRefreshing = false
   errorMessage = ''
+
+  goBack() {
+    router.push('/')
+  }
   diagnostics: Diagnostics = {
     appVersion: '1.0.0',
     platform: 'Android',
@@ -345,6 +355,36 @@ export default toNative(StatusView)
   margin-bottom: 30px;
 }
 
+.header-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.back-button {
+  background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  height: 40px;
+}
+
+.back-button:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateX(-2px);
+}
+
 .page-title {
   margin: 0 0 8px 0;
   font-size: 28px;
@@ -533,7 +573,7 @@ export default toNative(StatusView)
 /* Responsive Design */
 @media (max-width: 768px) {
   .status-view {
-    padding: 16px;
+    padding: 16px 0;
   }
   
   .matrix-header {
@@ -573,5 +613,15 @@ export default toNative(StatusView)
   .action-button {
     justify-content: center;
   }
+  
+  .header-title-row {
+    gap: 8px;
+  }
+  
+  .back-button {
+    min-width: 36px;
+    height: 36px;
+    font-size: 16px;
+  }
 }
 </style>
diff --git a/test-apps/daily-notification-test/src/views/UserZeroView.vue b/test-apps/daily-notification-test/src/views/UserZeroView.vue
index 1ad2486..806606b 100644
--- a/test-apps/daily-notification-test/src/views/UserZeroView.vue
+++ b/test-apps/daily-notification-test/src/views/UserZeroView.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="user-zero-view">
     <div class="view-header">
-      <h1 class="page-title">User Zero Stars Testing</h1>
+      <div class="header-title-row">
+        <button class="back-button" @click="goBack" aria-label="Go back to home">
+          ←
+        </button>
+        <h1 class="page-title">User Zero Stars Testing</h1>
+      </div>
       <p class="page-subtitle">Test starred projects querying with TimeSafari User Zero</p>
     </div>
 
@@ -103,8 +108,11 @@
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
 import { TEST_USER_ZERO_CONFIG, TestUserZeroAPI } from '../config/test-user-zero'
 
+const router = useRouter()
+
 // Reactive state
 const config = reactive(TEST_USER_ZERO_CONFIG)
 const isTesting = ref(false)
@@ -272,6 +280,13 @@ function toggleMockMode() {
 function clearError() {
   errorMessage.value = ''
 }
+
+/**
+ * Navigate back to home
+ */
+function goBack() {
+  router.push('/')
+}
 </script>
 
 <style scoped>
@@ -288,6 +303,36 @@ function clearError() {
   margin-bottom: 30px;
 }
 
+.header-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.back-button {
+  background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  height: 40px;
+}
+
+.back-button:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateX(-2px);
+}
+
 .page-title {
   margin: 0 0 8px 0;
   font-size: 28px;
@@ -461,7 +506,7 @@ function clearError() {
 
 @media (max-width: 768px) {
   .user-zero-view {
-    padding: 16px;
+    padding: 16px 0;
   }
   
   .config-grid {
@@ -475,5 +520,15 @@ function clearError() {
   .test-button {
     width: 100%;
   }
+  
+  .header-title-row {
+    gap: 8px;
+  }
+  
+  .back-button {
+    min-width: 36px;
+    height: 36px;
+    font-size: 16px;
+  }
 }
 </style>