new shortcut modal update

apps/web/src/api/buster_rest/shortcuts/queryRequests.ts

@@ -72,6 +72,10 @@ export const useCreateShortcut = () => {
         shortcutsQueryKeys.shortcutsGet(newShortcut.id).queryKey,
         newShortcut
       );
+
+      queryClient.invalidateQueries({
+        queryKey: shortcutsQueryKeys.shortcutsGetList.queryKey,
+      });
     },
   });
 };

apps/web/src/components/features/input/Mentions/ShortcutsSuggestions/ShortcutsSuggestions.tsx

@@ -110,7 +110,7 @@ export const useShortcutsSuggestions = (
         label: shortcut.name,
         popoverContent: <ShortcutSuggestionsPopoverContent shortcut={shortcut} />,
         icon: SHORTCUT_MENTION_TRIGGER,
-        inputValue: `/ ${shortcut.name}`,
+        inputValue: `${SHORTCUT_MENTION_TRIGGER} ${shortcut.name}`,
         onClick: () => {
           const addMentionToInput = mentionInputSuggestionsRef.current?.addMentionToInput;
           if (!addMentionToInput) {

apps/web/src/components/features/modals/NewShortcutModal.tsx

@@ -1,23 +1,78 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useCreateShortcut } from '@/api/buster_rest/shortcuts/queryRequests';
+import { Input } from '@/components/ui/inputs';
+import { InputTextArea } from '@/components/ui/inputs/InputTextArea';
 import { AppModal } from '@/components/ui/modal';
+import { Text } from '@/components/ui/typography/Text';
+import { inputHasText } from '@/lib/text';
 
 export const NewShortcutModal: React.FC<{
   open: boolean;
   onClose: () => void;
 }> = React.memo(({ open, onClose }) => {
+  const { mutateAsync: createShortcut, isPending: isCreatingShortcut } = useCreateShortcut();
+  const [name, setName] = useState('');
+  const [instructions, setInstructions] = useState('');
+
+  const disableSubmit = !inputHasText(name) || !inputHasText(instructions);
+
+  const resetModal = () => {
+    setName('');
+    setInstructions('');
+  };
+
   return (
     <AppModal
       open={open}
       onClose={onClose}
-      header={{ title: 'New shortcut' }}
+      header={{
+        title: 'Create a shortcut',
+        description: 'Use shortcuts for your repeatable workflows in Buster.',
+      }}
       footer={{
         primaryButton: {
+          loading: isCreatingShortcut,
           text: 'Create shortcut',
-          onClick: () => {},
+          onClick: async () => {
+            if (disableSubmit) return;
+            await createShortcut({ name, instructions, shareWithWorkspace: false });
+            onClose();
+            setTimeout(() => {
+              resetModal();
+            }, 350);
+          },
+          disabled: disableSubmit,
         },
       }}
     >
-      asdf{' '}
+      <StyleContainer title="Shortcut name">
+        <Input
+          placeholder="name"
+          prefix="/"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+      </StyleContainer>
+      <StyleContainer title="Shortcut description">
+        <InputTextArea
+          placeholder="Instructions that Buster should follow when you use this shortcut..."
+          minRows={4}
+          maxRows={8}
+          value={instructions}
+          onChange={(e) => setInstructions(e.target.value)}
+        />
+      </StyleContainer>
     </AppModal>
   );
 });
+
+const StyleContainer = ({ children, title }: { children: React.ReactNode; title: string }) => {
+  return (
+    <div className="p-0 flex flex-col space-y-1 w-full">
+      <Text size={'xs'} variant={'secondary'}>
+        {title}
+      </Text>
+      {children}
+    </div>
+  );
+};

apps/web/src/components/ui/inputs/Input.tsx

@@ -21,9 +21,10 @@ export const inputVariants = cva(
 );
 
 export interface InputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'>,
     VariantProps<typeof inputVariants> {
   onPressEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  prefix?: React.ReactNode;
 }
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
@@ -35,6 +36,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       type = 'text',
       onPressEnter,
       onKeyDown,
+      prefix,
       ...props
     },
     ref
@@ -46,6 +48,23 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       onKeyDown?.(e);
     };
 
+    if (prefix) {
+      return (
+        <div className={cn('relative flex items-center', className)}>
+          <span className="pointer-events-none absolute left-2.5 flex items-center text-foreground">
+            {prefix}
+          </span>
+          <input
+            type={type}
+            className={cn(inputVariants({ size, variant }), 'pl-5')}
+            ref={ref}
+            onKeyDown={handleKeyDown}
+            {...props}
+          />
+        </div>
+      );
+    }
+
     return (
       <input
         type={type}

apps/web/src/components/ui/inputs/MentionInput/MentionList/MentionListItem.tsx

@@ -39,6 +39,7 @@ export function MentionListItem<T = string>({
         'group/mention-list-item',
         'flex items-center justify-between gap-x-1.5 overflow-hidden',
         `cursor-pointer px-2.5 min-h-8 text-base rounded transition-all duration-100`,
+        'hover:bg-item-hover',
         isSelected && 'bg-item-hover'
       )}
     >