From f4c52d00375a2421265483faddea14a5bc107f28 Mon Sep 17 00:00:00 2001
From: Sylvie Crowe <107814465+oneirocosm@users.noreply.github.com>
Date: Thu, 19 Sep 2024 11:32:24 -0700
Subject: [PATCH] Tips Component (#789)

Add the tips as a component in addition to the initial modal.
---
 frontend/app/block/block.tsx                  |  4 +++
 frontend/app/block/blockutil.tsx              |  6 ++++
 .../app/view/quicktipsview/quicktipsview.less |  7 ++++
 .../app/view/quicktipsview/quicktipsview.tsx  | 36 +++++++++++++++++++
 frontend/app/workspace/workspace.tsx          | 10 ++++++
 5 files changed, 63 insertions(+)
 create mode 100644 frontend/app/view/quicktipsview/quicktipsview.less
 create mode 100644 frontend/app/view/quicktipsview/quicktipsview.tsx

diff --git a/frontend/app/block/block.tsx b/frontend/app/block/block.tsx
index 27c1c6ed..aff83201 100644
--- a/frontend/app/block/block.tsx
+++ b/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>;
 }
 
diff --git a/frontend/app/block/blockutil.tsx b/frontend/app/block/blockutil.tsx
index 911514ed..1aaa0df6 100644
--- a/frontend/app/block/blockutil.tsx
+++ b/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;
 }
 
diff --git a/frontend/app/view/quicktipsview/quicktipsview.less b/frontend/app/view/quicktipsview/quicktipsview.less
new file mode 100644
index 00000000..e4f38ee1
--- /dev/null
+++ b/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;
+}
diff --git a/frontend/app/view/quicktipsview/quicktipsview.tsx b/frontend/app/view/quicktipsview/quicktipsview.tsx
new file mode 100644
index 00000000..270466a6
--- /dev/null
+++ b/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 };
diff --git a/frontend/app/workspace/workspace.tsx b/frontend/app/workspace/workspace.tsx
index 5e669235..98765a49 100644
--- a/frontend/app/workspace/workspace.tsx
+++ b/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}