add connection to home page

dist/index.css

@@ -5,27 +5,23 @@
   gap: var(--large-gap);
   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 {
   display: flex;
   flex-direction: column;
   justify-content: start;
   gap: var(--gap-between-tiles);
+  padding: var(--content-padding);
   width: 100%;
   min-width: 100%;
-  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);
+  scroll-snap-align: center;
-  }
 }
 @media (min-width: 640px) {
   #home-page #overview-section {

dist/index.js

@@ -268,12 +268,44 @@
     general: {
       closeButton: "close"
     },
+    regional: {
+      weekdays: {
+        full: [
+          "Sunday",
+          "Monday",
+          "Tuesday",
+          "Wednesday",
+          "Thursday",
+          "Friday",
+          "Saturday"
+        ],
+        abbreviated: [
+          "Sun",
+          "Mon",
+          "Tue",
+          "Wed",
+          "Thu",
+          "Fri",
+          "Sat"
+        ]
+      }
+    },
     homePage: {
       appName: "Comms",
       ///
       overviewHeadline: "Overview",
-      statusHeadline: "Status",
+      serverAddress: "Server address",
-      settingsButton: "Settings",
+      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",
       ///
       backToOverviewAudioLabel: "go back to overview",
@@ -295,7 +327,28 @@
 
   // src/View/homePage.tsx
   function HomePage() {
-    const overviewSection = /* @__PURE__ */ createElement("div", { id: "overview-section" }, /* @__PURE__ */ createElement("h2", null, translations.homePage.overviewHeadline), /* @__PURE__ */ createElement("div", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "cell_tower"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.homePage.statusHeadline))), /* @__PURE__ */ createElement("button", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "settings"), /* @__PURE__ */ createElement("div", null, translations.homePage.settingsButton)), /* @__PURE__ */ createElement("div", { class: "mobile-only" }, /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-row justify-end" }, /* @__PURE__ */ createElement("button", { class: "ghost width-50", "on:click": scrollToChat }, translations.homePage.scrollToChatButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))));
+    const overviewSection = /* @__PURE__ */ createElement("div", { id: "overview-section" }, /* @__PURE__ */ createElement("h2", null, translations.homePage.overviewHeadline), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "cell_tower"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.homePage.serverAddress), /* @__PURE__ */ createElement("input", null))), /* @__PURE__ */ createElement("div", { class: "flex-row" }, /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "danger flex justify-center",
+        "aria-label": translations.homePage.disconnectAudioLabel
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "link_off")
+    ), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "flex justify-center",
+        "aria-label": translations.homePage.manageConnectionsAudioLabel
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "build")
+    ), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "primary flex justify-center",
+        "aria-label": translations.homePage.connectAudioLabel
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "link")
+    )), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "inbox"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.homePage.mailboxHeadline), /* @__PURE__ */ createElement("span", { class: "error" }, translations.homePage.mailboxDisabled))), /* @__PURE__ */ createElement("div", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "outbox"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.homePage.outboxHeadline), /* @__PURE__ */ createElement("span", { class: "success" }, translations.homePage.outboxAllItemsSent))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "account_circle"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.homePage.yourNameLabel), /* @__PURE__ */ createElement("input", null))), /* @__PURE__ */ createElement("div", { class: "flex-row justify-end" }, /* @__PURE__ */ createElement("button", { class: "width-50" }, translations.homePage.setNameButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "check"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "calendar_month"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.homePage.firstDayOfWeekLabel), /* @__PURE__ */ createElement("select", null))), /* @__PURE__ */ createElement("div", { class: "mobile-only" }, /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-row justify-end" }, /* @__PURE__ */ createElement("button", { class: "ghost width-50", "on:click": scrollToChat }, translations.homePage.scrollToChatButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))));
     const chatSection = /* @__PURE__ */ createElement("div", { id: "chat-section" }, /* @__PURE__ */ createElement("h2", null, translations.homePage.chatsHeadline), /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
       "input",
       {
@@ -390,7 +443,7 @@
     // connection
     socketAddress: `${DATA_VERSION}/connection/socket-address`,
     // settings
-    userName: `${DATA_VERSION}/settings/user-name`,
+    username: `${DATA_VERSION}/settings/user-name`,
     firstDayOfWeek: `${DATA_VERSION}/settings/first-day-of-week`,
     // history
     previousAddresses: `${DATA_VERSION}/history/previous-addresses`,

dist/styles.css

@@ -863,7 +863,9 @@ code {
 .secondary,
 .secondary *,
 .helper-text,
-.error-text,
+.error,
+.warning,
+.success,
 label.tile > div > span:not(.icon) {
   font-size: 0.9rem;
 }

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,26 +20,14 @@
   justify-content: start;
 
   gap: var(--gap-between-tiles);
+  padding: var(--content-padding);
 
   width: 100%;
   min-width: 100%;
-
-  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)
+  scroll-snap-align: center;
-  }
 }
 
 @media (min-width: 640px) {

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>
-      </div>
+      </label>
-      <button class="tile flex-no">
+
-        <span class="icon">settings</span>
+      <div class="flex-row">
-        <div>{translations.homePage.settingsButton}</div>
+        <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>
+
+      <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",
+    serverAddress: "Server address",
-    settingsButton: "Settings",
+    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",
 
@@ -29,9 +66,7 @@ const englishTranslations = {
     settingsHeadline: "Settings",
 
     ///
-
+  },
-    
-  }
 };
 
 const allTranslations: { [language: string]: typeof englishTranslations } = {