Feat/cascader

apps/desktop/packages/mainWindow/src/main.tsx

@@ -16,8 +16,9 @@ import App from "@/app";
 import { ModalProvider } from "@/managers/ModalsManager";
 import "virtual:uno.css";
 import "@gd/ui/style.css";
-import { ContextMenuProvider, NotificationsProvider } from "@gd/ui";
+import { NotificationsProvider, ContextMenuProvider } from "@gd/ui";
 import { NavigationManager } from "./managers/NavigationManager";
+import { ContextCascaderProvider } from "@gd/ui";
 // import { ContextMenuProvider } from "./components/ContextMenu/ContextMenuContext";
 import RiveAppWapper from "./utils/RiveAppWrapper";
 import GDAnimation from "./gd_logo_animation.riv";
@@ -195,11 +196,15 @@ const TransWrapper = (props: TransWrapperProps) => {
       <TransProvider instance={_i18nInstance}>
         <Router source={hashIntegration()}>
           <NavigationManager>
-            <ContextMenuProvider>
-              <ModalProvider>
-                <App createInvalidateQuery={props.createInvalidateQuery} />
-              </ModalProvider>
-            </ContextMenuProvider>
+            <NotificationsProvider>
+              <ContextCascaderProvider>
+                <ContextMenuProvider>
+                  <ModalProvider>
+                    <App createInvalidateQuery={props.createInvalidateQuery} />
+                  </ModalProvider>
+                </ContextMenuProvider>
+              </ContextCascaderProvider>
+            </NotificationsProvider>
           </NavigationManager>
         </Router>
       </TransProvider>

apps/desktop/packages/mainWindow/src/pages/Modpacks/ModpacksBrowser.tsx

@@ -27,6 +27,7 @@ import {
   NoMoreModpacks
 } from "./ModpacksStatus";
 import { useInfiniteModsQuery } from "@/components/InfiniteScrollModsQueryWrapper";
+import Sidebar from "@/components/Sidebar/modpacks";
 
 const ModpackBrowser = () => {
   const [t] = useTransContext();
@@ -97,6 +98,7 @@ const ModpackBrowser = () => {
           </Match>
           <Match when={hasFiltersData()}>
             <div class="flex items-center justify-between gap-3 pb-4 flex-wrap">
+              <Sidebar />
               <Input
                 placeholder="Type Here"
                 value={infiniteQuery?.query.searchQuery || ""}

apps/desktop/packages/mainWindow/src/pages/Modpacks/index.tsx

@@ -1,20 +1,17 @@
-import Sidebar from "@/components/Sidebar/modpacks";
 import { Outlet } from "@solidjs/router";
 import ContentWrapper from "@/components/ModpackBrowserWrapper";
 import InfiniteScrollModsLayout from "@/components/InfiniteScrollModsQueryWrapper";
 
 function ModpacksLayout() {
   return (
-    <div class="flex w-full h-full">
-      <InfiniteScrollModsLayout type="modPack">
-        <>
-          <Sidebar />
-          <ContentWrapper>
-            <Outlet />
-          </ContentWrapper>
-        </>
-      </InfiniteScrollModsLayout>
-    </div>
+    <InfiniteScrollModsLayout type="modPack">
+      <>
+        {/* <Sidebar /> */}
+        <ContentWrapper>
+          <Outlet />
+        </ContentWrapper>
+      </>
+    </InfiniteScrollModsLayout>
   );
 }
 

apps/desktop/packages/mainWindow/src/pages/Mods/ModsBrowser.tsx

@@ -32,6 +32,7 @@ import DefaultImg from "/assets/images/default-instance-img.png";
 import { useGDNavigate } from "@/managers/NavigationManager";
 import { getInstanceImageUrl } from "@/utils/instances";
 import { setInstanceId, instanceId as _instanceId } from "@/utils/browser";
+import Sidebar from "@/components/Sidebar/mods";
 
 const ModsBrowser = () => {
   const [t] = useTransContext();
@@ -186,6 +187,7 @@ const ModsBrowser = () => {
                 </div>
               </Show>
               <div class="flex items-center justify-between gap-3 flex-wrap pb-4">
+                <Sidebar />
                 <Input
                   placeholder={t("mods.search_mods")}
                   icon={<div class="i-ri:search-line" />}

apps/desktop/packages/mainWindow/src/pages/Mods/index.tsx

@@ -1,20 +1,17 @@
-import Sidebar from "@/components/Sidebar/mods";
 import { Outlet } from "@solidjs/router";
 import ContentWrapper from "@/components/ModpackBrowserWrapper";
 import InfiniteScrollModsLayout from "@/components/InfiniteScrollModsQueryWrapper";
 
 function ModpacksLayout() {
   return (
-    <div class="flex w-full h-full">
-      <InfiniteScrollModsLayout type="mod">
-        <>
-          <Sidebar />
-          <ContentWrapper>
-            <Outlet />
-          </ContentWrapper>
-        </>
-      </InfiniteScrollModsLayout>
-    </div>
+    <InfiniteScrollModsLayout type="mod">
+      <>
+        {/* <Sidebar /> */}
+        <ContentWrapper>
+          <Outlet />
+        </ContentWrapper>
+      </>
+    </InfiniteScrollModsLayout>
   );
 }
 

apps/desktop/packages/mainWindow/src/utils/instances.tsx

@@ -42,7 +42,11 @@ export const getInactiveState = (status: LaunchState | undefined) => {
     return status.value.failed_task;
   }
 };
-
+export const getValideInstance = (
+  status: ListInstanceStatus
+): ValidListInstance | undefined => {
+  if (status.status === "valid") return status.value;
+};
 export const isSubTaskDownload = (input: FESubtask): input is FESubtask => {
   return typeof input === "object" && "download" in input;
 };
@@ -158,8 +162,10 @@ export const CategoryIcon = (props: {
   );
 };
 
-export const PlatformIcon = (props: { modpack: "curseforge" | "modrinth" }) => {
-  return <img class="h-4 w-4" src={getModpackPlatformIcon(props.modpack)} />;
+export const PlatformIcon = (props: {
+  platform: "curseforge" | "modrinth";
+}) => {
+  return <img class="h-4 w-4" src={getModpackPlatformIcon(props.platform)} />;
 };
 
 export const [importedInstances, setImportedInstances] = createSignal<number[]>(

packages/ui/package.json

@@ -31,6 +31,7 @@
     "@unocss/eslint-config": "^0.53.1",
     "@unocss/transformer-directives": "^0.55.0",
     "babel-loader": "^9.1.2",
+    "class-variance-authority": "^0.7.0",
     "concurrently": "^8.2.0",
     "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",

packages/ui/src/Cascader/CascaderContext.tsx

@@ -0,0 +1,44 @@
+import {
+  Accessor,
+  createContext,
+  createSignal,
+  JSX,
+  useContext,
+} from "solid-js";
+
+type ContextCascaderContextValue = {
+  openCascader: Accessor<HTMLElement | null>;
+  setOpenCascader: (_target: HTMLElement | null) => void;
+  closeCascader: () => void;
+};
+
+const ContextCascaderContext = createContext<ContextCascaderContextValue>();
+
+type ContextCascaderProviderProps = {
+  children: JSX.Element;
+};
+
+const ContextCascaderProvider = (props: ContextCascaderProviderProps) => {
+  const [openCascader, setOpenCascader] = createSignal<HTMLElement | null>(
+    null
+  );
+
+  const closeCascader = () => {
+    setOpenCascader(null);
+  };
+  const value = { openCascader, setOpenCascader, closeCascader };
+
+  return (
+    <ContextCascaderContext.Provider value={value}>
+      {props.children}
+    </ContextCascaderContext.Provider>
+  );
+};
+
+const useContextCascader = () => {
+  return useContext(ContextCascaderContext);
+};
+
+export { ContextCascaderProvider, useContextCascader };
+
+export const Exported = 5;

packages/ui/src/Cascader/CascaderItem.tsx

@@ -0,0 +1,171 @@
+import { Accessor, Setter, Show, createEffect, createSignal } from "solid-js";
+import { Checkbox } from "../Checkbox";
+import ChildsMenu, { ChildsMenuProps } from "./ChildsMenu";
+import { Radio } from "../Radio";
+import _ from "lodash";
+
+const CascaderItem = (props: {
+  label: string;
+  children?: ChildsMenuProps;
+  name?: string;
+  value?: string;
+  isCheckbox?: boolean;
+  isOpen: boolean;
+  isParent: boolean;
+  onToggleMenu: () => void;
+  img?: any;
+  id?: string | number;
+  selectedItems: Accessor<string[]>;
+  setSelectedItems: Setter<string[]>;
+  parentLabel?: string;
+  items: {
+    label: string;
+    img: any;
+    id?: string | number;
+    children?: ChildsMenuProps;
+  }[];
+}) => {
+  const [numberOfCheckedItems, setNumberOfCheckedItems] = createSignal(0);
+  const [currentSelectedItem, setCurrentSelectedItem] = createSignal("None");
+
+  createEffect(() => {
+    if (props.children?.isCheckbox) {
+      setNumberOfCheckedItems(
+        props
+          .selectedItems()
+          .filter((item) =>
+            item?.includes(props.children?.parentLabel as string)
+          ).length
+      );
+    }
+  });
+  const handleRadio = (val: string | number | string[] | undefined) => {
+    props.setSelectedItems((prev) => {
+      const newItems = [...prev];
+      const index = newItems.findIndex((item) =>
+        item.includes(props.parentLabel as string)
+      );
+      let newValue = "";
+      const findElement = props.items.find(
+        (item) => item.id === val || item.label === val
+      );
+      if (findElement) {
+        newValue = `${props.parentLabel}//${findElement.label}`;
+      } else {
+        newValue = `${props.parentLabel}//${val}`;
+      }
+
+      if (index === -1) {
+        newItems.push(newValue);
+      } else {
+        newItems[index] = newValue;
+      }
+
+      return newItems;
+    });
+  };
+  createEffect(() => {
+    if (props.children) {
+      const index = props
+        .selectedItems()
+        .findIndex((item) =>
+          item.includes(props.children?.parentLabel as string)
+        );
+      if (index === -1) {
+        setCurrentSelectedItem("None");
+      } else {
+        setCurrentSelectedItem(
+          props.selectedItems()[index].split("//")[1] || "None"
+        );
+      }
+    }
+  });
+  return (
+    <div
+      class="w-full flex justify-between p-2 items-center hover:bg-[#1D2028]"
+      onMouseEnter={() => props.children && props.onToggleMenu()}
+    >
+      <Show when={!props.isCheckbox && props.isParent}>
+        <div>
+          <span class="text-white">{props.label}</span>
+        </div>
+      </Show>
+      <Show when={props.isCheckbox && !props.isParent}>
+        <Checkbox
+          onChange={() => {
+            if (
+              props.selectedItems().filter((item) => item.includes(props.label))
+                .length > 0
+            ) {
+              props.setSelectedItems((prev) =>
+                prev.filter((item) => !item.includes(props.label))
+              );
+            } else {
+              props.setSelectedItems((prev) => [
+                ...prev,
+                props.parentLabel + "//" + props.label,
+              ]);
+            }
+          }}
+          checked={
+            props
+              .selectedItems()
+              .filter((item) => item.split("//")[1] === props.label).length > 0
+          }
+          children={
+            <div class="flex items-center gap-2">
+              {props.img && props.img}
+              <span class="text-[#8A8B8F]">{props.label}</span>
+            </div>
+          }
+        />
+      </Show>
+      <Show when={!props.isCheckbox && !props.isParent}>
+        <Radio
+          onChange={handleRadio}
+          checked={
+            props
+              .selectedItems()
+              .filter((item) => item.split("//")[1] === props.label).length > 0
+          }
+          value={props.id || props.label}
+          children={
+            <div class="flex items-center gap-2">
+              {props.img && props.img}
+              <span class="text-[#8A8B8F]">{props.label}</span>
+            </div>
+          }
+        />
+      </Show>
+      <Show when={props.children && props.isOpen}>
+        <ChildsMenu
+          items={props.children!.items}
+          hasSearch={props.children!.hasSearch}
+          isCheckbox={props.children!.isCheckbox}
+          isParent={props.children!.isParent}
+          parentLabel={props.children!.parentLabel}
+          selectedItems={props.selectedItems}
+          setSelectedItems={props.setSelectedItems}
+          hasChildren={props.children!.hasChildren}
+        />
+      </Show>
+
+      <div class="flex items-center">
+        <Show
+          when={props.isParent && props.children && !props.children.isCheckbox}
+        >
+          <span class="text-[#8A8B8F]">{currentSelectedItem()}</span>
+        </Show>
+        <Show when={props.children && props.children.isCheckbox}>
+          <span class="text-[#8A8B8F]">
+            {numberOfCheckedItems()}/{props.children?.items.length}
+          </span>
+        </Show>
+        <Show when={props.children}>
+          <div class="text-[#8A8B8F] i-ri-arrow-right-s-line"></div>
+        </Show>
+      </div>
+    </div>
+  );
+};
+export default CascaderItem;