freesewing/sites/shared/components/account/sets.mjs

// Dependencies
import { useState, useEffect, useContext, useCallback } from 'react'
import { useTranslation } from 'next-i18next'
import orderBy from 'lodash.orderby'
import { measurements, isDegreeMeasurement } from 'config/measurements.mjs'
import { measurementAsMm, formatMm } from 'shared/utils.mjs'
import { measurements as designMeasurements } from 'shared/prebuild/data/design-measurements.mjs'
import { freeSewingConfig as conf } from 'shared/config/freesewing.config.mjs'
// Hooks
import { useDropzone } from 'react-dropzone'
import { useAccount } from 'shared/hooks/use-account.mjs'
import { useBackend } from 'shared/hooks/use-backend.mjs'
import { useToast } from 'shared/hooks/use-toast.mjs'
import { useRouter } from 'next/router'
// Context
import { LoadingContext } from 'shared/context/loading-context.mjs'
import { ModalContext } from 'shared/context/modal-context.mjs'
// Components
import { Collapse, useCollapseButton } from 'shared/components/collapse.mjs'
import { BackToAccountButton, Choice } from './shared.mjs'
import { PageLink } from 'shared/components/page-link.mjs'
import { ModalDesignPicker } from 'shared/components/modal/design-picker.mjs'
import {
  FilterIcon,
  ClearIcon,
  PlusIcon,
  OkIcon,
  NoIcon,
  TrashIcon,
  EditIcon,
} from 'shared/components/icons.mjs'
import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
import Markdown from 'react-markdown'
import { Tab } from './bio.mjs'
import Timeago from 'react-timeago'
import { Spinner } from 'shared/components/spinner.mjs'

export const ns = ['account', 'patterns', 'toast']

export const StandAloneNewSet = () => {
  const { t } = useTranslation(['account'])
  const toast = useToast()
  const { account, token } = useAccount()
  const backend = useBackend(token)

  return (
    <div className="max-w-xl">
      <NewSet {...{ t, account, backend, toast }} title={false} standalone={true} />
    </div>
  )
}

export const NewSet = ({
  t,
  account,
  refresh,
  closeCollapseButton,
  backend,
  toast,
  title = true,
  standalone = false,
}) => {
  // Context
  const { startLoading, stopLoading } = useContext(LoadingContext)

  // Hooks
  const router = useRouter()

  // State
  const [name, setName] = useState('')
  const [mset, setMset] = useState(false)

  // Helper method to create a new set
  const createSet = async () => {
    startLoading()
    const result = await backend.createSet({
      name,
    })
    if (result.success) {
      toast.success(<span>{t('nailedIt')}</span>)
      if (standalone) router.push('/account/sets/')
      else {
        setMset(result.data.set)
        refresh()
        closeCollapseButton()
      }
    } else toast.for.backendError()
    stopLoading()
  }

  return (
    <div>
      {title ? <h2>{t('newSet')}</h2> : null}
      <h5>{t('name')}</h5>
      <p>{t('setNameDesc')}</p>
      <input
        autoFocus
        value={name}
        onChange={(evt) => setName(evt.target.value)}
        className="input w-full input-bordered flex flex-row"
        type="text"
        placeholder={'Georg Cantor'}
      />
      <div className="flex flex-row gap-2 items-center w-full mt-8 mb-2">
        <button
          className="btn btn-primary grow capitalize"
          disabled={name.length < 1}
          onClick={createSet}
        >
          {t('newSet')}
        </button>
      </div>
    </div>
  )
}

const EditField = (props) => {
  if (props.field === 'name') return <EditName {...props} />
  if (props.field === 'notes') return <EditNotes {...props} />
  if (props.field === 'imperial') return <EditUnits {...props} />
  if (props.field === 'public') return <EditPublic {...props} />
  if (props.field === 'img') return <EditImg {...props} />

  return <p>FIXME: No edit component for this field</p>
}

export const EditRow = (props) => (
  <Collapse
    color="secondary"
    openTitle={props.title}
    title={
      <>
        <div className="w-24 text-left md:text-right block md:inline font-bold pr-4">
          {props.title}
        </div>
        <div className="grow">{props.children}</div>
      </>
    }
    toggle={<EditIcon />}
    toggleClasses="btn btn-secondary"
  >
    <EditField field="name" {...props} />
  </Collapse>
)

