improve home page layout

src/View/homePage.css

@@ -1,15 +1,27 @@
+#home-page {
+    overflow: auto;
+    padding: var(--content-padding);
+
+    min-width: unset;
+    max-width: 1000px;
+}
+
+#home-page > h1 {
+    font-size: 3rem;
+    font-family: IBM Plex Sans Thin;
+}
+
 #home-page > div {
+    position: relative;
+
     display: flex;
     flex-direction: row;
-
+    flex-wrap: wrap;
-    gap: var(--large-gap);
-
-    scroll-snap-type: x mandatory;
-    scroll-behavior: smooth;
-    overflow: hidden;
-    overflow-x: scroll;
 
     padding: 0px;
+
+    height: auto;
+    overflow: visible;
 }
 
 #home-page > div > div {
@@ -18,22 +30,9 @@
     justify-content: start;
 
     gap: var(--gap-between-tiles);
-    padding: var(--content-padding);
-    padding-top: calc(var(--header-height) + var(--content-margin));
 
     width: 100%;
     min-width: 100%;
-    height: 100%;
-    overflow-y: auto;
-
-    scroll-snap-align: center;
-}
-
-#home-page #overview-section,
-#home-page #chat-section {
-    padding-bottom: calc(
-        var(--content-padding) + var(--header-height) + var(--safe-area-bottom)
-    );
 }
 
 #home-page #chat-grid {
@@ -47,7 +46,7 @@
 
 @media (min-width: 640px) {
     #home-page > div {
-        overflow-x: hidden;
+	gap: var(--content-padding);
     }
 
     #home-page #overview-section {
@@ -61,19 +60,13 @@
     }
 }
 
-@media (min-width: 1200px) {
+@media (min-width: 1000px) {
-    #home-page #overview-section,
+    #home-page > div {
-    #home-page #chat-section {
+	gap: var(--large-gap);
-        padding-left: 3rem;
-        padding-right: 3rem;
     }
 
-    #home-page #chat-grid {
+    #home-page > h1 {
-        margin-top: 3rem;
+	padding-top: 3rem;
-    }
+	padding-bottom: 1rem;
-
-    #home-page #overview-section {
-        width: var(--max-input-width);
-        min-width: var(--max-input-width);
     }
 }

src/View/homePage.tsx

@@ -18,11 +18,11 @@ export function HomePage(
     fileTransferViewModel: FileTransferViewModel,
     chatListViewModel: ChatListViewModel,
 ) {
+    const greeting = React.createProxyState([settingsViewModel.username], ()=>coreViewModel.translations.homePage.greeting(settingsViewModel.username.value));
+
     // sections
     const overviewSection = (
         <div id="overview-section">
-            <h2>{coreViewModel.translations.homePage.overviewHeadline}</h2>
-
             <label class="tile flex-no">
                 <span class="icon">cell_tower</span>
                 <div>
@@ -117,23 +117,12 @@ export function HomePage(
                 <span class="icon">update</span>
             </button>
 	
-            <div class="mobile-only">
+	    <hr class="mobile-only"></hr>
-                <hr></hr>
-
-                <div class="flex-row justify-end">
-                    <button class="ghost width-50" on:click={scrollToChat}>
-                        {coreViewModel.translations.homePage.scrollToChatButton}
-                        <span class="icon">arrow_forward</span>
-                    </button>
-                </div>
-            </div>
         </div>
     );
 
     const chatSection = (
         <div id="chat-section">
-            <h2>{coreViewModel.translations.homePage.chatsHeadline}</h2>
-
             <div class="flex-row width-input">
                 <input
                     placeholder={
@@ -157,6 +146,8 @@ export function HomePage(
                 </button>
 	    </div>
 
+	    <hr></hr>
+
             <div
                 id="chat-grid"
                 children:append={[
@@ -167,14 +158,10 @@ export function HomePage(
         </div>
     );
 
-    // methods
-    function scrollToChat() {
-        chatSection.scrollIntoView();
-    }
-
     // final
     return (
 	<article id="home-page">
+	    <h1 subscribe:innerText={greeting}></h1>
             <div>
                 {overviewSection}
                 {chatSection}

src/View/translations.ts

@@ -54,11 +54,10 @@ const englishTranslations = {
 
     homePage: {
         appName: "Coordination Tool",
+	greeting: (name: string) => `Hi ${name}!`,
 
         ///
 
-        overviewHeadline: "Overview",
-
         serverAddress: "Server address",
         serverAddressPlaceholder: "wss://192.168.0.69:3000",
         connectAudioLabel: "connect to server",
@@ -71,13 +70,8 @@ const englishTranslations = {
 
         updateButton: (version: string) => `Update to ${version}`,
 
-        scrollToChatButton: "Chats",
-
         ///
 
-        backToOverviewAudioLabel: "go back to overview",
-        chatsHeadline: "Chats",
-
         addChatAudioLabel: "name of new chat",
         addChatPlaceholder: "Add chat",
         addChatButton: "Add chat",
@@ -438,8 +432,7 @@ export const allTranslations: {
 
         homePage: {
 	    appName: "Coordination Tool",
-
+	    greeting: (name: string) => `Hi ${name}!`,
-            overviewHeadline: "Übersicht",
 
 	    serverAddress: "Serveradresse",
 	    serverAddressPlaceholder: "wss://192.168.0.69:3000",
@@ -453,11 +446,6 @@ export const allTranslations: {
 
 	    updateButton: (version: string) => `Aktualisieren: ${version}`,
 
-            scrollToChatButton: "Chats",
-
-            backToOverviewAudioLabel: "zurück zur übersicht",
-            chatsHeadline: "Chats",
-
 	    addChatAudioLabel: "Name des neuen Chats",
 	    addChatPlaceholder: "Chat hinzufügen",
 	    addChatButton: "Chat hinzufügen",
@@ -786,8 +774,7 @@ export const allTranslations: {
 
 	homePage: {
 	    appName: "Coordination Tool",
-
+	    greeting: (name: string) => `Hola ${name}!`,
-            overviewHeadline: "Resumen",
 
 	    serverAddress: "Dirección del servidor",
 	    serverAddressPlaceholder: "wss://192.168.0.69:3000",
@@ -801,11 +788,6 @@ export const allTranslations: {
 
 	    updateButton: (version: string) => `Actualizar a ${version}`,
 
-            scrollToChatButton: "Chats",
-
-            backToOverviewAudioLabel: "volver al resumen",
-            chatsHeadline: "Chats",
-
 	    addChatAudioLabel: "nombre del nuevo chat",
 	    addChatPlaceholder: "Añadir chat",
 	    addChatButton: "Añadir chat",

src/base.css

@@ -9,9 +9,8 @@
 /* Gradient */
 #background-wrapper {
     position: fixed;
-    inset: 0px;
+    inset: -80px;
 
-    transform: scale(1.2);
     filter: blur(40px);
 
     z-index: 1;
@@ -144,6 +143,6 @@ body[theme="dark"] #background-wrapper #grass-2 {
 }
 
 body[keystroke-active] [ctkeystroke]::after {
-    opacity: 1;
+    opacity: .7;
     transform: translateY(0px);
 }