chore: add random name button

2025-04-27 08:33:07 +00:00 · 2024-01-10 10:50:02 +08:00 · 2024-01-10 10:50:02 +08:00 · 59ee192bf8
commit 59ee192bf8
parent 2771602e5c
8 changed files with 337 additions and 313 deletions
--- a/README.md
+++ b/README.md
@ -8,11 +8,11 @@

 Getting started with Slash's [Shortcuts](https://github.com/yourselfhosted/slash/blob/main/docs/getting-started/shortcuts.md) and [Collections](https://github.com/yourselfhosted/slash/blob/main/docs/getting-started/collections.md).

-<a href="https://demo.slash.yourselfhosted.com">Live Demo</a> • <a href="https://discord.gg/QZqUuUAhDV">Discord</a>
+<a href="https://demo.slash.yourselfhosted.com">Live Demo</a> • <a href="https://discord.gg/QZqUuUAhDV">Join our Discord</a>

 <p>
  <a href="https://hub.docker.com/r/yourselfhosted/slash"><img alt="Docker pull" src="https://img.shields.io/docker/pulls/yourselfhosted/slash.svg"/></a>
-  <a href="https://github.com/yourselfhosted/slash/stargazers"><img alt="GitHub stars" src="https://img.shields.io/github/stars/yourselfhosted/slash?logo=github"/></a>
+  <a href="https://discord.gg/QZqUuUAhDV"><img alt="Discord" src="https://img.shields.io/badge/discord-chat-5865f2?logo=discord&logoColor=f5f5f5" /></a>
 </p>

 ![demo](./docs/assets/demo.png)
--- a/docs/assets/logo.png
+++ b/docs/assets/logo.png
--- a/frontend/extension/assets/icon.png
+++ b/frontend/extension/assets/icon.png
--- a/frontend/extension/package.json
+++ b/frontend/extension/package.json
@ -16,8 +16,8 @@
    "@emotion/styled": "^11.11.0",
    "@mui/joy": "5.0.0-beta.20",
    "@plasmohq/storage": "^1.9.0",
-    "axios": "^1.6.3",
-    "classnames": "^2.5.0",
+    "axios": "^1.6.5",
+    "classnames": "^2.5.1",
    "lodash-es": "^4.17.21",
    "lucide-react": "^0.264.0",
    "plasmo": "^0.83.1",
@ -31,21 +31,21 @@
    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
    "@types/chrome": "^0.0.241",
    "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.10.5",
-    "@types/react": "^18.2.45",
+    "@types/node": "^20.10.8",
+    "@types/react": "^18.2.47",
    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
-    "@typescript-eslint/parser": "^6.16.0",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^8.10.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.33.2",
    "long": "^5.2.3",
-    "postcss": "^8.4.32",
+    "postcss": "^8.4.33",
    "prettier": "^2.8.8",
    "protobufjs": "^7.2.5",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^3.4.1",
    "typescript": "^5.3.3"
  },
  "manifest": {
--- a/frontend/extension/pnpm-lock.yaml
+++ b/frontend/extension/pnpm-lock.yaml
--- a/frontend/extension/src/components/CreateShortcutButton.tsx
+++ b/frontend/extension/src/components/CreateShortcutButton.tsx
@ -50,6 +50,18 @@ const CreateShortcutButton = () => {
    });
  };

+  const generateRandomName = () => {
+    const chars = "abcdefghijklmnopqrstuvwxyz0123456789";
+    let name = "";
+    for (let i = 0; i < 8; i++) {
+      name += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    setState((state) => ({
+      ...state,
+      name,
+    }));
+  };
+
  const handleNameInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setState((state) => ({
      ...state,
@ -118,7 +130,18 @@ const CreateShortcutButton = () => {
          <div className="overflow-x-hidden w-full flex flex-col justify-start items-center">
            <div className="w-full flex flex-row justify-start items-center mb-2">
              <span className="block w-12 mr-2 shrink-0">Name</span>
-              <Input className="grow" type="text" placeholder="Unique shortcut name" value={state.name} onChange={handleNameInputChange} />
+              <Input
+                className="grow"
+                type="text"
+                placeholder="Unique shortcut name"
+                value={state.name}
+                onChange={handleNameInputChange}
+                endDecorator={
+                  <IconButton size="sm" onClick={generateRandomName}>
+                    <Icon.RefreshCcw className="w-4 h-auto cursor-pointer" />
+                  </IconButton>
+                }
+              />
            </div>
            <div className="w-full flex flex-row justify-start items-center mb-2">
              <span className="block w-12 mr-2 shrink-0">Title</span>
--- a/frontend/web/public/logo.png
+++ b/frontend/web/public/logo.png
--- a/frontend/web/src/components/Header.tsx
+++ b/frontend/web/src/components/Header.tsx
@ -51,7 +51,7 @@ const Header: React.FC = () => {
                      <Icon.ChevronsUpDown className="ml-1 w-4 h-auto text-gray-600 dark:text-gray-400" />
                    </button>
                  }
-                  actionsClassName="!w-32 -left-4 text-sm"
+                  actionsClassName="!w-36 -left-4"
                  actions={
                    <>
                      <Link
@ -59,14 +59,14 @@ const Header: React.FC = () => {
                        to="/"
                        unstable_viewTransition
                      >
-                        <Icon.SquareSlash className="w-4 h-auto mr-2 opacity-70" /> Shortcuts
+                        <Icon.SquareSlash className="w-5 h-auto mr-2 opacity-70" /> Shortcuts
                      </Link>
                      <Link
                        className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                        to="/collections"
                        unstable_viewTransition
                      >
-                        <Icon.LibrarySquare className="w-4 h-auto mr-2 opacity-70" /> Collections
+                        <Icon.LibrarySquare className="w-5 h-auto mr-2 opacity-70" /> Collections
                      </Link>
                    </>
                  }
@ -83,7 +83,7 @@ const Header: React.FC = () => {
                  <Icon.ChevronDown className="ml-2 w-5 h-auto text-gray-600 dark:text-gray-400" />
                </button>
              }
-              actionsClassName="!w-32 text-sm"
+              actionsClassName="!w-32"
              actions={
                <>
                  <Link
@ -91,7 +91,7 @@ const Header: React.FC = () => {
                    to="/setting/general"
                    unstable_viewTransition
                  >
-                    <Icon.User className="w-4 h-auto mr-2 opacity-70" /> {t("user.profile")}
+                    <Icon.User className="w-5 h-auto mr-2 opacity-70" /> {t("user.profile")}
                  </Link>
                  {isAdmin && (
                    <Link
@ -99,20 +99,20 @@ const Header: React.FC = () => {
                      to="/setting/workspace"
                      unstable_viewTransition
                    >
-                      <Icon.Settings className="w-4 h-auto mr-2 opacity-70" /> {t("settings.self")}
+                      <Icon.Settings className="w-5 h-auto mr-2 opacity-70" /> {t("settings.self")}
                    </Link>
                  )}
                  <button
                    className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                    onClick={() => setShowAboutDialog(true)}
                  >
-                    <Icon.Info className="w-4 h-auto mr-2 opacity-70" /> {t("common.about")}
+                    <Icon.Info className="w-5 h-auto mr-2 opacity-70" /> {t("common.about")}
                  </button>
                  <button
                    className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
                    onClick={() => handleSignOutButtonClick()}
                  >
-                    <Icon.LogOut className="w-4 h-auto mr-2 opacity-70" /> {t("auth.sign-out")}
+                    <Icon.LogOut className="w-5 h-auto mr-2 opacity-70" /> {t("auth.sign-out")}
                  </button>
                </>
              }