From 585544a89d87ae62db5e2746294e0143c1383727 Mon Sep 17 00:00:00 2001
From: esummins <esummins@gmail.com>
Date: Thu, 16 May 2024 21:21:11 -0700
Subject: [PATCH 1/2] some changes

---
 src/pages/bundles.tsx | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/pages/bundles.tsx b/src/pages/bundles.tsx
index a623f30..0c05a1d 100644
--- a/src/pages/bundles.tsx
+++ b/src/pages/bundles.tsx
@@ -102,15 +102,14 @@ function AccordionSection(props: AccordionSectionProps): JSX.Element {
 }
 
 function BundleAccordion(props: BundleAccordionProps): JSX.Element {
-  const isDesktop = useMediaQuery("(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;
 
@@ -140,7 +139,7 @@ function BundleAccordion(props: BundleAccordionProps): JSX.Element {
                         <DropdownMenuTrigger asChild>
                           <IconSettings
                             size={16}
-                            className="text-neutral-500 dark:text-neutral-400"
+                            className="relative top-0.5 text-neutral-500 dark:text-neutral-400"
                           />
                         </DropdownMenuTrigger>
                       </TooltipTrigger>
@@ -181,11 +180,18 @@ function BundleAccordion(props: BundleAccordionProps): JSX.Element {
                 </DropdownMenu>
               )}
             </div>
-            <Progress
-              value={completedItems}
-              max={remainingCount}
-              className="w-32"
-            />
+            {!bundleCompleted && (
+              <div className="flex items-center">
+                <Progress
+                  value={completedItems}
+                  max={requiredItems}
+                  className="w-32"
+                />
+                <span className="flex pl-3 text-sm">
+                  {remainingCount} / {requiredItems}
+                </span>
+              </div>
+            )}
           </AccordionTriggerNoToggle>
 
           <AccordionContent asChild>
@@ -446,7 +452,6 @@ export default function Bundles() {
       // See note in bundlesheet.tsx
       // @ts-ignore
       await patchPlayer(patch);
-      setBundles(GetActiveBundles(activePlayer));
     }
   }
 

From d1331f3042c3c9f410780d3df2c244e1174b1116 Mon Sep 17 00:00:00 2001
From: esummins <esummins@gmail.com>
Date: Thu, 16 May 2024 21:36:55 -0700
Subject: [PATCH 2/2] mobile is important too

---
 src/pages/bundles.tsx | 110 ++++++++++++++++++++++--------------------
 1 file changed, 58 insertions(+), 52 deletions(-)

diff --git a/src/pages/bundles.tsx b/src/pages/bundles.tsx
index 0c05a1d..6630584 100644
--- a/src/pages/bundles.tsx
+++ b/src/pages/bundles.tsx
@@ -102,6 +102,7 @@ function AccordionSection(props: AccordionSectionProps): JSX.Element {
 }
 
 function BundleAccordion(props: BundleAccordionProps): JSX.Element {
+  const isDesktop = useMediaQuery("only screen and (min-width: 768px)");
   const { bundle, bundleStatus } = props.bundleWithStatus;
 
   const totalItems = bundle.items.length;
@@ -128,67 +129,72 @@ 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-2">
-              <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,
-                          );
-                        }
-                      }}
-                    >
-                      {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-2">
+                <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>
             {!bundleCompleted && (
-              <div className="flex items-center">
+              <div className={`flex items-center ${isDesktop ? "" : "pt-2"}`}>
                 <Progress
                   value={completedItems}
                   max={requiredItems}
                   className="w-32"
                 />
                 <span className="flex pl-3 text-sm">
-                  {remainingCount} / {requiredItems}
+                  {requiredItems - remainingCount} / {requiredItems}
                 </span>
               </div>
             )}