Feature/v2/viewer tabs (#4646)

# Description of Changes

<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

---------

Co-authored-by: Copilot <[email protected]>
Co-authored-by: James Brunton <[email protected]>
Co-authored-by: Claude <[email protected]>

frontend/src/components/shared/FileDropdownMenu.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Menu, Loader, Group, Text } from '@mantine/core';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import FitText from './FitText';
+
+interface FileDropdownMenuProps {
+  displayName: string;
+  activeFiles: Array<{ fileId: string; name: string; versionNumber?: number }>;
+  currentFileIndex: number;
+  onFileSelect?: (index: number) => void;
+  switchingTo?: string | null;
+  viewOptionStyle: React.CSSProperties;
+  pillRef?: React.RefObject<HTMLDivElement>;
+}
+
+export const FileDropdownMenu: React.FC<FileDropdownMenuProps> = ({
+  displayName,
+  activeFiles,
+  currentFileIndex,
+  onFileSelect,
+  switchingTo,
+  viewOptionStyle,
+}) => {
+  return (
+    <Menu trigger="click" position="bottom" width="30rem">
+      <Menu.Target>
+        <div style={{...viewOptionStyle, cursor: 'pointer'}}>
+          {switchingTo === "viewer" ? (
+            <Loader size="xs" />
+          ) : (
+            <VisibilityIcon fontSize="small" />
+          )}
+          <FitText text={displayName} fontSize={14} minimumFontScale={0.6} className="ph-no-capture" />
+          <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'
+      }}>
+        {activeFiles.map((file, index) => {
+          const itemName = file?.name || 'Untitled';
+          const isActive = index === currentFileIndex;
+          return (
+            <Menu.Item
+              key={file.fileId}
+              onClick={(e) => {
+                e.stopPropagation();
+                onFileSelect?.(index);
+              }}
+              className="viewer-file-tab"
+              {...(isActive && { 'data-active': true })}
+              style={{
+                justifyContent: 'flex-start',
+              }}
+            >
+              <Group gap="xs" style={{ width: '100%', justifyContent: 'space-between' }}>
+                <div style={{ flex: 1, textAlign: 'left', minWidth: 0 }}>
+                  <FitText text={itemName} fontSize={14} minimumFontScale={0.7} className="ph-no-capture" />
+                </div>
+                {file.versionNumber && file.versionNumber > 1 && (
+                  <Text size="xs" c="dimmed">
+                    v{file.versionNumber}
+                  </Text>
+                )}
+              </Group>
+            </Menu.Item>
+          );
+        })}
+      </Menu.Dropdown>
+    </Menu>
+  );
+};