handleClose()} onCancel={() => handleClose()} onClose={() => handleClose()}>
+ {tipsContent.title}
+
+ {queryText}
+ {inputBox}
+
+
+ );
+};
+
+TipsModal.displayName = "TipsModal";
+
+export { TipsModal };
diff --git a/frontend/app/view/preview/preview.tsx b/frontend/app/view/preview/preview.tsx
index ea671403d..dfda2d061 100644
--- a/frontend/app/view/preview/preview.tsx
+++ b/frontend/app/view/preview/preview.tsx
@@ -7,7 +7,8 @@ import { tryReinjectKey } from "@/app/store/keymodel";
import { WshServer } from "@/app/store/wshserver";
import { Markdown } from "@/element/markdown";
import { NodeModel } from "@/layout/index";
-import { createBlock, getConnStatusAtom, globalStore, refocusNode } from "@/store/global";
+import { atoms, createBlock, getConnStatusAtom, globalStore, refocusNode } from "@/store/global";
+import { modalsModel } from "@/store/modalmodel";
import * as services from "@/store/services";
import * as WOS from "@/store/wos";
import { getWebServerEndpoint } from "@/util/endpoints";
@@ -96,6 +97,53 @@ function isStreamingType(mimeType: string): boolean {
mimeType.startsWith("image/")
);
}
+const previewTipText = `
+### Preview
+Preview is the generic type of block used for viewing files. This can take many different forms based on the type of file being viewed.
+You can use \`wsh view [path]\` from any Wave terminal window to open a preview block with the contents of the specified path (e.g. \`wsh view .\` or \`wsh view ~/myimage.jpg\`).
+
+#### Directory
+When looking at a directory, preview will show a file viewer much like MacOS' *Finder* application or Windows' *File Explorer* application. This variant is slightly more geared toward software development with the focus on seeing what is shown by the \`ls -alh\` command.
+
+##### View a New File
+The simplest way to view a new file is to double click its row in the file viewer. Alternatively, while the block is focused, you can use the ↑ and ↓ arrow keys to select a row and press enter to preview the associated file.
+
+##### View the Parent Directory
+In the directory view, this is as simple as opening the \`..\` file as if it were a regular file. This can be done with the method above. You can also use the keyboard shortcut \`Cmd + ArrowUp\`.
+
+##### Navigate Back and Forward
+When looking at a file, you can navigate back by clicking the back button in the block header or the keyboard shortcut \`Cmd + ArrowLeft\`. You can always navigate back and forward using \`Cmd + ArrowLeft\` and \`Cmd + ArrowRight\`.
+
+##### Filter the List of Files
+While the block is focused, you can filter by filename by typing a substring of the filename you're working for. To clear the filter, you can click the ✕ on the filter dropdown or press esc.
+
+##### Sort by a File Column
+To sort a file by a specific column, click on the header for that column. If you click the header again, it will reverse the sort order.
+
+##### Hide and Show Hidden Files
+At the right of the block header, there is an 👁️ button. Clicking this button hides and shows hidden files.
+
+##### Refresh the Directory
+At the right of the block header, there is a refresh button. Clicking this button refreshes the directory contents.
+
+##### Navigate to Common Directories
+At the left of the block header, there is a file icon. Clicking and holding on this icon opens a menu where you can select a common folder to navigate to. The available options are *Home*, *Desktop*, *Downloads*, and *Root*.
+
+##### Open a New Terminal in the Current Directory
+If you right click the header of the block (alternatively, click the gear icon), one of the menu items listed is **Open Terminal in New Block**. This will create a new terminal block at your current directory.
+
+##### Open a New Terminal in a Child Directory
+If you want to open a terminal for a child directory instead, you can right click on that file's row to get the **Open Terminal in New Block** option. Clicking this will open a terminal at that directory. Note that this option is only available for children that are directories.
+
+##### Open a New Preview for a Child
+To open a new Preview Block for a Child, you can right click on that file's row and select the **Open Preview in New Block** option.
+
+#### Markdown
+Opening a markdown file will bring up a view of the rendered markdown. These files cannot be edited in the preview at this time.
+
+#### Images/Media
+Opening a picture will bring up the image of that picture. Opening a video will bring up a player that lets you watch the video.
+`;
export class PreviewModel implements ViewModel {
viewType: string;
@@ -303,7 +351,34 @@ export class PreviewModel implements ViewModel {
const isCeView = loadableSV.state == "hasData" && loadableSV.data.specializedView == "codeedit";
if (mimeType == "directory") {
const showHiddenFiles = get(this.showHiddenFiles);
+ const settings = get(atoms.settingsAtom);
+ let tipIcon: IconButtonDecl[];
+ if (settings["tips:show"]) {
+ tipIcon = [
+ {
+ elemtype: "iconbutton",
+ icon: "lightbulb-on",
+ iconColor: "var(--warning-color)",
+ click: () => {
+ const tips: UserInputRequest = {
+ requestid: "",
+ querytext: previewTipText,
+ responsetype: "confirm",
+ title: "Preview Tips",
+ markdown: true,
+ timeoutms: 0,
+ checkboxmsg: "",
+ publictext: true,
+ };
+ modalsModel.pushModal("TipsModal", tips);
+ },
+ },
+ ];
+ } else {
+ tipIcon = [];
+ }
return [
+ ...tipIcon,
{
elemtype: "iconbutton",
icon: showHiddenFiles ? "eye" : "eye-slash",
diff --git a/frontend/types/custom.d.ts b/frontend/types/custom.d.ts
index 9118844ad..cd79683c4 100644
--- a/frontend/types/custom.d.ts
+++ b/frontend/types/custom.d.ts
@@ -154,6 +154,7 @@ declare global {
type IconButtonDecl = {
elemtype: "iconbutton";
icon: string | React.ReactNode;
+ iconColor?: string;
className?: string;
title?: string;
click?: (e: React.MouseEvent