feat: responsive device container

- provides a responsive window for previewing how the application appears on multiple browsers
- dark mode needs work
- state is not currently persisted

Author: gureckis

src/core/SmileApp.vue

@@ -14,7 +14,6 @@ import { ref, computed } from 'vue'
 import DeveloperNavBar from '@/dev/developer_mode/DeveloperNavBar.vue'
 import DevConsoleBar from '@/dev/developer_mode/DevConsoleBar.vue'
 import DevSideBar from '@/dev/developer_mode/DevSideBar.vue'
-
 /**
  * Presentation mode components
  * @requires PresentationNavBar Navigation bar for presentation mode
@@ -29,6 +28,8 @@ import PresentationNavBar from '@/dev/presentation_mode/PresentationNavBar.vue'
 import StatusBar from '@/builtins/navbars/StatusBar.vue'
 import WindowSizerView from '@/builtins/window_sizer/WindowSizerView.vue'
 
+import ResponsiveDeviceContainer from '@/dev/developer_mode/ResponsiveDeviceContainer.vue'
+
 /**
  * Import API and notification components
  * @requires useAPI SMILE API composable
@@ -64,13 +65,33 @@ const height_pct = computed(() => `${api.store.dev.consoleBarHeight}px`)
 const showStatusBar = computed(() => {
   return api.currentRouteName() !== 'data' && api.currentRouteName() !== 'recruit' && api.config.mode != 'presentation'
 })
+
+/**
+ * Computed property that determines whether to wrap content in ResponsiveDeviceContainer
+ *
+ * @returns {boolean} True if ResponsiveDeviceContainer should be used, false otherwise
+ * - Returns false if current route is '/' (root route)
+ * - Returns true otherwise
+ */
+const shouldUseResponsiveContainer = computed(() => {
+  const routeName = api.currentRouteName()
+  return routeName !== undefined && routeName !== 'recruit'
+})
+
+/**
+ * Computed property that determines if the app is still loading
+ *
+ * @returns {boolean} True if the route name is not yet available, false otherwise
+ */
+const isLoading = computed(() => {
+  return api.currentRouteName() === undefined
+})
 </script>
 <template>
   <div class="app-container">
-    <!-- Top toolbar - always visible, 30px tall, full width -->
+    <!-- Top toolbar - always visible, 39px tall, full width -->
     <div class="toolbar">
-      <DeveloperNavBar v-if="api.config.mode == 'development'"> </DeveloperNavBar>
-      <PresentationNavBar v-if="api.config.mode == 'presentation'"> </PresentationNavBar>
+      <DeveloperNavBar />
     </div>
 
     <!-- Middle row - content and sidebar -->
@@ -81,14 +102,20 @@ const showStatusBar = computed(() => {
       <div class="content-and-console">
         <!-- Main content - scrollable -->
         <div class="main-content">
-          <StatusBar v-if="showStatusBar" />
-          <router-view />
+          <div v-if="isLoading" class="loading-container">
+            <div class="loading-spinner"></div>
+            <p>Loading...</p>
+          </div>
+          <template v-else>
+            <ResponsiveDeviceContainer v-if="shouldUseResponsiveContainer"><router-view /></ResponsiveDeviceContainer>
+            <router-view v-else />
+          </template>
         </div>
 
         <!-- Bottom console - can be toggled -->
         <Transition name="console-slide">
           <div v-if="api.config.mode == 'development' && api.store.dev.showConsoleBar" class="console">
-            <DevConsoleBar />
+            <!--<DevConsoleBar />-->
           </div>
         </Transition>
       </div>
@@ -107,27 +134,29 @@ const showStatusBar = computed(() => {
 .router {
   height: 100vh;
   height: v-bind(total_height);
-  background-color: var(--page-bg-color);
+  background-color: var(--background);
 }
 
 .app-container {
   display: flex;
   flex-direction: column;
   height: 100vh;
-  width: 100vw;
+  width: 100%;
 }
 
 .toolbar {
-  height: 33px;
-  width: calc(100% - 14px); /* Account for typical scrollbar width */
-  background-color: var(--dev-bar-light-grey);
+  margin-top: auto;
+  margin-bottom: auto;
+  height: 36px;
+  width: full; /* Account for typical scrollbar width */
+  background-color: var(--dev-bar-bg);
 }
 
 .content-wrapper {
   display: flex;
   flex: 1;
   overflow: hidden;
-  width: calc(100% - 14px);
+  width: 100%;
 }
 
 .content-and-console {
@@ -150,14 +179,14 @@ const showStatusBar = computed(() => {
   flex: 0 0 280px;
   height: 100%;
   overflow-y: auto;
-  border-left: var(--dev-bar-lines);
-  background-color: var(--dev-bar-background);
+  border-left: 1px solid var(--border);
+  background-color: var(--dev-bg);
 }
 
 .console {
   height: v-bind(height_pct);
   width: 100%;
-  background-color: #6798c8;
+  background-color: #adadad;
   overflow: hidden;
   overflow-x: hidden;
 }
@@ -185,4 +214,33 @@ const showStatusBar = computed(() => {
 .console-slide-leave-to {
   height: 0;
 }
+
+/* Loading styles */
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 200px;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 16px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>