Add PWA service worker (via vite plugin), use dynamic viewport units for interface size (improves mobile experience), replace default vue homepage with basic info

frontend/src/assets/base.css

@@ -82,7 +82,7 @@
 }
 
 body {
-  min-height: 100vh;
+  min-height: 100lvh;
   color: var(--color-text);
   background: var(--color-background);
   transition:

frontend/src/assets/main.css

@@ -2,6 +2,34 @@
 
 *[hidden] { display: none !important; }
 
+body {
+  display: flex;
+  direction: row;
+}
+
+main {
+  height: 100dvh;
+  flex-grow: 1;
+  overflow: auto;
+}
+
+.main-sidebar {
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: var(--z-index-sidebar);
+  background-color: var(--color-background);
+}
+
+.main-header {
+  height: 3em;
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 a {
   text-decoration: none;
   color: var(--color-blue);
@@ -20,17 +48,6 @@ button {
   border-color: var(--color-border-hover);
 }
 
-body {
-  display: flex;
-  direction: row;
-}
-
-main {
-  height: 100vh;
-  flex-grow: 1;
-  overflow: auto;
-}
-
 .with-sidebar-expanded .when-sidebar-collapsed {
   display: none;
 }

frontend/src/components/TitleBar.vue

@@ -7,7 +7,7 @@
 </script>
 
 <template>
-  <header>
+  <header class="main-header">
     <button class="when-sidebar-collapsed" @click="sidebarExpand()">
       >>
     </button>
@@ -20,14 +20,6 @@
 </template>
 
 <style scoped>
-  header {
-    height: 3em;
-    border-bottom: 1px solid var(--color-border);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-
   :slotted(h1) {
     font-size: 160%;
     font-weight: bold;

frontend/src/components/main/Sidebar.vue

@@ -80,7 +80,7 @@
 </script>
 
 <template>
-  <aside class="sidebar" :style="sidebarStyle()" v-if="sidebarExpanded">
+  <aside class="main-sidebar" :style="sidebarStyle()" v-if="sidebarExpanded">
     <div class="drag-bar" @mousedown="dragBarMouseDown($event)"></div>
     <div class="tab-bar">
       <div class="tab-group">
@@ -109,14 +109,6 @@
 </template>
 
 <style scoped>
-  .sidebar {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    z-index: var(--z-index-sidebar);
-    background-color: var(--color-background);
-  }
-
   .tab-bar, .tab-group {
     display: flex;
     flex-direction: row;

frontend/src/views/HomeView.vue

@@ -1,9 +1,29 @@
 <script setup>
-import TheWelcome from '../components/TheWelcome.vue'
+  //import TheWelcome from '../components/TheWelcome.vue'
+  import TitleBar from '../components/TitleBar.vue';
 </script>
 
 <template>
   <main>
-    <TheWelcome />
+    <TitleBar>
+      <h1>Horde Agent Hub</h1>
+    </TitleBar>
+
+    <div class="home-content">
+      <p>This is the Hub for Horde Agents. You can configure agents, interact and chat with them.</p>
+      <p>In the left panel, you can open chats from the <strong>Chats Tab</strong> and edit agents from the <strong>Agents Tab</strong>.</p>
+      <br>
+      <p>We accept contributions at our <a href="javascript:;">github repository</a></p>
+    </div>
+
+    <!--TheWelcome /-->
   </main>
 </template>
+
+<style scoped>
+  .home-content {
+    max-width: 900px;
+    margin: 2em auto auto;
+    padding: 0 5em 0 2em;
+  }
+</style>