latest

src/utils/tldraw/ui-overrides/components/shared/BasePanel.tsx

@@ -27,6 +27,8 @@ import {
 } from '@mui/icons-material';
 import { CCShapesPanel } from './CCShapesPanel';
 import { CCSlidesPanel } from './CCSlidesPanel';
+import { CCFilesPanel } from './CCFilesPanel';
+import { CCCabinetsPanel } from './CCCabinetsPanel';
 import { CCYoutubePanel } from './CCYoutubePanel';
 import { CCGraphPanel } from './CCGraphPanel';
 import { CCExamMarkerPanel } from './CCExamMarkerPanel';
@@ -40,8 +42,10 @@ import { useTLDraw } from '../../../../../contexts/TLDrawContext';
 
 export const PANEL_TYPES = {
   default: [
+    { id: 'cabinets', label: 'Cabinets', order: 5 },
     { id: 'navigation', label: 'Navigation', order: 10 },
     { id: 'node-snapshot', label: 'Node', order: 20 },
+    { id: 'files', label: 'Files', order: 25 },
     { id: 'cc-shapes', label: 'Shapes', order: 30 },
     { id: 'slides', label: 'Slides', order: 40 },
     { id: 'youtube', label: 'YouTube', order: 50 },
@@ -111,7 +115,7 @@ const StyledMenuItem = styled(MenuItem)(() => ({
 }));
 
 export const BasePanel: React.FC<BasePanelProps> = ({
-  initialPanelType = 'cc-shapes',
+  initialPanelType = 'files',
   examMarkerProps,
   isExpanded: controlledIsExpanded,
   isPinned: controlledIsPinned,
@@ -151,8 +155,8 @@ export const BasePanel: React.FC<BasePanelProps> = ({
   );
   
   // Use controlled state if provided, otherwise use internal state
-  const [internalIsExpanded, setInternalIsExpanded] = React.useState(false);
-  const [internalIsPinned, setInternalIsPinned] = React.useState(false);
+  const [internalIsExpanded, setInternalIsExpanded] = React.useState(true);
+  const [internalIsPinned, setInternalIsPinned] = React.useState(true);
   
   const isExpanded = controlledIsExpanded ?? internalIsExpanded;
   const isPinned = controlledIsPinned ?? internalIsPinned;
@@ -200,6 +204,8 @@ export const BasePanel: React.FC<BasePanelProps> = ({
 
   const getIconForPanel = (panelId: PanelType) => {
     switch (panelId) {
+      case 'cabinets':
+        return <NavigationIcon />;
       case 'cc-shapes':
         return <ShapesIcon />;
       case 'slides':
@@ -223,6 +229,8 @@ export const BasePanel: React.FC<BasePanelProps> = ({
 
   const getDescriptionForPanel = (panelId: PanelType) => {
     switch (panelId) {
+      case 'cabinets':
+        return 'Manage file cabinets';
       case 'cc-shapes':
         return 'Add shapes and elements to your canvas';
       case 'slides':
@@ -250,6 +258,10 @@ export const BasePanel: React.FC<BasePanelProps> = ({
     }
 
     switch (currentPanelType) {
+      case 'cabinets':
+        return <CCCabinetsPanel />;
+      case 'files':
+        return <CCFilesPanel />;
       case 'cc-shapes':
         return <CCShapesPanel />;
       case 'slides':