move zoom to settings dialog, add button to repair app

src/Model/model.ts

@@ -145,6 +145,7 @@ export const outboxTextStyle = React.createProxyState([outboxItemCount], () =>
 );
 
 // MISC
+export const isPresentingSettingsModal = new React.State(false);
 export const isEncryptionAvailable = window.crypto.subtle != undefined;
 export const senderName = React.restoreState("sender-name", "");
 export const pageZoom = React.restoreState("page-zoom", 100);
@@ -152,6 +153,20 @@ pageZoom.subscribe(() => {
   document.body.style.zoom = `${pageZoom.value}%`;
 });
 
+export function toggleSettings() {
+  isPresentingSettingsModal.value = !isPresentingSettingsModal.value;
+}
+
+export function repairApp() {
+  removeSetDuplicates(previousAddresses);
+  removeSetDuplicates(usedObjectCategories);
+  removeSetDuplicates(usedObjectStatuses);
+}
+
+function removeSetDuplicates(listState: React.ListState<any>) {
+  listState.value = new Set([...listState.value]);
+}
+
 const zoomStep = 10;
 export function zoomOut() {
   pageZoom.value -= zoomStep;

src/Tabs/overviewTab.tsx

@@ -1,6 +1,6 @@
 import * as React from "bloatless-react";
 
-import { isConnected, isEncryptionAvailable, zoomIn, zoomOut } from "../Model/model";
+import { isConnected, isEncryptionAvailable, toggleSettings, zoomIn, zoomOut } from "../Model/model";
 
 import { ChatListSection } from "../Views/Overview/chatListSection";
 import { ConnectionSection } from "../Views/Overview/connectionSection";
@@ -12,14 +12,9 @@ export function OverviewTab() {
     <article id="settings-tab" toggle:connected={isConnected}>
       <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>
+        <button aria-label={translation.showSettings} on:click={toggleSettings}>
+          <span class="icon">settings</span>
+        </button>
       </header>
 
       <div class="flex-column large-gap">

src/Views/settingsModal.tsx

@@ -0,0 +1,47 @@
+import * as React from "bloatless-react";
+
+import {
+  isPresentingSettingsModal,
+  repairApp,
+  toggleSettings,
+  zoomIn,
+  zoomOut,
+} from "../Model/model";
+
+import { translation } from "../translations";
+
+export function SettingsModal() {
+  return (
+    <div class="modal" toggle:open={isPresentingSettingsModal}>
+      <div>
+        <main>
+          <h2>{translation.settings}</h2>
+
+          <div class="flex-row width-input gap">
+            <button class="width-100 flex justify-start" on:click={zoomOut}>
+              <span class="icon">zoom_out</span>
+              {translation.zoomOut}
+            </button>
+            <button class="width-100 flex justify-start" on:click={zoomIn}>
+              <span class="icon">zoom_in</span>
+              {translation.zoomIn}
+            </button>
+          </div>
+
+          <hr></hr>
+
+          <div class="flex-row width-input">
+            <button class="width-100 flex-1" on:click={repairApp}>
+              {translation.repairApp}
+              <span class="icon">handyman</span>
+            </button>
+          </div>
+        </main>
+        <button class="width-100" on:click={toggleSettings}>
+          {translation.close}
+          <span class="icon">close</span>
+        </button>
+      </div>
+    </div>
+  );
+}

src/index.tsx

@@ -2,6 +2,9 @@ import "./styles.css";
 
 import { MessageTab } from "./Tabs/messageTab";
 import { OverviewTab } from "./Tabs/overviewTab";
+import { SettingsModal } from "./Views/settingsModal";
 
-document.querySelector("main")!.append(OverviewTab(), MessageTab());
-document.querySelector("main")!.classList.add("split");
+document
+  .querySelector("main")!
+  .append(OverviewTab(), MessageTab(), SettingsModal());
+document.querySelector("main")!.classList.add("split");

src/translations.ts

@@ -8,8 +8,14 @@ const englishTranslations = {
   discard: "Discard",
   rename: "Rename",
 
-  zoomOut: "zoom out",
-  zoomIn: "zoom in",
+  // settings
+  settings: "Settings",
+  showSettings: "Show settings",
+
+  zoomOut: "Zoom Out",
+  zoomIn: "Zoom In",
+
+  repairApp: "Repair App",
 
   // overview
   overview: "Overview",
@@ -128,8 +134,14 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     discard: "Descartar",
     rename: "Renombrar",
 
-    zoomOut: "alejar",
-    zoomIn: "acercar",
+    // settings
+    settings: "Configuración",
+    showSettings: "Mostrar configuración",
+
+    zoomOut: "Alejar",
+    zoomIn: "Acercar",
+
+    repairApp: "Reparar Aplicación",
 
     // overview
     overview: "Resumen",
@@ -245,8 +257,14 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     discard: "Verwerfen",
     rename: "Umbenennen",
 
-    zoomOut: "verkleinern",
-    zoomIn: "vergrößern",
+    // settings
+    settings: "Einstellungen",
+    showSettings: "Einstellungen anzeigen",
+
+    zoomOut: "Verkleinern",
+    zoomIn: "Vergrößern",
+
+    repairApp: "App reparieren",
 
     // overview
     overview: "Übersicht",