Chore: search code splitting (#6628)

* fix: Handled workspace switcher closing on click

* chore: code splitting for search

* fix: refactor

* fix: quick link error validation

* fix: refactor

* fix: refactor

web/ce/components/workspace/index.ts

@@ -2,4 +2,5 @@ export * from "./edition-badge";
 export * from "./upgrade-badge";
 export * from "./billing";
 export * from "./delete-workspace-section";
+export * from "./sidebar";
 export * from "./members";

web/ce/components/workspace/sidebar/app-search.tsx

@@ -0,0 +1,26 @@
+import { observer } from "mobx-react";
+import { Search } from "lucide-react";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useAppTheme, useCommandPalette } from "@/hooks/store";
+
+export const AppSearch = observer(() => {
+  // store hooks
+  const { sidebarCollapsed } = useAppTheme();
+  const { toggleCommandPaletteModal } = useCommandPalette();
+
+  return (
+    <button
+      className={cn(
+        "flex-shrink-0 size-8 aspect-square grid place-items-center rounded hover:bg-custom-sidebar-background-90 outline-none",
+        {
+          "border-[0.5px] border-custom-sidebar-border-300": !sidebarCollapsed,
+        }
+      )}
+      onClick={() => toggleCommandPaletteModal(true)}
+    >
+      <Search className="size-4 text-custom-sidebar-text-300" />
+    </button>
+  );
+});

web/ce/components/workspace/sidebar/index.ts

@@ -1,3 +1,4 @@
+export * from "./app-search";
 export * from "./extended-sidebar-item";
 export * from "./helper";
 export * from "./sidebar-item";

web/core/components/home/widgets/links/use-links.tsx

@@ -42,9 +42,9 @@ export const useLinks = (workspaceSlug: string) => {
           });
           toggleLinkModal(false);
         } catch (error: any) {
-          console.error("error", error?.data?.url?.error);
+          console.error("error", error?.data?.error);
           setToast({
-            message: error?.data?.url?.error ?? t("links.toasts.not_created.message"),
+            message: error?.data?.error ?? t("links.toasts.not_created.message"),
             type: TOAST_TYPE.ERROR,
             title: t("links.toasts.not_created.title"),
           });

web/core/components/workspace/sidebar/quick-actions.tsx

@@ -1,7 +1,7 @@
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { ChevronUp, PenSquare, Search } from "lucide-react";
+import { PenSquare } from "lucide-react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // types
@@ -14,6 +14,8 @@ import { cn } from "@/helpers/common.helper";
 // hooks
 import { useAppTheme, useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
 import useLocalStorage from "@/hooks/use-local-storage";
+// plane web components
+import { AppSearch } from "@/plane-web/components/workspace";
 
 export const SidebarQuickActions = observer(() => {
   const { t } = useTranslation();
@@ -27,7 +29,7 @@ export const SidebarQuickActions = observer(() => {
   const { workspaceSlug: routerWorkspaceSlug } = useParams();
   const workspaceSlug = routerWorkspaceSlug?.toString();
   // store hooks
-  const { toggleCreateIssueModal, toggleCommandPaletteModal } = useCommandPalette();
+  const { toggleCreateIssueModal } = useCommandPalette();
   const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();
   const { setTrackElement } = useEventTracker();
   const { joinedProjectIds } = useProject();
@@ -98,17 +100,7 @@ export const SidebarQuickActions = observer(() => {
             <span className="text-sm font-medium truncate max-w-[145px]">{t("sidebar.new_work_item")}</span>
           )}
         </button>
-        <button
-          className={cn(
-            "flex-shrink-0 size-8 aspect-square grid place-items-center rounded hover:bg-custom-sidebar-background-90 outline-none",
-            {
-              "border-[0.5px] border-custom-sidebar-border-300": !isSidebarCollapsed,
-            }
-          )}
-          onClick={() => toggleCommandPaletteModal(true)}
-        >
-          <Search className="size-4 text-custom-sidebar-text-300" />
-        </button>
+        <AppSearch />
       </div>
     </>
   );

web/ee/components/workspace/index.ts

@@ -2,3 +2,4 @@ export * from "./edition-badge";
 export * from "./upgrade-badge";
 export * from "./billing";
 export * from "./delete-workspace-section";
+export * from "./sidebar";