UI refinements, share URL QR code generation

src/viser/client/package.json

@@ -32,6 +32,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.10",
+    "react-qr-code": "^2.0.12",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.10.0",
     "redux": "^4.2.1",

src/viser/client/src/App.tsx

@@ -174,8 +174,7 @@ function ViewerContents() {
           smallerThan={"xs"}
           styles={{
             right: 0,
-            bottom:
-              "4.5em" /* 4em to account for BottomPanel minimum height. */,
+            bottom: "3.5em" /* account for BottomPanel minimum height. */,
           }}
         >
           <Box

src/viser/client/src/ControlPanel/BottomPanel.tsx

@@ -57,10 +57,11 @@ BottomPanel.Handle = function BottomPanelHandle({
     <Box
       color="red"
       sx={(theme) => ({
-        backgroundColor:
+        borderBottom: panelContext.expanded ? "1px solid" : undefined,
+        borderColor:
           theme.colorScheme == "dark"
-            ? theme.colors.dark[5]
-            : theme.colors.gray[1],
+            ? theme.colors.dark[4]
+            : theme.colors.gray[3],
         cursor: "pointer",
         position: "relative",
         fontWeight: 400,

src/viser/client/src/ControlPanel/ControlPanel.tsx

@@ -1,7 +1,8 @@
-import { useDisclosure, useMediaQuery } from "@mantine/hooks";
+import { useDisclosure, useMediaQuery, useToggle } from "@mantine/hooks";
 import GeneratedGuiContainer from "./Generated";
 import { ViewerContext } from "../App";
 
+import QRCode from "react-qr-code";
 import ServerControls from "./ServerControls";
 import {
   ActionIcon,
@@ -28,6 +29,8 @@
   IconCopy,
   IconCheck,
   IconPlugConnectedX,
+  IconQrcode,
+  IconQrcodeOff,
 } from "@tabler/icons-react";
 import React from "react";
 import BottomPanel from "./BottomPanel";
@@ -195,6 +198,8 @@
   const [shareModalOpened, { open: openShareModal, close: closeShareModal }] =
     useDisclosure(false);
 
+  const [showQrCode, { toggle: toggleShowQrcode }] = useDisclosure();
+
   // Turn off loader when share URL is set.
   React.useEffect(() => {
     if (shareUrl !== null) {
@@ -208,6 +213,7 @@
   if (viewer.useGui((state) => state.theme).show_share_button === false)
     return null;
 
+  const theme = useMantineTheme();
   return (
     <>
       <Tooltip
@@ -273,13 +279,14 @@
           </>
         ) : (
           <>
-            <Text>Share URL is connected:</Text>
-            <Stack my="md">
+            <Text>Share URL is connected.</Text>
+            <Stack spacing="xs" my="md">
               <TextInput value={shareUrl} />
               <Flex justify="space-between" columnGap="0.5em" align="center">
                 <CopyButton value={shareUrl}>
                   {({ copied, copy }) => (
                     <Button
+                      sx={{ width: "50%" }}
                       leftIcon={
                         copied ? (
                           <IconCheck height="1.375em" width="1.375em" />
@@ -289,12 +296,18 @@
                       }
                       onClick={copy}
                       variant={copied ? "outline" : "filled"}
-                      style={{ flexGrow: "1" }}
                     >
-                      {copied ? "Copied!" : "Copy Share URL"}
+                      {copied ? "Copied!" : "Copy URL"}
                     </Button>
                   )}
                 </CopyButton>
+                <Button
+                  sx={{ flexGrow: 1 }}
+                  leftIcon={showQrCode ? <IconQrcodeOff /> : <IconQrcode />}
+                  onClick={toggleShowQrcode}
+                >
+                  QR Code
+                </Button>
                 <Tooltip zIndex={100} label="Disconnect" withinPortal>
                   <Button
                     color="red"
@@ -309,6 +322,19 @@
                   </Button>
                 </Tooltip>
               </Flex>
+              <Collapse in={showQrCode}>
+                <QRCode
+                  value={shareUrl}
+                  fgColor={theme.colorScheme === "dark" ? "#ffffff" : "#000000"}
+                  bgColor="rgba(0,0,0,0)"
+                  level="M"
+                  style={{
+                    width: "100%",
+                    height: "auto",
+                    margin: "1em auto 0 auto",
+                  }}
+                />
+              </Collapse>
             </Stack>
           </>
         )}

src/viser/client/src/ControlPanel/SidebarPanel.tsx

@@ -63,14 +63,30 @@ export default function SidebarPanel({
     >
       {collapsedView}
       {/* Using an <Aside /> below will break Mantine color inputs. */}
+      {/* We create two <Paper /> elements. The first is only used for a drop
+      shadow. Note the z-index difference, which is used to put the shadow
+      behind the titlebar but the content in front of it. (and thus also in
+      front of the titlebar's shadow) */}
       <Paper
         shadow="0 0 1em 0 rgba(0,0,0,0.1)"
+        sx={{
+          width: collapsed ? 0 : width,
+          height: "100%",
+          right: 0,
+          boxSizing: "content-box",
+          transition: "width 0.5s 0s",
+          zIndex: 8,
+          position: "absolute",
+        }}
+      ></Paper>
+      <Paper
         component={ScrollArea}
+        radius={0}
         sx={{
           width: collapsed ? 0 : width,
           boxSizing: "content-box",
           transition: "width 0.5s 0s",
-          zIndex: 10,
+          zIndex: 20,
         }}
       >
         <Box

src/viser/client/src/Titlebar.tsx

@@ -142,7 +142,7 @@ export function Titlebar() {
       sx={{
         margin: 0,
         border: "0",
-        zIndex: 5,
+        zIndex: 10,
       }}
     >
       <Paper

src/viser/client/yarn.lock

@@ -3869,6 +3869,11 @@ punycode@^2.1.0:
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
+[email protected]:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
+  integrity sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
@@ -3911,6 +3916,14 @@ react-merge-refs@^1.1.0:
   resolved "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.1.0.tgz"
   integrity sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==
 
+react-qr-code@^2.0.12:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/react-qr-code/-/react-qr-code-2.0.12.tgz#98f99e9ad5ede46d73ab819e2dd9925c5f5d7a2d"
+  integrity sha512-k+pzP5CKLEGBRwZsDPp98/CAJeXlsYRHM2iZn1Sd5Th/HnKhIZCSg27PXO58zk8z02RaEryg+60xa4vyywMJwg==
+  dependencies:
+    prop-types "^15.8.1"
+    qr.js "0.0.0"
+
 react-reconciler@^0.27.0:
   version "0.27.0"
   resolved "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.27.0.tgz"