chore: use drawer instead of dialog

2025-04-18 05:05:29 +00:00 · 2023-11-15 22:14:36 +08:00 · 2023-11-15 22:14:36 +08:00 · 2296eb96ef
commit 2296eb96ef
parent 30d9dd04bb
12 changed files with 105 additions and 141 deletions
--- a/frontend/web/src/components/CollectionView.tsx
+++ b/frontend/web/src/components/CollectionView.tsx
@ -11,7 +11,7 @@ import { useAppSelector } from "@/stores";
 import useCollectionStore from "@/stores/v1/collection";
 import { Collection } from "@/types/proto/api/v2/collection_service";
 import { showCommonDialog } from "./Alert";
-import CreateCollectionDialog from "./CreateCollectionDialog";
+import CreateCollectionDialog from "./CreateCollectionDrawer";
 import Icon from "./Icon";
 import ShortcutView from "./ShortcutView";
 import Dropdown from "./common/Dropdown";
--- a/frontend/web/src/components/CreateCollectionDrawer.tsx
+++ b/frontend/web/src/components/CreateCollectionDrawer.tsx
@ -1,4 +1,4 @@
-import { Button, Input, Modal, ModalDialog, Radio, RadioGroup } from "@mui/joy";
+import { Button, DialogActions, DialogContent, DialogTitle, Drawer, Input, ModalClose, Radio, RadioGroup } from "@mui/joy";
 import { isUndefined } from "lodash-es";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
@ -22,7 +22,7 @@ interface State {
  collectionCreate: Collection;
 }

-const CreateCollectionDialog: React.FC<Props> = (props: Props) => {
+const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
  const { onClose, onConfirm, collectionId } = props;
  const { t } = useTranslation();
  const collectionStore = useCollectionStore();
@ -141,15 +141,11 @@ const CreateCollectionDialog: React.FC<Props> = (props: Props) => {
  };

  return (
-    <Modal open={true}>
-      <ModalDialog>
-        <div className="w-full flex flex-row justify-between items-center">
-          <span className="text-lg font-medium">{isCreating ? "Create Collection" : "Edit Collection"}</span>
-          <Button variant="plain" onClick={onClose}>
-            <Icon.X className="w-5 h-auto text-gray-600" />
-          </Button>
-        </div>
-        <div className="overflow-y-auto overflow-x-hidden w-80 sm:w-96 max-w-full">
+    <Drawer anchor="right" open={true} onClose={onClose}>
+      <DialogTitle>{isCreating ? "Create Collection" : "Edit Collection"}</DialogTitle>
+      <ModalClose />
+      <DialogContent className="max-w-full sm:max-w-sm">
+        <div className="overflow-y-auto w-full mt-2 px-3">
          <div className="w-full flex flex-col justify-start items-start mb-3">
            <span className="mb-2">
              Name <span className="text-red-600">*</span>
@ -241,19 +237,20 @@ const CreateCollectionDialog: React.FC<Props> = (props: Props) => {
              )}
            </div>
          </div>
-
-          <div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
-            <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
-              {t("common.cancel")}
-            </Button>
-            <Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
-              {t("common.save")}
-            </Button>
-          </div>
        </div>
-      </ModalDialog>
-    </Modal>
+      </DialogContent>
+      <DialogActions>
+        <div className="w-full flex flex-row justify-end items-center px-3 pb-4 space-x-2">
+          <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
+            {t("common.cancel")}
+          </Button>
+          <Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
+            {t("common.save")}
+          </Button>
+        </div>
+      </DialogActions>
+    </Drawer>
  );
 };

-export default CreateCollectionDialog;
+export default CreateCollectionDrawer;
--- a/frontend/web/src/components/CreateShortcutDrawer.tsx
+++ b/frontend/web/src/components/CreateShortcutDrawer.tsx
@ -1,4 +1,16 @@
-import { Button, Divider, Input, Modal, ModalDialog, Radio, RadioGroup, Textarea } from "@mui/joy";
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  Drawer,
+  Input,
+  ModalClose,
+  Radio,
+  RadioGroup,
+  Textarea,
+} from "@mui/joy";
 import classnames from "classnames";
 import { isUndefined, uniq } from "lodash-es";
 import { useEffect, useState } from "react";
