Merge pull request #8621 from sagemathinc/projects-listing-cleanup-20251010

frontend/projects: redesign of projects list

Author: haraldschilly

src/packages/frontend/_project_page.sass

@@ -61,3 +61,7 @@ dl.cc-project-settings-features
       padding: 5px !important
     code
       font-size: 90%
+
+.cc-project-expanded-row
+  .ant-table-expanded-row-cell
+    padding: 0 !important

src/packages/frontend/account/avatar/avatar.tsx

@@ -5,6 +5,7 @@
 
 import { Tooltip } from "antd";
 import { CSSProperties, useState } from "react";
+
 import { isChatBot } from "@cocalc/frontend/account/chatbot";
 import {
   React,

src/packages/frontend/app/context.tsx

@@ -58,8 +58,19 @@ export function useAppContextProvider(): AppState {
     }
   }
 
+  function displayI18N(
+    label: string | IntlMessage | ReactNode,
+  ): string | ReactNode {
+    if (isIntlMessage(label)) {
+      return intl.formatMessage(label);
+    } else {
+      return label;
+    }
+  }
+
   return {
     formatIntl,
+    displayI18N,
     pageWidthPx,
     pageStyle,
     showActBarLabels,

src/packages/frontend/app/use-context.ts

@@ -8,7 +8,7 @@ import { ThemeConfig } from "antd";
 import type { SizeType } from "antd/es/config-provider/SizeContext";
 import { createContext, ReactNode, useContext } from "react";
 
-import type { IntlMessage } from "@cocalc/util/i18n/types";
+import { isIntlMessage, type IntlMessage } from "@cocalc/util/i18n/types";
 import { COLORS } from "@cocalc/util/theme";
 
 import { ACTIVITY_BAR_LABELS_DEFAULT } from "@cocalc/frontend/project/page/activity-bar-consts";
@@ -26,6 +26,7 @@ export interface AppState {
   antdComponentSize?: SizeType;
   antdTheme?: ThemeConfig;
   formatIntl: (msg: IntlMessage | ReactNode | string) => ReactNode | string;
+  displayI18N: (label: string | IntlMessage | ReactNode) => string | ReactNode;
   timeAgoAbsolute?: boolean;
   setTimeAgoAbsolute?: (boolean) => void;
   showActBarLabels?: boolean; // whether to show labels on the vertical fixed bar
@@ -35,6 +36,13 @@ export const DEFAULT_CONTEXT = {
   pageWidthPx: 1000, // gets updated
   pageStyle: calcStyle(false), // gets updated
   formatIntl: () => "Loading…",
+  displayI18N: (label: string | IntlMessage | ReactNode) => {
+    // Fallback when intl is not available
+    if (isIntlMessage(label)) {
+      return label.defaultMessage;
+    }
+    return label;
+  },
   showActBarLabels: ACTIVITY_BAR_LABELS_DEFAULT,
 };
 

src/packages/frontend/components/time-elapsed.tsx

@@ -11,15 +11,29 @@ import { seconds2hms, server_time } from "@cocalc/util/misc";
 interface Props {
   start_ts: number;
   interval_s?: number;
+  longform?: boolean; // 22 hours 32 minutes vs 22h 32m
+  show_seconds?: boolean;
+  show_minutes?: boolean;
 }
 
-export function TimeElapsed({ start_ts, interval_s = 1 }: Props) {
+export function TimeElapsed({
+  start_ts,
+  interval_s = 1,
+  longform = true,
+  show_seconds = true,
+  show_minutes = true,
+}: Props) {
   const [elapsed, setElapsed] = React.useState<string>(getUptimeStr());
 
   function getUptimeStr() {
     if (start_ts == null) return "";
     const delta_s = (server_time().getTime() - start_ts) / 1000;
-    const uptime_str = seconds2hms(delta_s, true);
+    const uptime_str = seconds2hms(
+      delta_s,
+      longform,
+      show_seconds,
+      show_minutes,
+    );
     return uptime_str;
   }
 

src/packages/frontend/editors/task-editor/hashtag-bar.tsx

@@ -8,14 +8,18 @@ Hashtag bar for selecting which tasks are shown by tags
 */
 
 import { CSSProperties } from "react";
-import { cmp, trunc } from "@cocalc/util/misc";
 import { Tag } from "antd";
+
+import { cmp, trunc } from "@cocalc/util/misc";
+
 const { CheckableTag } = Tag;
-import {
+
+import type {
   HashtagsOfVisibleTasks,
   HashtagState,
   SelectedHashtags,
 } from "./types";
+
 import { STYLE as GENERIC_STYLE } from "../../projects/hashtags";
 
 const STYLE: CSSProperties = {

src/packages/frontend/i18n/common.ts

@@ -217,6 +217,11 @@ export const labels = defineMessages({
     id: "labels.status",
     defaultMessage: "Status",
   },
+  state: {
+    id: "labels.state",
+    defaultMessage: "State",
+    description: "The state some object is in, e.g. running, stopped, ...",
+  },
   published_files: {
     id: "labels.published_files",
     defaultMessage: "Published",
@@ -512,6 +517,11 @@ export const labels = defineMessages({
     defaultMessage:
       "Collaborators are other users, who can access this project. They can view and edit the same files as you.",
   },
+  collaborators: {
+    id: "labels.collaborators",
+    defaultMessage: "Collaborators",
+    description: "Collaborators (people) on a project, working together",
+  },
   chat: {
     id: "labels.chat",
     defaultMessage: "Chat",
@@ -545,6 +555,11 @@ export const labels = defineMessages({
     defaultMessage: "Recent",
     description: "Something that happened recently",
   },
+  recent_files: {
+    id: "labels.recent_files",
+    defaultMessage: "Recent Files",
+    description: "Recently opened or edited files",
+  },
   files: {
     id: "labels.files",
     defaultMessage: "Files",
@@ -858,6 +873,10 @@ export const labels = defineMessages({
     id: "labels.last_active",
     defaultMessage: "Last Active",
   },
+  last_edited: {
+    id: "labels.last_edited",
+    defaultMessage: "Last Edited",
+  },
   project_status: {
     id: "labels.project_status",
     defaultMessage: "Project Status",

src/packages/frontend/misc/local-storage.ts

@@ -32,7 +32,7 @@ export const LS = new LocalStorageLRU({
   fallback: true,
 });
 
-export function set_local_storage(key: string, val: string): void {
+export function set_local_storage(key: string, val: string | object): void {
   LS.set(key, val);
 }
 

src/packages/frontend/project/page/flyouts/settings.tsx

@@ -135,14 +135,14 @@ export function SettingsFlyout(_: Readonly<Props>): React.JSX.Element {
         <Title level={4}>
           Status: <span style={{ float: "right" }}>{renderState()}</span>
         </Title>
-        <Button.Group>
+        <Space.Compact>
           <RestartProject project_id={project_id} short={true} />
           <StopProject
             project_id={project_id}
             disabled={status.get("state") !== "running"}
             short={true}
           />
-        </Button.Group>
+        </Space.Compact>
       </div>
     );
   }
@@ -180,7 +180,7 @@ export function SettingsFlyout(_: Readonly<Props>): React.JSX.Element {
     });
   }
 
-  function featuresRealodButton() {
+  function featuresReloadButton() {
     return (
       <Tooltip title="Reload features and configuration">
         <Button
@@ -197,7 +197,7 @@ export function SettingsFlyout(_: Readonly<Props>): React.JSX.Element {
     );
   }
 
-  function renderDatastoreRelaod() {
+  function renderDatastoreReload() {
     return (
       <Tooltip title={`Reload ${DATASTORE_TITLE} information`}>
         <Button
@@ -316,7 +316,7 @@ export function SettingsFlyout(_: Readonly<Props>): React.JSX.Element {
           </>
         ),
         className: "cc-project-flyout-settings-panel",
-        extra: renderDatastoreRelaod(),
+        extra: renderDatastoreReload(),
         children: (
           <Datastore
             project_id={project_id}
@@ -335,7 +335,7 @@ export function SettingsFlyout(_: Readonly<Props>): React.JSX.Element {
         </>
       ),
       style: { borderRadius: 0 },
-      extra: featuresRealodButton(),
+      extra: featuresReloadButton(),
       children: (
         <ProjectCapabilities
           project={project}

src/packages/frontend/project/page/flyouts/store.ts

@@ -28,13 +28,21 @@ import type { FlyoutActiveStarred } from "./state";
 
 // Starred files are now managed entirely through conat with in-memory state.
 // No local storage dependency - conat handles synchronization and persistence.
-export function useStarredFilesManager(project_id: string) {
+export function useStarredFilesManager(
+  project_id: string,
+  enabled: boolean = true,
+) {
   const [starred, setStarred] = useState<FlyoutActiveStarred>([]);
   const [bookmarks, setBookmarks] = useState<any>(null);
   const [isInitialized, setIsInitialized] = useState(false);
 
   // Initialize conat bookmarks once on mount, waiting for authentication
   useAsyncEffect(async () => {
+    if (!enabled) {
+      setIsInitialized(true);
+      return;
+    }
+
     // Wait until account is authenticated
     const store = redux.getStore("account");
     await store.async_wait({
@@ -44,7 +52,7 @@ export function useStarredFilesManager(project_id: string) {
 
     const account_id = store.get_account_id();
     await initializeConatBookmarks(account_id);
-  }, []);
+  }, [enabled]);
 
   async function initializeConatBookmarks(account_id: string) {
     try {
@@ -53,6 +61,8 @@ export function useStarredFilesManager(project_id: string) {
         name: CONAT_BOOKMARKS_KEY,
       });
 
+      conatBookmarks.setMaxListeners(100);
+
       setBookmarks(conatBookmarks);
 
       // Listen for changes from other clients