frontend/projects: redesign of projects list

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/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

@@ -192,6 +192,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",
@@ -467,6 +472,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",
@@ -500,6 +510,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",
@@ -556,7 +571,8 @@ export const labels = defineMessages({
   select: {
     id: "labels.select",
     defaultMessage: "Select",
-    description: "Short label on a button in a dialog, to confirm a 'selection'."
+    description:
+      "Short label on a button in a dialog, to confirm a 'selection'.",
   },
   select_a_kernel: {
     id: "labels.select_a_kernel",

src/packages/frontend/i18n/trans/ar_EG.json

@@ -91,7 +91,6 @@
   "account.other-settings.theme.dark_mode.compact": "الوضع الداكن: تقليل إجهاد العين بعرض خلفية داكنة (عبر {DR})",
   "account.other-settings.theme.dark_mode.configuration": "تكوين الوضع الداكن",
   "account.other-settings.theme.dark_mode.contrast": "تباين",
-  "account.other-settings.theme.dark_mode.grayscale": "درجات الرمادي",
   "account.other-settings.theme.dark_mode.sepia": "سيبيا",
   "account.other-settings.time_ago_absolute": "عرض <strong>الطوابع الزمنية كنقاط مطلقة في الوقت</strong> بدلاً من أن تكون نسبة إلى الوقت الحالي",
   "account.public-path.unpublish.title": "إلغاء نشر كل شيء",
@@ -274,7 +273,6 @@
   "command.generic.new_frame_of_type.title": "إنشاء إطار جديد مع محرر من النوع المحدد",
   "command.generic.new_layout.button": "جديد",
   "command.generic.new_layout.label": "تخطيط جديد",
-  "command.generic.new_layout.title": "التحويل إلى تخطيط مبسط مع محرر مصدر LaTeX ولوحة إخراج متعددة الأغراض",
   "command.generic.new_layout.title.generic": "التحويل إلى التنسيق الجديد",
   "command.generic.new_layout.title.latex": "التبديل إلى التخطيط الجديد مع محرر مصدر LaTeX ولوحة إخراج متعددة الأغراض",
   "command.generic.open_recent.label": "افتح الملفات الأخيرة",
@@ -591,7 +589,6 @@
   "editor.latex.cm.title.short": "المصدر",
   "editor.latex.command.print.label": "طباعة مصدر LaTeX",
   "editor.latex.command.print.tooltip": "اطبع الشيفرة المصدرية لهذا المستند. استخدم الطباعة من إطار معاينة PDF لطباعة المستند المُعرض.",
-  "editor.latex.pdf_controls.auto_sync.tooltip": "المزامنة التلقائية بين المصدر وPDF: يتحرك المؤشر مع تمرير PDF، يتم تمرير PDF إلى موضع المؤشر",
   "editor.latex.pdf_controls.forward_sync.tooltip": "المزامنة التلقائية من المصدر إلى PDF: تحريك المؤشر يحرك ملف PDF",
   "editor.latex.pdf_controls.inverse_sync.tooltip": "المزامنة التلقائية من PDF إلى المصدر: تحريك التمرير في PDF يحرك المؤشر",
   "editor.latex.pdf_controls.sync_button.tooltip": "مزامنة عكسية لمرة واحدة إلى محرر المصدر",
@@ -679,8 +676,6 @@
   "jupyter.cell-buttonbar-menu.split-cell": "قسّم الخلية عند المؤشر",
   "jupyter.cell-buttonbar.format-button.label": "تنسيق",
   "jupyter.cell-buttonbar.format-button.tooltip": "نسّق هذا الكود ليبدو جميلاً",
-  "jupyter.cell-buttonbr.format-button.label": "تنسيق",
-  "jupyter.cell-buttonbr.format-button.tooltip": "نسق هذا الكود ليبدو جميلاً",
   "jupyter.commands.cell_toolbar_attachments.label": "شريط أدوات المرفقات",
   "jupyter.commands.cell_toolbar_attachments.menu": "المرفقات",
   "jupyter.commands.cell_toolbar_create_assignment.label": "إنشاء واجب باستخدام nbgrader",
@@ -955,6 +950,7 @@
   "labels.cloud_file_system": "أنظمة ملفات السحابة",
   "labels.cloud_storage_remote_filesystems": "التخزين السحابي وأنظمة الملفات البعيدة",
   "labels.code_folding": "طي الكود",
+  "labels.collaborators": "المتعاونون",
   "labels.color": "لون",
   "labels.config": "الإعدادات",
   "labels.configuration": "التكوين",
@@ -1062,6 +1058,7 @@
   "labels.purchases": "المشتريات",
   "labels.ready": "جاهز",
   "labels.recent": "الأحدث",
+  "labels.recent_files": "الملفات الأخيرة",
   "labels.reconfigure": "إعادة التكوين",
   "labels.reconnect": "إعادة الاتصال",
   "labels.redo": "إعادة",
@@ -1337,7 +1334,9 @@
   "project.page.project-licenses.header": "الحصص و{upgrades}",
   "project.page.project-licenses.intro": "التراخيص والترقيات حسب الاستخدام تغير الحصص والميزات المتاحة للمشروع",
   "project.servers.project-servers.description": "يمكنك تشغيل خوادم دفتر ملاحظات مختلفة داخل هذا المشروع بنقرة واحدة. تعمل في نفس البيئة، وتصل إلى نفس الملفات، وتتوقف عندما يتوقف المشروع. يمكنك أيضًا <A>تشغيل خوادمك الخاصة</A>.",
+  "project.settings.about-box.color.button": "{haveColor, select, true {تغيير اللون} other {اختر اللون}}",
   "project.settings.about-box.color.label": "اللون (اختياري)",
+  "project.settings.about-box.color.modal.title": "اختر لون المشروع",
   "project.settings.about-box.description.label": "الوصف (ماركداون)",
   "project.settings.about-box.image.label": "صورة (اختياري)",
   "project.settings.about-box.name.label": "الاسم (اختياري)",
@@ -1381,9 +1380,36 @@
   "projects.create-project.helpTxt": "اختر عنوانًا. يمكنك تغييره بسهولة لاحقًا!",
   "projects.create-project.requireLicense": "مطلوب ترخيص لإنشاء مشاريع إضافية.",
   "projects.filename-search.placeholder": "ابحث عن أسماء الملفات التي قمت بتحريرها...",
-  "projects.list.no_starred_found": "لم يتم العثور على مشاريع مميزة. استخدم رمز النجمة بجانب عناوين المشاريع لوضع إشارة مرجعية على مشاريعك المفضلة.",
   "projects.load-all.label": "عرض كل المشاريع...",
+  "projects.operations.clear-filter": "مسح الفلتر",
+  "projects.operations.delete.button": "{deleted, select, true {استعادة الكل} other {حذف الكل}}",
+  "projects.operations.delete.confirm": "نعم، {deleted, select, true {استرجاع} other {حذف}}",
+  "projects.operations.delete.description": "هل أنت متأكد أنك تريد {deleted, select, true {استعادة} other {حذف}} {count, plural, one {# مشروع} other {# مشاريع}}؟",
+  "projects.operations.delete.title": "{deleted, select, true {استعادة الحذف} other {حذف}} المشاريع",
+  "projects.operations.delete.warning": "سيقوم هذا {deleted, select, true {باستعادة} other {بحذف}} {count, plural, one {المشروع} other {المشاريع}} لجميع المتعاونين.",
+  "projects.operations.hide.button": "{hidden, select, true {إظهار الكل} other {إخفاء الكل}}",
+  "projects.operations.hide.confirm": "نعم، {hidden, select, true {إظهار} other {إخفاء}}",
+  "projects.operations.hide.description": "هل أنت متأكد أنك تريد {hidden, select, true {إظهار} other {إخفاء}} {count, plural, one {# مشروع} other {# مشاريع}}؟",
+  "projects.operations.hide.title": "{hidden, select, true {إظهار} other {إخفاء}} المشاريع",
+  "projects.operations.hide.warning": "هذا {hidden, select, true {يظهر} other {يخفي}} {count, plural, one {المشروع} other {المشاريع}} منك، وليس من زملائك.",
+  "projects.operations.restart.button": "إعادة تشغيل الكل",
+  "projects.operations.restart.confirm": "إعادة التشغيل",
+  "projects.operations.restart.description": "إعادة تشغيل {count, plural, one {هذا المشروع} other {هذه المشاريع #}}؟",
+  "projects.operations.restart.title": "إعادة تشغيل المشاريع",
+  "projects.operations.status": "عرض {count, plural, one {# مشروع} other {# مشاريع}}{filterText, select, empty {} other { ({filterText})}}{searchHashtagText, select, empty {} other { مطابقة {searchHashtagText}}}",
+  "projects.operations.stop.button": "إيقاف الكل",
+  "projects.operations.stop.confirm": "توقف",
+  "projects.operations.stop.description": "إيقاف {count, plural, one {هذا المشروع} other {هذه المشاريع #}}؟",
+  "projects.operations.stop.title": "إيقاف المشاريع",
+  "projects.operations.undoable": "يمكن التراجع عن ذلك في إعدادات المشروع.",
+  "projects.remove-myself.button": "إزالة نفسي...",
+  "projects.remove-myself.description": "هل أنت متأكد من إزالة نفسك من ما يصل إلى {count, plural, one {# مشروع} other {# مشاريع}}؟ لن يكون لديك وصول ولن تتمكن من إضافة نفسك مرة أخرى. <b>لن يتم إزالتك من المشاريع التي تمتلكها.</b>",
+  "projects.remove-myself.title": "إزالة نفسي من المشاريع",
   "projects.search.placeholder": "ابحث عن المشاريع (استخدم /re/ للبحث المنتظم)...",
+  "projects.table-controls.deleted.label": "تم الحذف",
+  "projects.table-controls.hashtags.placeholder": "التصفية حسب الوسوم...",
+  "projects.table-controls.hidden.label": "مخفي",
+  "projects.table-controls.search.placeholder": "ابحث عن المشاريع...",
   "purchases.automatic-payments-warning.description": "المدفوعات التلقائية هي <b>أكثر ملاءمة</b> بكثير، وست<b>وفر لك الوقت</b>، و<b>تضمن عدم إلغاء الاشتراكات</b> عن طريق الخطأ.",
   "purchases.automatic-payments-warning.title": "الدفع التلقائي ليس مطلوبًا للاشتراك",
   "purchases.automatic-payments.are-enabled": "المدفوعات التلقائية مفعلة",