Add settings shortcuts to template and snippet quick picks and make prompt template and snippet settings sections collapsible

- in settings: 'templates' and 'snippets' should be collapsed
- in top right corner of templates quick pick add gear icon that opens settings on templates management
- on 'snippet' quick pick action of the hash symbol, add 'gear' icon, opening settings at prompt management just like [Changes]

├── apps
│   └── editor
│       └── src
│           ├── i18n
│           │   └── translations
│           │       ├── common.ts
│           │       └── views
│           │           └── shared
│           │               └── utils
│           │                   └── hash-sign-quick-pick.ts
│           └── views
│               ├── prompt
│               │   └── backend
│               │       └── message-handlers
│               │           └── handle-template-quick-pick.ts
│               ├── settings
│               │   ├── frontend
│               │   │   ├── Home
│               │   │   │   ├── Home.tsx
│               │   │   │   └── sections
│               │   │   │       └── GeneralSection.tsx
│               │   │   └── forms
│               │   │       ├── SnippetsForm
│               │   │       │   └── SnippetsForm.tsx
│               │   │       └── TemplatesForm
│               │   │           ├── TemplatesForm.tsx
│               │   │           └── index.ts
│               │   └── helpers
│               │       └── open-settings.ts
│               └── shared
│                   └── utils
│                       └── hash-sign-quick-pick
│                           ├── hash-sign-quick-pick.ts
│                           └── symbols
│                               └── snippet-symbol.ts
└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── settings-view
                        └── Item
                            ├── Item.module.scss
                            └── Item.tsx

Author: robertpiosik

apps/editor/src/views/prompt/backend/message-handlers/handle-template-quick-pick.ts

@@ -54,9 +54,16 @@ export const handle_template_quick_pick = async (
   >()
   templates_quick_pick.title = 'Templates'
   templates_quick_pick.placeholder = 'Select a template'
-  templates_quick_pick.buttons = [
-    { iconPath: new vscode.ThemeIcon('close'), tooltip: t('common.close') }
-  ]
+
+  const settings_button = {
+    iconPath: new vscode.ThemeIcon('settings-gear'),
+    tooltip: t('common.open-settings')
+  }
+  const close_button = {
+    iconPath: new vscode.ThemeIcon('close'),
+    tooltip: t('common.close')
+  }
+  templates_quick_pick.buttons = [settings_button, close_button]
 
   const get_template_id = (t: Template) => t.name || t.template
   const recents_key = get_last_used_template_key(prompt_type)
@@ -103,7 +110,10 @@ export const handle_template_quick_pick = async (
   let is_entering_variables = false
 
   disposables.push(
-    templates_quick_pick.onDidTriggerButton((_button) => {
+    templates_quick_pick.onDidTriggerButton((button) => {
+      if (button === settings_button) {
+        open_settings.general.prompt()
+      }
       templates_quick_pick.hide()
     }),
     templates_quick_pick.onDidAccept(async () => {

apps/editor/src/views/settings/frontend/Home/sections/GeneralSection.tsx

@@ -242,6 +242,11 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
             <UiItem
               title={t('general.prompt.templates.title')}
               description={t('general.prompt.templates.description')}
+              is_toggleable
+              translations={{
+                expand: t('common.expand'),
+                collapse: t('common.collapse')
+              }}
             >
               <TemplatesForm
                 prompt_instructions={props.prompt_instructions}
@@ -254,6 +259,11 @@ export const GeneralSection = forwardRef<HTMLDivElement, Props>(
             <UiItem
               title={t('general.prompt.snippets.title')}
               description={t('general.prompt.snippets.description')}
+              is_toggleable
+              translations={{
+                expand: t('common.expand'),
+                collapse: t('common.collapse')
+              }}
             >
               <SnippetsForm
                 prompt_instructions={props.prompt_instructions}

apps/editor/src/views/shared/utils/hash-sign-quick-pick/symbols/snippet-symbol.ts

@@ -5,6 +5,10 @@ import { open_settings } from '@/views/settings/helpers/open-settings'
 export const handle_snippet_item = async (
   prompt_type?: 'ask' | 'edit'
 ): Promise<string | 'continue' | undefined> => {
+  const settings_button = {
+    iconPath: new vscode.ThemeIcon('settings-gear'),
+    tooltip: t('common.open-settings')
+  }
   const close_button = {
     iconPath: new vscode.ThemeIcon('close'),
     tooltip: t('common.close')
@@ -49,7 +53,11 @@ export const handle_snippet_item = async (
   quick_pick.title = t(
     'views.shared.utils.hash-sign-quick-pick.snippet-symbol.title'
   )
-  quick_pick.buttons = [vscode.QuickInputButtons.Back, close_button]
+  quick_pick.buttons = [
+    vscode.QuickInputButtons.Back,
+    settings_button,
+    close_button
+  ]
 
   return new Promise((resolve) => {
     let is_accepted = false
@@ -60,6 +68,10 @@ export const handle_snippet_item = async (
         did_trigger_back = true
         quick_pick.hide()
         resolve('continue')
+      } else if (button === settings_button) {
+        open_settings.general.prompt()
+        quick_pick.hide()
+        resolve(undefined)
       } else if (button === close_button) {
         quick_pick.hide()
         resolve(undefined)