chore: precommit

web/src/app/chat/input-prompts/InputPrompts.tsx

@@ -1,12 +1,10 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { InputPrompt } from "@/app/chat/interfaces";
 import Button from "@/refresh-components/buttons/Button";
-import { PlusIcon } from "@/components/icons/icons";
+import SvgPlus from "@/icons/plus";
 import { Textarea } from "@/components/ui/textarea";
-import Title from "@/components/ui/title";
-import Text from "@/components/ui/text";
+import Text from "@/refresh-components/texts/Text";
 import { usePopup } from "@/components/admin/connectors/Popup";
-import { BackButton } from "@/components/BackButton";
 import SimpleTooltip from "@/refresh-components/SimpleTooltip";
 import {
   DropdownMenu,
@@ -152,14 +150,13 @@ export default function InputPrompts() {
 
   return (
     <div className="mx-auto max-w-4xl">
-      <div className="absolute top-4 left-4">
-        <BackButton />
-      </div>
       {popup}
       <div className="flex justify-between items-start mb-6">
         <div className="flex flex-col gap-2">
-          <Title>Prompt Shortcuts</Title>
-          <Text>
+          <Text headingH2 text05>
+            Prompt Shortcuts
+          </Text>
+          <Text mainUiBody text03>
             Manage and customize prompt shortcuts for your assistants. Use your
             prompt shortcuts by starting a new message with &quot;/&quot; in
             chat.
@@ -204,8 +201,11 @@ export default function InputPrompts() {
           </div>
         </div>
       ) : (
-        <Button onClick={() => setIsCreatingNew(true)} className="w-full mt-4">
-          <PlusIcon size={14} className="mr-2" />
+        <Button
+          onClick={() => setIsCreatingNew(true)}
+          className="w-full mt-4"
+          leftIcon={SvgPlus}
+        >
           Create New Prompt
         </Button>
       )}
@@ -256,7 +256,7 @@ const PromptCard: React.FC<PromptCardProps> = ({
   }, []);
 
   return (
-    <div className="border dark:border-none dark:bg-[#333333] rounded-lg p-4 mb-4 relative">
+    <div className="border border-border-02 bg-background-neutral-01 rounded-lg p-4 mb-4 relative">
       {isEditing ? (
         <>
           <div className="absolute top-2 right-2">
@@ -297,11 +297,15 @@ const PromptCard: React.FC<PromptCardProps> = ({
             disabled={!isPromptPublic(prompt)}
           >
             <div className="mb-2  flex gap-x-2 ">
-              <p className="font-semibold">{prompt.prompt}</p>
+              <Text mainUiAction text05>
+                {prompt.prompt}
+              </Text>
               {isPromptPublic(prompt) && <SourceChip title="Built-in" />}
             </div>
           </SimpleTooltip>
-          <div className="whitespace-pre-wrap">{prompt.content}</div>
+          <Text mainUiBody text04 className="whitespace-pre-wrap">
+            {prompt.content}
+          </Text>
           <div className="absolute top-2 right-2">
             <DropdownMenu>
               <DropdownMenuTrigger className="hover:bg-transparent" asChild>

web/src/lib/hooks.ts

@@ -61,7 +61,8 @@ export function useIsMounted() {
 type AppFocus =
   | { type: "agent" | "project" | "chat"; id: string }
   | "new-session"
-  | "more-agents";
+  | "more-agents"
+  | "input-prompts";
 
 export function useAppFocus(): AppFocus {
   const pathname = usePathname();
@@ -72,6 +73,10 @@ export function useAppFocus(): AppFocus {
     return "more-agents";
   }
 
+  if (pathname === "/chat/input-prompts") {
+    return "input-prompts";
+  }
+
   // Check search params for chat, agent, or project
   const chatId = searchParams.get(SEARCH_PARAM_NAMES.CHAT_ID);
   if (chatId) return { type: "chat", id: chatId };

web/src/sections/sidebar/AppSidebar.tsx

@@ -35,6 +35,7 @@ import { useChatContext } from "@/refresh-components/contexts/ChatContext";
 import { useAgentsContext } from "@/refresh-components/contexts/AgentsContext";
 import { useAppSidebarContext } from "@/refresh-components/contexts/AppSidebarContext";
 import SvgFolderPlus from "@/icons/folder-plus";
+import SvgFileText from "@/icons/file-text";
 import SvgOnyxOctagon from "@/icons/onyx-octagon";
 import ProjectFolderButton from "@/sections/sidebar/ProjectFolderButton";
 import CreateProjectModal from "@/components/modals/CreateProjectModal";
@@ -309,7 +310,7 @@ function AppSidebarInner() {
     ]
   );
 
-  const { isAdmin, isCurator } = useUser();
+  const { isAdmin, isCurator, user } = useUser();
   const activeSidebarTab = useAppFocus();
   const createProjectModal = useCreateModal();
   const newSessionButton = useMemo(
@@ -338,6 +339,24 @@ function AppSidebarInner() {
     ),
     [folded, route, activeSidebarTab, combinedSettings, currentAgent]
   );
+
+  const promptShortcutsButton = useMemo(
+    () =>
+      user?.preferences?.shortcut_enabled && (
+        <div data-testid="AppSidebar/prompt-shortcuts">
+          <SidebarTab
+            leftIcon={SvgFileText}
+            href="/chat/input-prompts"
+            folded={folded}
+            active={activeSidebarTab === "input-prompts"}
+          >
+            Prompt Shortcuts
+          </SidebarTab>
+        </div>
+      ),
+    [folded, activeSidebarTab, user?.preferences?.shortcut_enabled]
+  );
+
   const moreAgentsButton = useMemo(
     () => (
       <div data-testid="AppSidebar/more-agents">
@@ -435,7 +454,15 @@ function AppSidebarInner() {
       )}
 
       <SidebarWrapper folded={folded} setFolded={setFolded}>
-        <SidebarBody footer={settingsButton} actionButton={newSessionButton}>
+        <SidebarBody
+          footer={settingsButton}
+          actionButton={
+            <>
+              {newSessionButton}
+              {promptShortcutsButton}
+            </>
+          }
+        >
           {folded ? (
             <>
               {moreAgentsButton}