chore: add random name button

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)

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": {

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>

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>
                 </>
               }