[breaking]: FreeSewing v4 (#7297)

Refer to the CHANGELOG for all info.

---------

Co-authored-by: Wouter van Wageningen <wouter.vdub@yahoo.com>
Co-authored-by: Josh Munic <jpmunic@gmail.com>
Co-authored-by: Jonathan Haas <haasjona@gmail.com>

packages/react/components/Account/Reload.mjs

@@ -0,0 +1,50 @@
+// Context
+import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
+
+// Hooks
+import React, { useState, useContext } from 'react'
+import { useAccount } from '@freesewing/react/hooks/useAccount'
+import { useBackend } from '@freesewing/react/hooks/useBackend'
+
+// Components
+import { Link as WebLink } from '@freesewing/react/components/Link'
+import { ReloadIcon } from '@freesewing/react/components/Icon'
+import { Popout } from '@freesewing/react/components/Popout'
+import { IconButton } from '@freesewing/react/components/Button'
+
+/*
+ * Component for the account/actions/export page
+ */
+export const Reload = () => {
+  // Hooks
+  const backend = useBackend()
+  const { setAccount } = useAccount()
+  const { setLoadingStatus } = useContext(LoadingStatusContext)
+
+  // Helper method to reload account
+  const reload = async () => {
+    setLoadingStatus([true, 'Contacting backend'])
+    const [status, body] = await backend.reloadAccount()
+    if (status === 200) {
+      setAccount(body.account)
+      setLoadingStatus([true, 'All done', true, true])
+    } else setLoadingStatus([true, 'This did not go as planned. Please report this.', true, false])
+  }
+
+  return (
+    <div className="tw-w-full">
+      <p>
+        The data stored in your browser can sometimes get out of sync with the data stored in our
+        backend.
+      </p>
+      <p>
+        This lets you reload your account data from the backend. It has the same effect as signing
+        out, and then signing in again.
+      </p>
+      <IconButton onClick={reload}>
+        <ReloadIcon />
+        Reload Account Data
+      </IconButton>
+    </div>
+  )
+}