const Mval = ({ m, val = false, imperial = false, className = '' }) =>
  val ? (
    isDegreeMeasurement(m) ? (
      <span>{val}°</span>
    ) : (
      <span
        dangerouslySetInnerHTML={{ __html: formatMm(val, imperial ? 'imperial' : 'metric') }}
        className={className}
      />
    )
  ) : null

export const MeasieRow = (props) => {
  const { t, m, mset } = props

  const isSet = typeof mset.measies?.[m] === 'undefined' ? false : true

  return (
    <Collapse
      color="secondary"
      openTitle={t(m)}
      title={
        <>
          <div className="grow text-left md:text-right block md:inline font-bold pr-4">{t(m)}</div>
          {isSet ? (
            <Mval m={m} val={mset.measies[m]} imperial={mset.imperial} className="w-1/3" />
          ) : (
            <div className="w-1/3" />
          )}
        </>
      }
      toggle={isSet ? <EditIcon /> : <PlusIcon />}
      toggleClasses={`btn ${isSet ? 'btn-secondary' : 'btn-neutral bg-opacity-50'}`}
    >
      <MeasieInput {...props} />
    </Collapse>
  )
}

const MeasieInput = ({ m, mset, backend, toast, refresh }) => {
  const { t } = useTranslation(['measurements'])
  //const title = t(`measurements:${m}`)

  const isDegree = isDegreeMeasurement(m)
  const factor = isDegree ? 1 : mset.imperial ? 25.4 : 10

  const isValValid = (val) =>
    typeof val === 'undefined' || val === '' ? null : val != false && !isNaN(val)
  const isValid = (newVal) => (typeof newVal === 'undefined' ? isValValid(val) : isValValid(newVal))

  const [val, setVal] = useState(mset.measies?.[m] / factor || '')
  const [valid, setValid] = useState(isValid(mset.measies?.[m] / factor || ''))

  // Update onChange
  const update = (evt) => {
    setVal(evt.target.value)

    let useVal = isDegree
      ? evt.target.value
      : measurementAsMm(evt.target.value, mset.imperial ? 'imperial' : 'metric')
    setValid(isValid(useVal))
  }

  /*
  const save = async () => {
    startLoading()
    const measies = {}
    measies[m] = val * factor
    const result = await backend.updateSet(mset.id, { measies })
    if (result.success) {
      refresh()
      toast.for.settingsSaved()
    } else toast.for.backendError()
    stopLoading()
  }
  */

  const fraction = (i, base) => update({ target: { value: Math.floor(val) + i / base } })

  if (!m) return null

  const fractionClasses =
    'h-3 border-2 border-solid border-base-100 hover:border-secondary bg-secondary rounded bg-opacity-50 hover:bg-opacity-100'

  return (
    <div className="form-control mb-2 flex flex-row flexwrap gap-2">
      <div className="flex flex-col items-center">
        <label className="input-group w-full">
          <input
            type="text"
            className={`
              input input-bordered text-base-content border-r-0 w-full
              ${valid === false && 'input-error'}
              ${valid === true && 'input-success'}
            `}
            value={val}
            onChange={update}
          />
          {mset.imperial ? (
            <span
              className={`bg-transparent border-y
              ${valid === false && 'border-error text-neutral-content'}
              ${valid === true && 'border-success text-neutral-content'}
              ${valid === null && 'border-base-200 text-base-content'}
         `}
            >
              <Mval
                imperial={true}
                val={val * 25.4}
                m={m}
                className="text-base-content bg-transparent text-success text-xs font-bold p-0"
              />
            </span>
          ) : null}
          <span
            role="img"
            className={`bg-transparent border-y
            ${valid === false && 'border-error text-neutral-content'}
            ${valid === true && 'border-success text-neutral-content'}
            ${valid === null && 'border-base-200 text-base-content'}
         `}
          >
            {valid === true && '👍'}
            {valid === false && '🤔'}
          </span>
          <span
            className={`
            ${valid === false && 'bg-error text-neutral-content'}
            ${valid === true && 'bg-success text-neutral-content'}
            ${valid === null && 'bg-base-200 text-base-content'}
         `}
          >
            {isDegree ? '° ' : mset.imperial ? 'in' : 'cm'}
          </span>
        </label>
        {mset.imperial ? (
          <div className="w-full mt-2">
            <div className="flex flex-row items-center">
              <span className="text-xs inline-block w-8 text-right pr-2">
                <sup>1</sup>/<sub>2</sub>
              </span>
              <button
                className={`w-[50%] ${fractionClasses}`}
                title={`1/2"`}
                onClick={() => fraction(1, 2)}
              />
            </div>
            <div className="flex flex-row">
              <span className="text-xs inline-block w-8 text-right pr-2">
                <sup>1</sup>/<sub>4</sub>
              </span>
              {[1, 2, 3].map((i) => (
                <button
                  key={i}
                  className={`w-[25%] ${fractionClasses}`}
                  title={`${i}1/4"`}
                  onClick={() => fraction(i, 4)}
                />
              ))}
            </div>
            <div className="flex flex-row">
              <span className="text-xs inline-block w-8 text-right pr-2">
                <sup>1</sup>/<sub>8</sub>
              </span>
              {[1, 2, 3, 4, 5, 6, 7].map((i) => (
                <button
                  key={i}
                  className={`w-[12.5%] ${fractionClasses}`}
                  title={`${i}1/8"`}
                  onClick={() => fraction(i, 8)}
                />
              ))}
            </div>
            <div className="flex flex-row mt-1">
              <span className="text-xs inline-block w-8 text-right pr-2">
                <sup>1</sup>/<sub>16</sub>
              </span>
              {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].map((i) => (
                <button
                  key={i}
                  className={`w-[6.25%] ${fractionClasses}`}
                  title={`${i}1/16"`}
                  onClick={() => fraction(i, 16)}
                />
              ))}
            </div>
            <div className="flex flex-row mt-1">
              <span className="text-xs inline-block w-8 text-right pr-2">
                <sup>1</sup>/<sub>32</sub>
              </span>
              {[
                1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
                24, 25, 26, 27, 28, 29, 30, 31,
              ].map((i) => (
                <button
                  key={i}
                  className={`w-[3.125%] ${fractionClasses}`}
                  title={`${i}/32"`}
                  onClick={() => fraction(i, 32)}
                />
              ))}
            </div>
          </div>
        ) : null}
      </div>
      <button className="btn btn-secondary w-24" onClick={save} disabled={!valid}>
        {t('save')}
      </button>
    </div>
  )
}

