Linux-Port: GNOME-Popup + Tray, Terminal-Schriftgröße global

- Popup als rahmenloses Fenster mit D-Bus-Relay (popup.html/ts, Popup.vue); GNOME-Extension schiebt es unter den Panel-Button - Terminal: globale Schriftgröße via settings.json (terminalFontSize), Zoom mit Ctrl/Cmd +/-/0 im Terminal - trayLinux-Icon, Capabilities, App.vue/terminal.html angepasst
2026-07-06 20:08:16 +02:00
parent 85c18eb8f0
commit 1df0da4d48
14 changed files with 1346 additions and 106 deletions
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { enable, disable, isEnabled } from "@tauri-apps/plugin-autostart";
+import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
 import { useI18n } from "vue-i18n";
 import ProjectList from "./components/ProjectList.vue";
 import PoolList from "./components/PoolList.vue";
@@ -13,6 +14,29 @@ const { locale } = useI18n();

 onMounted(async () => {
  autostart.value = await isEnabled();
+
+  // macOS nutzt die native Ampel (Overlay); sonst eigene Fensterknöpfe im Header
+  // (Linux ist dekorationslos, siehe lib.rs).
+  const isMac = /Mac|Macintosh/.test(navigator.userAgent);
+  document.documentElement.dataset.platform = isMac ? "mac" : "other";
+  if (!isMac) {
+    const win = getCurrentWebviewWindow();
+    document
+      .getElementById("win-min")
+      ?.addEventListener("click", () => win.minimize());
+    document
+      .getElementById("win-max")
+      ?.addEventListener("click", () => win.toggleMaximize());
+    document
+      .getElementById("win-close")
+      ?.addEventListener("click", () => win.close());
+    for (const g of document.querySelectorAll<HTMLElement>(".grip")) {
+      g.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        win.startResizeDragging(g.dataset.dir as never);
+      });
+    }
+  }
 });

 async function toggleAutostart() {
@@ -26,8 +50,8 @@ async function toggleAutostart() {
 </script>

 <template>
-  <header>
-    <h1>ai-control</h1>
+  <header data-tauri-drag-region>
+    <h1 data-tauri-drag-region>ai-control</h1>
    <nav>
      <button :class="{ active: tab === 'projects' }" @click="tab = 'projects'">
        {{ $t("app.projects") }}
@@ -49,10 +73,146 @@ async function toggleAutostart() {
        {{ $t("app.autostart") }}
      </label>
    </div>
+    <div id="winbtns">
+      <button class="winbtn" id="win-min" aria-label="Minimieren">
+        <svg width="12" height="12" viewBox="0 0 12 12"><line x1="2" y1="6.5" x2="10" y2="6.5" /></svg>
+      </button>
+      <button class="winbtn" id="win-max" aria-label="Maximieren">
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><rect x="2.5" y="2.5" width="7" height="7" rx="1" /></svg>
+      </button>
+      <button class="winbtn close" id="win-close" aria-label="Schließen">
+        <svg width="12" height="12" viewBox="0 0 12 12"><line x1="2.7" y1="2.7" x2="9.3" y2="9.3" /><line x1="9.3" y1="2.7" x2="2.7" y2="9.3" /></svg>
+      </button>
+    </div>
  </header>
  <main>
    <ProjectList v-if="tab === 'projects'" />
    <PoolList v-else-if="tab === 'pools'" />
    <UsageList v-else />
  </main>
+  <div id="resize-grips" aria-hidden="true">
+    <div class="grip n" data-dir="North"></div>
+    <div class="grip s" data-dir="South"></div>
+    <div class="grip w" data-dir="West"></div>
+    <div class="grip e" data-dir="East"></div>
+    <div class="grip nw" data-dir="NorthWest"></div>
+    <div class="grip ne" data-dir="NorthEast"></div>
+    <div class="grip sw" data-dir="SouthWest"></div>
+    <div class="grip se" data-dir="SouthEast"></div>
+  </div>
 </template>
+
+<style>
+/* macOS: Platz links für die Ampel, eigene Fensterknöpfe aus. */
+:root[data-platform="mac"] header {
+  padding-left: 80px;
+}
+:root[data-platform="mac"] #winbtns {
+  display: none;
+}
+/* Linux/Windows: Fensterknöpfe rechtsbündig bis zum Rand. */
+:root[data-platform="other"] header {
+  padding-right: 0;
+}
+#winbtns {
+  display: flex;
+  align-self: stretch;
+  margin: -0.85rem 0 -0.85rem 0.5rem;
+}
+.winbtn {
+  width: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--subtext);
+  cursor: default;
+  transition: background 0.12s ease;
+}
+.winbtn svg {
+  stroke: currentColor;
+  stroke-width: 1.2;
+  opacity: 0.85;
+}
+.winbtn:hover {
+  background: var(--surface0);
+  color: var(--text);
+}
+.winbtn.close:hover {
+  background: #f38ba8;
+  color: var(--crust);
+}
+/* Resize-Zonen für das dekorationslose Fenster (nur Linux/Windows). */
+#resize-grips {
+  display: none;
+}
+:root[data-platform="other"] #resize-grips {
+  display: block;
+}
+.grip {
+  position: fixed;
+  z-index: 100;
+}
+.grip.n {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  cursor: ns-resize;
+}
+.grip.s {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  cursor: ns-resize;
+}
+.grip.w {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 4px;
+  cursor: ew-resize;
+}
+.grip.e {
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 4px;
+  cursor: ew-resize;
+}
+.grip.nw {
+  top: 0;
+  left: 0;
+  width: 9px;
+  height: 9px;
+  cursor: nwse-resize;
+  z-index: 101;
+}
+.grip.ne {
+  top: 0;
+  right: 0;
+  width: 9px;
+  height: 9px;
+  cursor: nesw-resize;
+  z-index: 101;
+}
+.grip.sw {
+  bottom: 0;
+  left: 0;
+  width: 9px;
+  height: 9px;
+  cursor: nesw-resize;
+  z-index: 101;
+}
+.grip.se {
+  bottom: 0;
+  right: 0;
+  width: 9px;
+  height: 9px;
+  cursor: nwse-resize;
+  z-index: 101;
+}
+</style>
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from "vue";
+import { invoke } from "@tauri-apps/api/core";
+import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { LogicalSize } from "@tauri-apps/api/dpi";
+
+interface Project {
+  name: string;
+  running: boolean;
+  terminal: { theme: string | null; icon: string | null; title: string | null };
+}
+
+const WIDTH = 300;
+
+const projects = ref<Project[]>([]);
+const icons = ref<Record<string, string>>({});
+const wrapRef = ref<HTMLElement>();
+const win = getCurrentWebviewWindow();
+
+async function refresh() {
+  try {
+    projects.value = await invoke<Project[]>("list_projects");
+    for (const p of projects.value) {
+      if (p.terminal.icon && !(p.name in icons.value)) {
+        icons.value[p.name] =
+          (await invoke<string | null>("project_icon", { project: p.name })) ?? "";
+      }
+    }
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+async function pick(p: Project) {
+  await invoke("start_or_focus_cmd", { project: p.name });
+  await win.hide();
+}
+async function openMain() {
+  await invoke("open_main_window");
+  await win.hide();
+}
+async function quit() {
+  await invoke("quit_app");
+}
+
+// Fenster nur so hoch wie der Inhalt: bei jeder Layout-Änderung nachziehen.
+let ro: ResizeObserver | undefined;
+let timer: number;
+onMounted(() => {
+  refresh();
+  timer = window.setInterval(refresh, 2000);
+  if (wrapRef.value) {
+    ro = new ResizeObserver(() => {
+      const h = Math.ceil(wrapRef.value!.getBoundingClientRect().height);
+      if (h > 0) win.setSize(new LogicalSize(WIDTH, h));
+    });
+    ro.observe(wrapRef.value);
+  }
+});
+onUnmounted(() => {
+  window.clearInterval(timer);
+  ro?.disconnect();
+});
+</script>
+
+<template>
+  <div ref="wrapRef" class="wrap">
+    <ul class="list">
+      <li v-for="p in projects" :key="p.name" class="row" @click="pick(p)">
+        <span class="dot" :class="{ on: p.running }"></span>
+        <img v-if="icons[p.name]" class="ic" :src="icons[p.name]" />
+        <span v-else class="ic ph"></span>
+        <span class="nm">{{ p.name }}</span>
+      </li>
+      <li v-if="projects.length === 0" class="empty">Keine Projekte</li>
+    </ul>
+
+    <footer class="ft">
+      <button class="fbtn" @click="openMain">Öffnen</button>
+      <button class="fbtn danger" @click="quit">Beenden</button>
+    </footer>
+  </div>
+</template>
+
+<style scoped>
+.wrap {
+  width: 300px;
+  box-sizing: border-box;
+  background: #1e1e2e;
+  color: #cdd6f4;
+  border: 1px solid #313244;
+  border-radius: 12px;
+  overflow: hidden;
+  font:
+    14px/1.3 system-ui,
+    -apple-system,
+    sans-serif;
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 5px;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  padding: 7px 9px;
+  border-radius: 9px;
+  cursor: pointer;
+  transition: background 0.12s ease;
+}
+.row:hover {
+  background: #313244;
+}
+
+.dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: #585b70;
+  flex: none;
+}
+.dot.on {
+  background: #a6e3a1;
+  box-shadow: 0 0 7px #a6e3a1a0;
+}
+
+.ic {
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  flex: none;
+  object-fit: cover;
+}
+.ic.ph {
+  background: #313244;
+}
+
+.nm {
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.empty {
+  padding: 20px;
+  text-align: center;
+  color: #585b70;
+}
+
+.ft {
+  display: flex;
+  gap: 6px;
+  padding: 5px 6px 6px;
+  border-top: 1px solid #313244;
+}
+.fbtn {
+  flex: 1;
+  padding: 8px;
+  border: none;
+  border-radius: 8px;
+  background: #313244;
+  color: #cdd6f4;
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.12s ease;
+}
+.fbtn:hover {
+  background: #45475a;
+}
+.fbtn.danger {
+  color: #f38ba8;
+}
+.fbtn.danger:hover {
+  background: #45303a;
+}
+</style>
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import Popup from "./components/Popup.vue";
+
+createApp(Popup).mount("#app");
@@ -29,6 +29,29 @@ window.addEventListener("unhandledrejection", (e) =>
 const project = new URLSearchParams(location.search).get("project")!;
 const win = getCurrentWebviewWindow();

+// macOS nutzt die native Ampel (Overlay-Titelbar); sonst eigene Fensterknöpfe
+// im Header (Linux ist dekorationslos, siehe terminal.rs).
+const isMac = /Mac|Macintosh/.test(navigator.userAgent);
+document.documentElement.dataset.platform = isMac ? "mac" : "other";
+if (!isMac) {
+  document
+    .getElementById("win-min")
+    ?.addEventListener("click", () => win.minimize());
+  document
+    .getElementById("win-max")
+    ?.addEventListener("click", () => win.toggleMaximize());
+  document
+    .getElementById("win-close")
+    ?.addEventListener("click", () => win.close());
+  // Resize-Zonen: dekorationslose Fenster haben keinen nativen Rand.
+  for (const g of document.querySelectorAll<HTMLElement>(".grip")) {
+    g.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      win.startResizeDragging(g.dataset.dir as never);
+    });
+  }
+}
+
 // Fensterhintergrund beim Öffnen kommt aus terminal.rs (theme_background);
 // dort nicht gepflegte Themes fallen auf Mocha zurück (nur kurzer Moment
 // bis die Webview lädt).
@@ -427,11 +450,15 @@ header.style.background = picked.header;
 header.style.borderBottomColor = picked.border;
 header.style.color = theme.foreground;

+// Globale Schriftgröße (settings.json: terminalFontSize), ein Wert für alle.
+const DEFAULT_FONT_SIZE = 13;
+let fontSize = await invoke<number>("terminal_font_size");
+
 const term = new Terminal({
  // Ligatur-Addon nutzt die Character-Joiner-API (Proposed API)
  allowProposedApi: true,
  fontFamily: '"JetBrains Mono", Menlo, monospace',
-  fontSize: 13,
+  fontSize,
  fontWeightBold: "600",
  lineHeight: 1.0,
  letterSpacing: 0,
@@ -443,6 +470,14 @@ const term = new Terminal({
 const fit = new FitAddon();
 term.loadAddon(fit);

+// Ctrl/Cmd + +/-/0: Schriftgröße global anpassen, sofort im aktuellen Fenster.
+function applyFontSize(px: number) {
+  fontSize = Math.max(8, Math.min(24, px));
+  term.options.fontSize = fontSize;
+  fit.fit();
+  invoke("set_terminal_font_size", { size: fontSize });
+}
+
 // Shift+Enter als CSI-u-Sequenz senden (Zeilenumbruch in Claude Code,
 // auch bei nicht-leerer Zeile). Neben keydown muss auch keypress unter-
 // drückt werden, sonst sendet xterm.js zusätzlich \r und submittet damit.
@@ -451,13 +486,27 @@ term.attachCustomKeyEventHandler((e) => {
    if (e.type === "keydown") invoke("term_write", { data: "\x1b[13;2u" });
    return false;
  }
+  if ((e.ctrlKey || e.metaKey) && !e.altKey) {
+    if (e.key === "+" || e.key === "=") {
+      if (e.type === "keydown") applyFontSize(fontSize + 1);
+      return false;
+    }
+    if (e.key === "-" || e.key === "_") {
+      if (e.type === "keydown") applyFontSize(fontSize - 1);
+      return false;
+    }
+    if (e.key === "0") {
+      if (e.type === "keydown") applyFontSize(DEFAULT_FONT_SIZE);
+      return false;
+    }
+  }
  return true;
 });

 // Font muss geladen sein, bevor WebGL den Glyphen-Atlas aufbaut —
 // beide verwendeten Gewichte (400 normal, 600 bold).
-await document.fonts.load('13px "JetBrains Mono"');
-await document.fonts.load('600 13px "JetBrains Mono"');
+await document.fonts.load(`${fontSize}px "JetBrains Mono"`);
+await document.fonts.load(`600 ${fontSize}px "JetBrains Mono"`);
 term.open(document.getElementById("term")!);
 // Reihenfolge laut Addon-Doku: Ligaturen vor WebGL aktivieren.
 term.loadAddon(new LigaturesAddon());