Initial set up

2025-10-10 19:16:04 +01:00
parent c260394b95
commit 3597a8b7bd
6 changed files with 383 additions and 53 deletions
@@ -0,0 +1,128 @@
+import React from 'react';
+import { Menu, Loader, Group, Text, Checkbox, ActionIcon } from '@mantine/core';
+import EditNoteIcon from '@mui/icons-material/EditNote';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import FitText from './FitText';
+
+interface PageEditorFileDropdownProps {
+  displayName: string;
+  allFiles: Array<{ fileId: string; name: string; versionNumber?: number }>;
+  selectedFileIds: Set<string>;
+  onToggleSelection: (fileId: string) => void;
+  onReorder: (fromIndex: number, toIndex: number) => void;
+  switchingTo?: string | null;
+  viewOptionStyle: React.CSSProperties;
+}
+
+export const PageEditorFileDropdown: React.FC<PageEditorFileDropdownProps> = ({
+  displayName,
+  allFiles,
+  selectedFileIds,
+  onToggleSelection,
+  onReorder,
+  switchingTo,
+  viewOptionStyle,
+}) => {
+  const handleCheckboxClick = (e: React.MouseEvent, fileId: string) => {
+    e.stopPropagation();
+    onToggleSelection(fileId);
+  };
+
+  const handleMoveUp = (e: React.MouseEvent, index: number) => {
+    e.stopPropagation();
+    if (index > 0) {
+      onReorder(index, index - 1);
+    }
+  };
+
+  const handleMoveDown = (e: React.MouseEvent, index: number) => {
+    e.stopPropagation();
+    if (index < allFiles.length - 1) {
+      onReorder(index, index + 1);
+    }
+  };
+
+  return (
+    <Menu trigger="click" position="bottom" width="30rem">
+      <Menu.Target>
+        <div style={{...viewOptionStyle, cursor: 'pointer'}}>
+          {switchingTo === "pageEditor" ? (
+            <Loader size="xs" />
+          ) : (
+            <EditNoteIcon fontSize="small" />
+          )}
+          <FitText text={displayName} fontSize={14} minimumFontScale={0.6} />
+          <KeyboardArrowDownIcon fontSize="small" />
+        </div>
+      </Menu.Target>
+      <Menu.Dropdown style={{
+        backgroundColor: 'var(--right-rail-bg)',
+        border: '1px solid var(--border-subtle)',
+        borderRadius: '8px',
+        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+        maxHeight: '50vh',
+        overflowY: 'auto'
+      }}>
+        {allFiles.map((file, index) => {
+          const itemName = file?.name || 'Untitled';
+          const isSelected = selectedFileIds.has(file.fileId);
+          const isFirst = index === 0;
+          const isLast = index === allFiles.length - 1;
+
+          return (
+            <Menu.Item
+              key={file.fileId}
+              onClick={(e) => e.stopPropagation()}
+              style={{
+                justifyContent: 'flex-start',
+                cursor: 'default',
+                backgroundColor: isSelected ? 'var(--bg-hover)' : undefined,
+              }}
+            >
+              <Group gap="xs" style={{ width: '100%', justifyContent: 'space-between' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flex: 1, minWidth: 0 }}>
+                  <Checkbox
+                    checked={isSelected}
+                    onChange={() => {}}
+                    onClick={(e) => handleCheckboxClick(e, file.fileId)}
+                    size="sm"
+                  />
+                  <div style={{ flex: 1, textAlign: 'left', minWidth: 0 }}>
+                    <FitText text={itemName} fontSize={14} minimumFontScale={0.7} />
+                  </div>
+                  {file.versionNumber && file.versionNumber > 1 && (
+                    <Text size="xs" c="dimmed">
+                      v{file.versionNumber}
+                    </Text>
+                  )}
+                </div>
+                <div style={{ display: 'flex', gap: '0.25rem', alignItems: 'center' }}>
+                  <ActionIcon
+                    size="sm"
+                    variant="subtle"
+                    disabled={isFirst}
+                    onClick={(e) => handleMoveUp(e, index)}
+                    title="Move up"
+                  >
+                    <ArrowUpwardIcon fontSize="small" />
+                  </ActionIcon>
+                  <ActionIcon
+                    size="sm"
+                    variant="subtle"
+                    disabled={isLast}
+                    onClick={(e) => handleMoveDown(e, index)}
+                    title="Move down"
+                  >
+                    <ArrowDownwardIcon fontSize="small" />
+                  </ActionIcon>
+                </div>
+              </Group>
+            </Menu.Item>
+          );
+        })}
+      </Menu.Dropdown>
+    </Menu>
+  );
+};