@ -22,7 +34,7 @@ interface State {

 const visibilities: Visibility[] = ["PRIVATE", "WORKSPACE", "PUBLIC"];

-const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
+const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
  const { onClose, onConfirm, shortcutId, initialShortcut } = props;
  const { t } = useTranslation();
  const { shortcutList } = useAppSelector((state) => state.shortcut);
@ -199,15 +211,11 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
  };

  return (
-    <Modal open={true}>
-      <ModalDialog>
-        <div className="flex flex-row justify-between items-center w-80 sm:w-96">
-          <span className="text-lg font-medium">{isCreating ? "Create Shortcut" : "Edit Shortcut"}</span>
-          <Button variant="plain" onClick={onClose}>
-            <Icon.X className="w-5 h-auto text-gray-600" />
-          </Button>
-        </div>
-        <div className="overflow-y-auto overflow-x-hidden">
+    <Drawer anchor="right" open={true} onClose={onClose}>
+      <DialogTitle>{isCreating ? "Create Shortcut" : "Edit Shortcut"}</DialogTitle>
+      <ModalClose />
+      <DialogContent className="max-w-full sm:max-w-sm">
+        <div className="overflow-y-auto w-full mt-2 px-3">
          <div className="w-full flex flex-col justify-start items-start mb-3">
            <span className="mb-2">
              Name <span className="text-red-600">*</span>
@ -362,19 +370,20 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
              </div>
            )}
          </div>
-
-          <div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
-            <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
-              {t("common.cancel")}
-            </Button>
-            <Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
-              {t("common.save")}
-            </Button>
-          </div>
        </div>
-      </ModalDialog>
-    </Modal>
+      </DialogContent>
+      <DialogActions>
+        <div className="w-full flex flex-row justify-end items-center px-3 pb-4 space-x-2">
+          <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
+            {t("common.cancel")}
+          </Button>
+          <Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
+            {t("common.save")}
+          </Button>
+        </div>
+      </DialogActions>
+    </Drawer>
  );
 };

-export default CreateShortcutDialog;
+export default CreateShortcutDrawer;
--- a/frontend/web/src/components/ShortcutActionsDropdown.tsx
+++ b/frontend/web/src/components/ShortcutActionsDropdown.tsx
@ -4,7 +4,7 @@ import useNavigateTo from "@/hooks/useNavigateTo";
 import { shortcutService } from "../services";
 import useUserStore from "../stores/v1/user";
 import { showCommonDialog } from "./Alert";
-import CreateShortcutDialog from "./CreateShortcutDialog";
+import CreateShortcutDrawer from "./CreateShortcutDrawer";
 import GenerateQRCodeDialog from "./GenerateQRCodeDialog";
 import Icon from "./Icon";
 import Dropdown from "./common/Dropdown";
@ -18,7 +18,7 @@ const ShortcutActionsDropdown = (props: Props) => {
  const { t } = useTranslation();
  const navigateTo = useNavigateTo();
  const currentUser = useUserStore().getCurrentUser();
-  const [showEditDialog, setShowEditDialog] = useState<boolean>(false);
+  const [showEditDrawer, setShowEditDrawer] = useState<boolean>(false);
  const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false);
  const havePermission = currentUser.role === "ADMIN" || shortcut.creatorId === currentUser.id;

