fix(previews/office): improve ux and dx

package.json

@@ -90,7 +90,6 @@
     "highlight.js": "^11.11.1",
     "hls.js": "^1.6.16",
     "ini": "^7.0.0",
-    "just-once": "^2.2.0",
     "katex": "^0.16.45",
     "libheif-js": "^1.19.8",
     "lightgallery": "^2.9.0",

src/app/index.css

@@ -48,3 +48,8 @@
 .hope-select__option {
   flex-shrink: 0;
 }
+
+/* Fixes: https://github.com/OpenListTeam/OpenList-Frontend/issues/26 */
+.hope-notification__list {
+  width: unset;
+}

src/components/Base.tsx

@@ -14,12 +14,24 @@ import {
   SelectOptionText,
   SelectTrigger,
   SelectValue,
-  Icon,
+  IconButton,
+  Tooltip,
+  VStack,
 } from "@hope-ui/solid"
 import { SwitchColorMode } from "./SwitchColorMode"
-import { ComponentProps, For, mergeProps, Show, JSXElement } from "solid-js"
+import {
+  ComponentProps,
+  For,
+  mergeProps,
+  Show,
+  JSXElement,
+  createSignal,
+  onMount,
+  onCleanup,
+} from "solid-js"
 import { AiOutlineFullscreen, AiOutlineFullscreenExit } from "solid-icons/ai"
