Implement Context Sidebar

[JamesonRGrieve]

As a(n) Developer I want consistent context sidebars across pages so that users have a unified navigation experience.

Executive Summary

We need to implement the context sidebar component across additional pages in the application, following the pattern established in the Settings/Prompt interface. This will provide consistent navigation and functionality across the application.

Acceptance Criteria

• Context sidebar implemented on all relevant pages
• Sidebar follows the established pattern from PromptPanel implementation
• Consistent styling and behavior across all implementations
• Proper responsive behavior for all screen sizes
• Accessibility requirements met (ARIA labels, keyboard navigation)

In-Scope Files / Directories / Systems

• components/
interface/Settings/prompt/PromptPanel.tsx

Out-of-Scope Files / Directories / Systems

Not Provided

Issue Dependencies

Not Provided

Other Dependencies

Not Provided

Technical Notes

Example snippet from ./interface/Settings/prompt/PromptPanel.tsx:

      <SidebarContent title='Prompt Management'>
        <SidebarGroup>
          <SidebarGroupLabel>Select Prompt</SidebarGroupLabel>
          <SidebarMenuButton className='group-data-[state=expanded]:hidden'>
            <ArrowBigLeft />
          </SidebarMenuButton>
          <div className='w-full group-data-[collapsible=icon]:hidden'>
            {renaming ? (
              <Input value={newName} onChange={(e) => setNewName(e.target.value)} className='w-full' />
            ) : (
              <PromptSelector />
            )}
          </div>
          <SidebarGroupLabel>Prompt Functions</SidebarGroupLabel>
          <SidebarMenu>
            {[
              {
                title: 'Create Prompt',
                icon: Plus,
                func: () => {
                  setImportMode(false);
                  setIsDialogOpen(true);
                },
                disabled: renaming,
              },
              {
                title: renaming ? 'Save Name' : 'Rename Prompt',
                icon: renaming ? Check : Pencil,
                func: renaming
                  ? () => {
                      prompt.rename(newName);
                      setRenaming(false);
                    }
                  : () => setRenaming(true),
                disabled: false,
              },
              {
                title: 'Import Prompt',
                icon: Upload,
                func: () => {
                  setImportMode(true);
                  setIsDialogOpen(true);
                },
                disabled: renaming,
              },
              {
                title: 'Export Prompt',
                icon: Download,
                func: () => {
                  prompt.export();
                },
                disabled: renaming,
              },
              {
                title: 'Delete Prompt',
                icon: Trash2,
                func: () => {
                  prompt.delete();
                },
                disabled: renaming,
              },
            ].map(
              (item) =>
                item.visible !== false && (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton side='left' tooltip={item.title} onClick={item.func} disabled={item.disabled}>
                      {item.icon && <item.icon />}
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ),
            )}
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>