(core) Add custom widget gallery

Summary:
Custom widgets are now shown in a gallery.

The gallery is automatically opened when a new custom widget is
added to a page.

Descriptions, authors, and update times are pulled from the widget
manifest.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

Subscribers: dsagal

Differential Revision: https://phab.getgrist.com/D4309

app/common/CustomWidget.ts

@@ -30,12 +30,10 @@ export interface ICustomWidget {
    * applying the Grist theme.
    */
   renderAfterReady?: boolean;
-
   /**
    * If set to false, do not offer to user in UI.
    */
   published?: boolean;
-
   /**
    * If the widget came from a plugin, we track that here.
    */
@@ -43,6 +41,29 @@ export interface ICustomWidget {
     pluginId: string;
     name: string;
   };
+  /**
+   * Widget description.
+   */
+  description?: string;
+  /**
+   * Widget authors.
+   *
+   * The first author is the one shown in the UI.
+   */
+  authors?: WidgetAuthor[];
+  /**
+   * Date the widget was last updated.
+   */
+  lastUpdatedAt?: string;
+  /**
+   * If the widget is maintained by Grist Labs.
+   */
+  isGristLabsMaintained?: boolean;
+}
+
+export interface WidgetAuthor {
+  name: string;
+  url?: string;
 }
 
 /**

app/common/Prefs.ts

@@ -86,10 +86,10 @@ export const BehavioralPrompt = StringUnion(
   'editCardLayout',
   'addNew',
   'rickRow',
-  'customURL',
   'calendarConfig',
 
   // The following were used in the past and should not be re-used.
+  // 'customURL',
   // 'formsAreHere',
 );
 export type BehavioralPrompt = typeof BehavioralPrompt.type;

app/common/ThemePrefs-ti.ts

@@ -211,6 +211,8 @@ export const ThemeColors = t.iface([], {
   "right-panel-toggle-button-disabled-bg": "string",
   "right-panel-field-settings-bg": "string",
   "right-panel-field-settings-button-bg": "string",
+  "right-panel-custom-widget-button-fg": "string",
+  "right-panel-custom-widget-button-bg": "string",
   "document-history-snapshot-fg": "string",
   "document-history-snapshot-selected-fg": "string",
   "document-history-snapshot-bg": "string",
@@ -438,6 +440,13 @@ export const ThemeColors = t.iface([], {
   "scroll-shadow": "string",
   "toggle-checkbox-fg": "string",
   "numeric-spinner-fg": "string",
+  "widget-gallery-border": "string",
+  "widget-gallery-border-selected": "string",
+  "widget-gallery-shadow": "string",
+  "widget-gallery-bg-hover": "string",
+  "widget-gallery-secondary-header-fg": "string",
+  "widget-gallery-secondary-header-bg": "string",
+  "widget-gallery-secondary-header-bg-hover": "string",
 });
 
 const exportedTypeSuite: t.ITypeSuite = {

app/common/ThemePrefs.ts

@@ -269,6 +269,8 @@ export interface ThemeColors {
   'right-panel-toggle-button-disabled-bg': string;
   'right-panel-field-settings-bg': string;
   'right-panel-field-settings-button-bg': string;
+  'right-panel-custom-widget-button-fg': string;
+  'right-panel-custom-widget-button-bg': string;
 
   /* Document History */
   'document-history-snapshot-fg': string;
@@ -572,6 +574,15 @@ export interface ThemeColors {
 
   /* Numeric Spinners */
   'numeric-spinner-fg': string;
+
+  /* Custom Widget Gallery */
+  'widget-gallery-border': string;
+  'widget-gallery-border-selected': string;
+  'widget-gallery-shadow': string;
+  'widget-gallery-bg-hover': string;
+  'widget-gallery-secondary-header-fg': string;
+  'widget-gallery-secondary-header-bg': string;
+  'widget-gallery-secondary-header-bg-hover': string;
 }
 
 export const ThemePrefsChecker = createCheckers(ThemePrefsTI).ThemePrefs as CheckerT<ThemePrefs>;

app/common/gristUrls.ts

@@ -759,7 +759,8 @@ export interface GristLoadConfig {
   // List of registered plugins (used by HomePluginManager and DocPluginManager)
   plugins?: LocalPlugin[];
 
-  // If custom widget list is available.
+  // If additional custom widgets (besides the Custom URL widget) should be shown in
+  // the custom widget gallery.
   enableWidgetRepository?: boolean;
 
   // Whether there is somewhere for survey data to go.

app/common/themes/GristDark.ts

@@ -248,6 +248,8 @@ export const GristDark: ThemeColors = {
   'right-panel-toggle-button-disabled-bg': '#32323F',
   'right-panel-field-settings-bg': '#404150',
   'right-panel-field-settings-button-bg': '#646473',
+  'right-panel-custom-widget-button-fg': '#EFEFEF',
+  'right-panel-custom-widget-button-bg': '#60606D',
 
   /* Document History */
   'document-history-snapshot-fg': '#EFEFEF',
@@ -551,4 +553,13 @@ export const GristDark: ThemeColors = {
 
   /* Numeric Spinners */
   'numeric-spinner-fg': '#A4A4B1',
+
+  /* Custom Widget Gallery */
+  'widget-gallery-border': '#555563',
+  'widget-gallery-border-selected': '#17B378',
+  'widget-gallery-shadow': '#00000080',
+  'widget-gallery-bg-hover': '#262633',
+  'widget-gallery-secondary-header-fg': '#FFFFFF',
+  'widget-gallery-secondary-header-bg': '#70707D',
+  'widget-gallery-secondary-header-bg-hover': '#60606D',
 };

app/common/themes/GristLight.ts

@@ -248,6 +248,8 @@ export const GristLight: ThemeColors = {
   'right-panel-toggle-button-disabled-bg': '#E8E8E8',
   'right-panel-field-settings-bg': '#E8E8E8',
   'right-panel-field-settings-button-bg': 'lightgrey',
+  'right-panel-custom-widget-button-fg': '#262633',
+  'right-panel-custom-widget-button-bg': '#D9D9D9',
 
   /* Document History */
   'document-history-snapshot-fg': '#262633',
@@ -551,4 +553,13 @@ export const GristLight: ThemeColors = {
 
   /* Numeric Spinners */
   'numeric-spinner-fg': '#606060',
+
+  /* Custom Widget Gallery */
+  'widget-gallery-border': '#D9D9D9',
+  'widget-gallery-border-selected': '#16B378',
+  'widget-gallery-shadow': '#0000001A',
+  'widget-gallery-bg-hover': '#F7F7F7',
+  'widget-gallery-secondary-header-fg': '#FFFFFF',
+  'widget-gallery-secondary-header-bg': '#929299',
+  'widget-gallery-secondary-header-bg-hover': '#7E7E85',
 };