add connection to home page

src/View/homePage.css

@@ -6,6 +6,12 @@
 
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
+  overflow: hidden;
+  overflow-x: scroll;
+
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-bottom: 0px;
 }
 
 #home-page > div > div {
@@ -14,28 +20,16 @@
   justify-content: start;
 
   gap: var(--gap-between-tiles);
+  padding: var(--content-padding);
 
   width: 100%;
   min-width: 100%;
+  height: 100%;
+  overflow: scroll;
 
   scroll-snap-align: center;
 }
 
-@media (max-width: 640px) {
-  #home-page > div {
-    padding-left: 0px;
-    padding-right: 0px;
-    padding-bottom: 0px;
-  }
-
-  #home-page > div > div {
-    height: 100%;
-    overflow: scroll;
-
-    padding: var(--content-padding)
-  }
-}
-
 @media (min-width: 640px) {
   #home-page #overview-section {
     width: 20rem;

src/View/homePage.tsx

@@ -10,16 +10,82 @@ export function HomePage() {
     <div id="overview-section">
       <h2>{translations.homePage.overviewHeadline}</h2>
 
-      <div class="tile flex-no">
+      <label class="tile flex-no">
         <span class="icon">cell_tower</span>
         <div>
-          <b>{translations.homePage.statusHeadline}</b>
+          <span>{translations.homePage.serverAddress}</span>
+          <input></input>
+        </div>
+      </label>
+
+      <div class="flex-row">
+        <button
+          class="danger flex justify-center"
+          aria-label={translations.homePage.disconnectAudioLabel}
+        >
+          <span class="icon">link_off</span>
+        </button>
+        <button
+          class="flex justify-center"
+          aria-label={translations.homePage.manageConnectionsAudioLabel}
+        >
+          <span class="icon">build</span>
+        </button>
+        <button
+          class="primary flex justify-center"
+          aria-label={translations.homePage.connectAudioLabel}
+        >
+          <span class="icon">link</span>
+        </button>
+      </div>
+
+      <hr></hr>
+
+      <div class="tile flex-no">
+        <span class="icon">inbox</span>
+        <div>
+          <b>{translations.homePage.mailboxHeadline}</b>
+          <span class="error">
+            {translations.homePage.mailboxDisabled}
+          </span>
         </div>
       </div>
-      <button class="tile flex-no">
-        <span class="icon">settings</span>
-        <div>{translations.homePage.settingsButton}</div>
-      </button>
+
+      <div class="tile flex-no">
+        <span class="icon">outbox</span>
+        <div>
+          <b>{translations.homePage.outboxHeadline}</b>
+          <span class="success">
+            {translations.homePage.outboxAllItemsSent}
+          </span>
+        </div>
+      </div>
+
+      <hr></hr>
+
+      <label class="tile flex-no">
+        <span class="icon">account_circle</span>
+        <div>
+          <span>{translations.homePage.yourNameLabel}</span>
+          <input></input>
+        </div>
+      </label>
+      <div class="flex-row justify-end">
+        <button class="width-50">
+          {translations.homePage.setNameButton}
+          <span class="icon">check</span>
+        </button>
+      </div>
+
+      <hr></hr>
+
+      <label class="tile flex-no">
+        <span class="icon">calendar_month</span>
+        <div>
+          <span>{translations.homePage.firstDayOfWeekLabel}</span>
+          <select></select>
+        </div>
+      </label>
 
       <div class="mobile-only">
         <hr></hr>

src/View/translations.ts

@@ -3,6 +3,29 @@ const englishTranslations = {
     closeButton: "close",
   },
 
+  regional: {
+    weekdays: {
+      full: [
+        "Sunday",
+        "Monday",
+        "Tuesday",
+        "Wednesday",
+        "Thursday",
+        "Friday",
+        "Saturday",
+      ],
+      abbreviated: [
+        "Sun",
+        "Mon",
+        "Tue",
+        "Wed",
+        "Thu",
+        "Fri",
+        "Sat",
+      ],
+    },
+  },
+
   homePage: {
     appName: "Comms",
 
@@ -10,8 +33,22 @@ const englishTranslations = {
 
     overviewHeadline: "Overview",
 
-    statusHeadline: "Status",
-    settingsButton: "Settings",
+    serverAddress: "Server address",
+    connectAudioLabel: "connect to server",
+    disconnectAudioLabel: "disconnect from server",
+    manageConnectionsAudioLabel: "manage connections",
+
+    mailboxHeadline: "Server Mailbox",
+    mailboxDisabled: "Mailbox disabled. You will miss out on messages sent while you're away",
+    mailboxEnabled: "Mailbox enabled. If you disconnect, the server will keep your messages temporarily",
+
+    outboxHeadline: "Outbox",
+    outboxAllItemsSent: "All items sent",
+
+    yourNameLabel: "Your name",
+    setNameButton: "Set",
+
+    firstDayOfWeekLabel: "First day of week",
 
     scrollToChatButton: "Chats",
 
@@ -27,11 +64,9 @@ const englishTranslations = {
 
   settings: {
     settingsHeadline: "Settings",
-    
-    ///
 
-    
-  }
+    ///
+  },
 };
 
 const allTranslations: { [language: string]: typeof englishTranslations } = {