chore: use drawer instead of dialog

2025-07-01 19:59:44 +00:00 · 2023-11-15 22:14:36 +08:00
parent 30d9dd04bb
commit 2296eb96ef
12 changed files with 105 additions and 141 deletions
--- 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,
            })
          }
        />