ADD: keyboard handler

app/routes/view[.]html/BorderButtons.tsx

@@ -1,63 +1,57 @@
 import {
-  PiSelectionSlashLight,
-  PiSelectionLight,
-  PiSquareBold,
-  PiSquareLight,
+    PiSelectionSlashLight,
+    PiSelectionLight,
+    PiSquareBold,
+    PiSquareLight,
 } from "react-icons/pi";
 import { useSearchParams } from "@remix-run/react";
 
 import { ButtonGroup } from "@chakra-ui/react";
 
 
 import { ToolbarButton } from "~/components/ToolbarButton";
+import { IconType } from "react-icons";
 
 interface IProps {
-  boxSize: string;
-  size: string;
+    boxSize: string;
+    size: string;
 }
 
-export const BorderButtons = ({ size, boxSize }: IProps) => {
-  const [searchParams] = useSearchParams();
-  const currentBorder = searchParams.get("border") || "dash";
-
-  return (
-    <ButtonGroup isAttached>
-      <ToolbarButton
-        ariaLabel="No border"
-        boxSize={boxSize}
-        param="border"
-        value="none"
-        icon={PiSelectionSlashLight}
-        isActive={currentBorder === "none"}
-        size={size}
-      />
-      <ToolbarButton
-        ariaLabel="Dash border"
-        boxSize={boxSize}
-        param="border"
-        value="dash"
-        icon={PiSelectionLight}
-        isActive={currentBorder === "dash"}
-        size={size}
-      />
-      <ToolbarButton
-        ariaLabel="Thin border"
-        boxSize={boxSize}
-        param="border"
-        value="thin"
-        icon={PiSquareLight}
-        isActive={currentBorder === "thin"}
-        size={size}
-      />
-      <ToolbarButton
-        ariaLabel="Thick border"
-        boxSize={boxSize}
-        param="border"
-        value="thick"
-        icon={PiSquareBold}
-        isActive={currentBorder === "thick"}
-        size={size}
-      />
-    </ButtonGroup>
-  );
+type BorderDefinition = {
+    value: string;
+    icon: IconType;
+    label: string;
+}
+
+const borders: BorderDefinition[] = [
+    { value: "none", icon: PiSelectionSlashLight, label: "No border" },
+    { value: "dash", icon: PiSelectionLight, label: "Dash border" },
+    { value: "thin", icon: PiSquareLight, label: "Thin border" },
+    { value: "thick", icon: PiSquareBold, label: "Thick border" },
+];
+
+const BorderButtons = ({ size, boxSize }: IProps) => {
+    const [searchParams] = useSearchParams();
+    const currentBorder = searchParams.get("border") || "dash";
+
+    return (
+        <ButtonGroup isAttached>
+            {borders.map((border) => (
+                <ToolbarButton
+                    ariaLabel={border.label}
+                    boxSize={boxSize}
+                    icon={border.icon}
+                    isActive={currentBorder === border.value}
+                    key={border.value}
+                    param="border"
+                    size={size}
+                    value={border.value}
+                />))}
+        </ButtonGroup>
+    );
 };
+
+export {
+    BorderButtons,
+    borders
+}

app/routes/view[.]html/DesktopToolbar.tsx

@@ -30,7 +30,8 @@ export const DesktopToolbar = ({ currentZoom }: IProps) => {
   const backUrl = searchParams.get("backUrl") || "/";
   const backText = searchParams.get("backText") || "Exit";
 
-  const isDebug = (searchParams.get("debug") || "0") === "1";
+    const urlDebug = searchParams.get("debug")
+  const isDebug = (urlDebug || "0") === "1";
 
   return (
     <Flex
@@ -58,7 +59,7 @@ export const DesktopToolbar = ({ currentZoom }: IProps) => {
       <BackgroundButtons boxSize="1.75em" size="md" />
       <Spacer />
       <ButtonGroup gap="0.25">
-        <ToolbarButton
+        { urlDebug && <ToolbarButton
           ariaLabel={"Show debug info"}
           boxSize="1.75em"
           className="scriptonly"
@@ -67,7 +68,7 @@ export const DesktopToolbar = ({ currentZoom }: IProps) => {
           icon={PiBug}
           isActive={isDebug}
           size="md"
-        />
+        />}
         <ExitButton
           text={backText}
           boxSize="1.75em"

app/routes/view[.]html/KeyHandler.tsx

@@ -0,0 +1,43 @@
+
+import { borders } from './BorderButtons'
+
+
+function nextBorder(current: string): string {
+    const currentIndex = borders.findIndex((border) => border.value === current);
+    const nextIndex = (currentIndex + 1) % borders.length;
+    return borders[nextIndex].value;
+}
+
+function KeyHandler(searchParams: URLSearchParams, border: string, currentZoom: number, e: KeyboardEvent): URLSearchParams | null {
+
+
+
+    console.log(e);
+
+    switch (e.key.toLocaleLowerCase()) {
+        case '1':
+            searchParams.set('zoom', '1');
+            return searchParams;
+        case 'b':
+            searchParams.set('border', nextBorder(border));
+            return searchParams;
+        case 'i':
+            searchParams.set('zoom', 'icons');
+            return searchParams;
+        case 'm':
+            searchParams.set('zoom', 'max');
+            return searchParams;
+        case 'x':
+            searchParams.set('debug', searchParams.get('debug') === '1' ? '0' : '1');
+            return searchParams;
+        case '+':
+            searchParams.set('zoom', (currentZoom + 1).toString());
+            return searchParams;
+        case '-':
+            searchParams.set('zoom', (currentZoom > 1 ? currentZoom - 1 : currentZoom * 0.5).toString());
+            return searchParams;
+    }
+    return null;
+}
+
+export { KeyHandler };

app/routes/view[.]html/route.tsx

@@ -9,7 +9,7 @@ import {
     useBreakpointValue,
     useColorModeValue,
 } from "@chakra-ui/react";
-import { useSearchParams } from "@remix-run/react";
+import { useNavigate, useSearchParams } from "@remix-run/react";
 
 import { t } from "~/utils/i18n";
 import { safeParseFloat } from "~/utils/safeParseFloat";
@@ -18,9 +18,12 @@ import { DesktopToolbar } from "./DesktopToolbar";
 import { MobileToolbar } from "./MobileToolbar";
 import { calcMaxZoom } from "./calcMaxZoom";
 import { IconList } from "./IconList";
+import { KeyHandler } from "./KeyHandler";
 
 export default function ViewPage() {
     const [searchParams] = useSearchParams();
+    const navigate = useNavigate();
+
     const url = searchParams.get("url") || "";
 
     const [naturalWidth, setNaturalWidth] = React.useState(1);
@@ -140,7 +143,10 @@ export default function ViewPage() {
 
     useEffect(() => {
         function handleKeyDown(e: KeyboardEvent) {
-            console.log(e);
+            const sp = KeyHandler(searchParams, border, currentZoom, e);
+            if (sp != null) {
+                navigate(`?${sp.toString()}`);
+            }
         }
 
         document.addEventListener('keydown', handleKeyDown);
@@ -149,7 +155,7 @@ export default function ViewPage() {
         return function cleanup() {
             document.removeEventListener('keydown', handleKeyDown);
         }
-    }, []);
+    }, [border, currentZoom, navigate, searchParams]);
 
     return (
         <VStack w="100%" h="100vh" spacing="0" style={{ overflow: "hidden" }}>