(core) Add AI assistant usage banners

Summary:
Banners are now shown when there are low or no AI assistant
credits remaining.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

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

app/client/components/Banner.ts

@@ -43,14 +43,14 @@ export interface BannerOptions {
   /**
    * If provided, applies the css class to the banner container.
    */
-   bannerCssClass?: string;
+  bannerCssClass?: string;
 
   /**
    * Function that is called when the banner close button is clicked.
    *
    * Should be used to handle disposal of the Banner.
    */
-   onClose?(): void;
+  onClose?(): void;
 }
 
 /**
@@ -134,6 +134,16 @@ const cssBanner = styled('div', `
   }
 `);
 
+export const cssBannerLink = styled('span', `
+  cursor: pointer;
+  color: unset;
+  text-decoration: underline;
+
+  &:hover, &:focus {
+    color: unset;
+  }
+`);
+
 const cssButtons = styled('div', `
   display: flex;
   gap: 16px;

app/client/components/DocumentUsage.ts

@@ -1,3 +1,4 @@
+import {cssBannerLink} from 'app/client/components/Banner';
 import {DocPageModel} from 'app/client/models/DocPageModel';
 import {urlState} from 'app/client/models/gristUrlState';
 import {docListHeader} from 'app/client/ui/DocMenuCss';
@@ -253,11 +254,11 @@ export function buildUpgradeMessage(
 }
 
 function buildUpgradeLink(linkText: string, onClick: () => void) {
-  return cssUnderlinedLink(linkText, dom.on('click', () => onClick()));
+  return cssBannerLink(linkText, dom.on('click', () => onClick()));
 }
 
 function buildRawDataPageLink(linkText: string) {
-  return cssUnderlinedLink(linkText, urlState().setLinkUrl({docPage: 'data'}));
+  return cssBannerLink(linkText, urlState().setLinkUrl({docPage: 'data'}));
 }
 
 interface MetricOptions {
@@ -377,16 +378,6 @@ const cssHeader = styled(docListHeader, `
   margin-bottom: 0px;
 `);
 
-const cssUnderlinedLink = styled('span', `
-  cursor: pointer;
-  color: unset;
-  text-decoration: underline;
-
-  &:hover, &:focus {
-    color: unset;
-  }
-`);
-
 const cssUsageMetrics = styled('div', `
   display: flex;
   flex-wrap: wrap;