@ -46,7 +46,7 @@ const ShortcutActionsDropdown = (props: Props) => {
            {havePermission && (
              <button
                className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60 dark:hover:bg-zinc-800"
-                onClick={() => setShowEditDialog(true)}
+                onClick={() => setShowEditDrawer(true)}
              >
                <Icon.Edit className="w-4 h-auto mr-2" /> {t("common.edit")}
              </button>
@ -77,11 +77,11 @@ const ShortcutActionsDropdown = (props: Props) => {
        }
      ></Dropdown>

-      {showEditDialog && (
-        <CreateShortcutDialog
+      {showEditDrawer && (
+        <CreateShortcutDrawer
          shortcutId={shortcut.id}
-          onClose={() => setShowEditDialog(false)}
-          onConfirm={() => setShowEditDialog(false)}
+          onClose={() => setShowEditDrawer(false)}
+          onConfirm={() => setShowEditDrawer(false)}
        />
      )}

--- a/frontend/web/src/components/ShortcutsContainer.tsx
+++ b/frontend/web/src/components/ShortcutsContainer.tsx
@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { absolutifyLink } from "@/helpers/utils";
+import useNavigateTo from "@/hooks/useNavigateTo";
 import useViewStore from "../stores/v1/view";
 import ShortcutCard from "./ShortcutCard";
 import ShortcutView from "./ShortcutView";
@ -10,12 +10,13 @@ interface Props {

 const ShortcutsContainer: React.FC<Props> = (props: Props) => {
  const { shortcutList } = props;
+  const navigateTo = useNavigateTo();
  const viewStore = useViewStore();
  const displayStyle = viewStore.displayStyle || "full";
  const ShortcutItemView = viewStore.displayStyle === "compact" ? ShortcutView : ShortcutCard;

  const handleShortcutClick = (shortcut: Shortcut) => {
-    window.open(absolutifyLink(`/s/${shortcut.name}`));
+    navigateTo(`/shortcut/${shortcut.id}`);
  };

  return (
--- a/frontend/web/src/components/ViewSetting.tsx
+++ b/frontend/web/src/components/ViewSetting.tsx
@ -18,7 +18,7 @@ const ViewSetting = () => {
          <Icon.Settings2 className="w-4 h-auto text-gray-500" />
        </button>
      }
-      actionsClassName="!mt-3 !-right-2"
+      actionsClassName="!mt-3 !right-[unset] -left-24 -ml-2"
      actions={
        <div className="w-52 p-2 gap-2 flex flex-col justify-start items-start" onClick={(e) => e.stopPropagation()}>
          <div className="w-full flex flex-row justify-between items-center">
--- a/frontend/web/src/css/joy-ui.css
+++ b/frontend/web/src/css/joy-ui.css
@ -0,0 +1,3 @@
+.MuiDrawer-content {
+  @apply !w-auto;
+}
--- a/frontend/web/src/main.tsx
+++ b/frontend/web/src/main.tsx
@ -4,6 +4,7 @@ import { Toaster } from "react-hot-toast";
 import { Provider } from "react-redux";
 import { RouterProvider } from "react-router-dom";
 import "./css/index.css";
+import "./css/joy-ui.css";
 import "./i18n";
 import router from "./routers";
 import store from "./stores";
--- a/frontend/web/src/pages/CollectionDashboard.tsx
+++ b/frontend/web/src/pages/CollectionDashboard.tsx
@ -2,7 +2,7 @@ import { Button } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import CollectionView from "@/components/CollectionView";
-import CreateCollectionDialog from "@/components/CreateCollectionDialog";
+import CreateCollectionDrawer from "@/components/CreateCollectionDrawer";
 import { shortcutService } from "@/services";
 import useCollectionStore from "@/stores/v1/collection";
 import FilterView from "../components/FilterView";
@ -10,7 +10,7 @@ import Icon from "../components/Icon";
 import useLoading from "../hooks/useLoading";

 interface State {
-  showCreateCollectionDialog: boolean;
+  showCreateCollectionDrawer: boolean;
 }

 const CollectionDashboard: React.FC = () => {
@ -19,7 +19,7 @@ const CollectionDashboard: React.FC = () => {
  const collectionStore = useCollectionStore();
  const collections = collectionStore.getCollectionList();
  const [state, setState] = useState<State>({
-    showCreateCollectionDialog: false,
+    showCreateCollectionDrawer: false,
  });

  useEffect(() => {
@ -28,10 +28,10 @@ const CollectionDashboard: React.FC = () => {
    });
  }, []);

-  const setShowCreateCollectionDialog = (show: boolean) => {
+  const setShowCreateCollectionDrawer = (show: boolean) => {
    setState({
      ...state,
-      showCreateCollectionDialog: show,
+      showCreateCollectionDrawer: show,
    });
  };

@ -52,8 +52,9 @@ const CollectionDashboard: React.FC = () => {
          </div>
        </div>
        <div className="w-full flex flex-row justify-between items-center mb-4">
+          <div></div>
          <div className="flex flex-row justify-start items-center">
-            <Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateCollectionDialog(true)}>
+            <Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateCollectionDrawer(true)}>
              <Icon.Plus className="w-5 h-auto" />
              <span className="ml-0.5">{t("common.create")}</span>
            </Button>
@ -79,10 +80,10 @@ const CollectionDashboard: React.FC = () => {
        )}
      </div>

-      {state.showCreateCollectionDialog && (
-        <CreateCollectionDialog
-          onClose={() => setShowCreateCollectionDialog(false)}
-          onConfirm={() => setShowCreateCollectionDialog(false)}
+      {state.showCreateCollectionDrawer && (
+        <CreateCollectionDrawer
+          onClose={() => setShowCreateCollectionDrawer(false)}
+          onConfirm={() => setShowCreateCollectionDrawer(false)}
        />
      )}
    </>
--- a/frontend/web/src/pages/Home.tsx
+++ b/frontend/web/src/pages/Home.tsx
@ -1,7 +1,7 @@
 import { Button, Input } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import CreateShortcutDialog from "../components/CreateShortcutDialog";
+import CreateShortcutDrawer from "../components/CreateShortcutDrawer";
 import FilterView from "../components/FilterView";
 import Icon from "../components/Icon";
 import ShortcutsContainer from "../components/ShortcutsContainer";
@ -14,7 +14,7 @@ import useUserStore from "../stores/v1/user";
 import useViewStore, { getFilteredShortcutList, getOrderedShortcutList } from "../stores/v1/view";

 interface State {
-  showCreateShortcutDialog: boolean;
+  showCreateShortcutDrawer: boolean;
 }

 const Home: React.FC = () => {
@ -24,7 +24,7 @@ const Home: React.FC = () => {
  const viewStore = useViewStore();
  const { shortcutList } = useAppSelector((state) => state.shortcut);
  const [state, setState] = useState<State>({
-    showCreateShortcutDialog: false,
+    showCreateShortcutDrawer: false,
  });
  const filter = viewStore.filter;
  const filteredShortcutList = getFilteredShortcutList(shortcutList, filter, currentUser);
@ -36,10 +36,10 @@ const Home: React.FC = () => {
    });
  }, []);

-  const setShowCreateShortcutDialog = (show: boolean) => {
+  const setShowCreateShortcutDrawer = (show: boolean) => {
    setState({
      ...state,
-      showCreateShortcutDialog: show,
+      showCreateShortcutDrawer: show,
    });
  };

@ -49,14 +49,8 @@ const Home: React.FC = () => {
        <ShortcutsNavigator />
        <div className="w-full flex flex-row justify-between items-center mb-4">
          <div className="flex flex-row justify-start items-center">
-            <Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateShortcutDialog(true)}>
-              <Icon.Plus className="w-5 h-auto" />
-              <span className="hidden sm:block ml-0.5">{t("common.create")}</span>
-            </Button>
-          </div>
-          <div className="flex flex-row justify-end items-center">
            <Input
-              className="w-32 ml-2"
+              className="w-32 mr-2"
              type="text"
              size="sm"
              placeholder={t("common.search")}
@ -66,6 +60,12 @@ const Home: React.FC = () => {
              onChange={(e) => viewStore.setFilter({ search: e.target.value })}
            />
          </div>
+          <div className="flex flex-row justify-end items-center">
+            <Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateShortcutDrawer(true)}>
+              <Icon.Plus className="w-5 h-auto" />
+              <span className="hidden sm:block ml-0.5">{t("common.create")}</span>
+            </Button>
+          </div>
        </div>
        <FilterView />
        {loadingState.isLoading ? (
@ -83,8 +83,8 @@ const Home: React.FC = () => {
        )}
      </div>

-      {state.showCreateShortcutDialog && (
-        <CreateShortcutDialog onClose={() => setShowCreateShortcutDialog(false)} onConfirm={() => setShowCreateShortcutDialog(false)} />
+      {state.showCreateShortcutDrawer && (
+        <CreateShortcutDrawer onClose={() => setShowCreateShortcutDrawer(false)} onConfirm={() => setShowCreateShortcutDrawer(false)} />
      )}
    </>
  );
--- a/frontend/web/src/pages/NotFound.tsx
+++ b/frontend/web/src/pages/NotFound.tsx
@ -1,61 +1,13 @@
-import { Button } from "@mui/joy";
-import { useEffect, useState } from "react";
-import { useLocation } from "react-router-dom";
-import CreateShortcutDialog from "@/components/CreateShortcutDialog";
 import Icon from "@/components/Icon";
-import useNavigateTo from "@/hooks/useNavigateTo";
-import useUserStore from "@/stores/v1/user";
-
-interface State {
-  showCreateShortcutButton: boolean;
-}

 const NotFound = () => {
-  const location = useLocation();
-  const navigateTo = useNavigateTo();
-  const currentUser = useUserStore().getCurrentUser();
-  const [state, setState] = useState<State>({
-    showCreateShortcutButton: false,
-  });
-  const [showCreateShortcutDialog, setShowCreateShortcutDialog] = useState(false);
-  const params = new URLSearchParams(location.search);
-
-  useEffect(() => {
-    const shortcut = params.get("shortcut");
-    if (currentUser && shortcut) {
-      setState({
-        ...state,
-        showCreateShortcutButton: true,
-      });
-    }
-  }, []);
-
  return (
-    <>
-      <div className="w-full h-full overflow-y-auto overflow-x-hidden bg-zinc-100 dark:bg-zinc-800">
-        <div className="w-full h-full flex flex-col justify-center items-center">
-          <Icon.Meh strokeWidth={1} className="w-20 h-auto opacity-80 dark:text-gray-300" />
-          <p className="mt-4 mb-8 text-4xl font-mono dark:text-gray-300">404</p>
-          {state.showCreateShortcutButton && (
-            <Button
-              variant="outlined"
-              startDecorator={<Icon.Plus className="w-5 h-auto" />}
-              onClick={() => setShowCreateShortcutDialog(true)}
-            >
-              Create shortcut
-            </Button>
-          )}
-        </div>
+    <div className="w-full h-full overflow-y-auto overflow-x-hidden bg-zinc-100 dark:bg-zinc-800">
+      <div className="w-full h-full flex flex-col justify-center items-center">
+        <Icon.Meh strokeWidth={1} className="w-20 h-auto opacity-80 dark:text-gray-300" />
+        <p className="mt-4 mb-8 text-4xl font-mono dark:text-gray-300">404</p>
      </div>
-
-      {showCreateShortcutDialog && (
-        <CreateShortcutDialog
-          initialShortcut={{ name: params.get("shortcut") || "" }}
-          onClose={() => setShowCreateShortcutDialog(false)}
-          onConfirm={() => navigateTo("/")}
-        />
-      )}
-    </>
+    </div>
  );
 };

--- a/frontend/web/src/pages/ShortcutDetail.tsx
+++ b/frontend/web/src/pages/ShortcutDetail.tsx
@ -8,7 +8,7 @@ import { useLoaderData } from "react-router-dom";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import { showCommonDialog } from "../components/Alert";
 import AnalyticsView from "../components/AnalyticsView";
-import CreateShortcutDialog from "../components/CreateShortcutDialog";
+import CreateShortcutDrawer from "../components/CreateShortcutDrawer";
 import GenerateQRCodeDialog from "../components/GenerateQRCodeDialog";
 import Icon from "../components/Icon";
 import VisibilityIcon from "../components/VisibilityIcon";
@ -18,7 +18,7 @@ import { shortcutService } from "../services";
 import useUserStore from "../stores/v1/user";

 interface State {
-  showEditModal: boolean;
+  showEditDrawer: boolean;
 }

 const ShortcutDetail = () => {
@ -28,7 +28,7 @@ const ShortcutDetail = () => {
  const shortcut = shortcutService.getShortcutById(shortcutId) as Shortcut;
  const currentUser = useUserStore().getCurrentUser();
  const [state, setState] = useState<State>({
-    showEditModal: false,
+    showEditDrawer: false,
  });
  const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false);
  const havePermission = currentUser.role === "ADMIN" || shortcut.creatorId === currentUser.id;
@ -116,7 +116,7 @@ const ShortcutDetail = () => {
                    onClick={() => {
                      setState({
                        ...state,
-                        showEditModal: true,
+                        showEditDrawer: true,
                      });
                    }}
                  >
@ -178,13 +178,13 @@ const ShortcutDetail = () => {

      {showQRCodeDialog && <GenerateQRCodeDialog shortcut={shortcut} onClose={() => setShowQRCodeDialog(false)} />}

-      {state.showEditModal && (
-        <CreateShortcutDialog
+      {state.showEditDrawer && (
+        <CreateShortcutDrawer
          shortcutId={shortcut.id}
          onClose={() =>
            setState({
              ...state,
-              showEditModal: false,
+              showEditDrawer: false,
            })
          }
        />