const EditImg = ({ t, mset, account, backend, toast, refresh, curated = false }) => {
  const [img, setImg] = useState(mset.img)

  const onDrop = useCallback((acceptedFiles) => {
    const reader = new FileReader()
    reader.onload = () => {
      setImg(reader.result)
    }
    acceptedFiles.forEach((file) => reader.readAsDataURL(file))
  }, [])

  const { getRootProps, getInputProps } = useDropzone({ onDrop })

  //const update = async (evt) => {
  //  evt.preventDefault()
  //  if (evt.target.value !== value) {
  //    setValue(evt.target.value)
  //  }
  //}

  return (
    <div>
      <div>
        <img
          alt="img"
          src={img || account.img}
          className="shadow mb-4 mask mask-squircle bg-neutral aspect-square"
        />
        <div
          {...getRootProps()}
          className={`
          flex rounded-lg w-full flex-col items-center justify-center
          lg:h-64 lg:border-4 lg:border-secondary lg:border-dashed
        `}
        >
          <input {...getInputProps()} />
          <p className="hidden lg:block p-0 m-0">{t('imgDragAndDropImageHere')}</p>
          <p className="hidden lg:block p-0 my-2">{t('or')}</p>
          <button className={`btn btn-secondary btn-outline mt-4 w-64`}>
            {t('imgSelectImage')}
          </button>
        </div>
      </div>
      <div className="flex flex-row gap-2 items-center justify-center mt-2">
        <button className="btn btn-secondary" onClick={save}>
          {t('save')}
        </button>
      </div>
    </div>
  )
}

