feat(shared): More work on sets

sites/backend/src/models/set.mjs

@@ -206,6 +206,13 @@ SetModel.prototype.revealSet = function (mset) {
       //console.log(err)
     }
   }
+  for (const field of this.jsonFields) {
+    try {
+      clear[field] = JSON.parse(clear[field])
+    } catch (err) {
+      //console.log(err)
+    }
+  }
 
   return { ...mset, ...clear }
 }

sites/org/components/header/en.yaml

@@ -8,6 +8,5 @@ account: Account
 theme: Theme
 language: Language
 search: Search
-sets: Measurements
+new: New...
-patterns: Patterns
+support: Support
-new: New

sites/org/components/header/index.mjs

@@ -14,8 +14,8 @@ import {
   UserIcon,
   ThemeIcon,
   I18nIcon,
-  MeasieIcon,
+  HeartIcon,
-  PageIcon,
+  PlusIcon,
   RssIcon,
 } from 'shared/components/icons.mjs'
 import { HeaderWrapper } from 'shared/components/wrappers/header.mjs'
@@ -71,23 +71,23 @@ const NavIcons = ({ setModal, setSearch }) => {
       </NavButton>
       <NavSpacer />
       <NavButton
-        href="/patterns"
+        href="/new"
-        label={t('header:patterns')}
+        label={t('header:new')}
         color={spectrum[5]}
         extraClasses="hidden lg:flex"
       >
-        <PageIcon className={iconSize} />
+        <PlusIcon className={iconSize} />
+      </NavButton>
+      <NavButton href="/account" label={t('header:account')} color={spectrum[6]}>
+        <UserIcon className={iconSize} />
       </NavButton>
       <NavButton
-        href="/sets"
+        href="/support"
-        label={t('header:sets')}
+        label={t('header:support')}
-        color={spectrum[6]}
+        color={spectrum[7]}
         extraClasses="hidden lg:flex"
       >
-        <MeasieIcon className={iconSize} />
+        <HeartIcon className={iconSize} />
-      </NavButton>
-      <NavButton href="/account" label={t('header:account')} color={spectrum[7]}>
-        <UserIcon className={iconSize} />
       </NavButton>
       <NavSpacer />
       <NavButton

sites/org/pages/account/sets/[id].mjs

@@ -11,6 +11,7 @@ import { ns as setsNs } from 'shared/components/account/sets.mjs'
 
 // Translation namespaces used on this page
 const ns = nsMerge(setsNs, authNs, pageNs)
+console.log(ns)
 
 /*
  * Some things should never generated as SSR

sites/org/pages/index.mjs

@@ -8,7 +8,6 @@ import { useEffect, useState } from 'react'
 // Components
 import Head from 'next/head'
 import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-//import { PageLink } from 'shared/components/page-link.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
 import { ForceAccountCheck } from 'shared/components/account/force-account-check.mjs'
 import {

sites/org/pages/newsletter/subscribe/[...tokens].mjs

@@ -10,7 +10,7 @@ import { LoadingContext } from 'shared/context/loading-context.mjs'
 // Components
 import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { Popout } from 'shared/components/popout/index.mjs'
-import { PageLink } from 'shared/components/page-link.mjs'
+import { PageLink } from 'shared/components/link.mjs'
 
 // Translation namespaces used on this page
 const namespaces = nsMerge(pageNs, 'newsletter')

sites/org/pages/newsletter/unsubscribe/[...tokens].mjs

@@ -10,7 +10,7 @@ import { LoadingContext } from 'shared/context/loading-context.mjs'
 // Components
 import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { Popout } from 'shared/components/popout/index.mjs'
-import { PageLink } from 'shared/components/page-link.mjs'
+import { PageLink } from 'shared/components/link.mjs'
 
 // Translation namespaces used on this page
 const namespaces = nsMerge(pageNs, 'newsletter')

sites/org/pages/patrons/index.mjs

@@ -8,7 +8,7 @@ import { useAccount } from 'shared/hooks/use-account.mjs'
 import { useEffect, useState } from 'react'
 // Components
 import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-import { PageLink } from 'shared/components/page-link.mjs'
+import { PageLink } from 'shared/components/link.mjs'
 
 // Translation namespaces used on this page
 const namespaces = nsMerge(pageNs, 'patrons')

sites/org/pages/profile.mjs

@@ -7,7 +7,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
 import { Popout } from 'shared/components/popout/index.mjs'
-import { PageLink } from 'shared/components/page-link.mjs'
+import { PageLink } from 'shared/components/link.mjs'
 import { BackToAccountButton } from 'shared/components/account/shared.mjs'
 
 // Translation namespaces used on this page

sites/org/pages/support.mjs

@@ -5,10 +5,9 @@ import { nsMerge } from 'shared/utils.mjs'
 import { useTranslation } from 'next-i18next'
 // Components
 import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-import { WebLink } from 'shared/components/web-link.mjs'
+import { WebLink, Link } from 'shared/components/link.mjs'
 import { Popout } from 'shared/components/popout/index.mjs'
 import { DiscordIcon, GitHubIcon } from 'shared/components/icons.mjs'
-import Link from 'next/link'
 import { Joost } from 'shared/components/joost.mjs'
 
 // Translation namespaces used on this page

sites/shared/components/account/en.yaml

@@ -211,6 +211,9 @@ privateSetDesc: These measurments cannot be used by other users or visitors
 permalink: Permalink
 editThing: Edit {thing}
 saveThing: Save {thing}
+filterByDesign: Filter by design
+noFilter: Do not filter
+filterByDesignDocs: If you have a specific design in mind, you can <b>filter by design</b> to only list those measurements that are required for this design.
 
 patternNew: Generate a new pattern
 patternNewInfo: Pick a design, add your measurements set, and we'll generate a made-to-measure sewing pattern for you.

sites/shared/components/account/links.mjs

@@ -3,7 +3,7 @@ import { useAccount } from 'shared/hooks/use-account.mjs'
 import { useBackend } from 'shared/hooks/use-backend.mjs'
 import { useTranslation } from 'next-i18next'
 import Link from 'next/link'
-import { freeSewingConfig as conf } from 'shared/config/freesewing.config.mjs'
+import { freeSewingConfig as conf, controlLevels } from 'shared/config/freesewing.config.mjs'
 import {
   DesignIcon,
   MeasieIcon,
@@ -90,7 +90,7 @@ const YesNo = ({ check }) =>
   )
 
 export const AccountLinks = () => {
-  const { account, signOut } = useAccount()
+  const { account, signOut, control } = useAccount()
   const { t } = useTranslation(ns)
   const backend = useBackend()
 
@@ -145,7 +145,6 @@ export const AccountLinks = () => {
       ),
     mfa: <YesNo check={false} />,
   }
-
   for (const social of Object.keys(conf.account.fields.identities).filter((i) => i !== 'github'))
     itemPreviews[social] = account.data[social] || (
       <NoIcon className="text-base-content w-6 h-6" stroke={2} />
@@ -156,102 +155,128 @@ export const AccountLinks = () => {
       <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 mb-8">
         <div className="">
           <h4 className="my-2">{t('data')}</h4>
-          {Object.keys(conf.account.fields.data).map((item) => (
+          {Object.keys(conf.account.fields.data).map((item) =>
-            <AccountLink href={`/account/${item}`} title={t(item)} key={item}>
+            controlLevels[item] > control ? null : (
-              <div className="flex flex-row items-center gap-3 font-medium">
+              <AccountLink href={`/account/${item}`} title={t(item)} key={item}>
-                {itemIcons[item]}
+                <div className="flex flex-row items-center gap-3 font-medium">
-                {t(`your${capitalize(item)}`)}
+                  {itemIcons[item]}
-              </div>
+                  {t(`your${capitalize(item)}`)}
-              <div className="">{itemPreviews[item]}</div>
+                </div>
-            </AccountLink>
+                <div className="">{itemPreviews[item]}</div>
-          ))}
+              </AccountLink>
+            )
+          )}
         </div>
 
-        <div className="">
+        {control > 1 && (
-          <h4 className="my-2">{t('info')}</h4>
+          <div className="">
-          {Object.keys(conf.account.fields.info).map((item) => (
+            <h4 className="my-2">{t('info')}</h4>
-            <AccountLink href={`/account/${item}`} title={t(item)} key={item}>
+            {Object.keys(conf.account.fields.info).map((item) =>
+              controlLevels[item] > control ? null : (
+                <AccountLink href={`/account/${item}`} title={t(item)} key={item}>
+                  <div className="flex flex-row items-center gap-3 font-medium">
+                    {itemIcons[item]}
+                    {t(item)}
+                  </div>
+                  <div className="">{itemPreviews[item]}</div>
+                </AccountLink>
+              )
+            )}
+            <div className={`${itemClasses} bg-neutral`}>
               <div className="flex flex-row items-center gap-3 font-medium">
-                {itemIcons[item]}
+                <FingerprintIcon />
-                {t(item)}
+                <span>{t('userId')}</span>
               </div>
-              <div className="">{itemPreviews[item]}</div>
+              <div className="">{account.id}</div>
-            </AccountLink>
-          ))}
-          <div className={`${itemClasses} bg-neutral`}>
-            <div className="flex flex-row items-center gap-3 font-medium">
-              <FingerprintIcon />
-              <span>{t('userId')}</span>
             </div>
-            <div className="">{account.id}</div>
           </div>
-        </div>
+        )}
 
         <div className="">
           <h4 className="my-2">{t('settings')}</h4>
-          {Object.keys(conf.account.fields.settings).map((item) => (
+          {Object.keys(conf.account.fields.settings).map((item) =>
-            <AccountLink href={`/account/${item}`} title={t(item)} key={item}>
+            controlLevels[item] > control ? null : (
-              <div className="flex flex-row items-center gap-3 font-medium">
+              <AccountLink href={`/account/${item}`} title={t(item)} key={item}>
-                {itemIcons[item]}
+                <div className="flex flex-row items-center gap-3 font-medium">
-                {t(item)}
+                  {itemIcons[item]}
-              </div>
+                  {t(item)}
-              <div className="">{itemPreviews[item]}</div>
+                </div>
-            </AccountLink>
+                <div className="">{itemPreviews[item]}</div>
-          ))}
+              </AccountLink>
+            )
+          )}
         </div>
 
-        <div className="">
+        {control > 2 && (
-          <h4 className="my-2">{t('linkedIdentities')}</h4>
+          <div className="">
-          {Object.keys(conf.account.fields.identities).map((item) => (
+            <h4 className="my-2">{t('linkedIdentities')}</h4>
-            <AccountLink href={`/account/${item}`} title={t(item)} key={item}>
+            {Object.keys(conf.account.fields.identities).map((item) =>
-              <div className="flex flex-row items-center gap-3 font-medium">
+              controlLevels[item] > control ? null : (
-                {itemIcons[item]}
+                <AccountLink href={`/account/${item}`} title={t(item)} key={item}>
-                {t(item)}
+                  <div className="flex flex-row items-center gap-3 font-medium">
-              </div>
+                    {itemIcons[item]}
-              <div className="">{itemPreviews[item]}</div>
+                    {t(item)}
-            </AccountLink>
+                  </div>
-          ))}
+                  <div className="">{itemPreviews[item]}</div>
-        </div>
+                </AccountLink>
+              )
+            )}
+          </div>
+        )}
 
-        <div className="">
+        {control > 1 && (
-          <h4 className="my-2">{t('security')}</h4>
+          <div className="">
-          {Object.keys(conf.account.fields.security).map((item) => (
+            <h4 className="my-2">{t('security')}</h4>
-            <AccountLink href={`/account/${item}`} title={t(item)} key={item}>
+            {Object.keys(conf.account.fields.security).map((item) =>
-              <div className="flex flex-row items-center gap-3 font-medium">
+              controlLevels[item] > control ? null : (
-                {itemIcons[item]}
+                <AccountLink href={`/account/${item}`} title={t(item)} key={item}>
-                {t(item)}
+                  <div className="flex flex-row items-center gap-3 font-medium">
-              </div>
+                    {itemIcons[item]}
-              <div className="">{itemPreviews[item]}</div>
+                    {t(item)}
-            </AccountLink>
+                  </div>
-          ))}
+                  <div className="">{itemPreviews[item]}</div>
-        </div>
+                </AccountLink>
+              )
+            )}
+          </div>
+        )}
 
-        <div className="">
+        {control > 1 && (
-          <h4 className="my-2">{t('actions')}</h4>
+          <div className="">
-          <AccountLink href={`/account/reload`} title={t('reload')}>
+            <h4 className="my-2">{t('actions')}</h4>
-            <ReloadIcon />
+            {control > 2 && (
-            {t('reload')}
+              <AccountLink href={`/account/reload`} title={t('reload')}>
-          </AccountLink>
+                <ReloadIcon />
-          <AccountLink href={`/account/export`} title={t('export')}>
+                {t('reload')}
-            <ExportIcon />
+              </AccountLink>
-            {t('export')}
+            )}
-          </AccountLink>
+            {control > 2 && (
-          <AccountLink href={`/account/restrict`} title={t('restrict')} color="warning">
+              <AccountLink href={`/account/export`} title={t('export')}>
-            <CloseIcon />
+                <ExportIcon />
-            {t('restrict')}
+                {t('export')}
-          </AccountLink>
+              </AccountLink>
-          <AccountLink href={`/account/remove`} title={t('remove')} color="error">
+            )}
-            <TrashIcon />
+            {control > 3 && (
-            {t('remove')}
+              <AccountLink href={`/account/restrict`} title={t('restrict')} color="warning">
-          </AccountLink>
+                <CloseIcon />
-        </div>
+                {t('restrict')}
+              </AccountLink>
+            )}
+            <AccountLink href={`/account/remove`} title={t('remove')} color="error">
+              <TrashIcon />
+              {t('remove')}
+            </AccountLink>
+          </div>
+        )}
       </div>
 
       <div className="flex flex-row flex-wrap gap-2 md:gap-4 justify-end">
-        <Link className={`${btnClasses} btn-primary md:w-64 w-full`} href="/profile">
+        {control > 1 && (
-          <UserIcon />
+          <Link className={`${btnClasses} btn-primary md:w-64 w-full`} href="/profile">
-          {t('yourProfile')}
+            <UserIcon />
-        </Link>
+            {t('yourProfile')}
+          </Link>
+        )}
         <button className={`${btnClasses} btn-warning md:w-64 w-full`} onClick={() => signOut()}>
           <SignoutIcon />
           {t('signOut')}

sites/shared/components/account/sets.mjs

@@ -4,7 +4,7 @@ import { useTranslation } from 'next-i18next'
 import orderBy from 'lodash.orderby'
 import { measurements } from 'config/measurements.mjs'
 import { measurements as designMeasurements } from 'shared/prebuild/data/design-measurements.mjs'
-import { freeSewingConfig as conf } from 'shared/config/freesewing.config.mjs'
+import { freeSewingConfig as conf, controlLevels } from 'shared/config/freesewing.config.mjs'
 // Hooks
 import { useDropzone } from 'react-dropzone'
 import { useAccount } from 'shared/hooks/use-account.mjs'
@@ -30,6 +30,8 @@ import {
   UploadIcon,
   CancelIcon,
   ResetIcon,
+  MeasieIcon,
+  CalendarIcon,
 } from 'shared/components/icons.mjs'
 import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
 import Markdown from 'react-markdown'
@@ -43,6 +45,7 @@ import { useSetDocs } from 'shared/hooks/use-set-docs.mjs'
 import { useMeasurementDocs } from 'shared/hooks/use-measurement-docs.mjs'
 import { Lightbox } from 'shared/components/lightbox.mjs'
 import { isDegreeMeasurement } from 'config/measurements.mjs'
+import { TextOnBg } from 'shared/components/text-on-bg.mjs'
 
 import {
   StringInput,
@@ -50,9 +53,11 @@ import {
   ListInput,
   MarkdownInput,
   MeasieInput,
+  DesignDropdown,
+  ns as inputNs,
 } from 'shared/components/inputs.mjs'
 
-export const ns = ['account', 'patterns', 'status', 'measurements']
+export const ns = [inputNs, 'account', 'patterns', 'status', 'measurements']
 
 export const NewSet = () => {
   // Hooks
@@ -107,9 +112,71 @@ export const NewSet = () => {
 export const MeasieVal = ({ val, m, imperial }) =>
   isDegreeMeasurement(m) ? <span>{val}°</span> : <span>{formatMm(val, imperial)}</span>
 
+export const MsetBanner = ({ set, control, onClick = false, href = false }) => {
+  const { t, i18n } = useTranslation(ns)
+  const info = []
+  if (control > 1)
+    info.push([
+      <CalendarIcon />,
+      <b>
+        <TextOnBg txt={shortDate(i18n.language, set.createdAt, false)} />
+      </b>,
+    ])
+  info.push([
+    <MeasieIcon />,
+    <b>
+      <TextOnBg txt={(set.measies ? Object.keys(set.measies).length : 0) + ' ' + t('measies')} />
+    </b>,
+  ])
+  if (control > 2)
+    info.push([
+      set.public ? (
+        <OkIcon className="w-6 h-6 text-success" stroke={4} />
+      ) : (
+        <NoIcon className="w-6 h-6 text-error" stroke={3} />
+      ),
+      <b>
+        <TextOnBg txt={t(set.public ? 'publicSet' : 'privateSet')} />
+      </b>,
+    ])
+  const inner = (
+    <>
+      <h2 className="bg-base-100 px-4 rounded-lg bg-opacity-50 py-2 rounded-l-none">
+        <TextOnBg txt={set.name} />
+      </h2>
+      {info.map((item) => (
+        <div className="flex flex-row flex-wrap gap-2 bg-base-100 p-4 rounded bg-opacity-50 py-1 mt-2 rounded-l-none">
+          {item[0]}
+          {item[1]}
+        </div>
+      ))}
+    </>
+  )
+  const props = {
+    className:
+      'bg-base-100 w-full mb-2 mx-auto flex flex-col items-start text-center justify-center rounded shadow py-4',
+    style: {
+      backgroundImage: `url(${cloudflareImageUrl({ type: 'w1000', id: set.img })})`,
+      backgroundSize: 'cover',
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: '50%',
+    },
+  }
+
+  return onClick ? (
+    <button {...props} onClick={onClick}>
+      {inner}
+    </button>
+  ) : (
+    <Link {...props} href={href}>
+      {inner}
+    </Link>
+  )
+}
+
 export const Mset = ({ id, publicOnly = false }) => {
   // Hooks
-  const { account } = useAccount()
+  const { account, control } = useAccount()
   const { setLoadingStatus, LoadingStatus } = useLoadingStatus()
   const backend = useBackend()
   const { t } = useTranslation(ns)
@@ -212,14 +279,9 @@ export const Mset = ({ id, publicOnly = false }) => {
   const heading = (
     <div className="flex flex-row flex-wrap gap-4 text-sm items-center justify-between mb-2">
       <LoadingStatus />
-      <button
+      <MsetBanner
-        className="bg-base-100 w-full h-36 mb-2 mx-auto flex flex-col items-center text-center justify-center rounded shadow"
+        set={mset}
-        style={{
+        control={control}
-          backgroundImage: `url(${cloudflareImageUrl({ type: 'w1000', id: mset.img })})`,
-          backgroundSize: 'cover',
-          backgroundRepeat: 'no-repeat',
-          backgroundPosition: '50%',
-        }}
         onClick={() =>
           setModal(
             <ModalWrapper flex="col" justify="top lg:justify-center" slideFrom="right">
@@ -227,9 +289,7 @@ export const Mset = ({ id, publicOnly = false }) => {
             </ModalWrapper>
           )
         }
-      >
+      />
-        <h2 className="bg-base-100 px-4 rounded-lg bg-opacity-70 py-2">{mset.name}</h2>
-      </button>
       {account.control > 3 && mset.public ? (
         <div className="flex flex-row gap-2 items-center">
           <a
@@ -291,39 +351,43 @@ export const Mset = ({ id, publicOnly = false }) => {
 
         <h2>{t('data')}</h2>
         <Row title={t('name')}>{mset.name}</Row>
-        <Row title={t('image')}>
-          <img
-            src={cloudflareImageUrl({ type: 'sq100', id: mset.img })}
-            className="w-8 h-8 aspect-square rounded-full shadow"
-          />
-        </Row>
         <Row title={t('units')}>{mset.imperial ? t('imerialUnits') : t('metricUnits')}</Row>
-        <Row title={t('notes')}>
+        {control >= controlLevels.sets.notes && (
-          <Markdown>{mset.notes}</Markdown>
+          <Row title={t('notes')}>
-        </Row>
+            <Markdown>{mset.notes}</Markdown>
-        <Row title={t('public')}>
-          {mset.public ? (
-            <OkIcon className="w-6 h-6 text-success" stroke={4} />
-          ) : (
-            <NoIcon className="w-6 h-6 text-error" stroke={3} />
-          )}
-        </Row>
-        {mset.public && (
-          <Row title={t('permalink')}>
-            <PageLink href={`/sets/${mset.id}`} txt={`/sets/${mset.id}`} />
           </Row>
         )}
-        <Row title={t('created')}>
+        {control >= controlLevels.sets.public && (
-          <Timeago date={mset.createdAt} />
+          <>
-          <span className="px-2 opacity-50">|</span>
+            <Row title={t('public')}>
-          {shortDate(locale, mset.createdAt, false)}
+              {mset.public ? (
-        </Row>
+                <OkIcon className="w-6 h-6 text-success" stroke={4} />
-        <Row title={t('updated')}>
+              ) : (
-          <Timeago date={mset.updatedAt} />
+                <NoIcon className="w-6 h-6 text-error" stroke={3} />
-          <span className="px-2 opacity-50">|</span>
+              )}
-          {shortDate(locale, mset.createdAt, false)}
+            </Row>
-        </Row>
+            {mset.public && (
-        <Row title={t('id')}>{mset.id}</Row>
+              <Row title={t('permalink')}>
+                <PageLink href={`/sets/${mset.id}`} txt={`/sets/${mset.id}`} />
+              </Row>
+            )}
+          </>
+        )}
+        {control >= controlLevels.sets.createdAt && (
+          <Row title={t('created')}>
+            <Timeago date={mset.createdAt} />
+            <span className="px-2 opacity-50">|</span>
+            {shortDate(locale, mset.createdAt, false)}
+          </Row>
+        )}
+        {control >= controlLevels.sets.createdAt && (
+          <Row title={t('updated')}>
+            <Timeago date={mset.updatedAt} />
+            <span className="px-2 opacity-50">|</span>
+            {shortDate(locale, mset.createdAt, false)}
+          </Row>
+        )}
+        {control >= controlLevels.sets.id && <Row title={t('id')}>{mset.id}</Row>}
       </div>
     )
 
@@ -337,37 +401,43 @@ export const Mset = ({ id, publicOnly = false }) => {
           </li>
         ))}
         <ul className="list list-disc list-inside ml-4">
-          {['name', 'image', 'public', 'units', 'notes'].map((id) => (
+          <li>
+            <AnchorLink id="name" txt={t('name')} />
+          </li>
+          {account.control >= conf.account.sets.img ? (
             <li>
-              <AnchorLink id={id} txt={t(id)} />
+              <AnchorLink id="image" txt={t('image')} />
             </li>
-          ))}
+          ) : null}
+          {['public', 'units', 'notes'].map((id) =>
+            account.control >= conf.account.sets[id] ? (
+              <li>
+                <AnchorLink id="units" txt={t(id)} />
+              </li>
+            ) : null
+          )}
         </ul>
       </ul>
 
       <h2 id="measies">{t('measies')}</h2>
-      <div className="flex flex-row items-center justify-center">
+      <div className="bg-secondary px-4 pt-1 pb-4 rounded-lg shadow bg-opacity-10">
-        <button
+        <DesignDropdown
-          className="btn btn-secondary btn-outline flex flex-row gap-4 rounded-r-none"
+          update={setFilter}
-          onClick={() =>
+          label={t('filterByDesign')}
-            setModal(
+          current={filter}
-              <ModalDesignPicker
+          firstOption={<option value="">{t('noFilter')}</option>}
-                designs={Object.keys(designMeasurements)}
+          docs={
-                setModal={setModal}
+            <div className="max-w-prose">
-                setter={setFilter}
+              <h2>
-              />
+                {t('measies')}: {t('filterByDesign')}
-            )
+              </h2>
+              <p>
+                If you have a specific design in mind, you can <b>filter by design</b> to only list
+                those measurements that are required for this design.
+              </p>
+            </div>
           }
-        >
+        />
-          <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((mplus) => {
         const [translated, m] = mplus.split('|')
@@ -506,9 +576,12 @@ export const Mset = ({ id, publicOnly = false }) => {
 // Component for the account/sets page
 export const Sets = ({ title = true }) => {
   // Hooks
+  const { control } = useAccount()
   const backend = useBackend()
-  const { t } = useTranslation(ns)
+  const { t, i18n } = useTranslation(ns)
   const { setLoadingStatus, LoadingStatus, LoadingProgress } = useLoadingStatus()
+  const router = useRouter()
+  const { locale } = router
 
   // State
   const [sets, setSets] = useState([])
@@ -561,8 +634,13 @@ export const Sets = ({ title = true }) => {
   return (
     <div className="max-w-4xl xl:pl-4">
       <LoadingStatus />
-      <p className="text-right">
+      <p className="text-center md:text-right">
-        <Link className="btn btn-primary capitalize btn-lg" bottom primary href="/new/set">
+        <Link
+          className="btn btn-primary capitalize w-full md:w-auto"
+          bottom
+          primary
+          href="/new/set"
+        >
           {t('newSet')}
         </Link>
       </p>
@@ -574,7 +652,7 @@ export const Sets = ({ title = true }) => {
       <table className="table table-auto">
         <thead className="border border-base-300 border-b-2 border-t-0 border-x-0">
           <tr className="b">
-            <th className="text-base-300 text-base">
+            <th className="text-base-300 text-base w-4 px-1">
               <input
                 type="checkbox"
                 className="checkbox checkbox-secondary"
@@ -582,21 +660,13 @@ export const Sets = ({ title = true }) => {
                 checked={sets.length === selCount}
               />
             </th>
-            <th className="text-base-300 text-base">{t('keyName')}</th>
+            <th className="text-base-300 text-base">{t('set')}</th>
-            <th className="text-base-300 text-base">
-              <span className="hidden md:inline">{t('keyLevel')}</span>
-              <span role="img" className="inline md:hidden">
-                🔐
-              </span>
-            </th>
-            <th className="text-base-300 text-base">{t('keyExpires')}</th>
-            <th className="text-base-300 text-base hidden md:block">{t('apiCalls')}</th>
           </tr>
         </thead>
         <tbody>
           {sets.map((set, i) => (
             <tr key={i}>
-              <td className="text-base font-medium">
+              <td className="text-base font-medium px-0">
                 <input
                   type="checkbox"
                   checked={selected[set.id] ? true : false}
@@ -604,12 +674,9 @@ export const Sets = ({ title = true }) => {
                   onClick={() => toggleSelect(set.id)}
                 />
               </td>
-              <td className="text-base font-medium">
+              <td className="text-base font-medium px-0">
-                <PageLink href={`/account/sets/${set.id}`} txt={set.name} />
+                <MsetBanner control={control} href={`/account/sets/${set.id}`} set={set} />
               </td>
-              <td className="text-base font-medium"></td>
-              <td className="text-base font-medium"></td>
-              <td className="text-base font-medium hidden md:block"></td>
             </tr>
           ))}
         </tbody>

sites/shared/components/icons.mjs

@@ -60,12 +60,16 @@ export const BulletIcon = (props) => (
   </IconWrapper>
 )
 
-export const Camera = (props) => (
+export const CalendarIcon = (props) => (
   <IconWrapper {...props}>
-    <>
+    <path d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
-      <path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
+  </IconWrapper>
-      <path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
+)
-    </>
+
+export const CameraIcon = (props) => (
+  <IconWrapper {...props}>
+    <path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
+    <path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
   </IconWrapper>
 )
 

sites/shared/components/inputs.mjs

@@ -1,5 +1,6 @@
 // Dependencies
 import { cloudflareImageUrl } from 'shared/utils.mjs'
+import { collection } from 'shared/hooks/use-design.mjs'
 // Context
 import { ModalContext } from 'shared/context/modal-context.mjs'
 // Hooks
@@ -19,7 +20,7 @@ import { measurementAsMm, formatMm, measurementAsUnits, parseDistanceInput } fro
 //import { NumberInput } from 'shared/components/workbench/menus/shared/inputs.mjs'
 //import { useState, useCallback } from 'react'
 
-export const ns = ['account', 'measurements']
+export const ns = ['account', 'measurements', 'designs']
 
 /*
  * Helper component to display a tab heading
@@ -53,12 +54,12 @@ export const FormControl = ({
 
   return (
     <div className="form-control w-full mt-2">
-      <label className="label pb-0">
+      <label className={`label pb-0 ${docs ? 'hover:cursor-help' : ''}`}>
         <span className="label-text text-lg font-bold mb-0">{label}</span>
         {docs ? (
           <span className="label-text-alt">
             <button
-              className="btn btn-ghost btn-sm btn-circle"
+              className="btn btn-ghost btn-sm btn-circle hover:btn-secondary"
               onClick={() =>
                 setModal(
                   <ModalWrapper flex="col" justify="top lg:justify-center" slideFrom="right">
@@ -155,6 +156,36 @@ export const StringInput = ({
   )
 }
 
+/*
+ * Dropdown for designs
+ */
+export const DesignDropdown = ({
+  label, // Label to use
+  update, // onChange handler
+  current, // The current value
+  docs = false, // Docs to load, if any
+  firstOption = null, // Any first option to add in addition to designs
+}) => {
+  const { t, i18n } = useTranslation(['designs'])
+  console.log(i18n)
+
+  return (
+    <FormControl label={label} docs={docs}>
+      <select
+        className="select select-bordered w-full"
+        onChange={(evt) => update(evt.target.value)}
+      >
+        {firstOption}
+        {collection.map((design) => (
+          <option key={design} value={design}>
+            {t(`${design}.t`)}
+          </option>
+        ))}
+      </select>
+    </FormControl>
+  )
+}
+
 /*
  * Input for an image that is passive (it does not upload the image)
  */

sites/shared/components/text-on-bg.mjs

@@ -0,0 +1,10 @@
+export const TextOnBg = ({ txt }) => (
+  <span
+    style={{
+      textShadow:
+        '1px 1px 1px hsl(var(--b1)), -1px -1px 1px hsl(var(--b1)), -1px 1px 1px hsl(var(--b1)), 1px -1px 1px hsl(var(--b1))',
+    }}
+  >
+    {txt}
+  </span>
+)

sites/shared/config/freesewing.config.mjs

@@ -11,14 +11,14 @@ export const freeSewingConfig = {
   account: {
     fields: {
       data: {
-        bookmarks: 1,
+        bookmarks: 2,
         sets: 1,
         patterns: 1,
         apikeys: 4,
       },
       info: {
         username: 2,
-        bio: 1,
+        bio: 2,
         img: 2,
         email: 3,
       },
@@ -32,7 +32,7 @@ export const freeSewingConfig = {
       },
       security: {
         password: 2,
-        mfa: 4,
+        mfa: 3,
         apikeys: 4,
       },
       identities: {
@@ -48,10 +48,13 @@ export const freeSewingConfig = {
     },
     sets: {
       name: 1,
-      img: 2,
+      img: 1,
       public: 3,
-      units: 2,
+      units: 1,
       notes: 2,
+      createdAt: 2,
+      updatedAt: 2,
+      id: 4,
     },
     patterns: {
       name: 1,
@@ -80,3 +83,13 @@ export const freeSewingConfig = {
     },
   },
 }
+
+export const controlLevels = {
+  ...freeSewingConfig.account.fields.data,
+  ...freeSewingConfig.account.fields.info,
+  ...freeSewingConfig.account.fields.settings,
+  ...freeSewingConfig.account.fields.security,
+  ...freeSewingConfig.account.fields.identities,
+  sets: freeSewingConfig.account.sets,
+  patterns: freeSewingConfig.account.patterns,
+}

sites/shared/hooks/use-account.mjs

@@ -61,5 +61,6 @@ export function useAccount() {
     clearAdmin,
     impersonate,
     stopImpersonating,
+    control: account.control || 2,
   }
 }

sites/shared/prebuild/sitenav-org.mjs

@@ -89,10 +89,6 @@ export const extendSiteNav = async (siteNav, lang) => {
     }
   }
 
-  for (const key of ['patterns', 'sets', 'community']) {
-    siteNav[key] = { m: 1, s: key, t: t(`sections:${key}`) }
-  }
-
   // Configure properties of blog and showcase sections
   for (const key of ['blog', 'showcase']) {
     siteNav[key].m = 1
@@ -216,9 +212,8 @@ export const extendSiteNav = async (siteNav, lang) => {
 
   // Add support
   siteNav.support = {
-    _: 1,
+    m: 1,
     s: 'support',
-    h: 1,
     t: t('sections:support'),
   }
 
@@ -241,11 +236,9 @@ export const extendSiteNav = async (siteNav, lang) => {
   siteNav.docs.o = 20
   siteNav.blog.o = 30
   siteNav.showcase.o = 40
-  siteNav.community.o = 50
+  siteNav.new.o = 50
-  siteNav.patterns.o = 60
+  siteNav.account.o = 60
-  siteNav.sets.o = 70
+  siteNav.support.o = 70
-  siteNav.account.o = 80
-  siteNav.new.o = 90
 
   return siteNav
 }