Make menu font monospaced using ImageRenderer

#56
closes #851

Sources/AppBundle/MenuBar.swift

@@ -51,8 +51,32 @@ public func menuBar(viewModel: TrayMenuModel) -> some Scene {
             terminateApp()
         }.keyboardShortcut("Q", modifiers: .command)
     } label: {
-        // .font(.system(.body, design: .monospaced)) doesn't work unfortunately :(
-        Text(viewModel.isEnabled ? viewModel.trayText : "⏸️")
+        if viewModel.isEnabled {
+            MonospacedText(viewModel.trayText)
+        } else {
+            MonospacedText("⏸️")
+        }
+    }
+}
+
+struct MonospacedText: View {
+    @Environment(\.colorScheme) var colorScheme: ColorScheme
+    var text: String
+    init(_ text: String) { self.text = text }
+
+    var body: some View {
+        let renderer = ImageRenderer(
+            content: Text(text)
+                .font(.system(.largeTitle, design: .monospaced))
+                .foregroundStyle(colorScheme == .light ? Color.black : Color.white)
+        )
+        if let cgImage = renderer.cgImage {
+            // Using scale: 1 results in a blurry image for unknown reasons
+            Image(cgImage, scale: 2, label: Text(text))
+        } else {
+            // In case image can't be rendered fallback to plain text
+            Text(text)
+        }
     }
 }