chore: update linter

frontend/web/package.json

@@ -42,11 +42,11 @@
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
     "long": "^5.2.3",
     "postcss": "^8.4.38",
-    "prettier": "2.6.2",
+    "prettier": "^3.2.5",
     "protobufjs": "^7.2.6",
     "typescript": "^5.4.5",
     "vite": "^5.2.9"

frontend/web/src/components/CreateCollectionDrawer.tsx

@@ -80,7 +80,7 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
           setSelectedShortcuts(
             collection.shortcutIds
               .map((shortcutId) => shortcutList.find((shortcut) => shortcut.id === shortcutId))
-              .filter(Boolean) as Shortcut[]
+              .filter(Boolean) as Shortcut[],
           );
           loadingState.setFinish();
         }
@@ -145,7 +145,7 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
             visibility: state.collectionCreate.visibility,
             shortcutIds: selectedShortcuts.map((shortcut) => shortcut.id),
           },
-          ["name", "title", "description", "visibility", "shortcut_ids"]
+          ["name", "title", "description", "visibility", "shortcut_ids"],
         );
       } else {
         await collectionStore.createCollection({

frontend/web/src/components/CreateShortcutDrawer.tsx

@@ -309,7 +309,7 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
             <div
               className={classnames(
                 "w-full flex flex-row justify-between items-center px-2 py-1 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-800",
-                showOpenGraphMetadata ? "bg-gray-100 border-b dark:bg-zinc-800 dark:border-b-zinc-700" : ""
+                showOpenGraphMetadata ? "bg-gray-100 border-b dark:bg-zinc-800 dark:border-b-zinc-700" : "",
               )}
               onClick={() => setShowOpenGraphMetadata(!showOpenGraphMetadata)}
             >

frontend/web/src/components/ShortcutCard.tsx

@@ -38,7 +38,7 @@ const ShortcutCard = (props: Props) => {
   return (
     <div
       className={classNames(
-        "group px-4 py-3 w-full flex flex-col justify-start items-start border rounded-lg hover:shadow dark:border-zinc-700"
+        "group px-4 py-3 w-full flex flex-col justify-start items-start border rounded-lg hover:shadow dark:border-zinc-700",
       )}
     >
       <div className="w-full flex flex-row justify-between items-center">
@@ -54,7 +54,7 @@ const ShortcutCard = (props: Props) => {
             <div className="w-full flex flex-row justify-start items-center leading-tight">
               <a
                 className={classNames(
-                  "max-w-[calc(100%-36px)] flex flex-row justify-start items-center mr-1 cursor-pointer hover:opacity-80 hover:underline"
+                  "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}

frontend/web/src/components/ShortcutView.tsx

@@ -20,7 +20,7 @@ const ShortcutView = (props: Props) => {
     <div
       className={classNames(
         "group w-full px-3 py-2 flex flex-row justify-start items-center border rounded-lg hover:bg-gray-100 dark:border-zinc-800 dark:hover:bg-zinc-800",
-        className
+        className,
       )}
       onClick={onClick}
     >
@@ -42,7 +42,7 @@ const ShortcutView = (props: Props) => {
       <Link
         className={classNames(
           "hidden group-hover:block ml-1 w-6 h-6 p-1 shrink-0 rounded-lg bg-gray-200 dark:bg-zinc-900 hover:opacity-80",
-          alwaysShowLink && "!block"
+          alwaysShowLink && "!block",
         )}
         to={`/s/${shortcut.name}`}
         target="_blank"

frontend/web/src/components/ShortcutsContainer.tsx

@@ -24,7 +24,7 @@ const ShortcutsContainer: React.FC<Props> = (props: Props) => {
     <div
       className={classNames(
         "w-full grid grid-cols-1 gap-3 sm:gap-4",
-        displayStyle === "full" ? "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4" : "grid-cols-2 sm:grid-cols-4"
+        displayStyle === "full" ? "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4" : "grid-cols-2 sm:grid-cols-4",
       )}
     >
       {shortcutList.map((shortcut) => {

frontend/web/src/components/ShortcutsNavigator.tsx

@@ -18,7 +18,7 @@ const ShortcutsNavigator = () => {
           "flex flex-row justify-center items-center px-2 leading-7 text-sm dark:text-gray-400 rounded-md",
           currentTab === "tab:all"
             ? "bg-blue-700 dark:bg-blue-800 text-white dark:text-gray-400 shadow"
-            : "hover:bg-gray-200 dark:hover:bg-zinc-700"
+            : "hover:bg-gray-200 dark:hover:bg-zinc-700",
         )}
         onClick={() => viewStore.setFilter({ tab: "tab:all" })}
       >
@@ -30,7 +30,7 @@ const ShortcutsNavigator = () => {
           "flex flex-row justify-center items-center px-2 leading-7 text-sm dark:text-gray-400 rounded-md",
           currentTab === "tab:mine"
             ? "bg-blue-700 dark:bg-blue-800 text-white dark:text-gray-400 shadow"
-            : "hover:bg-gray-200 dark:hover:bg-zinc-700"
+            : "hover:bg-gray-200 dark:hover:bg-zinc-700",
         )}
         onClick={() => viewStore.setFilter({ tab: "tab:mine" })}
       >
@@ -44,7 +44,7 @@ const ShortcutsNavigator = () => {
             "flex flex-row justify-center items-center px-2 leading-7 text-sm dark:text-gray-400 rounded-md",
             currentTab === `tag:${tag}`
               ? "bg-blue-700 dark:bg-blue-800 text-white dark:text-gray-400 shadow"
-              : "hover:bg-gray-200 dark:hover:bg-zinc-700"
+              : "hover:bg-gray-200 dark:hover:bg-zinc-700",
           )}
           onClick={() => viewStore.setFilter({ tab: `tag:${tag}`, tag: undefined })}
         >

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

@@ -43,7 +43,7 @@ const PreferenceSection: React.FC = () => {
         ...userSetting,
         locale: locale,
       } as UserSetting,
-      ["locale"]
+      ["locale"],
     );
   };
 
@@ -53,7 +53,7 @@ const PreferenceSection: React.FC = () => {
         ...userSetting,
         colorTheme: colorTheme,
       } as UserSetting,
-      ["color_theme"]
+      ["color_theme"],
     );
   };
 

frontend/web/src/grpcweb.ts

@@ -13,7 +13,7 @@ const channel = createChannel(
   address,
   FetchTransport({
     credentials: "include",
-  })
+  }),
 );
 
 const clientFactory = createClientFactory();

frontend/web/src/main.tsx

@@ -14,5 +14,5 @@ root.render(
   <CssVarsProvider>
     <RouterProvider router={router} />
     <Toaster position="top-center" />
-  </CssVarsProvider>
+  </CssVarsProvider>,
 );

frontend/web/src/pages/CollectionSpace.tsx

@@ -84,7 +84,7 @@ const CollectionSpace = () => {
                     "w-full py-2 cursor-pointer sm:!px-2",
                     selectedShortcut?.id === shortcut.id
                       ? "bg-gray-100 dark:bg-zinc-800"
-                      : "sm:border-transparent dark:sm:border-transparent"
+                      : "sm:border-transparent dark:sm:border-transparent",
                   )}
                   key={shortcut.name}
                   shortcut={shortcut}

frontend/web/src/pages/ShortcutDetail.tsx

@@ -82,7 +82,7 @@ const ShortcutDetail = () => {
         </div>
         <a
           className={classNames(
-            "group max-w-full flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:underline"
+            "group max-w-full flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:underline",
           )}
           href={shortcutLink}
           target="_blank"

frontend/web/src/stores/shortcut.ts

@@ -91,7 +91,7 @@ const useShortcutStore = create(
       delete shortcutMap[id];
       set({ shortcutMapById: shortcutMap });
     },
-  }))
+  })),
 );
 
 const unknownShortcut: Shortcut = Shortcut.fromPartial({

frontend/web/src/stores/view.ts

@@ -55,8 +55,8 @@ const useViewStore = create<ViewState>()(
     }),
     {
       name: "view",
-    }
+    },
-  )
+  ),
 );
 
 export const getFilteredShortcutList = (shortcutList: Shortcut[], filter: Filter, currentUser: User) => {