From 5ea4f8b897553dc583fded5fd1f7774505f83517 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mnvr.in>
Date: Wed, 5 Mar 2025 14:47:29 +0530
Subject: [PATCH] shortcut 1

---
 .../base/components/utils/mui-theme.d.ts      |  8 ++++
 web/packages/base/components/utils/theme.ts   | 13 +++++
 .../gallery/components/viewer/FileViewer.tsx  | 47 +++++++++++++++----
 3 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/web/packages/base/components/utils/mui-theme.d.ts b/web/packages/base/components/utils/mui-theme.d.ts
index e2d11c1756..6f15714aba 100644
--- a/web/packages/base/components/utils/mui-theme.d.ts
+++ b/web/packages/base/components/utils/mui-theme.d.ts
@@ -140,6 +140,14 @@ declare module "@mui/material/styles" {
              * The color of a switch when it is enabled.
              */
             switchOn: string;
+            /**
+             * A subset of the dark mode colors, fixed so that they don't change
+             * even when the app is in light mode.
+             */
+            dark: {
+                background: TypeBackground;
+                text: TypeText;
+            };
         };
         /**
          * MUI as of v6 does not allow customizing shadows easily. This is due
diff --git a/web/packages/base/components/utils/theme.ts b/web/packages/base/components/utils/theme.ts
index 960637e135..f1c51f7fe9 100644
--- a/web/packages/base/components/utils/theme.ts
+++ b/web/packages/base/components/utils/theme.ts
@@ -151,6 +151,19 @@ const _colors = {
             light: "#ff6565",
         },
         switchOn: "#2eca45",
+        dark: {
+            // Duplicated from "dark" below.
+            background: {
+                default: "#000",
+                paper: "#1b1b1b",
+                paper2: "#252525",
+            },
+            text: {
+                base: "#fff",
+                muted: "rgba(255 255 255 / 0.70)",
+                faint: "rgba(255 255 255 / 0.50)",
+            },
+        },
     },
     light: {
         // Keep these solid.
diff --git a/web/packages/gallery/components/viewer/FileViewer.tsx b/web/packages/gallery/components/viewer/FileViewer.tsx
index cf0ccea275..1b020cdb68 100644
--- a/web/packages/gallery/components/viewer/FileViewer.tsx
+++ b/web/packages/gallery/components/viewer/FileViewer.tsx
@@ -43,7 +43,14 @@ import EditIcon from "@mui/icons-material/Edit";
 import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
 import FullscreenExitOutlinedIcon from "@mui/icons-material/FullscreenExitOutlined";
 import FullscreenOutlinedIcon from "@mui/icons-material/FullscreenOutlined";
-import { Button, Menu, MenuItem, styled, Typography } from "@mui/material";
+import {
+    Button,
+    Divider,
+    Menu,
+    MenuItem,
+    styled,
+    Typography,
+} from "@mui/material";
 import { t } from "i18next";
 import React, {
     useCallback,
@@ -307,9 +314,13 @@ const FileViewer: React.FC<FileViewerProps> = ({
         useState<HTMLElement | null>(null);
     const [openImageEditor, setOpenImageEditor] = useState(false);
     const [isFullscreen, setIsFullscreen] = useState(false);
+
     const { show: showConfirmDelete, props: confirmDeleteVisibilityProps } =
         useModalVisibility();
 
+    const { show: showShortcuts, props: shortcutsVisibilityProps } =
+        useModalVisibility();
+
     // Callbacks to be invoked (only once) the next time we get an update to the
     // `files` or `favoriteFileIDs` props.
     //
@@ -598,7 +609,7 @@ const FileViewer: React.FC<FileViewerProps> = ({
         setIsFullscreen(!!document.fullscreenElement);
     }, []);
 
-    const toggleFullscreen = useCallback(() => {
+    const handleToggleFullscreen = useCallback(() => {
         void (
             document.fullscreenElement
                 ? document.exitFullscreen()
@@ -721,7 +732,7 @@ const FileViewer: React.FC<FileViewerProps> = ({
                     activeImageURL && (
                         <MoreMenuItem onClick={handleCopyImage}>
                             <MoreMenuItemTitle>
-                                {/*TODO */ pt("Copy image")}
+                                {/*TODO */ pt("Copy as PNG")}
                             </MoreMenuItemTitle>
                             {/* Tweak icon size to visually fit better with neighbours */}
                             <ContentCopyIcon
@@ -737,7 +748,7 @@ const FileViewer: React.FC<FileViewerProps> = ({
                         <EditIcon />
                     </MoreMenuItem>
                 )}
-                <MoreMenuItem onClick={toggleFullscreen}>
+                <MoreMenuItem onClick={handleToggleFullscreen}>
                     <MoreMenuItemTitle>
                         {
                             /*TODO */ isFullscreen
@@ -751,6 +762,14 @@ const FileViewer: React.FC<FileViewerProps> = ({
                         <FullscreenOutlinedIcon />
                     )}
                 </MoreMenuItem>
+                <Divider sx={{}} />
+                <MoreMenuItem onClick={showShortcuts}>
+                    <Typography
+                        sx={{ opacity: 0.7 /* theme.dark.background.paper2 */ }}
+                    >
+                        {pt("Shortcuts")}
+                    </Typography>
+                </MoreMenuItem>
             </MoreMenu>
             {/* TODO(PS): Fix imports */}
             <ConfirmDeleteFileDialog
@@ -778,16 +797,19 @@ const Container = styled("div")`
     }
 `;
 
-const MoreMenu = styled(Menu)`
+const MoreMenu = styled(Menu)(
+    ({ theme }) => `
     & .MuiPaper-root {
-        background-color: #1b1b1b /* theme.dark.background.paper */;
+        background-color: ${theme.vars.palette.fixed.dark.background.paper};
     }
     & .MuiList-root {
         padding-block: 2px;
     }
-`;
+`,
+);
 
-const MoreMenuItem = styled(MenuItem)`
+const MoreMenuItem = styled(MenuItem)(
+    ({ theme }) => `
     min-width: 210px;
 
     /* MUI MenuItem default implementation has a minHeight of "48px" below the
@@ -805,18 +827,23 @@ const MoreMenuItem = styled(MenuItem)`
     color: rgba(255 255 255 / 0.85);
     &:hover {
         color: rgba(255 255 255 / 1);
-        background-color: #252525 /* theme.dark.background.paper2 */;
+        background-color: ${theme.vars.palette.fixed.dark.background.paper2}
     }
 
     .MuiSvgIcon-root {
         font-size: 20px;
     }
-`;
+`,
+);
 
 const MoreMenuItemTitle: React.FC<React.PropsWithChildren> = ({ children }) => (
     <Typography sx={{ fontWeight: "medium" }}>{children}</Typography>
 );
 
+const MoreMenuItemMinorTitle: React.FC<React.PropsWithChildren> = ({
+    children,
+}) => <Typography sx={{ fontWeight: "medium" }}>{children}</Typography>;
+
 const fileIsEditableImage = (file: EnteFile) => {
     // Only images are editable.
     if (file.metadata.fileType !== FileType.image) return false;