NotoSans and chat feed styling

public/fonts/fonts.css

@@ -54,4 +54,16 @@
 	font-family: Montserrat;
 	src: url(Montserrat-Black.ttf);
     font-weight: 800;
+}
+
+@font-face {
+	font-family: NotoSans;
+	src: url(NotoSans-Regular.ttf);
+    font-weight: 400;
+}
+
+@font-face {
+	font-family: NotoSans;
+	src: url(NotoSans-Bold.ttf);
+    font-weight: 700;
 }

src/App.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 import { appWindow } from '@tauri-apps/api/window'
-import * as store from "@/stores";
 
 import { Router, Route } from "svelte-navigator";
 import Titlebar from "./win/Titlebar.svelte";
 import Login from "./nav/Login.svelte";
 import Home from "./nav/Home.svelte";
 import { onMount } from 'svelte';
+import initStorage from './core/storage';
 
 let isFocused = true;
 
@@ -16,12 +16,7 @@ appWindow.listen("tauri://blur", () => isFocused = false);
 
 // Setup the user so it persists.
 onMount(() => {
-	if (localStorage.getItem("username") != null && localStorage.getItem("username") != 'null') {
-		store.user.set({ id: '...', name: localStorage.getItem("username") });
-	} else {
-		store.user.set(null);
-	}
-	store.user.subscribe(user => localStorage.setItem("username", (user ? user.name : null)));
+	initStorage();
 });
 
 </script>

src/comp/Chat.svelte

@@ -1,15 +1,29 @@
 <script lang="ts">
 import { invoke } from "@tauri-apps/api/tauri";
+import * as store from "@/stores";
+import Feed from "./Feed.svelte";
 
 let input = "";
+let user = "";
+
+store.user.subscribe(value => {
+  user = value.name;
+})
 
 const sendMessage = () => {
   invoke('send_message', { data: input });
+  store.globalChat.update(global => {
+    global.push({ sender: user, content: input });
+    return global;
+  })
 };
 </script>
 
 <div class="chat">
-  <div class="chat-body" />
+  <div class="chat-body">
+    <Feed />
+  </div>
+
   <div class="chat-footer">
     <div class="input">
       <div class="upload">
@@ -54,7 +68,12 @@ const sendMessage = () => {
     align-items: center;
 
     .chat-body {
+      width: calc(100% - 40px);
       flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-end;
     }
 
     .chat-footer {
@@ -98,7 +117,7 @@ const sendMessage = () => {
           background: transparent !important;
           padding: 10px;
           font-size: 0.9em;
-          font-family: Montserrat;
+          font-family: NotoSans;
           color: #dddddd;
         }
 

src/comp/Feed.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+import * as store from "@/stores";
+
+let chat: Array<{ sender: string; content: string }> = [];
+
+store.globalChat.subscribe((global) => {
+  chat = global;
+});
+
+/**
+ * Returns if the message is from a different user then the one before it.
+ */
+const isFirst = (index: number): boolean => {
+  if (index == 0) {
+    return true; // True if this is the first message in the chat.
+  } else if (chat[index].sender != chat[index - 1].sender) {
+    return true; // True if the message before is from another sender.
+  }
+  return false;
+}
+
+</script>
+
+<div class="feed">
+  {#each chat as msg, i}
+    <div class="{ isFirst(i) ? 'item first' : 'item' }" style="{ `--content:${'\'00:00\''}` }">
+      <div class="user">
+        <div class="avatar" />
+        <div class="username">
+          {msg.sender}
+        </div>
+      </div>
+
+      <div class="content">{msg.content}</div>
+    </div>
+  {/each}
+</div>
+
+<style lang="scss">
+  .feed {
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    font-family: NotoSans;
+
+    .item {
+      width: 100%;
+      height: 20px;
+      margin-top: 4px;
+
+      color: #444444;
+
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .user {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: fit-content;
+        height: 20px;
+
+        .avatar {
+          width: 20px;
+          height: 20px;
+
+          border: 1px solid #3d3d3d;
+          background-color: #2d2d2d;
+
+          border-radius: 3px;
+        }
+
+        .username {
+          width: fit-content;
+          min-width: 50px;
+          margin-left: 5px;
+          margin-right: 10px;
+          height: 10px;
+          display: flex;
+          align-items: center;
+          
+          color: #aaaaaa;
+        }
+
+        opacity: 0;
+      }
+
+      &.first {
+        margin-top: 20px;
+
+        position: relative;
+
+        .user {
+          opacity: 1;
+        }
+
+        &::before {
+          content: " ";
+          position: absolute;
+          top: -11px;
+          right: 0;
+          width: calc(100% - 30px);
+          height: 1px;
+          border-bottom: 1px solid;
+          border-color: inherit;
+        }
+
+        &::after {
+          content: var(--content);
+          position: absolute;
+          top: -11px;
+          left: 0;
+          width: 100%;
+          height: 1px;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          font-size: 10px;
+          color: #666666;
+        }
+      }
+
+      .content {
+        flex-grow: 1;
+        height: 10px;
+        display: flex;
+        align-items: center;
+
+        color: #eeeeee;
+      }
+    }
+  }
+</style>

src/core/storage.ts

@@ -0,0 +1,17 @@
+import * as store from "@/stores";
+
+export default function initStorage() {
+
+    // Save the username into local storage.
+    if (localStorage.getItem("username") != null && localStorage.getItem("username") != 'null')
+		store.user.set({ id: '...', name: localStorage.getItem("username") });
+    else store.user.set(null);
+	store.user.subscribe(user => localStorage.setItem("username", (user ? user.name : null)));
+
+    // Save the global chat into local storage.
+    if (localStorage.getItem("globalchat") != null && localStorage.getItem("globalchat") != 'null')
+		store.globalChat.set(JSON.parse(localStorage.getItem("globalchat")));
+    else store.globalChat.set([]);
+	store.globalChat.subscribe(chat => localStorage.setItem("globalchat", (chat ? JSON.stringify(chat) : null)));
+
+}

src/core/traffic.ts

@@ -5,6 +5,7 @@ import * as store from '@/stores';
  * @param message A message recieved from the WebRTC server.
  */
 export default function handleTraffic(message: string) {
+    console.log(message);
     const json = JSON.parse(message);
     console.log('websocket recieved:', json);
 
@@ -29,6 +30,14 @@ export default function handleTraffic(message: string) {
             });
             break;
 
+        case 'chat': // when a message is send in global chat.
+            store.globalChat.update(chat => {
+                chat.push({ sender: json.sender, content: json.content });
+                return chat;
+            });
+            console.log({ sender: json.sender, content: json.content });
+            break;
+
         case 'error':
             console.error('webrtc threw an error:', json.message);
             break;

src/stores.ts

@@ -11,6 +11,6 @@ export const user = writable<{ id: string, name: string }>(null);
 export const users = writable<Array<{ id: string, name: string }>>([]);
 
 /**
- * The currently active/open chat id.
+ * A log of the global chat.
  */
-export const activeChat = writable<string>("");
+export const globalChat = writable<Array<{ sender: string, content: string }>>([]);