Add plugin framework and settings UI

ui/src/components/SidebarProjects.tsx

@@ -25,17 +25,26 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
+import { PluginSlotMount, usePluginSlots } from "@/plugins/slots";
 import type { Project } from "@paperclipai/shared";
 
+type ProjectSidebarSlot = ReturnType<typeof usePluginSlots>["slots"][number];
+
 function SortableProjectItem({
   activeProjectRef,
+  companyId,
+  companyPrefix,
   isMobile,
   project,
+  projectSidebarSlots,
   setSidebarOpen,
 }: {
   activeProjectRef: string | null;
+  companyId: string | null;
+  companyPrefix: string | null;
   isMobile: boolean;
   project: Project;
+  projectSidebarSlots: ProjectSidebarSlot[];
   setSidebarOpen: (open: boolean) => void;
 }) {
   const {
@@ -61,31 +70,52 @@ function SortableProjectItem({
       {...attributes}
       {...listeners}
     >
-      <NavLink
-        to={`/projects/${routeRef}/issues`}
-        onClick={() => {
-          if (isMobile) setSidebarOpen(false);
-        }}
-        className={cn(
-          "flex items-center gap-2.5 px-3 py-1.5 text-[13px] font-medium transition-colors",
-          activeProjectRef === routeRef || activeProjectRef === project.id
-            ? "bg-accent text-foreground"
-            : "text-foreground/80 hover:bg-accent/50 hover:text-foreground",
+      <div className="flex flex-col gap-0.5">
+        <NavLink
+          to={`/projects/${routeRef}/issues`}
+          onClick={() => {
+            if (isMobile) setSidebarOpen(false);
+          }}
+          className={cn(
+            "flex items-center gap-2.5 px-3 py-1.5 text-[13px] font-medium transition-colors",
+            activeProjectRef === routeRef || activeProjectRef === project.id
+              ? "bg-accent text-foreground"
+              : "text-foreground/80 hover:bg-accent/50 hover:text-foreground",
+          )}
+        >
+          <span
+            className="shrink-0 h-3.5 w-3.5 rounded-sm"
+            style={{ backgroundColor: project.color ?? "#6366f1" }}
+          />
+          <span className="flex-1 truncate">{project.name}</span>
+        </NavLink>
+        {projectSidebarSlots.length > 0 && (
+          <div className="ml-5 flex flex-col gap-0.5">
+            {projectSidebarSlots.map((slot) => (
+              <PluginSlotMount
+                key={`${project.id}:${slot.pluginKey}:${slot.id}`}
+                slot={slot}
+                context={{
+                  companyId,
+                  companyPrefix,
+                  projectId: project.id,
+                  projectRef: routeRef,
+                  entityId: project.id,
+                  entityType: "project",
+                }}
+                missingBehavior="placeholder"
+              />
+            ))}
+          </div>
         )}
-      >
-        <span
-          className="shrink-0 h-3.5 w-3.5 rounded-sm"
-          style={{ backgroundColor: project.color ?? "#6366f1" }}
-        />
-        <span className="flex-1 truncate">{project.name}</span>
-      </NavLink>
+      </div>
     </div>
   );
 }
 
 export function SidebarProjects() {
   const [open, setOpen] = useState(true);
-  const { selectedCompanyId } = useCompany();
+  const { selectedCompany, selectedCompanyId } = useCompany();
   const { openNewProject } = useDialog();
   const { isMobile, setSidebarOpen } = useSidebar();
   const location = useLocation();
@@ -99,6 +129,12 @@ export function SidebarProjects() {
     queryKey: queryKeys.auth.session,
     queryFn: () => authApi.getSession(),
   });
+  const { slots: projectSidebarSlots } = usePluginSlots({
+    slotTypes: ["projectSidebarItem"],
+    entityType: "project",
+    companyId: selectedCompanyId,
+    enabled: !!selectedCompanyId,
+  });
 
   const currentUserId = session?.user?.id ?? session?.session?.userId ?? null;
 
@@ -178,8 +214,11 @@ export function SidebarProjects() {
                 <SortableProjectItem
                   key={project.id}
                   activeProjectRef={activeProjectRef}
+                  companyId={selectedCompanyId}
+                  companyPrefix={selectedCompany?.issuePrefix ?? null}
                   isMobile={isMobile}
                   project={project}
+                  projectSidebarSlots={projectSidebarSlots}
                   setSidebarOpen={setSidebarOpen}
                 />
               ))}