Template Tag Function Editor (#67)

![CleanShot 2024-08-15 at 16 53
09@2x](https://github.com/user-attachments/assets/8c0eb655-1daf-4dc8-811f-f606c770f7dc)

src-web/lib/store.ts

@@ -52,6 +52,11 @@ export async function getWorkspace(id: string | null): Promise<Workspace | null>
   return workspace;
 }
 
+export async function listWorkspaces(): Promise<Workspace[]> {
+  const workspaces: Workspace[] = (await invokeCmd('cmd_list_workspaces')) ?? [];
+  return workspaces;
+}
+
 export async function getCookieJar(id: string | null): Promise<CookieJar | null> {
   if (id === null) return null;
   const cookieJar: CookieJar = (await invokeCmd('cmd_get_cookie_jar', { id })) ?? null;

src-web/lib/tauri.ts

@@ -6,6 +6,7 @@ type TauriCmd =
   | 'cmd_check_for_updates'
   | 'cmd_create_cookie_jar'
   | 'cmd_create_environment'
+  | 'cmd_template_tokens_to_string'
   | 'cmd_create_folder'
   | 'cmd_create_grpc_request'
   | 'cmd_create_http_request'
@@ -21,6 +22,7 @@ type TauriCmd =
   | 'cmd_delete_http_request'
   | 'cmd_delete_http_response'
   | 'cmd_delete_workspace'
+  | 'cmd_dismiss_notification'
   | 'cmd_duplicate_grpc_request'
   | 'cmd_duplicate_http_request'
   | 'cmd_export_data'
@@ -35,6 +37,7 @@ type TauriCmd =
   | 'cmd_get_workspace'
   | 'cmd_grpc_go'
   | 'cmd_grpc_reflect'
+  | 'cmd_http_request_actions'
   | 'cmd_import_data'
   | 'cmd_list_cookie_jars'
   | 'cmd_list_environments'
@@ -48,7 +51,8 @@ type TauriCmd =
   | 'cmd_metadata'
   | 'cmd_new_nested_window'
   | 'cmd_new_window'
-  | 'cmd_dismiss_notification'
+  | 'cmd_parse_template'
+  | 'cmd_render_template'
   | 'cmd_save_response'
   | 'cmd_send_ephemeral_request'
   | 'cmd_send_http_request'
@@ -62,7 +66,6 @@ type TauriCmd =
   | 'cmd_update_http_request'
   | 'cmd_update_settings'
   | 'cmd_update_workspace'
-  | 'cmd_http_request_actions'
   | 'cmd_write_file_dev';
 
 export async function invokeCmd<T>(cmd: TauriCmd, args?: InvokeArgs): Promise<T> {

src-web/lib/theme/window.ts

@@ -39,7 +39,7 @@ export type YaakTheme = YaakColors & {
     appHeader: Partial<YaakColors>;
     button: Partial<YaakColors>;
     banner: Partial<YaakColors>;
-    placeholder: Partial<YaakColors>;
+    templateTag: Partial<YaakColors>;
     urlBar: Partial<YaakColors>;
     editor: Partial<YaakColors>;
     input: Partial<YaakColors>;
@@ -87,7 +87,7 @@ function themeVariables(theme?: Partial<YaakColors>, base?: CSSVariables): CSSVa
   return vars;
 }
 
-function placeholderColorVariables(color: YaakColor): Partial<CSSVariables> {
+function templateTagColorVariables(color: YaakColor): Partial<CSSVariables> {
   return {
     text: color.lift(0.6),
     textSubtle: color.lift(0.4),
@@ -201,14 +201,14 @@ function bannerCSS(color: YaakColorKey, colors?: Partial<YaakColors>): string |
   );
 }
 
-function placeholderCSS(color: YaakColorKey, colors?: Partial<YaakColors>): string | null {
+function templateTagCSS(color: YaakColorKey, colors?: Partial<YaakColors>): string | null {
   const yaakColor = colors?.[color];
   if (yaakColor == null) {
     return null;
   }
 
   return [
-    variablesToCSS(`.x-theme-placeholder--${color}`, placeholderColorVariables(yaakColor)),
+    variablesToCSS(`.x-theme-templateTag--${color}`, templateTagColorVariables(yaakColor)),
   ].join('\n\n');
 }
 
@@ -254,7 +254,7 @@ export function getThemeCSS(theme: YaakTheme): string {
         bannerCSS(key as YaakColorKey, theme.components?.banner ?? colors),
       ),
       ...Object.keys(colors ?? {}).map((key) =>
-        placeholderCSS(key as YaakColorKey, theme.components?.placeholder ?? colors),
+        templateTagCSS(key as YaakColorKey, theme.components?.templateTag ?? colors),
       ),
     ].join('\n\n');
   } catch (err) {

src-web/lib/truncate.ts

@@ -0,0 +1,4 @@
+export function truncate(text: string, len: number): string {
+  if (text.length <= len) return text;
+  return text.slice(0, len) + '…';
+}