fix: optimize ui

Signed-off-by: Innei <i@innei.in>

src/app/(app)/layout.tsx

@@ -174,7 +174,7 @@ export default async function RootLayout(props: PropsWithChildren) {
               <SearchPanelWithHotKey />
               <Analyze />
             </WebAppProviders>
-            <ToastContainer stacked />
+            <ToastContainer />
             <ScrollTop />
           </body>
         </html>

src/app/(dashboard)/layout.tsx

@@ -79,7 +79,7 @@ export default async function RootLayout({ children }: PropsWithChildren) {
             <FABContainer />
           </ClientOnly>
         </DashboardAppProviders>
-        <ToastContainer stacked />
+        <ToastContainer />
       </body>
     </html>
   )

src/components/modules/shared/SearchFAB.tsx

@@ -17,11 +17,15 @@ import { atom, useAtomValue, useSetAtom } from 'jotai'
 import Link from 'next/link'
 import type { KeyboardEventHandler } from 'react'
 
+import { useIsLogged } from '~/atoms'
 import { EmptyIcon } from '~/components/icons/empty'
+import { MotionButtonBase } from '~/components/ui/button'
 import { FABPortable } from '~/components/ui/fab'
+import { FloatPopover } from '~/components/ui/float-popover'
 import { microDampingPreset } from '~/constants/spring'
 import useDebounceValue from '~/hooks/common/use-debounce-value'
 import { useIsClient } from '~/hooks/common/use-is-client'
+import { getToken } from '~/lib/cookie'
 import { noopArr } from '~/lib/noop'
 import { apiClient } from '~/lib/request'
 import { jotaiStore } from '~/lib/store'
@@ -212,6 +216,7 @@ const SearchPanelImpl = () => {
     [data.length],
   )
 
+  const isLogged = useIsLogged()
   return (
     <m.div
       className={clsx(
@@ -279,7 +284,27 @@ const SearchPanelImpl = () => {
         </ul>
       </div>
 
-      <div className="flex flex-shrink-0 items-center justify-end px-4 py-2">
+      <div className="flex flex-shrink-0 items-center justify-between px-4 py-2">
+        {isLogged ? (
+          <MotionButtonBase
+            onClick={() => {
+              window.open(
+                `${apiClient.search.proxy('algolia')('import-json').toString(true)}?token=${getToken()}`,
+              )
+            }}
+          >
+            <FloatPopover
+              type="tooltip"
+              triggerElement={
+                <i className="icon-[mingcute--download-2-line]" />
+              }
+            >
+              下载搜索索引文件以便导入 algolia 搜索
+            </FloatPopover>
+          </MotionButtonBase>
+        ) : (
+          <div />
+        )}
         <a
           href="https://www.algolia.com"
           target="_blank"

src/components/ui/editor/Milkdown/plugins/Excalidraw.tsx

@@ -260,10 +260,13 @@ const ExcalidrawBoard: FC = () => {
           }
 
           const file = new File([currentData], 'file.excalidraw', {})
-          toast.info('正在上传文件')
+          const infoToast = toast.info('正在上传文件', {
+            position: 'top-right',
+          })
           const result = await uploadFileToServer(FileTypeEnum.File, file)
 
-          toast.success('上传成功')
+          toast.success('上传成功', { position: 'top-right' })
+          toast.dismiss(infoToast)
           const refName = `ref:file/${result.name}`
           alreadyUploadValueFileMap[currentData] = refName
           return refName
@@ -332,7 +335,7 @@ const ExcalidrawBoard: FC = () => {
                     await navigator.clipboard.writeText(
                       `\`\`\`excalidraw\n${value}\n\`\`\``,
                     )
-                    toast.success('已复制')
+                    toast.success('已复制', { position: 'top-right' })
                   }}
                 >
                   复制

src/components/ui/editor/Milkdown/plugins/Image.tsx

@@ -92,6 +92,7 @@ const Image = () => {
         </div>
         {!isOnline && (
           <FloatPopover
+            type="tooltip"
             placement="right"
             triggerElement={
               <MotionButtonBase

src/lib/toast.ts

@@ -33,6 +33,8 @@ interface ToastCustom {
   info(message: string, options?: ToastOptions & CustomToastOptions): Id
   warn(message: string, options?: ToastOptions & CustomToastOptions): Id
   error(message: string, options?: ToastOptions & CustomToastOptions): Id
+
+  dismiss(id: Id): void
 }
 
 // @ts-ignore
@@ -55,3 +57,11 @@ export const toast: ToastCustom = (
     options?: ToastOptions & CustomToastOptions,
   ) => toast(message, type as TypeOptions, options)
 })
+
+Object.assign(toast, {
+  dismiss: Toast.dismiss,
+})
+
+if (typeof window !== 'undefined') {
+  window.toast = toast
+}

src/styles/index.css

@@ -6,5 +6,6 @@
 @import './clerk.css';
 @import './image-zoom.css';
 @import './toastify.css';
+
 @import './theme.css';
 @import './webfont.css';

src/styles/toastify.css

@@ -5,12 +5,44 @@
   bottom: 30px;
   right: 12px;
   width: 300px;
+  pointer-events: all !important;
 }
+
+:root {
+  --toastify-toast-width: 320px;
+  --toastify-z-index: 9999;
+  --toastify-toast-min-height: 64px;
+  --toastify-toast-max-height: 800px;
+  --toastify-toast-offset: 16px;
+  --toastify-toast-top: max(
+    var(--toastify-toast-offset),
+    env(safe-area-inset-top)
+  );
+  --toastify-toast-right: max(
+    var(--toastify-toast-offset),
+    env(safe-area-inset-right)
+  );
+  --toastify-toast-left: max(
+    var(--toastify-toast-offset),
+    env(safe-area-inset-left)
+  );
+  --toastify-toast-bottom: max(
+    var(--toastify-toast-offset),
+    env(safe-area-inset-bottom)
+  );
+}
+
 .Toastify__toast-icon {
   display: none;
 }
 .Toastify__toast-container {
   width: 100%;
+  z-index: var(--toastify-z-index);
+  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
+  position: fixed;
+  padding: 4px;
+  width: var(--toastify-toast-width);
+  box-sizing: border-box;
 }
 
 .Toastify--animate {
@@ -39,6 +71,34 @@
 .Toastify__bounce-exit--top-center {
   animation-name: Toastify__bounceOutUp;
 }
+
+.Toastify__toast-container--top-left {
+  top: var(--toastify-toast-top);
+  left: var(--toastify-toast-left);
+}
+.Toastify__toast-container--top-center {
+  top: var(--toastify-toast-top);
+  left: 50%;
+  transform: translateX(-50%);
+}
+.Toastify__toast-container--top-right {
+  top: var(--toastify-toast-top);
+  right: var(--toastify-toast-right);
+}
+.Toastify__toast-container--bottom-left {
+  bottom: var(--toastify-toast-bottom);
+  left: var(--toastify-toast-left);
+}
+.Toastify__toast-container--bottom-center {
+  bottom: var(--toastify-toast-bottom);
+  left: 50%;
+  transform: translateX(-50%);
+}
+.Toastify__toast-container--bottom-right {
+  bottom: var(--toastify-toast-bottom);
+  right: var(--toastify-toast-right);
+}
+
 @keyframes Toastify__bounceOutUp {
   20% {
     transform: translate3d(0, -10px, 0);
@@ -128,3 +188,50 @@
     transform: translate3d(2000px, 0, 0);
   }
 }
+/* 
+.Toastify__toast--stacked {
+  position: absolute;
+  width: 100%;
+  transform: translate3d(0, var(--y), 0) scale(var(--s));
+  transition: transform 0.3s;
+}
+.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,
+.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
+  transition: opacity 0.1s;
+}
+.Toastify__toast--stacked[data-collapsed='false'] {
+  overflow: visible;
+}
+.Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * {
+  opacity: 0;
+}
+.Toastify__toast--stacked:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: calc(var(--g) * 1px);
+  bottom: 100%;
+}
+.Toastify__toast--stacked[data-pos='top'] {
+  top: 0;
+}
+.Toastify__toast--stacked[data-pos='bot'] {
+  bottom: 0;
+}
+.Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before {
+  transform-origin: top;
+}
+.Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before {
+  transform-origin: bottom;
+}
+.Toastify__toast--stacked:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  transform: scaleY(3);
+  z-index: -1;
+} */