-import { hoverColor } from "~/utils"
+import { BsFullscreen, BsFullscreenExit } from "solid-icons/bs"
+import { useT } from "~/hooks"
 
 export const Error = (props: {
   msg: string
@@ -63,35 +75,109 @@ export const Error = (props: {
   )
 }
 
-export const BoxWithFullScreen = (props: Parameters<typeof Box>[0]) => {
-  const { isOpen, onToggle } = createDisclosure()
+export const BoxWithFullScreen = (
+  props: Parameters<typeof Box>[0] & { extraButtons?: JSXElement },
+) => {
+  const { isOpen: isFullView, onToggle } = createDisclosure()
+  const [isFullScreen, setIsFullScreen] = createSignal(false)
+  let containerRef: HTMLDivElement
+  const t = useT()
+
+  const toggleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      containerRef!.requestFullscreen()
+    } else {
+      document.exitFullscreen()
+    }
+  }
+
+  onMount(() => {
+    const fsHandler = () => setIsFullScreen(!!document.fullscreenElement)
+    document.addEventListener("fullscreenchange", fsHandler)
+    onCleanup(() => {
+      document.removeEventListener("fullscreenchange", fsHandler)
+    })
+  })
+
   return (
     <Box
-      pos={isOpen() ? "fixed" : "relative"}
-      w={isOpen() ? "100vw" : props.w}
-      h={isOpen() ? "100vh" : props.h}
+      ref={containerRef!}
+      pos={isFullView() ? "fixed" : "relative"}
+      w={isFullView() ? "100vw" : props.w}
+      h={isFullView() ? "100vh" : props.h}
       top={0}
       left={0}
-      zIndex={1}
+      zIndex={isFullView() ? "$modal" : undefined}
       transition="all 0.2s ease-in-out"
       css={{
-        backdropFilter: isOpen() ? "blur(5px)" : undefined,
+        backdropFilter: isFullView() ? "blur(5px)" : undefined,
       }}
     >
       {props.children}
-      <Icon
+      <VStack
         pos="absolute"
         right="$2"
         bottom="$2"
-        aria-label="toggle fullscreen"
-        as={isOpen() ? AiOutlineFullscreenExit : AiOutlineFullscreen}
-        onClick={onToggle}
-        cursor="pointer"
-        rounded="$md"
-        bgColor={hoverColor()}
-        p="$1"
-        boxSize="$7"
-      />
+        spacing="$2"
+        opacity="0.7"
+        _hover={{ opacity: "1" }}
+        transition="opacity 0.3s ease"
+        pointerEvents="auto"
+        zIndex="$docked"
+      >
+        {props.extraButtons}
+        <Show when={!isFullScreen()}>
+          {/* Full view toggle */}
+          <Tooltip
+            label={
+              isFullView()
+                ? t("home.preview.exit_fullview")
+                : t("home.preview.fullview")
+            }
+            withArrow
+          >
+            <IconButton
+              aria-label={
+                isFullView()
+                  ? t("home.preview.exit_fullview")
+                  : t("home.preview.fullview")
+              }
+              icon={isFullView() ? <BsFullscreenExit /> : <BsFullscreen />}
+              onClick={onToggle}
+              colorScheme="neutral"
+              size="sm"
+            />
+          </Tooltip>
+        </Show>
+
+        {/* Native fullscreen toggle */}
+        <Tooltip
+          label={
+            isFullScreen()
+              ? t("home.preview.exit_fullscreen")
+              : t("home.preview.fullscreen")
+          }
+          withArrow
+        >
+          <IconButton
+            aria-label={
+              isFullScreen()
+                ? t("home.preview.exit_fullscreen")
+                : t("home.preview.fullscreen")
+            }
+            icon={
+              isFullScreen() ? (
+                <AiOutlineFullscreenExit />
+              ) : (
+                <AiOutlineFullscreen />
+              )
+            }
+            onClick={toggleFullscreen}
+            colorScheme="neutral"
+            size="sm"
+          />
+        </Tooltip>
+      </VStack>
     </Box>
   )
 }

src/components/EncodingSelect.tsx

@@ -80,7 +80,7 @@ export function EncodingSelect(props: {
       _hover={{
         opacity: 1,
       }}
-      zIndex={1}
+      zIndex="$docked"
     >
       <SelectWrapper
         options={encodingLabels.map((label) => ({

src/components/Markdown.tsx

@@ -1,7 +1,6 @@
 import { Anchor, Box, List, ListItem, useColorModeValue } from "@hope-ui/solid"
 import { createStorageSignal } from "@solid-primitives/storage"
 import { clsx } from "clsx"
-import once from "just-once"
 import rehypeRaw from "rehype-raw"
 import rehypeSanitize, { defaultSchema } from "rehype-sanitize"
 import rehypeStringify from "rehype-stringify"
@@ -14,7 +13,15 @@ import { unified } from "unified"
 import { useCDN, useParseText, useRouter } from "~/hooks"
 import { useScrollListener } from "~/pages/home/toolbar/BackTop.jsx"
 import { getMainColor, getSettingBool, me } from "~/store"
-import { api, notify, pathDir, pathJoin, pathResolve } from "~/utils"
+import {
+  api,
+  loadCSS,
+  loadScriptIIFE,
+  notify,
+  pathDir,
+  pathJoin,
+  pathResolve,
+} from "~/utils"
 import { isMobile } from "~/utils/compatibility.js"
 import hljs from "highlight.js"
 import { EncodingSelect } from "."
@@ -148,25 +155,6 @@ function MarkdownToc(props: {
 
 const { katexCSSPath, mermaidJSPath } = useCDN()
 
-const insertKatexCSS = once(() => {
-  const link = document.createElement("link")
-  link.rel = "stylesheet"
-  link.href = katexCSSPath()
-  document.head.appendChild(link)
-})
-
-const loadMermaidJS = once(
-  () =>
-    new Promise<void>((resolve, reject) => {
-      if (window.mermaid) return resolve()
-      const script = document.createElement("script")
-      script.src = mermaidJSPath()
-      script.onload = () => resolve()
-      script.onerror = () => reject(new Error("Failed to load mermaid"))
-      document.body.appendChild(script)
-    }),
-)
-
 async function renderMarkdown(
   content: string,
   sanitize: boolean,
@@ -180,15 +168,17 @@ async function renderMarkdown(
   if (hasMath) {
     const { default: remarkMath } = await import("remark-math")
     processor.use(remarkMath)
-    insertKatexCSS()
-  }
-  if (hasMermaid) {
-    await loadMermaidJS().catch(() =>
+    await loadCSS(katexCSSPath(), "katex").catch(() =>
       notify.error(
-        "Failed to load mermaid.js, mermaid diagrams will not be rendered",
+        "Failed to load KaTeX CSS, math formulas will not be rendered",
       ),
     )
   }
+  if (hasMermaid) {
+    await loadScriptIIFE(mermaidJSPath(), "mermaid").catch(() =>
+      notify.error("Failed to load Mermaid JS, diagrams will not be rendered"),
+    )
+  }
 
   processor.use(remarkRehype, { allowDangerousHtml: true }).use(rehypeRaw)
 

src/components/SwitchLanguage.tsx

@@ -59,7 +59,7 @@ export const SwitchLanguage = <C extends ElementType = "button">(
             pos="fixed"
             top={0}
             bg={useColorModeValue("$blackAlpha4", "$whiteAlpha4")()}
-            zIndex="9000"
+            zIndex="$notification"
           >
             <Spinner
               thickness="4px"