const EditName = ({ t, mset, account, backend, toast, refresh }) => {
  const [value, setValue] = useState(mset.name)
  const { loading, startLoading, stopLoading } = useContext(LoadingContext)

  const update = async (evt) => {
    evt.preventDefault()
    if (evt.target.value !== value) {
      setValue(evt.target.value)
    }
  }

  const save = async () => {
    startLoading()
    const result = await backend.updateSet(mset.id, { name: value })
    if (result.success) {
      refresh()
      toast.for.settingsSaved()
    } else toast.for.backendError()
    stopLoading()
  }

  return (
    <div className="flex flex-row gap-2">
      <input
        value={value}
        onChange={update}
        className="input w-full input-bordered flex flex-row"
        type="text"
        placeholder={t('name')}
      />
      <button className="btn btn-secondary" onClick={save} disabled={value === mset.name}>
        <span className="flex flex-row items-center gap-2">
          {loading ? (
            <>
              <Spinner />
              <span>{t('processing')}</span>
            </>
          ) : (
            t('save')
          )}
        </span>
      </button>
    </div>
  )
}

const EditNotes = ({ t, mset, account, backend, toast, refresh }) => {
  const [value, setValue] = useState(mset.notes)
  const [activeTab, setActiveTab] = useState('edit')
  const { loading, startLoading, stopLoading } = useContext(LoadingContext)

  const update = async (evt) => {
    evt.preventDefault()
    if (evt.target.value !== value) {
      setValue(evt.target.value)
    }
  }

  const save = async () => {
    startLoading()
    const result = await backend.updateSet(mset.id, { notes: value })
    if (result.success) {
      refresh()
      toast.for.settingsSaved()
    } else toast.for.backendError()
    stopLoading()
  }

  // Shared props for tabs
  const tabProps = { activeTab, setActiveTab, t }

  return (
    <div>
      <div className="tabs w-full">
        <Tab id="edit" {...tabProps} />
        <Tab id="preview" {...tabProps} />
      </div>
      <div className="flex flex-row items-center mt-4">
        {activeTab === 'edit' ? (
          <textarea
            rows="5"
            className="textarea textarea-bordered textarea-lg w-full"
            placeholder={t('placeholder')}
            onChange={update}
            value={value}
          />
        ) : (
          <div className="text-left px-4 border w-full">
            <Markdown>{value}</Markdown>
          </div>
        )}
      </div>
      <div className="my-2 flex gap-2 items-center justify-center">
        <button className="btn btn-secondary" onClick={save} disabled={value === mset.name}>
          <span className="flex flex-row items-center gap-2">
            {loading ? (
              <>
                <Spinner />
                <span>{t('processing')}</span>
              </>
            ) : (
              t('save')
            )}
          </span>
        </button>
      </div>
    </div>
  )
}

const EditUnits = ({ t, mset, account, backend, toast, refresh }) => {
  const [selection, setSelection] = useState(mset?.imperial === true ? 'imperial' : 'metric')
  const { startLoading, stopLoading } = useContext(LoadingContext)

  const update = async (val) => {
    setSelection(val)
    const asBool = val === 'imperial' ? true : false
    if (asBool !== mset.imperial) {
      startLoading()
      const result = await backend.updateSet(mset.id, { imperial: asBool })
      if (result.success) {
        refresh()
        toast.for.settingsSaved()
      } else toast.for.backendError()
      stopLoading()
    }
  }

  //const save = async () => {
  //  startLoading()
  //  const result = await backend.updateSet(mset.id, { name: value })
  //  if (result.success) {
  //    refresh()
  //    toast.for.settingsSaved()
  //  } else toast.for.backendError()
  //  stopLoading()
  //}

  return (
    <>
      {['metric', 'imperial'].map((val) => (
        <Choice
          val={val}
          t={t}
          update={update}
          current={selection}
          bool
          key={val}
          boolIcons={{ yes: <span>&quot;</span>, no: <span>cm</span> }}
        >
          <span className="block text-lg leading-5">
            {selection === 1 && val === 2 ? t('showMore') : t(`${val}Units`)}
          </span>
          <span className="block text-normal font-light normal-case pt-1">{t(`${val}Unitsd`)}</span>
        </Choice>
      ))}
    </>
  )
}

