svg loader

client/config/webpack.config.base.cjs

@@ -42,6 +42,10 @@ const webpackConfig = {
           'style-loader',
           'css-loader',
         ]
+      },
+      {
+        test: /\.svg$/,
+        loader: 'svg-inline-loader'
       }
     ]
   },

client/package-lock.json

@@ -27,6 +27,7 @@
         "less": "^4.6.4",
         "less-loader": "^12.3.2",
         "style-loader": "^4.0.0",
+        "svg-inline-loader": "^0.8.2",
         "ts-loader": "^9.5.4",
         "typescript": "^5.9.3",
         "userscript-metadata-webpack-plugin": "^0.4.2",
@@ -2728,6 +2729,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/body": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/body/-/body-5.1.0.tgz",
@@ -3202,6 +3213,16 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.20.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.20.1.tgz",
@@ -5113,6 +5134,34 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/loader-utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/loader-utils/node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -6380,6 +6429,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/simple-html-tokenizer": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz",
+      "integrity": "sha512-Mc/gH3RvlKvB/gkp9XwgDKEWrSYyefIJPGG8Jk1suZms/rISdUuVEMx5O1WBnTWaScvxXDvGJrZQWblUmQHjkQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/sirv": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",
@@ -6562,6 +6618,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-inline-loader": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/svg-inline-loader/-/svg-inline-loader-0.8.2.tgz",
+      "integrity": "sha512-kbrcEh5n5JkypaSC152eGfGcnT4lkR0eSfvefaUJkLqgGjRQJyKDvvEE/CCv5aTSdfXuc+N98w16iAojhShI3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "loader-utils": "^1.1.0",
+        "object-assign": "^4.0.1",
+        "simple-html-tokenizer": "^0.1.1"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",

client/package.json

@@ -43,6 +43,7 @@
     "less": "^4.6.4",
     "less-loader": "^12.3.2",
     "style-loader": "^4.0.0",
+    "svg-inline-loader": "^0.8.2",
     "ts-loader": "^9.5.4",
     "typescript": "^5.9.3",
     "userscript-metadata-webpack-plugin": "^0.4.2",

client/src/call-history.ts

@@ -3,6 +3,7 @@ import { TapiContact } from './tapi-contact'
 import { extractNumber } from './utils'
 import GM_fetch from '@trim21/gm-fetch'
 import { Config } from './config'
