feat: reload context

src/components/Gitako.tsx

@@ -1,5 +1,6 @@
 import { SideBar } from 'components/SideBar'
 import { ConfigsContextWrapper } from 'containers/ConfigsContext'
+import { ReloadContextWrapper } from 'containers/ReloadContext'
 import * as React from 'react'
 import { ErrorBoundary } from '../containers/ErrorBoundary'
 import { StateBarErrorContextWrapper } from '../containers/ErrorContext'
@@ -9,18 +10,20 @@ import { StateBarStateContextWrapper } from '../containers/SideBarState'
 
 export function Gitako() {
   return (
-    <ErrorBoundary>
-      <ConfigsContextWrapper>
-        <StateBarStateContextWrapper>
-          <StateBarErrorContextWrapper>
-            <OAuthWrapper>
-              <RepoContextWrapper>
-                <SideBar />
-              </RepoContextWrapper>
-            </OAuthWrapper>
-          </StateBarErrorContextWrapper>
-        </StateBarStateContextWrapper>
-      </ConfigsContextWrapper>
-    </ErrorBoundary>
+    <ReloadContextWrapper>
+      <ErrorBoundary>
+        <ConfigsContextWrapper>
+          <StateBarStateContextWrapper>
+            <StateBarErrorContextWrapper>
+              <OAuthWrapper>
+                <RepoContextWrapper>
+                  <SideBar />
+                </RepoContextWrapper>
+              </OAuthWrapper>
+            </StateBarErrorContextWrapper>
+          </StateBarStateContextWrapper>
+        </ConfigsContextWrapper>
+      </ErrorBoundary>
+    </ReloadContextWrapper>
   )
 }

src/components/ToggleShowButton.tsx

@@ -1,9 +1,12 @@
+import { SyncIcon } from '@primer/octicons-react'
 import iconURL from 'assets/icons/Gitako.png'
 import { useConfigs } from 'containers/ConfigsContext'
+import { ReloadContext } from 'containers/ReloadContext'
 import * as React from 'react'
 import { useDebounce, useWindowSize } from 'react-use'
 import { cx } from 'utils/cx'
 import { useResizeHandler } from 'utils/hooks/useResizeHandler'
+import { RoundIconButton } from './RoundIconButton'
 
 type Props = {
   error?: string | null
@@ -19,6 +22,7 @@ function getSafeDistance(y: number, height: number) {
 }
 
 export function ToggleShowButton({ error, className, onClick, onHover }: Props) {
+  const reload = React.useContext(ReloadContext)
   const ref = React.useRef<HTMLDivElement>(null)
   const config = useConfigs()
   const [distance, setDistance] = React.useState(config.value.toggleButtonVerticalDistance)
@@ -68,7 +72,19 @@ export function ToggleShowButton({ error, className, onClick, onHover }: Props)
       >
         <img className={'tentacle'} draggable={false} src={iconURL} />
       </button>
-      {error && <span className={'error-message'}>{error}</span>}
+      {error && (
+        <span className={'error-message'}>
+          {error}
+          <RoundIconButton
+            sx={{ ml: 1 }}
+            variant="danger"
+            size="small"
+            aria-label={'Reload Gitako'}
+            icon={SyncIcon}
+            onClick={reload}
+          />
+        </span>
+      )}
     </div>
   )
 }

src/containers/ReloadContext.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import { noop } from 'utils/general'
+
+export type ReloadContextShape = () => void
+
+export const ReloadContext = React.createContext<ReloadContextShape>(noop)
+
+export function ReloadContextWrapper({ children }: React.PropsWithChildren<{}>) {
+  const [key, setKey] = React.useState(0)
+  const reload = React.useCallback(() => setKey(key => key + 1), [])
+
+  return (
+    <ReloadContext.Provider key={key} value={reload}>
+      {children}
+    </ReloadContext.Provider>
+  )
+}

src/styles/index.scss

@@ -357,17 +357,18 @@ $minimal-z-index: max(
   .error-message {
     display: none;
     margin-left: 4px;
-    padding: 2px 4px;
+    padding: 4px;
     font-size: 12px;
     color: var(--color-danger-fg);
     border: 1px solid var(--color-border-default);
-    border-radius: 2px;
+    border-radius: 4px;
     background-color: var(--color-bg-subtle);
   }
 
   &:hover {
     .error-message {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
     }
   }
 }