const EditPublic = ({ t, mset, account, backend, toast, refresh }) => {
  const [selection, setSelection] = useState(mset.public)
  const { startLoading, stopLoading } = useContext(LoadingContext)

  const update = async (val) => {
    setSelection(val)
    if (val !== mset.public) {
      startLoading()
      const result = await backend.updateSet(mset.id, { public: val })
      if (result.success) {
        refresh()
        toast.for.settingsSaved()
      } else toast.for.backendError()
      stopLoading()
    }
  }

  return (
    <>
      {[true, false].map((val) => (
        <Choice val={val} t={t} update={update} current={selection} bool key={val}>
          <div className="flex flex-row gap-2 text-lg leading-5 items-center">
            {val ? (
              <>
                <OkIcon className="w-6 h-6 text-success" /> <span>{t('publicSet')}</span>
              </>
            ) : (
              <>
                <NoIcon className="w-6 h-6 text-error" /> <span>{t('privateSet')}</span>
              </>
            )}
          </div>
          <div className="flex flex-row gap-2 text-normal font-light normal-case pt-1 items-center">
            {val ? t('publicSetDesc') : t('privateSetDesc')}
          </div>
        </Choice>
      ))}
    </>
  )
}

export const EditSectionTitle = ({ title }) => (
  <h5 className="border border-solid border-b-2 border-r-0 border-l-0 border-t-0 border-primary mt-4 mb-2">
    {title}
  </h5>
)

const EditMeasurementsSet = (props) => {
  const [filter, setFilter] = useState(false)
  const { mset, t, setModal } = props

  const filterMeasurements = () => {
    if (!filter) return measurements.map((m) => t(`measurements:${m}`)).sort()
    else return designMeasurements[filter].map((m) => t(`measurements:${m}`)).sort()
  }

  return (
    <div className="p-4">
      {/* Meta info */}
      {props.account.control > 2 ? (
        <div className="flex flex-row gap-4 text-sm items-center justify-center mb-2">
          <div className="flex flex-row gap-2 items-center">
            <b>{t('permalink')}:</b>
            {mset.public ? (
              <PageLink href={`/sets/${mset.id}`} txt={`/sets/${mset.id}`} />
            ) : (
              <NoIcon className="w-4 h-4 text-error" />
            )}
          </div>
          <div>
            <b>{t('created')}</b>: <Timeago date={mset.createdAt} />
          </div>
          <div>
            <b>{t('updated')}</b>: <Timeago date={mset.updatedAt} />
          </div>
        </div>
      ) : null}

      {/* JSON & YAML links */}
      {props.account.control > 3 ? (
        <div className="flex flex-row gap-4 text-sm items-center justify-center">
          <a
            className="badge badge-secondary font-bold"
            href={`${conf.backend}/sets/${mset.id}.json`}
          >
            JSON
          </a>
          <a
            className="badge badge-success font-bold"
            href={`${conf.backend}/sets/${mset.id}.yaml`}
          >
            YAML
          </a>
        </div>
      ) : null}

      <EditSectionTitle title={t('data')} />

      {/* Name is always shown */}
      <EditRow title={t('name')} field="name" {...props}>
        {mset.name}
      </EditRow>

      {/* img: Control level determines whether or not to show this */}
      {props.account.control >= conf.account.sets.img ? (
        <EditRow title={t('image')} field="img" {...props}>
          <img src={mset.img} className="w-10 mask mask-squircle bg-neutral aspect-square" />
        </EditRow>
      ) : null}

      {/* public: Control level determines whether or not to show this */}
      {props.account.control >= conf.account.sets.public ? (
        <EditRow title={t('public')} field="public" {...props}>
          <div className="flex flex-row gap-2">
            {mset.public ? (
              <>
                <OkIcon className="h-6 w-6 text-success" /> <span>{t('publicSet')}</span>
              </>
            ) : (
              <>
                <NoIcon className="h-6 w-6 text-error" /> <span>{t('privateSet')}</span>
              </>
            )}
          </div>
        </EditRow>
      ) : null}

      {/* units: Control level determines whether or not to show this */}
      {props.account.control >= conf.account.sets.units ? (
        <EditRow title={t('units')} field="imperial" {...props}>
          {mset.imperial ? t('imperialUnits') : t('metricUnits')}
        </EditRow>
      ) : null}

      {/* notes: Control level determines whether or not to show this */}
      {props.account.control >= conf.account.sets.notes ? (
        <EditRow title={t('notes')} field="notes" {...props}>
          <Markdown>{mset.notes}</Markdown>
        </EditRow>
      ) : null}

      <EditSectionTitle title={t('measies')} />
      <div className="flex flex-row items-center justify-center">
        <button
          className="btn btn-secondary btn-outline flex flex-row gap-4 rounded-r-none"
          onClick={() =>
            setModal(
              <ModalDesignPicker
                designs={Object.keys(designMeasurements)}
                setModal={setModal}
                setter={setFilter}
              />
            )
          }
        >
          <FilterIcon />
          {filter ? t(`designs:${filter}.t`) : t(`designs:allDesigns`)}
        </button>
        <button
          className="btn btn-secondary btn-outline rounded-l-none border-l-0"
          onClick={() => setFilter(false)}
        >
          <ClearIcon />
        </button>
      </div>
      {filterMeasurements().map((m) => (
        <MeasieRow key={m} m={m} {...props} />
      ))}
    </div>
  )
}

