⚡️ feat: add search dialog on mobile

packages/frontend/src/pages/org-slug/layout.tsx

@@ -13,6 +13,7 @@ import { Outlet, useParams } from 'react-router-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 import { cn } from 'utils/classnames';
 import { useMediaQuery } from 'usehooks-ts';
+import { ProjectSearchBarDialog } from 'components/projects/ProjectSearchBar';
 
 export interface DashboardLayoutProps
   extends ComponentPropsWithoutRef<'section'> {}
@@ -23,7 +24,9 @@ export const DashboardLayout = ({
 }: DashboardLayoutProps) => {
   const { orgSlug } = useParams();
   const isDesktop = useMediaQuery('(min-width: 1024px)');
+
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
 
   useEffect(() => {
     if (isDesktop) {
@@ -32,6 +35,7 @@ export const DashboardLayout = ({
   }, [isDesktop]);
 
   return (
+    <>
       <section
         {...props}
         className={cn(
@@ -76,7 +80,11 @@ export const DashboardLayout = ({
                     <Button iconOnly variant="ghost">
                       <NotificationBellIcon size={18} />
                     </Button>
-                  <Button iconOnly variant="ghost">
+                    <Button
+                      iconOnly
+                      variant="ghost"
+                      onClick={() => setIsSearchOpen(true)}
+                    >
                       <SearchIcon size={18} />
                     </Button>
                     <Button
@@ -113,5 +121,10 @@ export const DashboardLayout = ({
           </motion.div>
         </div>
       </section>
+      <ProjectSearchBarDialog
+        open={isSearchOpen}
+        onClose={() => setIsSearchOpen(false)}
+      />
+    </>
   );
 };