Generalized frontend model store (#193)

src-web/components/core/Editor/Editor.tsx

@@ -6,10 +6,12 @@ import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/vie
 import { emacs } from '@replit/codemirror-emacs';
 import { vim } from '@replit/codemirror-vim';
 import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
-import type { EditorKeymap, EnvironmentVariable } from '@yaakapp-internal/models';
+import type {EditorKeymap, EnvironmentVariable} from '@yaakapp-internal/models';
+import { settingsAtom} from '@yaakapp-internal/models';
 import type { EditorLanguage, TemplateFunction } from '@yaakapp-internal/plugins';
 import classNames from 'classnames';
 import { EditorView } from 'codemirror';
+import {useAtomValue} from "jotai";
 import { md5 } from 'js-md5';
 import type { MutableRefObject, ReactNode } from 'react';
 import {
@@ -26,7 +28,6 @@ import {
 import { useActiveEnvironmentVariables } from '../../../hooks/useActiveEnvironmentVariables';
 import { parseTemplate } from '../../../hooks/useParseTemplate';
 import { useRequestEditor } from '../../../hooks/useRequestEditor';
-import { useSettings } from '../../../hooks/useSettings';
 import { useTemplateFunctionCompletionOptions } from '../../../hooks/useTemplateFunctions';
 import { showDialog } from '../../../lib/dialog';
 import { tryFormatJson, tryFormatXml } from '../../../lib/formatters';
@@ -125,7 +126,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
   }: EditorProps,
   ref,
 ) {
-  const settings = useSettings();
+  const settings = useAtomValue(settingsAtom);
 
   const allEnvironmentVariables = useActiveEnvironmentVariables();
   const environmentVariables = autocompleteVariables ? allEnvironmentVariables : emptyVariables;

src-web/components/core/Select.tsx

@@ -19,6 +19,7 @@ export interface SelectProps<T extends string> {
   leftSlot?: ReactNode;
   options: RadioDropdownItem<T>[];
   onChange: (value: T) => void;
+  defaultValue?: T;
   size?: ButtonProps['size'];
   className?: string;
   disabled?: boolean;
@@ -36,6 +37,7 @@ export function Select<T extends string>({
   leftSlot,
   onChange,
   className,
+  defaultValue,
   size = 'md',
 }: SelectProps<T>) {
   const osInfo = useOsInfo();
@@ -83,7 +85,9 @@ export function Select<T extends string>({
             onChange={(e) => handleChange(e.target.value as T)}
             onFocus={() => setFocused(true)}
             onBlur={() => setFocused(false)}
-            className={classNames('pr-7 w-full outline-none bg-transparent disabled:opacity-disabled')}
+            className={classNames(
+              'pr-7 w-full outline-none bg-transparent disabled:opacity-disabled',
+            )}
             disabled={disabled}
           >
             {isInvalidSelection && <option value={'__NONE__'}>-- Select an Option --</option>}
@@ -92,6 +96,7 @@ export function Select<T extends string>({
               return (
                 <option key={o.value} value={o.value}>
                   {o.label}
+                  {o.value === defaultValue && ' (default)'}
                 </option>
               );
             })}

src-web/components/core/SplitLayout.tsx

@@ -1,8 +1,9 @@
 import classNames from 'classnames';
+import { useAtomValue } from 'jotai';
 import type { CSSProperties, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { useLocalStorage } from 'react-use';
-import { useActiveWorkspace } from '../../hooks/useActiveWorkspace';
+import { activeWorkspaceAtom } from '../../hooks/useActiveWorkspace';
 import { useContainerSize } from '../../hooks/useContainerQuery';
 import { clamp } from '../../lib/clamp';
 import { ResizeHandle } from '../ResizeHandle';
@@ -42,7 +43,7 @@ export function SplitLayout({
   minWidthPx = 10,
 }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
-  const activeWorkspace = useActiveWorkspace();
+  const activeWorkspace = useAtomValue(activeWorkspaceAtom);
   const [widthRaw, setWidth] = useLocalStorage<number>(
     `${name}_width::${activeWorkspace?.id ?? 'n/a'}`,
   );