Merge branch 'update_remix' of https://github.com/communitycenter/sta…

…rdew.app into update_remix
communitycenter · May 20, 2024 · 10c9f23 · 10c9f23
2 parents 5001f31 + d1331f3
commit 10c9f23
Showing 1 changed file with 69 additions and 58 deletions.
diff --git a/src/pages/bundles.tsx b/src/pages/bundles.tsx
@@ -102,15 +102,15 @@ function AccordionSection(props: AccordionSectionProps): JSX.Element {
 }
 
 function BundleAccordion(props: BundleAccordionProps): JSX.Element {
-  const isDesktop = useMediaQuery("(min-width: 768px)");
+  const isDesktop = useMediaQuery("only screen and (min-width: 768px)");
   const { bundle, bundleStatus } = props.bundleWithStatus;
-  const bundleCompleted = BundleCompleted(props.bundleWithStatus);
 
   const totalItems = bundle.items.length;
   const requiredItems =
     bundle.itemsRequired === -1 ? totalItems : bundle.itemsRequired;
   const completedItems = bundleStatus.filter(Boolean).length;
   const remainingCount = requiredItems - completedItems;
+  const bundleCompleted = completedItems >= requiredItems;
 
   const bundleName = props.bundleWithStatus.bundle.localizedName;
 
@@ -129,63 +129,75 @@ function BundleAccordion(props: BundleAccordionProps): JSX.Element {
         )}
       >
         <AccordionItem value="item-1" className="border-none">
-          <AccordionTriggerNoToggle className="ml-1 pt-0 text-xl font-semibold text-gray-900 dark:text-white">
-            <div className="flex items-center gap-3">
-              <span>{bundleName} Bundle</span>
-              {props.alternateOptions && props.alternateOptions.length > 0 && (
-                <DropdownMenu>
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger>
-                        <DropdownMenuTrigger asChild>
-                          <IconSettings
-                            size={16}
-                            className="text-neutral-500 dark:text-neutral-400"
-                          />
-                        </DropdownMenuTrigger>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>Change Bundle</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-
-                  <DropdownMenuContent className="w-56">
-                    <DropdownMenuLabel>Remix Bundles</DropdownMenuLabel>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuRadioGroup
-                      value={selectedBundleName}
-                      onValueChange={(newBundleName) => {
-                        setSelectedBundleName(newBundleName);
-                        const selectedBundle = props.alternateOptions?.find(
-                          (bundle) => bundle.name === newBundleName,
-                        );
-                        if (props.onChangeBundle && selectedBundle) {
-                          props.onChangeBundle(
-                            selectedBundle,
-                            props.bundleWithStatus,
-                          );
-                        }
-                      }}
-                    >
-                      {props.alternateOptions.map((newBundle) => (
-                        <DropdownMenuRadioItem
-                          key={newBundle.name}
-                          value={newBundle.name}
+          <AccordionTriggerNoToggle
+            className={`ml-1 pt-0 text-xl font-semibold text-gray-900 dark:text-white ${isDesktop ? "flex-row" : "flex-col items-start"}`}
+          >
+            <div>
+              <div className="flex items-center gap-3">
+                <span>{bundleName} Bundle</span>
+                {props.alternateOptions &&
+                  props.alternateOptions.length > 0 && (
+                    <DropdownMenu>
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger>
+                            <DropdownMenuTrigger asChild>
+                              <IconSettings
+                                size={16}
+                                className="relative top-0.5 text-neutral-500 dark:text-neutral-400"
+                              />
+                            </DropdownMenuTrigger>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>Change Bundle</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+
+                      <DropdownMenuContent className="w-56">
+                        <DropdownMenuLabel>Remix Bundles</DropdownMenuLabel>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuRadioGroup
+                          value={selectedBundleName}
+                          onValueChange={(newBundleName) => {
+                            setSelectedBundleName(newBundleName);
+                            const selectedBundle = props.alternateOptions?.find(
+                              (bundle) => bundle.name === newBundleName,
+                            );
+                            if (props.onChangeBundle && selectedBundle) {
+                              props.onChangeBundle(
+                                selectedBundle,
+                                props.bundleWithStatus,
+                              );
+                            }
+                          }}
                         >
-                          {newBundle.localizedName}
-                        </DropdownMenuRadioItem>
-                      ))}
-                    </DropdownMenuRadioGroup>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              )}
+                          {props.alternateOptions.map((newBundle) => (
+                            <DropdownMenuRadioItem
+                              key={newBundle.name}
+                              value={newBundle.name}
+                            >
+                              {newBundle.localizedName}
+                            </DropdownMenuRadioItem>
+                          ))}
+                        </DropdownMenuRadioGroup>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  )}
+              </div>
             </div>
-            <Progress
-              value={completedItems}
-              max={remainingCount}
-              className="w-32"
-            />
+            {!bundleCompleted && (
+              <div className={`flex items-center ${isDesktop ? "" : "pt-2"}`}>
+                <Progress
+                  value={completedItems}
+                  max={requiredItems}
+                  className="w-32"
+                />
+                <span className="flex pl-3 text-sm">
+                  {requiredItems - remainingCount} / {requiredItems}
+                </span>
+              </div>
+            )}
           </AccordionTriggerNoToggle>
 
           <AccordionContent asChild>
@@ -446,7 +458,6 @@ export default function Bundles() {
       // See note in bundlesheet.tsx
       // @ts-ignore
       await patchPlayer(patch);
-      setBundles(GetActiveBundles(activePlayer));
     }
   }