update about , popup search ,test and changelog

ui/CHANGELOG.md

@@ -1,3 +1,11 @@
+### [6.0.0] - 2023-09-28
+
+-   Add Dashboard
+-   Add Newsfeed with Multiple options
+-   Add cookie policy, privacy policy and Terms page
+-   Add features (diffchecker | npmpackages | diagramming)
+-   Add floating search bar
+
 ### [5.0.0] - 2023-09-14
 
 -   Add QR code generator

ui/src/components/General/PopupSearch/index.tsx

@@ -14,18 +14,15 @@ const items = MENU_ITEMS.map((item) => item.children).flat();
 
 const PopupSearch: React.FC = () => {
 	const navigate = useNavigate();
-	const { isDarkMode } = useContext(DarkModeContext);
+	const { isDarkMode, isModalOpen, handleModalOpen } =
+		useContext(DarkModeContext);
 	const [input, setInput] = useState<string>("");
-	const [isModalOpen, setIsModalOpen] = useState(false);
-	const searchInputRef = useRef<InputRef | null>(null);
 
-	const handleCancel = () => {
-		setIsModalOpen(false);
-	};
+	const searchInputRef = useRef<InputRef | null>(null);
 
 	const handleClick = (url: string) => {
 		navigate(url);
-		setIsModalOpen(false);
+		handleModalOpen();
 	};
 
 	const handleAfterOpen = () => {
@@ -34,14 +31,11 @@ const PopupSearch: React.FC = () => {
 		}
 	};
 
-	useCombinedKeyPress(
-		() => setIsModalOpen((open) => !open),
-		["ControlLeft", "KeyK"]
-	);
+	useCombinedKeyPress(handleModalOpen, ["ControlLeft", "KeyK"]);
 
 	return (
 		<Modal
-			onCancel={handleCancel}
+			onCancel={handleModalOpen}
 			title="Features"
 			open={isModalOpen}
 			footer={[]}

ui/src/components/Layouts/FloatingSearchBar/index.tsx

@@ -1,21 +1,32 @@
 import { Input, theme } from "antd";
 import style from "./FloatingSearchBar.module.scss";
 import Icon from "components/General/Icon";
+import { DarkModeContext } from "lib/utils/context/DarkModeProvider";
+import { useContext } from "react";
+
 const FloatingSearchBar = () => {
+	const userAgent = navigator.userAgent.toLowerCase();
+	const addonCommand = userAgent.indexOf("win") != -1 ? "cmd + k" : "⌘ K";
+
 	const {
 		token: { colorBgContainer },
 	} = theme.useToken();
+	const { handleModalOpen } = useContext(DarkModeContext);
+
 	return (
 		<div
 			className={style.fsb}
 			style={{
 				backgroundColor: colorBgContainer,
 			}}
+			onClick={handleModalOpen}
 		>
 			<Input
 				addonBefore={<Icon name="Search" />}
-				addonAfter={<>cmd + k</>}
+				addonAfter={<>{addonCommand}</>}
 				placeholder="Search..."
+				value={""}
+				onChange={handleModalOpen}
 			/>
 		</div>
 	);

ui/src/lib/utils/context/DarkModeProvider/index.tsx

@@ -1,5 +1,11 @@
 import useDarkMode from "lib/utils/context/DarkModeProvider/utils/hooks/useDarkMode";
-import { ReactNode, createContext, useMemo } from "react";
+import {
+	ReactNode,
+	createContext,
+	useCallback,
+	useMemo,
+	useState,
+} from "react";
 import { DarkModeContextType } from "./utils/types";
 import { DARK_MODE_STORAGE_KEY } from "./utils/constant";
 
@@ -8,13 +14,24 @@ const DarkModeContext = createContext<DarkModeContextType>(
 );
 
 const DarkModeProvider = ({ children }: { children: ReactNode }) => {
+	const [isModalOpen, setIsModalOpen] = useState(false);
 	const { isDarkMode, algorithm, toggleTheme } = useDarkMode(
 		DARK_MODE_STORAGE_KEY
 	);
 
+	const handleModalOpen = useCallback(() => {
+		setIsModalOpen((prev) => !prev);
+	}, []);
+
 	const contextValue = useMemo(() => {
-		return { isDarkMode, algorithm, toggleTheme };
-	}, [isDarkMode, algorithm, toggleTheme]);
+		return {
+			isDarkMode,
+			algorithm,
+			toggleTheme,
+			isModalOpen,
+			handleModalOpen,
+		};
+	}, [isDarkMode, algorithm, toggleTheme, handleModalOpen, isModalOpen]);
 
 	return (
 		<DarkModeContext.Provider value={contextValue}>

ui/src/lib/utils/context/DarkModeProvider/utils/types.ts

@@ -4,6 +4,8 @@ interface DarkModeContextType {
 	isDarkMode: boolean;
 	toggleTheme: () => void;
 	algorithm: (token: SeedToken) => MapToken;
+	isModalOpen: boolean;
+	handleModalOpen: () => void;
 }
 
 export type { DarkModeContextType };