Tips Component (#789)

Add the tips as a component in addition to the initial modal.

frontend/app/block/block.tsx

@@ -23,6 +23,7 @@ import { WaveAi, WaveAiModel, makeWaveAiViewModel } from "@/view/waveai/waveai";
 import { WebView, WebViewModel, makeWebViewModel } from "@/view/webview/webview";
 import * as jotai from "jotai";
 import * as React from "react";
+import { QuickTipsView, QuickTipsViewModel } from "../view/quicktipsview/quicktipsview";
 import "./block.less";
 import { BlockFrame } from "./blockframe";
 import { blockViewToIcon, blockViewToName } from "./blockutil";
@@ -94,6 +95,9 @@ function getViewElem(
     if (blockView == "help") {
         return <HelpView key={blockId} model={viewModel as HelpViewModel} />;
     }
+    if (blockView == "tips") {
+        return <QuickTipsView key={blockId} model={viewModel as QuickTipsViewModel} />;
+    }
     return <CenteredDiv>Invalid View "{blockView}"</CenteredDiv>;
 }
 

frontend/app/block/blockutil.tsx

@@ -30,6 +30,9 @@ export function blockViewToIcon(view: string): string {
     if (view == "help") {
         return "circle-question";
     }
+    if (view == "tips") {
+        return "lightbulb";
+    }
     return "square";
 }
 
@@ -52,6 +55,9 @@ export function blockViewToName(view: string): string {
     if (view == "help") {
         return "Help";
     }
+    if (view == "tips") {
+        return "Tips";
+    }
     return view;
 }
 

frontend/app/view/quicktipsview/quicktipsview.less

@@ -0,0 +1,7 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+.quicktips-view {
+    padding: 10px 2px;
+    overflow: auto;
+}

frontend/app/view/quicktipsview/quicktipsview.tsx

@@ -0,0 +1,36 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { QuickTips } from "@/app/element/quicktips";
+import { globalStore } from "@/app/store/global";
+import { Atom, atom, PrimitiveAtom } from "jotai";
+import "./quicktipsview.less";
+
+class QuickTipsViewModel implements ViewModel {
+    viewType: string;
+    showTocAtom: PrimitiveAtom<boolean>;
+    endIconButtons: Atom<IconButtonDecl[]>;
+
+    constructor() {
+        this.viewType = "tips";
+        this.showTocAtom = atom(false);
+    }
+
+    showTocToggle() {
+        globalStore.set(this.showTocAtom, !globalStore.get(this.showTocAtom));
+    }
+}
+
+function makeHelpViewModel() {
+    return new QuickTipsViewModel();
+}
+
+function QuickTipsView({ model }: { model: QuickTipsViewModel }) {
+    return (
+        <div className="quicktips-view">
+            <QuickTips />
+        </div>
+    );
+}
+
+export { makeHelpViewModel, QuickTipsView, QuickTipsViewModel };

frontend/app/workspace/workspace.tsx

@@ -45,6 +45,15 @@ const Widgets = React.memo(() => {
             },
         },
     };
+    const tipsWidget: WidgetConfigType = {
+        icon: "lightbulb",
+        label: "tips",
+        blockdef: {
+            meta: {
+                view: "tips",
+            },
+        },
+    };
     const showHelp = fullConfig?.settings?.["widget:showhelp"] ?? true;
     const showDivider = keyLen(fullConfig?.defaultwidgets) > 0 && keyLen(fullConfig?.widgets) > 0;
     const defaultWidgets = sortByDisplayOrder(fullConfig?.defaultwidgets);
@@ -59,6 +68,7 @@ const Widgets = React.memo(() => {
             {showHelp ? (
                 <>
                     <div className="widget-spacer" />
+                    <Widget key="help" widget={tipsWidget} />
                     <Widget key="help" widget={helpWidget} />
                 </>
             ) : null}