@hienlh/ppm 0.13.35 → 0.13.36

package/src/web/components/layout/notification-bell-popover.tsx

@@ -2,17 +2,19 @@ import { useState, useRef } from "react";
 import { createPortal } from "react-dom";
 import { useShallow } from "zustand/shallow";
 import { useNotificationStore, selectTotalUnread, notificationTint } from "@/stores/notification-store";
-import { useProjectStore } from "@/stores/project-store";
+import { useProjectStore, resolveOrder } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
 import { Bell, BellOff } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { resolveProjectColor } from "@/lib/project-palette";
 
 /** Bell button with unread count badge + popover listing unread sessions */
 export function NotificationBellPopover({ expanded }: { expanded: boolean }) {
   const notifications = useNotificationStore((s) => s.notifications);
   const clearAll = useNotificationStore((s) => s.clearAll);
   const totalUnread = useNotificationStore(selectTotalUnread);
-  const { projects, setActiveProject } = useProjectStore(useShallow((s) => ({ projects: s.projects, setActiveProject: s.setActiveProject })));
+  const { projects, setActiveProject, customOrder } = useProjectStore(useShallow((s) => ({ projects: s.projects, setActiveProject: s.setActiveProject, customOrder: s.customOrder })));
+  const ordered = resolveOrder(projects, customOrder);
   const openTab = useTabStore((s) => s.openTab);
   const [open, setOpen] = useState(false);
   const btnRef = useRef<HTMLButtonElement>(null);
@@ -39,6 +41,13 @@ export function NotificationBellPopover({ expanded }: { expanded: boolean }) {
     setOpen(false);
   };
 
+  // Resolve project color by name
+  const getProjectColor = (name: string) => {
+    const idx = ordered.findIndex((p) => p.name === name);
+    if (idx === -1) return undefined;
+    return resolveProjectColor(ordered[idx]!.color, idx);
+  };
+
   // Group notifications by projectName
   const grouped = new Map<string, Array<{ sessionId: string; count: number; type: string; sessionTitle: string | null }>>();
   for (const [sessionId, entry] of notifications) {
@@ -97,7 +106,10 @@ export function NotificationBellPopover({ expanded }: { expanded: boolean }) {
               <div className="py-1">
                 {[...grouped.entries()].map(([projectName, sessions]) => (
                   <div key={projectName}>
-                    <div className="px-3 py-1 text-[10px] font-medium text-text-subtle uppercase tracking-wider">{projectName}</div>
+                    <div className="px-3 py-1 text-[10px] font-medium text-text-subtle uppercase tracking-wider flex items-center gap-1.5">
+                      <span className="size-2 rounded-full shrink-0" style={{ background: getProjectColor(projectName) || "currentColor" }} />
+                      {projectName}
+                    </div>
                     {sessions.map(({ sessionId, type, sessionTitle }) => (
                       <button
                         key={sessionId}

package/src/web/components/layout/tab-pool.tsx

@@ -80,6 +80,8 @@ export function registerPanelSlot(panelId: string, el: HTMLDivElement | null) {
 // TabPool — renders all tabs in a hidden container, reparents into slots
 // ---------------------------------------------------------------------------
 export function TabPool() {
+  const hiddenRef = useRef<HTMLDivElement>(null);
+
   // Re-render when slots change (panel mount/unmount)
   useSyncExternalStore(
     (cb) => registry.subscribe(cb),
@@ -115,7 +117,7 @@ export function TabPool() {
   return (
     // Off-screen mount point. React mounts tab wrappers here, then
     // useLayoutEffect moves them into panel slots before the browser paints.
-    <div style={{ position: "fixed", top: 0, left: 0, width: 0, height: 0, overflow: "hidden", pointerEvents: "none", visibility: "hidden" }}>
+    <div ref={hiddenRef} style={{ position: "fixed", top: 0, left: 0, width: 0, height: 0, overflow: "hidden", pointerEvents: "none", visibility: "hidden" }}>
       {tabEntries.map((entry) => (
         <ReparentingTab
           key={entry.tabId}
@@ -124,6 +126,7 @@ export function TabPool() {
           type={entry.type}
           metadata={entry.metadata}
           isActive={entry.isActive}
+          hiddenContainer={hiddenRef}
         />
       ))}
     </div>
@@ -139,9 +142,10 @@ interface ReparentingTabProps {
   type: TabType;
   metadata?: Record<string, unknown>;
   isActive: boolean;
+  hiddenContainer: React.RefObject<HTMLDivElement | null>;
 }
 
-function ReparentingTab({ tabId, panelId, type, metadata, isActive }: ReparentingTabProps) {
+function ReparentingTab({ tabId, panelId, type, metadata, isActive, hiddenContainer }: ReparentingTabProps) {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const Component = TAB_COMPONENTS[type];
 
@@ -154,7 +158,19 @@ function ReparentingTab({ tabId, panelId, type, metadata, isActive }: Reparentin
   useLayoutEffect(() => {
     const wrapper = wrapperRef.current;
     const slot = registry.get(panelId);
-    if (!wrapper || !slot || wrapper.parentElement === slot) return;
+    if (!wrapper) return;
+
+    // Panel slot not mounted (e.g., mobile renders only the focused panel).
+    // Move wrapper back to hidden container so it doesn't overlap in the wrong slot.
+    if (!slot) {
+      const hidden = hiddenContainer.current;
+      if (hidden && wrapper.parentElement !== hidden) {
+        hidden.appendChild(wrapper);
+      }
+      return;
+    }
+
+    if (wrapper.parentElement === slot) return;
 
     // Save scroll positions — appendChild resets them during the DOM move
     const scrollables: { el: Element; top: number; left: number }[] = [];