feat(tray): use icons for tray items

bin/tray-icons/bookmarks.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="1"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-bookmark"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 7v14l-6 -4l-6 4v-14a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4z" /></svg>

bin/tray-icons/build-icons.sh

@@ -0,0 +1,14 @@
+#!/usr/bin/env bash
+
+if ! command -v inkscape &> /dev/null; then
+  echo "This tool requires Inkscape to be render sharper SVGs than ImageMagick."
+  exit 1
+fi
+
+script_dir=$(realpath $(dirname $0))
+output_dir="$script_dir/../../images/app-icons/tray"
+
+for file in *.svg; do
+    name=$(basename $file .svg)
+    inkscape -w 16 -h 16 "$file" -o "$output_dir/$name-16.png"
+done

bin/tray-icons/close.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="1"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>

bin/tray-icons/new-note.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="1"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-plus"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>

bin/tray-icons/recents.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="1"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-history"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 8l0 4l2 2" /><path d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5" /></svg>

bin/tray-icons/today.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="1"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-calendar-star"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11 21h-5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v3.5" /><path d="M16 3v4" /><path d="M8 3v4" /><path d="M4 11h11" /><path d="M17.8 20.817l-2.172 1.138a.392 .392 0 0 1 -.568 -.41l.415 -2.411l-1.757 -1.707a.389 .389 0 0 1 .217 -.665l2.428 -.352l1.086 -2.193a.392 .392 0 0 1 .702 0l1.086 2.193l2.428 .352a.39 .39 0 0 1 .217 .665l-1.757 1.707l.414 2.41a.39 .39 0 0 1 -.567 .411l-2.172 -1.138z" /></svg>

src/services/tray.ts

@@ -27,12 +27,17 @@ function getIconSize() {
     }
 }
 
-function getIconPath() {
+function getTrayIconPath() {
     const iconSize = getIconSize();
 
     return path.join(path.dirname(fileURLToPath(import.meta.url)), "../..", "images", "app-icons", "png", `${iconSize}x${iconSize}.png`);
 }
 
+function getIconPath(name: string) {
+    const size = 16;
+    return path.join(path.dirname(fileURLToPath(import.meta.url)), "../..", "images", "app-icons", "tray", `${name}-${size}.png`);
+}
+
 function registerVisibilityListener() {
     const mainWindow = windowService.getMainWindow();
     if (!mainWindow) {
@@ -127,27 +132,32 @@ function updateTrayMenu() {
         {
             label: "New note",
             type: "normal",
+            icon: getIconPath("new-note"),
             click: () => triggerKeyboardAction("createNoteIntoInbox")
         },
         {
             label: "Open today's journal note",
             type: "normal",
+            icon: getIconPath("today"),
             click: () => openInSameTab(date_notes.getTodayNote())
         },
         {
             label: "Bookmarks",
             type: "submenu",
+            icon: getIconPath("bookmarks"),
             submenu: buildBookmarksMenu()
         },
         {
             label: "Recent notes",
             type: "submenu",
+            icon: getIconPath("recents"),
             submenu: buildRecentNotesMenu()
         },
         { type: "separator" },
         {
             label: "Quit Trilium",
             type: "normal",
+            icon: getIconPath("close"),
             click: () => {
                 mainWindow.close();
             }
@@ -176,7 +186,7 @@ function createTray() {
         return;
     }
 
-    tray = new Tray(getIconPath());
+    tray = new Tray(getTrayIconPath());
     tray.setToolTip("TriliumNext Notes");
     // Restore focus
     tray.on("click", changeVisibility);