@fernir2/saas-kit-cli 0.1.4 → 0.1.6

package/packages/level2/fd-app-toolbox/forgot-password-form/ForgotPasswordForm.jsx

@@ -1,87 +0,0 @@
-"use client";
-import React, { useCallback, useState } from "react";
-import { useForm } from "react-hook-form";
-import { FdForm, FdFormControl, FdFormField, FdFormItem, FdFormMessage, } from "@fd-component-toolbox/form/FdForm";
-import { FdLabel } from "@fd-component-toolbox/label/FdLabel";
-import { FdInput } from "@fd-component-toolbox/input/FdInput";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { onForgotPassword, forgotPasswordSchema, getForgotPasswordSuccessMessageId, getForgotPasswordEmailInputId, getForgotPasswordSendButtonId, } from "@fd-app-toolbox/forgot-password-form/ForgotPasswordForm.funcs";
-import { routes } from "@fd-toolbox/routing/routes";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { forms } from "@fd-app-toolbox/form-constants/forms";
-import FdLink from "@fd-component-toolbox/link/FdLink";
-import { userRoutes } from "@fd-toolbox/constants/user-routes";
-import { userDisplayProps } from "@fd-app-toolbox/user-dto";
-import { FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-import { FdSubHeading } from "@fd-component-toolbox/subheading/FdSubHeading";
-import { useSetTitle } from "@meta/page/use-set-title";
-import { forgotPasswordMessages } from "@fd-app-toolbox/forgot-password-form/forgot-password-messages-constants";
-const pageTitle = "Forgot Password";
-/**
- * Forgot password form that sends a reset e-mail on submit.
- */
-function ForgotPasswordForm() {
-    useSetTitle(pageTitle);
-    const form = useForm({
-        mode: "onChange",
-        resolver: zodResolver(forgotPasswordSchema),
-    });
-    const { handleSubmit, formState: { isValid, errors }, control, watch, } = form;
-    const [showSuccessMessage, setShowSuccessMessage] = useState(false);
-    const onSubmit = useCallback((data) => onForgotPassword(data, setShowSuccessMessage), []);
-    const email = watch(forms.email);
-    return (<div className="h-screen w-full lg:grid lg:min-h-[38rem] xl:min-h-11">
-            <div className="flex items-center justify-center py-12">
-                <div className="mx-auto grid w-80 gap-6">
-                    {showSuccessMessage ? (<div className="flex flex-col items-center text-center" id={getForgotPasswordSuccessMessageId()}>
-                            <FdIcon name={iconNames.envelopeClosed} className="size-24"/>
-                            <FdSubHeading className="mt-3 text-4xl font-bold text-foreground">
-                                {forgotPasswordMessages.successTitle}
-                            </FdSubHeading>
-                            <p className="mt-6">
-                                {forgotPasswordMessages.successParagraph1.split("{email}")[0]}
-                                <span className="font-bold">{email}</span>
-                                {forgotPasswordMessages.successParagraph1.split("{email}")[1]}
-                            </p>
-                            <p className="mt-4">{forgotPasswordMessages.successParagraph2}</p>
-                            <p className="mt-4">
-                                <FdLink href={routes.login}>
-                                    {forgotPasswordMessages.successLinkTextStart}
-                                    <span className="font-bold underline">
-                                        {forgotPasswordMessages.successLinkTextInner}
-                                    </span>
-                                </FdLink>
-                            </p>
-                        </div>) : (<>
-                            <div className="grid gap-2 text-center">
-                                <FdSubHeading className="text-3xl font-bold">Forgot Password</FdSubHeading>
-                            </div>
-
-                            <FdForm {...form}>
-                                <form onSubmit={handleSubmit(onSubmit)}>
-                                    <FdFormField control={control} name={userRoutes.email} render={({ field }) => (<FdFormItem>
-                                                <div className="w-full p-1">
-                                                    <FdLabel className={errors.email ? "text-destructive" : ""}>
-                                                        {userDisplayProps.email}
-                                                    </FdLabel>
-                                                    <FdFormControl>
-                                                        <FdInput {...field} inputId={getForgotPasswordEmailInputId()} placeholder={userDisplayProps.email} showClearIcon={true} className={errors.email ? "border-red-500" : ""}></FdInput>
-                                                    </FdFormControl>
-                                                    <FdFormMessage>{errors.email?.message}</FdFormMessage>
-                                                    <p className={"mt-1 text-xs"}>
-                                                        Enter your e-mail and we will send you reset
-                                                        instructions!
-                                                    </p>
-                                                </div>
-                                            </FdFormItem>)}/>
-                                    <FdButton className="mr-4 mt-4 block w-full" id={getForgotPasswordSendButtonId()} disabled={!isValid} type="submit">
-                                        Send
-                                    </FdButton>
-                                </form>
-                            </FdForm>
-                        </>)}
-                </div>
-            </div>
-        </div>);
-}
-export default ForgotPasswordForm;

package/packages/level2/fd-app-toolbox/layout/client-layout/ClientLayout.jsx

@@ -1,19 +0,0 @@
-"use client";
-import { FdToolbar } from "@fd-app-toolbox/layout/toolbar/FdToolbar";
-import FdSidebar from "@fd-app-toolbox/layout/sidebar/FdSidebar";
-import { Suspense } from "react";
-import { FdNarrowNavbar } from "@fd-app-toolbox/layout/navbar/FdNarrowNavbar";
-import { cn } from "@fd-toolbox/lib/utils";
-import { toolbarConfig, toolbarLayoutTypes } from "@fd-app-toolbox/layout/client-layout/client-layout-config";
-export function ClientLayout({ children, userSettingsPromise, visibleWorkspacesPromise, notificationsPromise, userWorkspacesPromise, }) {
-    return (<Suspense>
-            <FdToolbar className="flex-none" layoutConfig={toolbarConfig} userSettingsPromise={userSettingsPromise} visibleWorkspacesPromise={visibleWorkspacesPromise} notificationsPromise={notificationsPromise} userWorkspacesPromise={userWorkspacesPromise}/>
-            <div className="relative flex grow-0 basis-full overflow-hidden">
-                <FdSidebar toolbarLayoutType={toolbarConfig.toolbarLayout}/>
-                <div className={cn("mb-14 grow overflow-y-auto overflow-x-hidden sm:mb-0", toolbarConfig.toolbarLayout === toolbarLayoutTypes.default && "md:ml-14")}>
-                    {children}
-                </div>
-            </div>
-            <FdNarrowNavbar className="flex-none"/>
-        </Suspense>);
-}

package/packages/level2/fd-app-toolbox/layout/client-root/ClientRoot.jsx

@@ -1,32 +0,0 @@
-"use client";
-import React, { useState, useEffect, use } from "react";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { initialize, onError } from "@fd-app-toolbox/layout/client-root/ClientRoot.funcs";
-import { ClientLayout } from "@fd-app-toolbox/layout/client-layout/ClientLayout";
-import { useSidebarResources, } from "@fd-app-toolbox/layout/sidebar/sidebar-resources-provider";
-import { useGlobalConfig } from "@meta/providers/global-provider/FdGlobalContext";
-export function ClientRoot({ children, preloadDataPromise, sidebarResourcesPromise, userSettingsPromise, visibleWorkspacesPromise, notificationsPromise, userWorkspacesPromise, }) {
-    const preloadData = use(preloadDataPromise);
-    const sidebarResources = use(sidebarResourcesPromise);
-    const [isLoading, setIsLoading] = useState(true);
-    const { globalConfig, setGlobalConfig } = useGlobalConfig();
-    const { initSideBarResources } = useSidebarResources();
-    useEffect(() => {
-        setGlobalConfig((prev) => ({
-            ...prev,
-            preloadData: preloadData,
-        }));
-    }, [preloadData, setGlobalConfig]);
-    useEffect(() => {
-        initSideBarResources(sidebarResources);
-    }, [sidebarResources, initSideBarResources]);
-    useAsyncEffect(async () => {
-        await initialize(globalConfig.resourceListConfigs, setIsLoading, preloadData);
-    }, []);
-    useEffect(() => {
-        onError();
-    });
-    return (!isLoading && (<ClientLayout userSettingsPromise={userSettingsPromise} visibleWorkspacesPromise={visibleWorkspacesPromise} notificationsPromise={notificationsPromise} userWorkspacesPromise={userWorkspacesPromise}>
-                {children}
-            </ClientLayout>));
-}

package/packages/level2/fd-app-toolbox/layout/hamburger-menu/FdHamburgerMenu.jsx

@@ -1,47 +0,0 @@
-import { defaultSidebarIconName, FdIcon, iconNames, iconSizes } from "@fd-component-toolbox/icon/FdIcon";
-import React, { useEffect, useState } from "react";
-import { FdSheet, FdSheetContent, FdSheetHeader, FdSheetTrigger } from "@fd-component-toolbox/sheet/FdSheet";
-import { cn } from "@fd-toolbox/lib/utils";
-import FdLink from "@fd-component-toolbox/link/FdLink";
-import { FdUserDropdownMenu } from "@fd-app-toolbox/menu/user-dropdown-menu/FdUserDropdownMenu";
-import { createToolbarMenuSubgroups } from "@fd-app-toolbox/layout/toolbar/FdToolbar.funcs";
-import { elements } from "@fd-toolbox/constants/elements";
-import { useSidebarResources } from "@fd-app-toolbox/layout/sidebar/sidebar-resources-provider";
-import { useAuth } from "@fd-app-toolbox/providers/auth-provider/AuthProvider";
-export function FdHamburgerMenu({ className, userWorkspacesPromise, visibleWorkspacesPromise, }) {
-    const [isMenuOpen, setIsMenuOpen] = useState(false);
-    const [menuSubgroups, setMenuSubgroups] = useState([]);
-    const { sidebarResources } = useSidebarResources();
-    const authContext = useAuth();
-    useEffect(() => {
-        setMenuSubgroups(createToolbarMenuSubgroups());
-    }, [authContext.loginState]);
-    return (<FdSheet open={isMenuOpen} onOpenChange={setIsMenuOpen}>
-            <FdSheetTrigger asChild>
-                <div className={cn("m-1 mr-3 flex size-8 cursor-pointer items-center justify-center rounded-md hover:bg-fd-tertiary-700", className)} onClick={() => setIsMenuOpen((prev) => !prev)}>
-                    <FdIcon name={iconNames.hamburgerMenu} size={iconSizes.small} color="text-white"/>
-                </div>
-            </FdSheetTrigger>
-            <FdSheetContent className={cn("flex h-full w-fit flex-col border-none bg-fd-tertiary-900 p-0 pb-4", !isMenuOpen && "hidden")} side="left">
-                <FdSheetHeader className="min-h-12 flex-row items-center space-y-0 bg-fd-tertiary-900 px-7">
-                    <div className="m-0 flex items-start justify-start p-0">
-                        <FdUserDropdownMenu id={elements.userDropdownMenu.userDropdownMenuId} items={menuSubgroups} userWorkspacesPromise={userWorkspacesPromise} visibleWorkspacesPromise={visibleWorkspacesPromise} parentContextName={elements.hamburgerMenu}/>
-                    </div>
-                </FdSheetHeader>
-                <div className="flex h-[93%] w-full flex-col text-fd-tertiary-50">
-                    {sidebarResources.map((resource) => (<FdLink onClick={() => {
-                setIsMenuOpen(false);
-            }} key={resource.name} href={resource?.link ?? " #"} className={"flex w-auto shrink-0 cursor-pointer flex-row items-center justify-start px-7 py-3 text-base text-fd-tertiary-50 hover:bg-fd-tertiary-700"}>
-                            <div className="relative flex flex-row items-center gap-3">
-                                <label className="hover:cursor-pointer [&>svg]:size-5">
-                                    <FdIcon name={resource?.icon ?? defaultSidebarIconName} color="text-fd-tertiary-50"/>
-                                </label>
-                                <p className="left-full block text-nowrap font-medium">
-                                    {resource.displayName}
-                                </p>
-                            </div>
-                        </FdLink>))}
-                </div>
-            </FdSheetContent>
-        </FdSheet>);
-}

package/packages/level2/fd-app-toolbox/layout/navbar/FdNarrowNavbar.jsx

@@ -1,40 +0,0 @@
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdIcon, defaultSidebarIconName, iconSizes } from "@fd-component-toolbox/icon/FdIcon";
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
-import FdLink from "@fd-component-toolbox/link/FdLink";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { useSidebarResources } from "@fd-app-toolbox/layout/sidebar/sidebar-resources-provider";
-import { useSearchDialog } from "@fd-app-toolbox/search/search-dialog-provider";
-/**
- * Mobile-friendly narrow navigation bar component.
- * Displays a bottom-fixed horizontal menu with navigation items and a search button.
- *
- * @param props - {@link FdNarrowNavbarProps}
- */
-export function FdNarrowNavbar({ className }) {
-    const { openDialog } = useSearchDialog();
-    const { sidebarResources } = useSidebarResources();
-    return (<section className="z-50 block sm:hidden">
-            <div className={cn("fixed bottom-0 h-14 w-full bg-fd-tertiary-900 transition-[width] duration-75 ease-in hover:shadow-toolbar", className)}>
-                <div className="flex size-full flex-row justify-between">
-                    <nav className="flex grow flex-row justify-between gap-x-2 whitespace-nowrap p-2">
-                        {sidebarResources.map((resource) => (<FdLink key={resource.name} href={resource.link}>
-                                <FdButton variant="icon" className="relative flex size-full min-w-14 shrink-0 flex-col items-center justify-center gap-1 rounded-md p-0 px-1 text-xs hover:bg-fd-tertiary-700">
-                                    <FdIcon size={iconSizes.medium} name={resource?.icon ?? defaultSidebarIconName} color="text-fd-tertiary-50"/>
-                                    <p className="left-full block text-nowrap text-fd-tertiary-50">
-                                        {resource.displayName}
-                                    </p>
-                                </FdButton>
-                            </FdLink>))}
-                        <FdLink href="#" className={"group flex min-w-14 shrink-0 cursor-pointer items-center justify-center gap-3 rounded-md p-1 text-xs text-fd-tertiary-50 hover:bg-fd-tertiary-700"} onClick={openDialog}>
-                            <div className="relative flex flex-col items-center gap-1">
-                                <label className="hover:cursor-pointer [&>svg]:size-5">
-                                    <MagnifyingGlassIcon />
-                                </label>
-                            </div>
-                        </FdLink>
-                    </nav>
-                </div>
-            </div>
-        </section>);
-}

