add zoom buttons

dist/index.js

@@ -923,6 +923,17 @@
   };
   var isEncryptionAvailable = window.crypto.subtle != void 0;
   var senderName = restoreState("sender-name", "");
+  var pageZoom = restoreState("page-zoom", 100);
+  pageZoom.subscribe(() => {
+    document.body.style.zoom = `${pageZoom.value}%`;
+  });
+  var zoomStep = 10;
+  function zoomOut() {
+    pageZoom.value -= zoomStep;
+  }
+  function zoomIn() {
+    pageZoom.value += zoomStep;
+  }
   var chats = new ListState();
   var chatIds = restoreListState("chat-ids");
   var selectedChat = new State(void 0);
@@ -964,6 +975,8 @@
     undoChanges: "Undo changes",
     close: "Close",
     discard: "Discard",
+    zoomOut: "zoom out",
+    zoomIn: "zoom in",
     // overview
     overview: "Overview",
     connection: "Connection",
@@ -1031,6 +1044,8 @@
       undoChanges: "Deshacer",
       close: "Cerrar",
       discard: "Descartar",
+      zoomOut: "alejar",
+      zoomIn: "acercar",
       // overview
       overview: "Resumen",
       connection: "Conexi\xF3n",
@@ -1096,6 +1111,8 @@
       undoChanges: "\xC4nderungen verwerfen",
       close: "Schlie\xDFen",
       discard: "Verwerfen",
+      zoomOut: "verkleinern",
+      zoomIn: "vergr\xF6\xDFern",
       // overview
       overview: "\xDCbersicht",
       connection: "Verbindung",
@@ -1330,8 +1347,7 @@
       "button",
       {
         class: "height-100",
-        "on:click": createObject,
-        "aria-label": translation.createObject
+        disabled: true
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "visibility")
     )), /* @__PURE__ */ createElement(
@@ -1733,7 +1749,7 @@
 
   // src/Tabs/overviewTab.tsx
   function OverviewTab() {
-    return /* @__PURE__ */ createElement("article", { id: "settings-tab", "toggle:connected": isConnected }, /* @__PURE__ */ createElement("header", null, translation.overview), /* @__PURE__ */ createElement("div", { class: "flex-column large-gap" }, /* @__PURE__ */ createElement("div", { class: "tile error flex-no", "toggle:hidden": isEncryptionAvailable }, /* @__PURE__ */ createElement("span", { class: "icon" }, "warning"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translation.encryptionUnavailableTitle), /* @__PURE__ */ createElement("span", { class: "secondary" }, translation.encryptionUnavailableMessage))), PersonalSection(), ConnectionSection(), ChatListSection()));
+    return /* @__PURE__ */ createElement("article", { id: "settings-tab", "toggle:connected": isConnected }, /* @__PURE__ */ createElement("header", null, translation.overview, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement("button", { "on:click": zoomOut, "aria-label": translation.zoomOut }, /* @__PURE__ */ createElement("span", { class: "icon" }, "zoom_out")), /* @__PURE__ */ createElement("button", { "on:click": zoomIn, "aria-label": translation.zoomIn }, /* @__PURE__ */ createElement("span", { class: "icon" }, "zoom_in")))), /* @__PURE__ */ createElement("div", { class: "flex-column large-gap" }, /* @__PURE__ */ createElement("div", { class: "tile error flex-no", "toggle:hidden": isEncryptionAvailable }, /* @__PURE__ */ createElement("span", { class: "icon" }, "warning"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translation.encryptionUnavailableTitle), /* @__PURE__ */ createElement("span", { class: "secondary" }, translation.encryptionUnavailableMessage))), PersonalSection(), ConnectionSection(), ChatListSection()));
   }
 
   // src/index.tsx

dist/styles.css

@@ -1071,10 +1071,6 @@ main {
     grid-template-columns: var(--split-pane-width-desktop) 1fr;
   }
 
-  footer {
-    bottom: 0px !important;
-  }
-
   article > div {
     padding-bottom: calc(var(--content-padding) + var(--control-height));
   }

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",