+const telephoneIcon = require('./telephone.svg');
 
 export class CallHistory {
   private callerIds: { [number: string]: TapiContact } = {}
@@ -58,18 +59,7 @@ export class CallHistory {
     a.onclick = () => {
       window.open(href)
     }
-    a.innerHTML = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 559.98 559.98">' +
+    a.innerHTML = telephoneIcon;
-      '<g>' +
-      '  <g>' +
-      '    <path d="M279.99,0C125.601,0,0,125.601,0,279.99c0,154.39,125.601,279.99,279.99,279.99c154.39,0,279.99-125.601,279.99-279.99' +
-      '      C559.98,125.601,434.38,0,279.99,0z M279.99,498.78c-120.644,0-218.79-98.146-218.79-218.79' +
-      '      c0-120.638,98.146-218.79,218.79-218.79s218.79,98.152,218.79,218.79C498.78,400.634,400.634,498.78,279.99,498.78z"/>' +
-      '    <path d="M304.226,280.326V162.976c0-13.103-10.618-23.721-23.716-23.721c-13.102,0-23.721,10.618-23.721,23.721v124.928' +
-      '      c0,0.373,0.092,0.723,0.11,1.096c-0.312,6.45,1.91,12.999,6.836,17.926l88.343,88.336c9.266,9.266,24.284,9.266,33.543,0' +
-      '      c9.26-9.266,9.266-24.284,0-33.544L304.226,280.326z"/>' +
-      '  </g>' +
-      '</g>' +
-      '</svg>'
 
     a.classList.add('btn');
     a.classList.add('btn-plain');

client/src/index.js

@@ -17,7 +17,7 @@ waitForKeyElements('call-view', (element) => { callNotification.showCallNotifica
 
 const callHistory = new CallHistory()
 // eslint-disable-next-line no-undef
-waitForKeyElements('.call-history-list call', (element) => { callHistory.showCallHistory(element) }, false)
+waitForKeyElements('call', (element) => { callHistory.showCallHistory(element) }, false)
 
 const status = new Status()
 // eslint-disable-next-line no-undef

client/src/status.ts

@@ -2,6 +2,7 @@ import { Config } from './config';
 import './status.css';
 import { ZcStatus } from './zc-status';
 import GM_fetch from "@trim21/gm-fetch";
+const zcIcon = require('./stopwatch-regular-full.svg');
 
 declare function waitForKeyElements(selectorOrFunction: any, callback: any, waitOnce: boolean): any;
 
@@ -57,18 +58,30 @@ export class Status {
     element.appendChild(divider);
 
     var menu = document.createElement('li');
+    menu.role = 'menuitem';
     element.appendChild(menu);
 
     var link = document.createElement('a');
     link.id = 'tapi-zc-button';
-    link.innerText = 'ZeitConsens';
+    //link.innerText = 'ZeitConsens';
     link.classList.add('dropdown-item');
     link.classList.add('d-flex');
+    link.classList.add('align-items-center');
+    link.classList.add('gap-2');
     link.onclick = () => {
       document.getElementById('zc-modal').classList.toggle('show');
     }
     menu.appendChild(link);
 
+    var icon = document.createElement('span');
+    icon.classList.add('icon');
+    icon.classList.add('svg-xs');
+    icon.innerHTML = zcIcon;
+    link.appendChild(icon);
+    var text = document.createElement('span');
+    text.innerText = 'ZeitConsens';
+    link.appendChild(text);
+
     var html =
       '<div role="document" class="modal-dialog">' +
       '  <div class="modal-content">' +

client/src/stopwatch-regular-full.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path d="M240 88C240 74.7 250.7 64 264 64L376 64C389.3 64 400 74.7 400 88C400 101.3 389.3 112 376 112L344 112L344 137.3C393.6 142.8 438.1 165 471.8 198.3L495 175C504.4 165.6 519.6 165.6 528.9 175C538.2 184.4 538.3 199.6 528.9 208.9L502.1 235.7C523.5 269.2 536 309.1 536 351.9C536 471.2 439.3 567.9 320 567.9C200.7 567.9 104 471.3 104 352C104 240.8 188 149.3 296 137.3L296 112L264 112C250.7 112 240 101.3 240 88zM320 184C227.2 184 152 259.2 152 352C152 444.8 227.2 520 320 520C412.8 520 488 444.8 488 352C488 259.2 412.8 184 320 184zM344 248L344 352C344 365.3 333.3 376 320 376C306.7 376 296 365.3 296 352L296 248C296 234.7 306.7 224 320 224C333.3 224 344 234.7 344 248z"/></svg>

client/src/telephone.svg

@@ -0,0 +1,12 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 559.98 559.98">
+    <g>
+       <g>
+           <path d="M279.99,0C125.601,0,0,125.601,0,279.99c0,154.39,125.601,279.99,279.99,279.99c154.39,0,279.99-125.601,279.99-279.99
+             C559.98,125.601,434.38,0,279.99,0z M279.99,498.78c-120.644,0-218.79-98.146-218.79-218.79
+             c0-120.638,98.146-218.79,218.79-218.79s218.79,98.152,218.79,218.79C498.78,400.634,400.634,498.78,279.99,498.78z"/>
+           <path d="M304.226,280.326V162.976c0-13.103-10.618-23.721-23.716-23.721c-13.102,0-23.721,10.618-23.721,23.721v124.928
+             c0,0.373,0.092,0.723,0.11,1.096c-0.312,6.45,1.91,12.999,6.836,17.926l88.343,88.336c9.266,9.266,24.284,9.266,33.543,0
+             c9.26-9.266,9.266-24.284,0-33.544L304.226,280.326z"/>
+        </g>
+    </g>
+</svg>