diff --git a/src/components/Gitako.tsx b/src/components/Gitako.tsx
index 13039b3..8fc22db 100644
--- a/src/components/Gitako.tsx
+++ b/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 (
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
)
}
diff --git a/src/components/ToggleShowButton.tsx b/src/components/ToggleShowButton.tsx
index 5e51750..180477f 100644
--- a/src/components/ToggleShowButton.tsx
+++ b/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(null)
const config = useConfigs()
const [distance, setDistance] = React.useState(config.value.toggleButtonVerticalDistance)
@@ -68,7 +72,19 @@ export function ToggleShowButton({ error, className, onClick, onHover }: Props)
>
- {error && {error}}
+ {error && (
+
+ {error}
+
+
+ )}
)
}
diff --git a/src/containers/ReloadContext.tsx b/src/containers/ReloadContext.tsx
new file mode 100644
index 0000000..4e30436
--- /dev/null
+++ b/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(noop)
+
+export function ReloadContextWrapper({ children }: React.PropsWithChildren<{}>) {
+ const [key, setKey] = React.useState(0)
+ const reload = React.useCallback(() => setKey(key => key + 1), [])
+
+ return (
+
+ {children}
+
+ )
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index c797a3b..2d78fa8 100644
--- a/src/styles/index.scss
+++ b/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;
}
}
}