Fix styles for combobox input

components/FilterBar/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'next-i18next'
 import classNames from 'classnames'
 import equals from 'fast-deep-equal'
@@ -140,7 +140,6 @@ const FilterBar = (props: Props) => {
 
           <RaidCombobox
             currentRaid={currentRaid}
-            defaultRaid="all"
             showAllRaidsOption={true}
             minimal={true}
             onChange={raidSelectChanged}

components/common/CharLimitedFieldset/index.scss

@@ -1,46 +0,0 @@
-.Joined {
-  $offset: 2px;
-
-  align-items: center;
-  background: var(--input-bg);
-  border-radius: $input-corner;
-  border: $offset solid transparent;
-  box-sizing: border-box;
-  display: flex;
-  gap: $unit;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-right: calc($unit-2x - $offset);
-
-  &.Bound {
-    background-color: var(--input-bound-bg);
-
-    &:hover {
-      background-color: var(--input-bound-bg-hover);
-    }
-  }
-
-  &:focus-within {
-    border: $offset solid $blue;
-    // box-shadow: 0 2px rgba(255, 255, 255, 1);
-  }
-
-  .Counter {
-    color: $grey-55;
-    font-weight: $bold;
-    line-height: 42px;
-  }
-
-  .Input {
-    background: transparent;
-    border: none;
-    border-radius: 0;
-    padding: $unit * 1.5 $unit-2x;
-    padding-left: calc($unit-2x - $offset);
-
-    &:focus {
-      border: none;
-      outline: none;
-    }
-  }
-}

components/raids/RaidCombobox/index.scss

@@ -1,68 +1,5 @@
-.DetailsWrapper .PartyDetails.Editable .Raid.SelectTrigger {
-  display: flex;
-  padding-top: 10px;
-  padding-bottom: 11px;
-  min-height: 51px;
-
-  .Value {
-    display: flex;
-    gap: $unit-half;
-    width: 100%;
-
-    .Info {
-      display: flex;
-      align-items: center;
-      gap: $unit-half;
-      flex-grow: 1;
-    }
-
-    .ExtraIndicator {
-      background: var(--extra-purple-bg);
-      border-radius: $full-corner;
-      color: var(--extra-purple-text);
-      display: flex;
-      font-weight: $bold;
-      font-size: $font-tiny;
-      width: $unit-3x;
-      height: $unit-3x;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .Group,
-    .Separator {
-      color: var(--text-tertiary);
-    }
-
-    .Raid.wind {
-      color: var(--wind-text);
-    }
-
-    .Raid.fire {
-      color: var(--fire-text);
-    }
-
-    .Raid.water {
-      color: var(--water-text);
-    }
-
-    .Raid.earth {
-      color: var(--earth-text);
-    }
-
-    .Raid.dark {
-      color: var(--dark-text);
-    }
-
-    .Raid.light {
-      color: var(--light-text);
-    }
-  }
-}
-
 .Combobox.Raid {
   box-sizing: border-box;
-  /* Temporary values */
 
   .Header {
     background: var(--dialog-bg);
@@ -174,6 +111,69 @@
     }
   }
 }
+
+.DetailsWrapper .PartyDetails.Editable .Raid.SelectTrigger {
+  display: flex;
+  padding-top: 10px;
+  padding-bottom: 11px;
+  min-height: 51px;
+
+  .Value {
+    display: flex;
+    gap: $unit-half;
+    width: 100%;
+
+    .Info {
+      display: flex;
+      align-items: center;
+      gap: $unit-half;
+      flex-grow: 1;
+    }
+
+    .ExtraIndicator {
+      background: var(--extra-purple-bg);
+      border-radius: $full-corner;
+      color: var(--extra-purple-text);
+      display: flex;
+      font-weight: $bold;
+      font-size: $font-tiny;
+      width: $unit-3x;
+      height: $unit-3x;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .Group,
+    .Separator {
+      color: var(--text-tertiary);
+    }
+
+    .Raid.wind {
+      color: var(--wind-text);
+    }
+
+    .Raid.fire {
+      color: var(--fire-text);
+    }
+
+    .Raid.water {
+      color: var(--water-text);
+    }
+
+    .Raid.earth {
+      color: var(--earth-text);
+    }
+
+    .Raid.dark {
+      color: var(--dark-text);
+    }
+
+    .Raid.light {
+      color: var(--light-text);
+    }
+  }
+}
+
 .Filters .SelectTrigger.Raid {
   & > span {
     overflow: hidden;

components/raids/RaidCombobox/index.tsx

@@ -36,6 +36,34 @@ enum Sort {
   DESCENDING,
 }
 
+// Set up empty raid for "All raids"
+const untitledGroup: RaidGroup = {
+  id: '0',
+  name: {
+    en: '',
+    ja: '',
+  },
+  section: 0,
+  order: 0,
+  extra: false,
+  raids: [],
+  difficulty: 0,
+  hl: false,
+}
+
+// Set up empty raid for "All raids"
+const allRaidsOption: Raid = {
+  id: '0',
+  name: {
+    en: 'All battles',
+    ja: '全てのバトル',
+  },
+  group: untitledGroup,
+  slug: 'all',
+  level: 0,
+  element: 0,
+}
+
 const RaidCombobox = (props: Props) => {
   // Set up router for locale
   const router = useRouter()
@@ -75,12 +103,15 @@ const RaidCombobox = (props: Props) => {
     if (appState.party.raid) {
       setCurrentRaid(appState.party.raid)
       setCurrentSection(appState.party.raid.group.section)
+    } else if (props.showAllRaidsOption && !currentRaid) {
+      setCurrentRaid(allRaidsOption)
     }
   }, [])
 
   // Set current raid and section when the current raid changes
   useEffect(() => {
     if (props.currentRaid) {
+      console.log('We are here with a raid')
       setCurrentRaid(props.currentRaid)
       setCurrentSection(props.currentRaid.group.section)
     }
@@ -224,7 +255,9 @@ const RaidCombobox = (props: Props) => {
   // Toggle the open state of the combobox
   function toggleOpen() {
     if (open) {
-      if (currentRaid) setCurrentSection(currentRaid.group.section)
+      if (currentRaid && currentRaid.slug !== 'all') {
+        setCurrentSection(currentRaid.group.section)
+      }
       setScrolled(false)
     }
     setOpen(!open)
@@ -287,6 +320,26 @@ const RaidCombobox = (props: Props) => {
     )
   }
 
+  // Render the ungrouped raid group
+  function renderUngroupedRaids() {
+    // Render the Untitled group with the allRaids inside of it first if the option is enabled
+    if (props.showAllRaidsOption) {
+      const ungroupedRaids = generateRaidItems([allRaidsOption])
+
+      return (
+        <CommandGroup
+          data-section={untitledGroup.section}
+          className={classNames({
+            CommandGroup: true,
+          })}
+          key="ungrouped-raids"
+        >
+          {ungroupedRaids}
+        </CommandGroup>
+      )
+    }
+  }
+
   // Generates a list of RaidItem components from the specified raids
   function generateRaidItems(raids: Raid[]) {
     return raids
@@ -361,7 +414,6 @@ const RaidCombobox = (props: Props) => {
   }
 
   // Renders a Button for sorting raids and a Tooltip for explaining what it does.
-
   function renderSortButton() {
     return (
       <Tooltip
@@ -493,6 +545,7 @@ const RaidCombobox = (props: Props) => {
           tabIndex={6}
           onKeyDown={handleListKeyDown}
         >
+          {renderUngroupedRaids()}
           {renderRaidSections()}
         </div>
       </Command>

styles/globals.scss

@@ -306,3 +306,50 @@ i.tag {
     grid-template-columns: 1fr 1fr;
   }
 }
+
+.Joined {
+  $offset: 2px;
+
+  align-items: center;
+  background: var(--input-bg);
+  border-radius: $input-corner;
+  border: $offset solid transparent;
+  box-sizing: border-box;
+  display: flex;
+  gap: $unit;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: calc($unit-2x - $offset);
+
+  &.Bound {
+    background-color: var(--input-bound-bg);
+
+    &:hover {
+      background-color: var(--input-bound-bg-hover);
+    }
+  }
+
+  &:focus-within {
+    border: $offset solid $blue;
+    // box-shadow: 0 2px rgba(255, 255, 255, 1);
+  }
+
+  .Counter {
+    color: $grey-55;
+    font-weight: $bold;
+    line-height: 42px;
+  }
+
+  .Input {
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    padding: $unit * 1.5 $unit-2x;
+    padding-left: calc($unit-2x - $offset);
+
+    &:focus {
+      border: none;
+      outline: none;
+    }
+  }
+}