chore: tweak frontend imports

frontend/web/src/components/CreateAccessTokenDialog.tsx

@@ -3,8 +3,8 @@ import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { userServiceClient } from "@/grpcweb";
+import useLoading from "@/hooks/useLoading";
 import { useUserStore } from "@/stores";
-import useLoading from "../hooks/useLoading";
 import Icon from "./Icon";
 
 interface Props {

frontend/web/src/components/GenerateQRCodeDialog.tsx

@@ -3,8 +3,8 @@ import { QRCodeCanvas } from "qrcode.react";
 import { useRef } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import { absolutifyLink } from "@/helpers/utils";
 import { Shortcut } from "@/types/proto/api/v1/shortcut_service";
-import { absolutifyLink } from "../helpers/utils";
 import Icon from "./Icon";
 
 interface Props {
@@ -25,12 +25,12 @@ const GenerateQRCodeDialog: React.FC<Props> = (props: Props) => {
   const handleDownloadQRCodeClick = () => {
     const canvas = containerRef.current?.querySelector("canvas");
     if (!canvas) {
-      toast.error("Failed to get qr code canvas");
+      toast.error("Failed to get QR code canvas");
       return;
     }
 
     const link = document.createElement("a");
-    link.download = "filename.png";
+    link.download = `${shortcut.title || shortcut.name}-qrcode.png`;
     link.href = canvas.toDataURL();
     link.click();
     handleCloseBtnClick();
@@ -47,7 +47,7 @@ const GenerateQRCodeDialog: React.FC<Props> = (props: Props) => {
         </div>
         <div>
           <div ref={containerRef} className="w-full flex flex-row justify-center items-center mt-2 mb-6">
-            <QRCodeCanvas value={shortcutLink} size={128} bgColor={"#ffffff"} fgColor={"#000000"} includeMargin={false} level={"L"} />
+            <QRCodeCanvas value={shortcutLink} size={180} bgColor={"#ffffff"} fgColor={"#000000"} includeMargin={false} level={"L"} />
           </div>
           <div className="w-full flex flex-row justify-center items-center px-4">
             <Button className="w-full" color="neutral" onClick={handleDownloadQRCodeClick}>

frontend/web/src/components/ShortcutCard.tsx

@@ -5,10 +5,10 @@ import { useEffect } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import { absolutifyLink } from "@/helpers/utils";
 import { useUserStore, useViewStore } from "@/stores";
 import { Shortcut } from "@/types/proto/api/v1/shortcut_service";
 import { convertVisibilityFromPb } from "@/utils/visibility";
-import { absolutifyLink } from "../helpers/utils";
 import Icon from "./Icon";
 import LinkFavicon from "./LinkFavicon";
 import ShortcutActionsDropdown from "./ShortcutActionsDropdown";
@@ -50,11 +50,11 @@ const ShortcutCard = (props: Props) => {
           >
             <LinkFavicon url={shortcut.link} />
           </Link>
-          <div className="ml-1 w-[calc(100%-24px)] flex flex-col justify-start items-start">
+          <div className="ml-2 w-[calc(100%-24px)] flex flex-col justify-start items-start">
-            <div className="w-full flex flex-row justify-start items-center">
+            <div className="w-full flex flex-row justify-start items-center leading-tight">
               <a
                 className={classNames(
-                  "max-w-[calc(100%-36px)] flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:bg-gray-100 hover:shadow dark:hover:bg-zinc-800"
+                  "max-w-[calc(100%-36px)] flex flex-row justify-start items-center mr-1 cursor-pointer hover:opacity-80 hover:underline"
                 )}
                 target="_blank"
                 href={shortcutLink}
@@ -64,9 +64,7 @@ const ShortcutCard = (props: Props) => {
                   {shortcut.title ? (
                     <span className="text-gray-500">({shortcut.name})</span>
                   ) : (
-                    <>
                     <span className="truncate dark:text-gray-400">{shortcut.name}</span>
-                    </>
                   )}
                 </div>
                 <span className="hidden group-hover:block ml-1 cursor-pointer shrink-0">
@@ -75,7 +73,7 @@ const ShortcutCard = (props: Props) => {
               </a>
               <Tooltip title="Copy" variant="solid" placement="top" arrow>
                 <button
-                  className="hidden group-hover:block w-6 h-6 cursor-pointer rounded-md text-gray-500 hover:bg-gray-100 hover:shadow dark:hover:bg-zinc-800"
+                  className="hidden group-hover:block cursor-pointer text-gray-500 hover:opacity-80"
                   onClick={() => handleCopyButtonClick()}
                 >
                   <Icon.Clipboard className="w-4 h-auto mx-auto" />
@@ -83,7 +81,7 @@ const ShortcutCard = (props: Props) => {
               </Tooltip>
             </div>
             <a
-              className="pl-1 pr-4 w-full text-sm truncate text-gray-400 dark:text-gray-500 hover:underline"
+              className="pr-4 leading-tight w-full text-sm truncate text-gray-400 dark:text-gray-500 hover:underline"
               href={shortcut.link}
               target="_blank"
             >

frontend/web/src/components/common/Dropdown.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useEffect, useRef, useState } from "react";
-import Icon from "../Icon";
+import Icon from "@/components/Icon";
 
 interface Props {
   trigger?: ReactNode;

frontend/web/src/components/setting/AccessTokenSection.tsx

@@ -3,12 +3,12 @@ import copy from "copy-to-clipboard";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import { showCommonDialog } from "@/components/Alert";
+import CreateAccessTokenDialog from "@/components/CreateAccessTokenDialog";
+import Icon from "@/components/Icon";
 import { userServiceClient } from "@/grpcweb";
 import { useUserStore } from "@/stores";
 import { UserAccessToken } from "@/types/proto/api/v1/user_service";
-import { showCommonDialog } from "../Alert";
-import CreateAccessTokenDialog from "../CreateAccessTokenDialog";
-import Icon from "../Icon";
 
 const listAccessTokens = async (userId: number) => {
   const { accessTokens } = await userServiceClient.listUserAccessTokens({

frontend/web/src/components/setting/AccountSection.tsx

@@ -1,10 +1,10 @@
 import { Button } from "@mui/joy";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import ChangePasswordDialog from "@/components/ChangePasswordDialog";
+import EditUserinfoDialog from "@/components/EditUserinfoDialog";
 import { useUserStore } from "@/stores";
 import { Role } from "@/types/proto/api/v1/user_service";
-import ChangePasswordDialog from "../ChangePasswordDialog";
-import EditUserinfoDialog from "../EditUserinfoDialog";
 
 const AccountSection: React.FC = () => {
   const { t } = useTranslation();

frontend/web/src/components/setting/MemberSection.tsx

@@ -2,12 +2,12 @@ import { Button, IconButton } from "@mui/joy";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import { showCommonDialog } from "@/components/Alert";
+import CreateUserDialog from "@/components/CreateUserDialog";
+import Icon from "@/components/Icon";
 import { useUserStore } from "@/stores";
 import { User } from "@/types/proto/api/v1/user_service";
 import { convertRoleFromPb } from "@/utils/user";
-import { showCommonDialog } from "../Alert";
-import CreateUserDialog from "../CreateUserDialog";
-import Icon from "../Icon";
 
 const MemberSection = () => {
   const { t } = useTranslation();

frontend/web/src/components/setting/PreferenceSection.tsx

@@ -1,8 +1,8 @@
 import { Option, Select } from "@mui/joy";
 import { useTranslation } from "react-i18next";
+import BetaBadge from "@/components/BetaBadge";
 import { useUserStore } from "@/stores";
 import { UserSetting, UserSetting_ColorTheme, UserSetting_Locale } from "@/types/proto/api/v1/user_setting_service";
-import BetaBadge from "../BetaBadge";
 
 const PreferenceSection: React.FC = () => {
   const { t } = useTranslation();

frontend/web/src/pages/CollectionDashboard.tsx

@@ -3,10 +3,10 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import CollectionView from "@/components/CollectionView";
 import CreateCollectionDrawer from "@/components/CreateCollectionDrawer";
+import FilterView from "@/components/FilterView";
+import Icon from "@/components/Icon";
+import useLoading from "@/hooks/useLoading";
 import { useShortcutStore, useCollectionStore } from "@/stores";
-import FilterView from "../components/FilterView";
-import Icon from "../components/Icon";
-import useLoading from "../hooks/useLoading";
 
 interface State {
   showCreateCollectionDrawer: boolean;

frontend/web/src/pages/SignIn.tsx

@@ -5,9 +5,9 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import Icon from "@/components/Icon";
 import { authServiceClient } from "@/grpcweb";
+import useLoading from "@/hooks/useLoading";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import { useUserStore, useWorkspaceStore } from "@/stores";
-import useLoading from "../hooks/useLoading";
 
 const SignIn: React.FC = () => {
   const { t } = useTranslation();

frontend/web/src/pages/SignUp.tsx

@@ -5,9 +5,9 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import Icon from "@/components/Icon";
 import { authServiceClient } from "@/grpcweb";
+import useLoading from "@/hooks/useLoading";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import { useUserStore, useWorkspaceStore } from "@/stores";
-import useLoading from "../hooks/useLoading";
 
 const SignUp: React.FC = () => {
   const { t } = useTranslation();

frontend/web/src/pages/UserSetting.tsx

@@ -1,6 +1,6 @@
+import AccessTokenSection from "@/components/setting/AccessTokenSection";
+import AccountSection from "@/components/setting/AccountSection";
 import PreferenceSection from "@/components/setting/PreferenceSection";
-import AccessTokenSection from "../components/setting/AccessTokenSection";
-import AccountSection from "../components/setting/AccountSection";
 
 const Setting: React.FC = () => {
   return (

frontend/web/src/pages/WorkspaceSetting.tsx

@@ -2,11 +2,11 @@ import { Alert, Button } from "@mui/joy";
 import { useEffect } from "react";
 import { Link } from "react-router-dom";
 import Icon from "@/components/Icon";
+import MemberSection from "@/components/setting/MemberSection";
+import WorkspaceSection from "@/components/setting/WorkspaceSection";
 import { useUserStore, useWorkspaceStore } from "@/stores";
 import { stringifyPlanType } from "@/stores/subscription";
 import { Role } from "@/types/proto/api/v1/user_service";
-import MemberSection from "../components/setting/MemberSection";
-import WorkspaceSection from "../components/setting/WorkspaceSection";
 
 const WorkspaceSetting: React.FC = () => {
   const workspaceStore = useWorkspaceStore();

frontend/web/src/routers/index.tsx

@@ -1,17 +1,17 @@
 import { createBrowserRouter } from "react-router-dom";
+import App from "@/App";
+import Root from "@/layouts/Root";
 import CollectionDashboard from "@/pages/CollectionDashboard";
 import CollectionSpace from "@/pages/CollectionSpace";
+import Home from "@/pages/Home";
 import NotFound from "@/pages/NotFound";
+import ShortcutDetail from "@/pages/ShortcutDetail";
 import ShortcutSpace from "@/pages/ShortcutSpace";
 import SignIn from "@/pages/SignIn";
 import SignUp from "@/pages/SignUp";
 import SubscriptionSetting from "@/pages/SubscriptionSetting";
 import UserSetting from "@/pages/UserSetting";
 import WorkspaceSetting from "@/pages/WorkspaceSetting";
-import App from "../App";
-import Root from "../layouts/Root";
-import Home from "../pages/Home";
-import ShortcutDetail from "../pages/ShortcutDetail";
 
 const router = createBrowserRouter([
   {