Franknoirot/refresh button add (#2314)

* Add a simple refresh button

* Add plausible event for when Refresh button is clicked

index.html

@@ -15,7 +15,7 @@
     <script
       defer
       data-domain="app.zoo.dev"
-      src="https://plausible.corp.zoo.dev/js/script.js"
+      src="https://plausible.corp.zoo.dev/js/script.tagged-events.js"
     ></script>
     <title>Zoo Modeling App</title>
   </head>

src/components/AppHeader.tsx

@@ -1,12 +1,13 @@
 import { Toolbar } from '../Toolbar'
-import UserSidebarMenu from './UserSidebarMenu'
+import UserSidebarMenu from 'components/UserSidebarMenu'
 import { type IndexLoaderData } from 'lib/types'
 import ProjectSidebarMenu from './ProjectSidebarMenu'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import styles from './AppHeader.module.css'
 import { useCommandsContext } from 'hooks/useCommandsContext'
-import { ActionButton } from './ActionButton'
+import { ActionButton } from 'components/ActionButton'
 import usePlatform from 'hooks/usePlatform'
+import { RefreshButton } from 'components/RefreshButton'
 
 interface AppHeaderProps extends React.PropsWithChildren {
   showToolbar?: boolean
@@ -60,7 +61,12 @@ export const AppHeader = ({
       </div>
       <div className="flex items-center gap-1 py-1 ml-auto">
         {/* If there are children, show them, otherwise show User menu */}
-        {children || <UserSidebarMenu user={user} />}
+        {children || (
+          <>
+            <RefreshButton />
+            <UserSidebarMenu user={user} />
+          </>
+        )}
       </div>
     </header>
   )

src/components/CustomIcon.tsx

@@ -41,6 +41,16 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  arrowRotateRight: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.5 7.59684L15.5 8.09684L15 8.09684L10.7931 8.09684L10.7931 7.09684L13.769 7.09684C13.3052 6.54751 12.7147 6.11526 12.0452 5.83941C11.2133 5.49662 10.2977 5.41109 9.41668 5.59387C8.53566 5.77666 7.72967 6.21935 7.10277 6.8648C6.47588 7.51025 6.05687 8.32881 5.89986 9.21478C5.74284 10.1008 5.85503 11.0134 6.22194 11.835C6.58884 12.6566 7.19361 13.3493 7.95816 13.8237C8.7227 14.2981 9.61192 14.5325 10.511 14.4964C11.41 14.4604 12.2776 14.1557 13.0018 13.6216L13.5953 14.4264C12.7103 15.0792 11.6499 15.4516 10.551 15.4956C9.45216 15.5397 8.36535 15.2533 7.4309 14.6734C6.49646 14.0936 5.75729 13.2469 5.30885 12.2428C4.86041 11.2386 4.7233 10.1231 4.9152 9.04027C5.10711 7.95742 5.61923 6.95696 6.38543 6.16808C7.15164 5.3792 8.13674 4.83812 9.21354 4.61472C10.2903 4.39132 11.4094 4.49586 12.4262 4.91483C13.2286 5.24545 13.9382 5.7599 14.5 6.41286L14.5 3.38998L15.5 3.38998L15.5 7.59684Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   arrowUp: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path

src/components/RefreshButton.tsx

@@ -0,0 +1,37 @@
+import { CustomIcon } from './CustomIcon'
+import Tooltip from './Tooltip'
+
+export function RefreshButton() {
+  async function refresh() {
+    if (window && 'plausible' in window) {
+      const p = window.plausible as (
+        event: string,
+        options?: { props: Record<string, string> }
+      ) => Promise<void>
+      // Send a refresh event to Plausible so we can track how often users get stuck
+      await p('Refresh', {
+        props: {
+          method: 'UI button',
+          // TODO: add more coredump data here
+        },
+      })
+    }
+
+    // Window may not be available in some environments
+    window?.location.reload()
+  }
+
+  return (
+    <button
+      onClick={refresh}
+      className="p-1 m-0 bg-chalkboard-10/80 dark:bg-chalkboard-100/50 hover:bg-chalkboard-10 dark:hover:bg-chalkboard-100 rounded-full border border-solid border-chalkboard-10 dark:border-chalkboard-100"
+    >
+      <CustomIcon name="arrowRotateRight" className="w-5 h-5" />
+      <Tooltip position="bottom-right">
+        <span>Refresh and report</span>
+        <br />
+        <span className="text-xs">Send us data on how you got stuck</span>
+      </Tooltip>
+    </button>
+  )
+}