package/packages/level2/fd-app-toolbox/layout/sidebar/FdSidebar.jsx

@@ -1,48 +0,0 @@
-"use client";
-import React, { useCallback, useMemo, useRef } from "react";
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { sidebarStatuses } from "@fd-app-toolbox/layout/sidebar/FdSidebar.funcs";
-import { FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-import { FdSidebarDropdownMenu } from "@fd-app-toolbox/layout/sidebar/sidebar-dropdown-menu/FdSidebarDropdownMenu";
-import { toolbarLayoutTypes, } from "@fd-app-toolbox/layout/client-layout/client-layout-config";
-import { useSidebarResources } from "@fd-app-toolbox/layout/sidebar/sidebar-resources-provider";
-import { useAuth } from "@fd-app-toolbox/providers/auth-provider/AuthProvider";
-import { useSidebarContext } from "@fd-app-toolbox/providers/sidebar-provider/FdSidebarContext";
-import { elements } from "@fd-toolbox/constants/elements";
-function FdSidebar({ className, toolbarLayoutType }) {
-    const { sidebarResources } = useSidebarResources();
-    const sidebarRef = useRef(null);
-    const authContext = useAuth();
-    const sidebarContext = useSidebarContext();
-    const sidebarState = sidebarContext?.sidebarState ?? sidebarStatuses.minified;
-    const setSidebarState = useCallback((state) => {
-        if (sidebarContext?.setSidebarState) {
-            sidebarContext.setSidebarState(state);
-        }
-    }, [sidebarContext]);
-    const handleFixedState = useCallback(() => {
-        setSidebarState(sidebarState === sidebarStatuses.fixedOpen ? sidebarStatuses.minified : sidebarStatuses.fixedOpen);
-    }, [sidebarState, setSidebarState]);
-    const isOpenSidebar = useMemo(() => sidebarState === sidebarStatuses.fixedOpen, [sidebarState]);
-    if (toolbarLayoutType === toolbarLayoutTypes.topBarOnly) {
-        return null;
-    }
-    return (<section id={elements.sidebar} className="hidden md:block">
-            {authContext.loginState.loggedIn && (<div ref={sidebarRef} className={cn("group absolute inset-0 z-20 h-full bg-fd-tertiary-900 transition-[width] duration-75 ease-in after:pointer-events-none after:absolute after:-right-5 after:top-0 after:block after:h-2 after:w-5 after:rounded-tl-lg after:shadow-toolbar-rounded after:content-[\"\"]", className, sidebarState === sidebarStatuses.fixedOpen && "relative -mr-16 w-60", sidebarState === sidebarStatuses.minified && "w-14")}>
-                    <div className="flex size-full min-w-14 flex-col items-start justify-between p-3 pb-0">
-                        <nav className="flex w-full flex-col gap-y-1 overflow-x-visible scroll-smooth whitespace-nowrap">
-                            {sidebarResources.map((sidebarItem) => (<FdSidebarDropdownMenu key={sidebarItem.name} name={sidebarItem.name} displayName={sidebarItem.displayName} icon={sidebarItem.icon} url={sidebarItem.link} isOpenSidebar={isOpenSidebar} isSubmenu={false}/>))}
-                        </nav>
-                        <div className={cn("flex w-full flex-row-reverse justify-center pb-3", isOpenSidebar && "justify-normal")}>
-                            <FdButton id={elements.sidebarToggleButton} onClick={handleFixedState} className={cn("flex items-center justify-center rounded-md bg-transparent shadow-none duration-75 ease-in hover:bg-fd-tertiary-700", isOpenSidebar && "w-fit justify-end")}>
-                                <div className={cn("size-4 shrink-0 grow-0 basis-4 border border-fd-tertiary-50 text-fd-tertiary-50", isOpenSidebar && "flex items-center")}>
-                                    {isOpenSidebar ? (<FdIcon name={iconNames.caretLeftIcon} color="fd-tertiary-50"/>) : (<div className="h-3.5 w-1.5 bg-fd-tertiary-50"/>)}
-                                </div>
-                            </FdButton>
-                        </div>
-                    </div>
-                </div>)}
-        </section>);
-}
-export default FdSidebar;

package/packages/level2/fd-app-toolbox/layout/sidebar/sidebar-dropdown-menu/FdDropdownMenuItemTitle.jsx

@@ -1,12 +0,0 @@
-import FdLink from "@fd-component-toolbox/link/FdLink";
-function FdDropdownMenuItemTitle({ label, url, onDropdownCloseChange }) {
-    if (url) {
-        return (<div className="flex min-w-52 cursor-pointer items-center rounded-sm border-none bg-fd-tertiary-700 px-4 py-2 text-sm text-fd-tertiary-50" onClick={onDropdownCloseChange}>
-                <FdLink href={url} className="font-bold">
-                    {label}
-                </FdLink>
-            </div>);
-    }
-    return null;
-}
-export default FdDropdownMenuItemTitle;

package/packages/level2/fd-app-toolbox/layout/sidebar/sidebar-dropdown-menu/FdSidebarDropdownMenu.jsx

@@ -1,81 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdDropdownMenu, FdDropdownMenuContent, FdDropdownMenuTrigger, } from "@fd-component-toolbox/dropdown-menu/FdDropdownMenu";
-import { defaultSidebarIconName, FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-import { useFdPathname, useFdSearchParams } from "@meta/client/framework/hooks";
-import { updateActiveLink } from "@fd-app-toolbox/layout/sidebar/sidebar-dropdown-menu/FdSidebarDropdownMenu.funcs";
-import FdDropdownMenuItemTitle from "@fd-app-toolbox/layout/sidebar/sidebar-dropdown-menu/FdDropdownMenuItemTitle";
-import FdLink from "@fd-component-toolbox/link/FdLink";
-import { tooltipContentSides, tooltipContentSidesStrings } from "@fd-component-toolbox/tooltip/FdTooltip";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-export function FdSidebarDropdownMenu({ name, displayName, icon, url, isOpenSidebar, isSubmenu, }) {
-    let result;
-    const pathname = useFdPathname();
-    const searchParams = useFdSearchParams();
-    const [isActiveLink, setIsActiveLink] = useState(false);
-    const [activeDropdown, setActiveDropdown] = useState(null);
-    useEffect(() => {
-        if (url)
-            updateActiveLink(setIsActiveLink, pathname, url, searchParams.toString());
-    }, [url, pathname, searchParams]);
-    const onDropdownOpenChange = useCallback((activeNameDropdown) => {
-        setActiveDropdown(activeNameDropdown);
-    }, []);
-    const onDropdownCloseChange = useCallback(() => {
-        setActiveDropdown(null);
-    }, []);
-    if (!url)
-        return result;
-    if (!isOpenSidebar) {
-        return (<FdLink href={url} className="relative">
-                {isSubmenu ? (<>
-                        <div className={cn("flex h-9 w-full shrink-0 cursor-pointer items-center justify-start gap-3 rounded-md p-2 text-sm text-fd-tertiary-50 hover:bg-fd-tertiary-700", isActiveLink && "bg-fd-tertiary-700")} onMouseEnter={() => onDropdownOpenChange(name)} onMouseLeave={onDropdownCloseChange}>
-                            <FdButton variant="icon" className="p-0">
-                                <FdIcon name={icon ?? defaultSidebarIconName} color="text-fd-tertiary-50"/>
-                            </FdButton>
-                        </div>
-                        {activeDropdown === name && (<div className="absolute left-full top-[20%] h-4 w-10 items-center" onMouseEnter={() => onDropdownOpenChange(name)}/>)}
-
-                        <div className={cn("cursor-pointer", activeDropdown === name ? "absolute left-12 top-0" : "hidden")} onMouseLeave={onDropdownCloseChange}>
-                            <FdDropdownMenuItemTitle label={displayName} url={url} onDropdownCloseChange={onDropdownCloseChange}/>
-                        </div>
-                    </>) : (<div onMouseEnter={() => onDropdownOpenChange(name)} onMouseLeave={onDropdownCloseChange}>
-                        <FdButton variant="icon" className={cn("flex h-9 w-full shrink-0 cursor-pointer items-center justify-start gap-3 rounded-md p-2 text-sm text-fd-tertiary-50 hover:bg-fd-tertiary-700", isActiveLink && "bg-fd-tertiary-700")} tooltipSide={tooltipContentSidesStrings[tooltipContentSides.right]} tooltipText={displayName} tooltipClassName="ml-3">
-                            <FdIcon name={icon ?? defaultSidebarIconName} color="text-fd-tertiary-50"/>
-                        </FdButton>
-                    </div>)}
-            </FdLink>);
-    }
-    return (<div>
-            {isSubmenu ? (<FdDropdownMenu open={activeDropdown === name} onOpenChange={(open) => (open ? onDropdownOpenChange(name) : onDropdownCloseChange())}>
-                    <div className="relative">
-                        <FdDropdownMenuTrigger asChild>
-                            <div className={cn("flex h-9 w-full shrink-0 cursor-pointer items-center justify-start gap-3 rounded-md p-2 text-sm text-fd-tertiary-50 hover:bg-fd-tertiary-700", isActiveLink && "bg-fd-tertiary-700")}>
-                                <div className="flex w-full items-center justify-between gap-3">
-                                    <div className="flex items-center gap-3">
-                                        <label className="hover:cursor-pointer [&>svg]:size-4">
-                                            <FdIcon name={icon ?? defaultSidebarIconName} color="text-fd-tertiary-50"/>
-                                        </label>
-                                        <p className="text-nowrap">{displayName}</p>
-                                    </div>
-                                    <FdIcon name={iconNames.chevronRight} color="text-fd-tertiary-50" className="text-nowrap"/>
-                                </div>
-                            </div>
-                        </FdDropdownMenuTrigger>
-                    </div>
-
-                    <FdDropdownMenuContent align="start" side="right" sideOffset={17} className="rounded-sm border-none bg-fd-tertiary-700 p-0 text-fd-tertiary-50" onMouseLeave={onDropdownCloseChange}>
-                        <FdDropdownMenuItemTitle label={displayName} url={url} onDropdownCloseChange={onDropdownCloseChange}/>
-                    </FdDropdownMenuContent>
-                </FdDropdownMenu>) : (<FdLink href={url} className={cn("flex h-9 w-full shrink-0 cursor-pointer items-center justify-start gap-3 rounded-md p-2 text-sm text-fd-tertiary-50 hover:bg-fd-tertiary-700", isActiveLink && "bg-fd-tertiary-700")}>
-                    <div className="flex w-full items-center justify-between gap-3">
-                        <div className="flex items-center gap-3">
-                            <label className="hover:cursor-pointer [&>svg]:size-4">
-                                <FdIcon name={icon ?? defaultSidebarIconName} color="text-fd-tertiary-50"/>
-                            </label>
-                            <p className="text-nowrap">{displayName}</p>
-                        </div>
-                    </div>
-                </FdLink>)}
-        </div>);
-}

package/packages/level2/fd-app-toolbox/layout/sidebar/sidebar-resources-provider.jsx

@@ -1,30 +0,0 @@
-import React, { createContext, useContext, useState, useMemo, useCallback } from "react";
-import { createError } from "@fd-toolbox/errors/errors";
-import { metaErrorMessages } from "@meta/constants/meta-error-messages-constants";
-const SidebarResourcesContext = createContext(undefined);
-export function SidebarResourceProvider({ children, initialSidebarResources, }) {
-    const [sidebarResources, setSidebarResources] = useState(initialSidebarResources ?? []);
-    //Approved temp
-    // eslint-disable-next-line react-compiler/react-compiler
-    const initSideBarResources = useCallback(setSidebarResources, [setSidebarResources]);
-    const addSidebarResource = useCallback((resource) => {
-        setSidebarResources((prev) => prev.concat(resource));
-    }, [setSidebarResources]);
-    const removeSidebarResource = useCallback((resourceName) => {
-        setSidebarResources((prev) => prev.filter((resource) => resource.name !== resourceName));
-    }, [setSidebarResources]);
-    const contextValue = useMemo(() => ({
-        sidebarResources,
-        addSidebarResource,
-        removeSidebarResource,
-        initSideBarResources,
-    }), [sidebarResources, addSidebarResource, removeSidebarResource, initSideBarResources]);
-    return (<SidebarResourcesContext.Provider value={contextValue}>{children}</SidebarResourcesContext.Provider>);
-}
-export function useSidebarResources() {
-    const context = useContext(SidebarResourcesContext);
-    if (!context) {
-        throw createError(metaErrorMessages.sidebarResourceNamesUsedOutside);
-    }
-    return context;
-}

package/packages/level2/fd-app-toolbox/layout/toolbar/FdToolbar.jsx

@@ -1,89 +0,0 @@
-"use client";
-import React, { useState, useCallback, useLayoutEffect, use, Suspense } from "react";
-import { FdUserDropdownMenu } from "@fd-app-toolbox/menu/user-dropdown-menu/FdUserDropdownMenu";
-import { FdSeparator } from "@fd-component-toolbox/separator/FdSeparator";
-import { cn } from "@fd-toolbox/lib/utils";
-import { setToolbarSubgroups } from "@fd-app-toolbox/layout/toolbar/FdToolbar.funcs";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { FdNotificationMenu } from "@fd-app-toolbox/menu/notifications-menu/FdNotificationMenu";
-import { FdHamburgerMenu } from "@fd-app-toolbox/layout/hamburger-menu/FdHamburgerMenu";
-import { FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-import { FdSearch } from "@fd-app-toolbox/search/FdSearch";
-import { useTitle } from "@meta/page/use-title";
-import { FdImage } from "@fd-component-toolbox/image/FdImage";
-import FdLink from "@fd-component-toolbox/link/FdLink";
-import FdTopNav from "@fd-app-toolbox/layout/toolbar/FdTopNav";
-import { toolbarLayoutTypes } from "@fd-app-toolbox/layout/client-layout/client-layout-config";
-import { elements } from "@fd-toolbox/constants/elements";
-import { useAuth } from "@fd-app-toolbox/providers/auth-provider/AuthProvider";
-import { logout } from "@meta/auth/logins";
-import { getUserDropDownMenuTriggerId } from "@fd-app-toolbox/menu/user-dropdown-menu/user-dropdown-menu-item/FdUserDropdownMenu.funcs";
-import { useFdRouter } from "@meta/client/framework/hooks";
-import { routes } from "@fd-toolbox/routing/routes";
-/**
- * Top navigation bar used in the application layout.
- *
- * @param props - {@link FdToolbarProps}
- */
-export function FdToolbar({ className, layoutConfig, userSettingsPromise, visibleWorkspacesPromise, userWorkspacesPromise, notificationsPromise, }) {
-    const userSettings = use(userSettingsPromise)?.[0];
-    const [menuSubgroups, setMenuSubgroups] = useState([]);
-    const { title } = useTitle();
-    const authContext = useAuth();
-    const [contextTitle, setContextTitle] = useState();
-    const router = useFdRouter();
-    useLayoutEffect(() => {
-        setContextTitle(title);
-    }, [title]);
-    const handleLogout = useCallback(async () => {
-        await logout();
-        router.push(routes.login);
-    }, [router]);
-    useAsyncEffect(async () => {
-        setToolbarSubgroups(setMenuSubgroups, userSettings, handleLogout);
-    }, [authContext.loginState, handleLogout]);
-    const isCompactMode = layoutConfig.toolbarLayout === toolbarLayoutTypes.topBarOnly;
-    return (<header id={elements.toolbar}>
-            {authContext.loginState.loggedIn && (<div className={cn("flex h-11 items-center justify-between bg-fd-tertiary-900 pr-3", className)}>
-                    <div className="flex grow items-center">
-                        <div className="flex items-center md:hidden">
-                            <FdHamburgerMenu userWorkspacesPromise={userWorkspacesPromise} visibleWorkspacesPromise={visibleWorkspacesPromise}/>
-                            <FdSeparator orientation="vertical" className="mx-4 hidden h-6 bg-fd-tertiary-600 md:block"/>
-                        </div>
-                        <div className="mx-2 my-1 mt-2.5 hidden min-w-10 rounded-md p-0.5 hover:bg-fd-tertiary-700 md:flex md:items-center md:justify-center">
-                            <FdImage priority src="/logo.svg" alt="logo" width={26} height={26}/>
-                        </div>
-                        <div className={cn("relative w-fit", isCompactMode ? "max-w-60" : "max-w-sm md:w-full")}>
-                            <form onSubmit={(event) => event.preventDefault()} className="flex w-full items-center">
-                                <FdSearch parentContextName={elements.toolbar} isCompactMode={isCompactMode}/>
-                            </form>
-                        </div>
-                        {contextTitle && (<div className="mx-4 flex grow flex-row items-center justify-center md:flex-none md:justify-start">
-                                <div className="text-sm text-fd-tertiary-50">{contextTitle}</div>
-                            </div>)}
-                        <div className={cn("flex-row items-center", isCompactMode ? "hidden lg:flex" : "hidden")}>
-                            <FdSeparator orientation="vertical" className="mx-4 h-6 bg-fd-tertiary-600"/>
-                            <FdTopNav />
-                        </div>
-                    </div>
-                    <div className="flex flex-row items-center">
-                        <FdSeparator orientation="vertical" className="mx-4 hidden h-6 bg-fd-tertiary-600 md:block"/>
-                        <div className="flex flex-row space-x-2">
-                            <FdLink href="https://share.hsforms.com/1Lo6k-t0WSZuOKxA2SqVVjgd42d4" className="flex size-8 items-center">
-                                <FdButton variant="icon" className="flex size-full items-center justify-center rounded-md p-2 hover:bg-fd-tertiary-700" tooltipText="Create ticket" tooltipClassName="mt-2">
-                                    <FdIcon color="color-white" name={iconNames.questionMarkCircledIcon} className="size-4 text-fd-tertiary-50"/>
-                                </FdButton>
-                            </FdLink>
-                            <Suspense>
-                                <FdNotificationMenu parentContextName={elements.toolbar} notificationsPromise={notificationsPromise}/>
-                            </Suspense>
-                        </div>
-                        <div className="hidden flex-row items-center md:flex">
-                            <FdSeparator orientation="vertical" className="mx-4 h-6 bg-fd-tertiary-600"/>
-                            <FdUserDropdownMenu id={getUserDropDownMenuTriggerId(elements.toolbar)} items={menuSubgroups} userWorkspacesPromise={userWorkspacesPromise} visibleWorkspacesPromise={visibleWorkspacesPromise} parentContextName={elements.toolbar}/>
-                        </div>
-                    </div>
-                </div>)}
-        </header>);
-}

package/packages/level2/fd-app-toolbox/layout/toolbar/FdTopNav.jsx

@@ -1,42 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import { FdIcon, defaultSidebarIconName } from "@fd-component-toolbox/icon/FdIcon";
-import FdLink from "@fd-component-toolbox/link/FdLink";
-import { useSidebarResources } from "@fd-app-toolbox/layout/sidebar/sidebar-resources-provider";
-/**
- * Top navigation bar displaying sidebar resource icons with tappable submenu controls,
- * optimized for mobile and touch devices.
- * Submenu is controlled by tapping the icon, allowing users to open or close the menu manually.
- */
-function FdTopNav() {
-    const { sidebarResources } = useSidebarResources();
-    const [hoveredItem, setHoveredItem] = useState(null);
-    return (<nav className="flex items-center gap-1 bg-fd-tertiary-900 p-2">
-            {sidebarResources.map((sidebarItem) => (<div key={sidebarItem.name} className="relative" onMouseEnter={() => setHoveredItem(sidebarItem.name)} onMouseLeave={() => setHoveredItem(null)}>
-                    <FdLink href={sidebarItem?.link ?? "#"} className="flex w-auto shrink-0 cursor-pointer items-center justify-center rounded-md p-2 text-sm text-fd-tertiary-50 hover:bg-fd-tertiary-700">
-                        <FdIcon name={sidebarItem?.icon ?? defaultSidebarIconName} color="text-fd-tertiary-50" className="size-4"/>
-                    </FdLink>
-
-                    {hoveredItem === sidebarItem.name && (<>
-                            <div className="absolute left-1/2 top-full z-50 w-full -translate-x-1/2 pt-2"/>
-                            <div className="absolute left-1/2 top-full z-50 mt-1 -translate-x-1/2 pt-2">
-                                <div className="min-w-48 rounded-md bg-fd-tertiary-700 p-2 shadow-lg">
-                                    <FdLink href={sidebarItem?.link ?? "#"} className="block rounded-md px-3 py-2 text-sm font-semibold text-fd-tertiary-50 hover:bg-fd-tertiary-600">
-                                        {sidebarItem?.displayName ?? sidebarItem.name}
-                                    </FdLink>
-
-                                    {sidebarItem.submenuItems && sidebarItem.submenuItems.length > 0 && (<div className="my-2 border-t border-fd-tertiary-600"></div>)}
-
-                                    {sidebarItem.submenuItems && (<div className="flex flex-col gap-1">
-                                            {sidebarItem.submenuItems.map((submenuItem) => (<FdLink key={submenuItem.name} href={submenuItem.link} className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-fd-tertiary-50 hover:bg-fd-tertiary-600">
-                                                    {submenuItem.icon && (<FdIcon name={submenuItem.icon} className="size-4 text-fd-tertiary-50"/>)}
-                                                    {submenuItem.name}
-                                                </FdLink>))}
-                                        </div>)}
-                                </div>
-                            </div>
-                        </>)}
-                </div>))}
-        </nav>);
-}
-export default FdTopNav;

package/packages/level2/fd-app-toolbox/layout/toolbar/title-provider/ToolbarTitleProvider.jsx

@@ -1,10 +0,0 @@
-import { useLayoutEffect, useMemo, useState } from "react";
-import { TitleContext } from "@meta/page/title-context";
-export default function TitleProvider({ children, appTitle }) {
-    const [title, setTitle] = useState("");
-    const contextValue = useMemo(() => ({ title, setTitle }), [title, setTitle]);
-    useLayoutEffect(() => {
-        document.title = appTitle + (title && ` - ${title}`);
-    }, [title, appTitle]);
-    return <TitleContext.Provider value={contextValue}>{children}</TitleContext.Provider>;
-}