Add Help & Support Page with Dedicated Forum Linkouts

.env.dev

@@ -2,3 +2,4 @@ VITE_API_URL=http://localhost:8002/api/v1
 VITE_APP_URL=https://127.0.0.1:8081
 VITE_SITE_TITLE=MaveDB (local API)
 VITE_CLINICAL_FEATURES_ENABLED=false
+VITE_PREVIEW_SITE=false

.env.live

@@ -2,3 +2,4 @@ VITE_API_URL=https://api.mavedb.org/api/v1
 VITE_APP_URL=https://mavedb.org
 VITE_SITE_TITLE=MaveDB
 VITE_CLINICAL_FEATURES_ENABLED=false
+VITE_PREVIEW_SITE=false

.env.preview

@@ -2,3 +2,4 @@ VITE_API_URL=https://api.mavedb.org/api/v1
 VITE_APP_URL=https://preview.mavedb.org
 VITE_SITE_TITLE=MaveDB (Preview Build)
 VITE_CLINICAL_FEATURES_ENABLED=true
+VITE_PREVIEW_SITE=true

.env.prodapi

@@ -2,3 +2,4 @@ VITE_API_URL=https://api.mavedb.org/api/v1
 VITE_APP_URL=https://127.0.0.1:8081
 VITE_SITE_TITLE=MaveDB (prod API)
 VITE_CLINICAL_FEATURES_ENABLED=false
+VITE_PREVIEW_SITE=false

.env.staging

@@ -2,3 +2,4 @@ VITE_API_URL=https://api.staging.mavedb.org/api/v1
 VITE_APP_URL=https://staging.mavedb.org
 VITE_SITE_TITLE=MaveDB (Staging)
 VITE_CLINICAL_FEATURES_ENABLED=false
+VITE_PREVIEW_SITE=false

src/components/layout/Toolbar.vue

@@ -7,7 +7,7 @@
   </div>
   <div class="mavedb-toolbar">
     <div v-if="config.PREVIEW_SITE" class="mavedb-beta-banner">
-      This is a beta test site. For the production site, please visit <a href="https://mavedb.org.">mavedb.org</a>.
+      This is a beta test site. For the production site, please visit <a href="https://mavedb.org.">mavedb.org</a>. To give feedback, please use our <a href="https://mavedb.zulipchat.com/#narrow/channel/511813-beta-testers">Zulip message board</a>.
     </div>
     <Menubar :model="availableMenuItems" class="mavedb-menubar">
       <template #start>
@@ -105,8 +105,14 @@ export default {
         label: 'Find a Variant',
         route: '/search-variants',
       }] : [], {
-        label: 'Documentation',
-        route: '/docs'
+        label: 'Support',
+        items:[{
+          label: 'Get Help',
+          route: '/help',
+        }, {
+          label: 'Documentation',
+          route: '/docs',
+        },]
       }, {
         label: 'New experiment',
         route: '/create-experiment',
@@ -238,6 +244,7 @@ export default {
 
 .mavedb-beta-banner a {
   color: #fff;
+  text-decoration: underline;
 }
 
 </style>

src/components/screens/HelpScreen.vue

@@ -0,0 +1,56 @@
+<template>
+  <DefaultLayout>
+    <div class="help-screen-container">
+      <h1>Help & Support</h1>
+      <p>
+        Welcome to MaveDB! If you need assistance, want to report a bug, or have a feature request, you're in the right place.
+      </p>
+      <ul>
+        <li>
+          <strong>Chat with us:</strong>
+          <a href="https://zulip.mavedb.com" target="_blank" rel="noopener"> Join our Zulip chat</a> to ask questions, get help, or discuss upcoming development work.
+        </li>
+        <li>
+          <strong>Documentation:</strong>
+          <a href="/docs" target="_blank" rel="noopener"> Check out our documentation</a> for guides and reference.
+        </li>
+        <li>
+          <strong>Submit a bug report or feature request:</strong>
+          You can use our <a href="https://zulip.mavedb.com" target="_blank" rel="noopener">Zulip chat</a> to let us know about any <a href="https://mavedb.zulipchat.com/#narrow/channel/511174-bug-reports/topic/channel.20events/with/525122858" target="_blank" rel="noopener">bugs</a> causing you problems or any <a href="https://mavedb.zulipchat.com/#narrow/channel/511173-features/topic/channel.20events/with/525122848" target="_blank" rel="noopener">features</a> you'd like to see.
+          Alternatively, you can submit an issue directly on our <a href="github.com/varianteffect/mavedb-ui/issues" target="_blank" rel="noopener">GitHub repository</a>.
+        </li>
+      </ul>
+    </div>
+  </DefaultLayout>
+</template>
+
+<script>
+import DefaultLayout from '@/components/layout/DefaultLayout.vue'
+
+export default {
+  name: 'HelpScreen',
+  components: { DefaultLayout }
+}
+</script>
+
+<style scoped>
+.help-screen-container {
+  margin: 40px auto;
+  padding: 32px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+}
+.help-screen-container h1 {
+  margin-top: 0px;
+  margin-bottom: 20px;
+}
+.help-screen-container ul {
+  margin: 20px 0;
+  padding-left: 20px;
+}
+.help-screen-container li {
+  margin-bottom: 16px;
+  font-size: 1.1em;
+}
+</style>

src/components/screens/HomeScreen.vue

@@ -35,6 +35,10 @@
                 format uploaded by investigators, which is often relative to synthetic target sequences.
               </li>
             </ul>
+            <p>
+              To provide feedback, please join our Zulip message board. Use <a href="https://mavedb.zulipchat.com/join/5cvqzctbnme2lqmjwnbjg4ty/">this link</a> to join the
+              organization. Once you have joined, you can create topics for discussion in the <a href="https://mavedb.zulipchat.com/#narrow/channel/511813-beta-testers">beta-testers channel</a>.
+            </p>
           </template>
         </Card>
       </div>
@@ -63,6 +67,10 @@
               and the
               <a href="https://brotmanbaty.org/">Brotman Baty Institute.</a>
             </p>
+            <p>
+              If you have questions, comments, or suggestions, check out the <router-link to="/help">Help & Support</router-link> page
+              for information about how to get in touch.
+            </p>
           </template>
         </Card>
       </div>

src/router/index.js

@@ -8,6 +8,7 @@ import ExperimentCreator from '@/components/screens/ExperimentCreator'
 import ExperimentEditor from '@/components/screens/ExperimentEditor'
 import ExperimentView from '@/components/screens/ExperimentView'
 import ExperimentSetView from '@/components/screens/ExperimentSetView'
+import HelpScreen from '@/components/screens/HelpScreen'
 import HomeScreen from '@/components/screens/HomeScreen'
 import OidcCallback from '@/components/screens/OidcCallback'
 import OidcCallbackError from '@/components/screens/OidcCallbackError'
@@ -59,6 +60,9 @@ const routes = [{
   meta: {
     title: import.meta.env.VITE_SITE_TITLE + ' | Documentation'
   }
+}, {
+  path: '/help',
+  component: HelpScreen,
 }, {
   path: '/settings',
   component: SettingsScreen