frontend/latex/output: fix manual forward sync to output/PDF and make the files an antd list

Author: haraldschilly

src/packages/frontend/frame-editors/latex-editor/actions.ts

@@ -1473,12 +1473,12 @@ export class Actions extends BaseActions<LatexEditorState> {
   }
 
   _get_most_recent_output_panel(): string | undefined {
-    let result = this._get_most_recent_active_frame_id_of_type("latex-output");
+    let result = this._get_most_recent_active_frame_id_of_type("output");
     console.log("LaTeX: _get_most_recent_output_panel() via active history returning", result);
 
     // If no recently active output panel found, look for any output panel
     if (!result) {
-      result = this._get_any_frame_id_of_type("latex-output");
+      result = this._get_any_frame_id_of_type("output");
       console.log("LaTeX: _get_any_frame_id_of_type() returning", result);
     }
 
@@ -1589,7 +1589,7 @@ export class Actions extends BaseActions<LatexEditorState> {
   _is_output_panel(id: string): boolean {
     const frame = this._get_frame_node(id);
     const frameType = frame?.get("type");
-    return frameType === "latex-output";
+    return frameType === "output";
   }
 
   // Public method to save local view state (delegates to parent's debounced method)

src/packages/frontend/frame-editors/latex-editor/latex-word-count.tsx

@@ -3,7 +3,7 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { React, useRedux } from "../../app-framework";
+import { React, useRedux } from "@cocalc/frontend/app-framework";
 
 interface LatexWordCountProps {
   name: string;

src/packages/frontend/frame-editors/latex-editor/output.tsx

@@ -17,7 +17,7 @@ With build controls at the top (build, force build, clean, etc.)
 */
 
 import type { TabsProps } from "antd";
-import { Spin, Tabs, Tag } from "antd";
+import { List as AntdList, Spin, Tabs, Tag } from "antd";
 import { List } from "immutable";
 import { useCallback, useMemo, useState } from "react";
 import { useIntl } from "react-intl";
@@ -58,6 +58,12 @@ interface OutputProps {
 
 type TabType = "pdf" | "contents" | "files" | "build" | "errors";
 
+interface FileListItem {
+  path: string;
+  isMain: boolean;
+  summary: string;
+}
+
 export function Output(props: OutputProps) {
   const {
     id,
@@ -120,6 +126,13 @@ export function Output(props: OutputProps) {
   // List of LaTeX files in the project
   const switch_to_files: List<string> = useRedux([name, "switch_to_files"]);
 
+  // File summaries state with caching (1 minute max)
+  const [fileSummaries, setFileSummaries] = useState<Record<string, string>>(
+    {},
+  );
+  const [lastSummariesFetch, setLastSummariesFetch] = useState<number>(0);
+  const [summariesLoading, setSummariesLoading] = useState<boolean>(false);
+
   // Update table of contents when component mounts
   useEffect(() => {
     // We have to do this update
@@ -232,6 +245,37 @@ export function Output(props: OutputProps) {
     return { errors, warnings, typesetting };
   }, [build_logs, knitr]);
 
+  // Function to generate basic file summaries (placeholder for future implementation)
+  const generateFileSummaries = useCallback(() => {
+    if (!switch_to_files || switch_to_files.size === 0) return;
+
+    const now = Date.now();
+    const oneMinute = 60 * 1000;
+
+    // Only update if it's been more than 1 minute since last fetch
+    if (now - lastSummariesFetch < oneMinute) return;
+
+    setSummariesLoading(true);
+
+    // Generate basic summaries - this is scaffolding for future implementation
+    const summaries: Record<string, string> = {};
+    switch_to_files.forEach((filePath) => {
+      // Basic placeholder - can be enhanced with actual file content analysis
+      summaries[filePath] = "LaTeX document";
+    });
+
+    setFileSummaries(summaries);
+    setLastSummariesFetch(now);
+    setSummariesLoading(false);
+  }, [switch_to_files, lastSummariesFetch]);
+
+  // Generate file summaries when files change
+  React.useEffect(() => {
+    if (switch_to_files && switch_to_files.size > 1) {
+      generateFileSummaries();
+    }
+  }, [switch_to_files, generateFileSummaries]);
+
   // No automatic tab switching - let user control tabs manually
   // Errors are indicated with red exclamation icon only
 
@@ -324,31 +368,59 @@ export function Output(props: OutputProps) {
       return a.localeCompare(b);
     });
 
+    const listData = sortedFiles.toJS().map((filePath: string) => ({
+      path: filePath,
+      isMain: filePath === path,
+      summary: fileSummaries[filePath] || "Loading...",
+    }));
+
     return {
       key: "files",
       label: (
         <span style={{ display: "flex", alignItems: "center", gap: "2px" }}>
           <Icon name="file" />
           Files
+          {summariesLoading && <Spin size="small" />}
         </span>
       ),
       children: (
-        <div className="smc-vfill" style={{ padding: "10px" }}>
-          {sortedFiles.map((filePath) => (
-            <div
-              key={filePath}
-              style={{
-                padding: "8px",
-                cursor: "pointer",
-                borderBottom: `1px solid ${COLORS.GRAY_LL}`,
-                fontFamily: "monospace",
-                fontSize: "12px",
-              }}
-              onClick={() => actions.switch_to_file(filePath)}
-            >
-              {path === filePath ? <b>{filePath} (main)</b> : filePath}
-            </div>
-          ))}
+        <div
+          className="smc-vfill"
+          style={{ padding: "10px", overflowY: "auto" }}
+        >
+          <AntdList
+            size="small"
+            dataSource={listData}
+            renderItem={(item: FileListItem) => (
+              <AntdList.Item
+                style={{
+                  cursor: "pointer",
+                  padding: "12px 8px",
+                }}
+                onClick={() => actions.switch_to_file(item.path)}
+              >
+                <AntdList.Item.Meta
+                  title={
+                    <div style={{ fontFamily: "monospace", fontSize: "13px" }}>
+                      {item.isMain ? <b>{item.path} (main)</b> : item.path}
+                    </div>
+                  }
+                  description={
+                    <div
+                      style={{
+                        fontSize: "12px",
+                        color: COLORS.GRAY_D,
+                        marginTop: "4px",
+                        whiteSpace: "pre-wrap",
+                      }}
+                    >
+                      {item.summary}
+                    </div>
+                  }
+                />
+              </AntdList.Item>
+            )}
+          />
         </div>
       ),
     };