const MeasurementsSet = ({ mset, t, account, backend, refresh }) => {
  // Context
  const { startLoading, stopLoading } = useContext(LoadingContext)
  const { setModal } = useContext(ModalContext)

  // Hooks
  const toast = useToast()

  const remove = async () => {
    startLoading()
    const result = await backend.removeSet(mset.id)
    if (result) toast.success(t('gone'))
    else toast.for.backendError()
    // This just forces a refresh of the list from the server
    // We obviously did not add a key here, but rather removed one
    refresh()
    stopLoading()
  }

  const removeModal = () => {
    setModal(
      <ModalWrapper slideFrom="top">
        <h2>{t('areYouCertain')}</h2>
        <p>{t('deleteSetWarning')}</p>
        <p className="flex flex-row gap-4 items-center justify-center">
          <button className="btn btn-neutral btn-outline px-8">{t('cancel')}</button>
          <button className="btn btn-error px-8" onClick={remove}>
            {t('delete')}
          </button>
        </p>
      </ModalWrapper>
    )
  }

  return (
    <Collapse
      primary
      top
      bottom
      title={
        <>
          <img src={mset.img} className="w-10 mask mask-squircle bg-neutral aspect-square" />
          <span>{mset.name}</span>
        </>
      }
      openTitle={mset.name}
      buttons={[
        <button
          key="rm"
          className="btn btn-error hover:text-error-content border-0"
          onClick={account.control > 4 ? remove : removeModal}
        >
          <TrashIcon key="button2" />
        </button>,
      ]}
    >
      <EditMeasurementsSet {...{ t, mset, account, backend, toast, refresh, setModal }} />
    </Collapse>
  )
}

// Component for the 'new/apikey' page
//export const NewApikey = ({ app, standAlone = false }) => {
//  const { account, token } = useAccount()
//  const backend = useBackend(token)
//  const { t } = useTranslation(ns)
//  const toast = useToast()
//
//  const [keys, setKeys] = useState([])
//  const [generate, setGenerate] = useState(false)
//  const [added, setAdded] = useState(0)
//
//  const oneAdded = () => setAdded(added + 1)
//
//  return (
//    <div className="max-w-xl xl:pl-4">
//      <NewKey {...{ app, t, account, setGenerate, backend, toast, oneAdded, standAlone }} />
//    </div>
//  )
//}

// Component for the account/sets page
export const Sets = ({ title = true }) => {
  // Hooks
  const { account, token } = useAccount()
  const backend = useBackend(token)
  const { t } = useTranslation(ns)
  const toast = useToast()
  const { CollapseButton, closeCollapseButton } = useCollapseButton()

  // State
  const [sets, setSets] = useState([])
  const [added, setAdded] = useState(0)

  // Effects
  useEffect(() => {
    const getSets = async () => {
      const result = await backend.getSets()
      if (result.success) setSets(result.data.sets)
    }
    getSets()
  }, [added])

  // Helper method to force a refresh
  const refresh = () => {
    setAdded(added + 1)
  }

  return (
    <div className="max-w-2xl xl:pl-4">
      {title ? <h2>{t('sets')}</h2> : null}
      {orderBy(sets, ['name'], ['asc']).map((mset) => (
        <MeasurementsSet {...{ account, mset, t, backend, refresh }} key={mset.id} />
      ))}
      <CollapseButton
        primary
        title={t('newSet')}
        className="btn btn-primary w-full capitalize mt-4"
      >
        <NewSet {...{ t, account, backend, toast, refresh, closeCollapseButton }} title={false} />
      </CollapseButton>
      <BackToAccountButton loading={loading} />
    </div>
  )
}