add zoom buttons

src/Model/model.ts

@@ -133,6 +133,18 @@ UDN.onmailboxdelete = () => {
 // MISC
 export const isEncryptionAvailable = window.crypto.subtle != undefined;
 export const senderName = React.restoreState("sender-name", "");
+export const pageZoom = React.restoreState("page-zoom", 100);
+pageZoom.subscribe(() => {
+  document.body.style.zoom = `${pageZoom.value}%`;
+});
+
+const zoomStep = 10;
+export function zoomOut() {
+  pageZoom.value -= zoomStep;
+}
+export function zoomIn() {
+  pageZoom.value += zoomStep;
+}
 
 // CHAT
 export const chats = new React.ListState<Chat>();

src/Tabs/overviewTab.tsx

@@ -1,6 +1,6 @@
 import * as React from "bloatless-react";
 
-import { isConnected, isEncryptionAvailable } from "../Model/model";
+import { isConnected, isEncryptionAvailable, zoomIn, zoomOut } from "../Model/model";
 
 import { ChatListSection } from "../Views/Overview/chatListSection";
 import { ConnectionSection } from "../Views/Overview/connectionSection";
@@ -10,7 +10,17 @@ import { translation } from "../translations";
 export function OverviewTab() {
   return (
     <article id="settings-tab" toggle:connected={isConnected}>
-      <header>{translation.overview}</header>
+      <header>
+        {translation.overview}
+        <span>
+          <button on:click={zoomOut} aria-label={translation.zoomOut}>
+            <span class="icon">zoom_out</span>
+          </button>
+          <button on:click={zoomIn} aria-label={translation.zoomIn}>
+            <span class="icon">zoom_in</span>
+          </button>
+        </span>
+      </header>
 
       <div class="flex-column large-gap">
         <div class="tile error flex-no" toggle:hidden={isEncryptionAvailable}>

src/translations.ts

@@ -7,6 +7,9 @@ const englishTranslations = {
   close: "Close",
   discard: "Discard",
 
+  zoomOut: "zoom out",
+  zoomIn: "zoom in",
+
   // overview
   overview: "Overview",
 
@@ -99,6 +102,9 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     close: "Cerrar",
     discard: "Descartar",
 
+    zoomOut: "alejar",
+    zoomIn: "acercar",
+
     // overview
     overview: "Resumen",
 
@@ -188,6 +194,9 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     close: "Schließen",
     discard: "Verwerfen",
 
+    zoomOut: "verkleinern",
+    zoomIn: "vergrößern",
+
     // overview
     overview: "Übersicht",
 
@@ -254,7 +263,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
 
     viewAll: "Alle",
     viewNotes: "Notizen",
-    
+
     noObjects: "Keine Objekte",
     noNotes: "Keine Notizen",