fix long tab names and syncing tab renaming (#1160)

Author: sawka

frontend/app/store/global.ts

@@ -140,6 +140,7 @@ function initGlobalAtoms(initOpts: GlobalInitOptions) {
         return connStatuses;
     });
     const flashErrorsAtom = atom<FlashErrorType[]>([]);
+    const reinitVersion = atom(0);
     atoms = {
         // initialized in wave.ts (will not be null inside of application)
         clientId: clientIdAtom,
@@ -159,6 +160,7 @@ function initGlobalAtoms(initOpts: GlobalInitOptions) {
         modalOpen,
         allConnStatus: allConnStatusAtom,
         flashErrors: flashErrorsAtom,
+        reinitVersion,
     };
 }
 

frontend/app/tab/tab.less

@@ -49,6 +49,10 @@
         font-size: 11px;
         font-weight: 500;
         text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+        overflow: hidden;
+        width: calc(100% - 10px);
+        text-overflow: ellipsis;
+        text-align: center;
 
         &.focused {
             outline: none;
@@ -76,6 +80,12 @@
 
     &:hover .close {
         visibility: visible;
+        backdrop-filter: blur(3px);
+
+        &:hover {
+            color: var(--main-text-color);
+            // background-color: var(--highlight-bg-color);
+        }
     }
 }
 

frontend/app/tab/tabbar.tsx

@@ -96,11 +96,6 @@ const ConfigErrorIcon = ({ buttonRef }: { buttonRef: React.RefObject<HTMLElement
             Config Error
         </Button>
     );
-    return (
-        <div className="config-error" ref={buttonRef as React.RefObject<HTMLDivElement>}>
-            <i className="fa fa-solid fa-exclamation-triangle" />
-        </div>
-    );
 };
 
 const TabBar = React.memo(({ workspace }: TabBarProps) => {
@@ -254,6 +249,13 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
         debounce(100, () => saveTabsPosition())();
     }, [tabIds, newTabId, isFullScreen]);
 
+    const reinitVersion = useAtomValue(atoms.reinitVersion);
+    useEffect(() => {
+        if (reinitVersion > 0) {
+            setSizeAndPosition();
+        }
+    }, [reinitVersion]);
+
     useEffect(() => {
         window.addEventListener("resize", () => handleResizeTabs());
         return () => {

frontend/types/custom.d.ts

@@ -24,6 +24,7 @@ declare global {
         modalOpen: jotai.PrimitiveAtom<boolean>;
         allConnStatus: jotai.Atom<ConnStatus[]>;
         flashErrors: jotai.PrimitiveAtom<FlashErrorType[]>;
+        reinitVersion: jotai.PrimitiveAtom<number>;
     };
 
     type WritableWaveObjectAtom<T extends WaveObj> = jotai.WritableAtom<T, [value: T], void>;

frontend/wave.ts

@@ -85,11 +85,22 @@ async function reinitWave() {
     getApi().sendLog("Reinit Wave");
     const client = await WOS.reloadWaveObject<Client>(WOS.makeORef("client", savedInitOpts.clientId));
     const waveWindow = await WOS.reloadWaveObject<WaveWindow>(WOS.makeORef("window", savedInitOpts.windowId));
-    await WOS.reloadWaveObject<Workspace>(WOS.makeORef("workspace", waveWindow.workspaceid));
+    const ws = await WOS.reloadWaveObject<Workspace>(WOS.makeORef("workspace", waveWindow.workspaceid));
     const initialTab = await WOS.reloadWaveObject<Tab>(WOS.makeORef("tab", savedInitOpts.tabId));
     await WOS.reloadWaveObject<LayoutState>(WOS.makeORef("layout", initialTab.layoutstate));
+    reloadAllWorkspaceTabs(ws);
     document.title = `Wave Terminal - ${initialTab.name}`; // TODO update with tab name change
     getApi().setWindowInitStatus("wave-ready");
+    globalStore.set(atoms.reinitVersion, globalStore.get(atoms.reinitVersion) + 1);
+}
+
+function reloadAllWorkspaceTabs(ws: Workspace) {
+    if (ws == null || ws.tabids == null) {
+        return;
+    }
+    ws.tabids.forEach((tabid) => {
+        WOS.reloadWaveObject<Tab>(WOS.makeORef("tab", tabid));
+    });
 }
 
 function loadAllWorkspaceTabs(ws: Workspace) {