feat(ui): add dynamic window title and sprite-based project/file icons (#529)

* feat(ui): add dynamic titles and sprite-based project/file icons * feat(files): add viewer syntax fallback and tab file icons * fix(files): restore file viewer highlighting and add diff file icons * feat(git): add file icons and async file-viewer syntax fallback * fix(files): force codemirror token colors in file viewer * feat(files): add shiki view mode for file viewer * fix(files): force codemirror parse after programmatic content updates * feat(files): support markdown frontmatter preview * feat(chat): use pierre diffs for tool previews * feat(chat): add configurable beautiful-mermaid rendering * feat(perf): virtualize chat rendering and add react-scan toggle * feat(build): enable React Compiler in Vite React apps * fix(chat): reduce rerenders from tooltips and streamed activity * fix(ui): make MessageList React Compiler safe * chore(ui): batch commit remaining pending ui updates * fix: polish chat and diff preview rendering - Keep Mermaid action buttons fixed while diagram content scrolls - Align Diff All Files headers and match Git-style path truncation - Default chat tool diffs to unified view with lightweight indicators disabled * fix: preserve file tree expansion and delay git action label collapse * fix: refine project icon controls in settings --------- Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
2026-02-27 20:03:42 +02:00
parent d6b8f28e6f
commit 1d8ff97c95
1134 changed files with 14091 additions and 2005 deletions
@@ -0,0 +1,129 @@
+import React from 'react';
+import { useProjectsStore } from '@/stores/useProjectsStore';
+import { isDesktopShell, isTauriShell } from '@/lib/desktop';
+import { desktopHostsGet, locationMatchesHost, redactSensitiveUrl } from '@/lib/desktopHosts';
+
+const APP_TITLE = 'OpenChamber';
+
+const formatProjectLabel = (label: string): string => {
+  return label.replace(/[-_]/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase());
+};
+
+const getProjectNameFromPath = (path: string): string => {
+  const normalized = path.replace(/\\/g, '/').replace(/\/+$/, '');
+  const segments = normalized.split('/').filter(Boolean);
+  return segments[segments.length - 1] ?? '';
+};
+
+const buildWindowTitle = (projectLabel: string | null, instanceLabel: string | null): string => {
+  const parts = [projectLabel, instanceLabel, APP_TITLE].filter((part): part is string => typeof part === 'string' && part.trim().length > 0);
+  return parts.join(' | ');
+};
+
+export const useWindowTitle = () => {
+  const activeProject = useProjectsStore((state) => {
+    if (!state.activeProjectId) {
+      return null;
+    }
+    return state.projects.find((project) => project.id === state.activeProjectId) ?? null;
+  });
+
+  const projectLabel = React.useMemo(() => {
+    if (!activeProject) {
+      return null;
+    }
+
+    const label = activeProject.label?.trim();
+    if (label) {
+      return formatProjectLabel(label);
+    }
+
+    const pathName = getProjectNameFromPath(activeProject.path);
+    if (pathName) {
+      return formatProjectLabel(pathName);
+    }
+
+    return null;
+  }, [activeProject]);
+
+  const [instanceLabel, setInstanceLabel] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined' || !isDesktopShell()) {
+      setInstanceLabel(null);
+      return;
+    }
+
+    let cancelled = false;
+
+    const refreshInstanceLabel = async () => {
+      try {
+        const currentHref = window.location.href;
+        const localOrigin = window.__OPENCHAMBER_LOCAL_ORIGIN__ || window.location.origin;
+
+        if (locationMatchesHost(currentHref, localOrigin)) {
+          if (!cancelled) {
+            setInstanceLabel(null);
+          }
+          return;
+        }
+
+        const cfg = await desktopHostsGet();
+        const match = cfg.hosts.find((host) => locationMatchesHost(currentHref, host.url));
+        const nextLabel = match?.label?.trim() ? redactSensitiveUrl(match.label.trim()) : 'Instance';
+        if (!cancelled) {
+          setInstanceLabel(nextLabel);
+        }
+      } catch {
+        if (!cancelled) {
+          setInstanceLabel('Instance');
+        }
+      }
+    };
+
+    void refreshInstanceLabel();
+
+    const handleFocus = () => {
+      void refreshInstanceLabel();
+    };
+
+    window.addEventListener('focus', handleFocus);
+    return () => {
+      cancelled = true;
+      window.removeEventListener('focus', handleFocus);
+    };
+  }, []);
+
+  const title = React.useMemo(() => buildWindowTitle(projectLabel, instanceLabel), [projectLabel, instanceLabel]);
+
+  React.useEffect(() => {
+    if (typeof document !== 'undefined') {
+      document.title = title;
+    }
+
+    if (!isTauriShell()) {
+      return;
+    }
+
+    let cancelled = false;
+
+    const applyTitle = async () => {
+      try {
+        const { getCurrentWindow } = await import('@tauri-apps/api/window');
+        if (cancelled) {
+          return;
+        }
+        const currentWindow = getCurrentWindow();
+        await currentWindow.setTitle(title);
+      } catch {
+        return;
+      }
+    };
+
+    void applyTitle();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [title]);
+};