Addition of the Show JavaScript tool (#4877)

# Description of Changes

- Added the show javascript tool.

---

## 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)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### 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.

frontend/src/core/components/shared/filePreview/DocumentThumbnail.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Center, Image } from '@mantine/core';
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+import { getFileTypeIcon } from '@app/components/shared/filePreview/getFileTypeIcon';
 import { StirlingFileStub } from '@app/types/fileContext';
 import { PrivateContent } from '@app/components/shared/PrivateContent';
 
@@ -53,12 +53,7 @@ const DocumentThumbnail: React.FC<DocumentThumbnailProps> = ({
     <Box style={containerStyle} onClick={onClick}>
       <Center style={{ width: '100%', height: '100%', backgroundColor: 'var(--mantine-color-gray-1)', borderRadius: '0.25rem' }}>
         <PrivateContent>
-          <PictureAsPdfIcon
-            style={{
-              fontSize: '2rem',
-              color: 'var(--mantine-color-gray-6)'
-            }}
-          />
+          {getFileTypeIcon(file)}
         </PrivateContent>
       </Center>
       {children}

frontend/src/core/components/shared/filePreview/getFileTypeIcon.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import JavascriptIcon from "@mui/icons-material/Javascript";
+import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
+import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
+import type { StirlingFileStub } from "@app/types/fileContext";
+import { detectFileExtension } from "@app/utils/fileUtils";
+
+type FileLike = File | StirlingFileStub;
+
+/**
+ * Returns an appropriate file type icon for the provided file.
+ * - Uses the real file type and extension to decide the icon.
+ * - No any-casts; accepts File or StirlingFileStub.
+ */
+export function getFileTypeIcon(file: FileLike, size: number | string = "2rem"): React.ReactElement {
+  const name = (file?.name ?? "").toLowerCase();
+  const mime = (file?.type ?? "").toLowerCase();
+  const ext = detectFileExtension(name);
+
+  // JavaScript
+  if (ext === "js" || mime.includes("javascript")) {
+    return <JavascriptIcon style={{ fontSize: size, color: "var(--mantine-color-gray-6)" }} />;
+  }
+
+  // PDF
+  if (ext === "pdf" || mime === "application/pdf") {
+    return <PictureAsPdfIcon style={{ fontSize: size, color: "var(--mantine-color-gray-6)" }} />;
+  }
+
+  // Fallback generic
+  return <InsertDriveFileIcon style={{ fontSize: size, color: "var(--mantine-color-gray-6)" }} />;
+}