feat: help

src/components/SimpleToggleField.tsx

@@ -7,6 +7,7 @@ export type SimpleField = {
   key: keyof Config
   label: string
   wikiLink?: string
+  tooltip?: string
   description?: string
   overwrite?: {
     value: <T>(value: T) => boolean
@@ -31,11 +32,19 @@ export function SimpleToggleField({ field, onChange }: Props) {
         <>
           {field.label}{' '}
           {field.wikiLink ? (
-            <a href={field.wikiLink} target={'_blank'}>
+            <a href={field.wikiLink} title={field.tooltip} target={'_blank'}>
               (?)
             </a>
+          ) : field.description ? (
+            <p className={'note'} title={field.tooltip}>
+              {field.description}
+            </p>
           ) : (
-            field.description && <p className={'note'}>{field.description}</p>
+            field.tooltip && (
+              <span className={'help'} title={field.tooltip}>
+                (?)
+              </span>
+            )
           )}
         </>
       }

src/components/settings/AccessTokenSettings.tsx

@@ -1,4 +1,4 @@
-import { Button, TextInput } from '@primer/components'
+import { Button, Text, TextInput } from '@primer/components'
 import { wikiLinks } from 'components/settings/SettingsBar'
 import { useConfigs } from 'containers/ConfigsContext'
 import { platform } from 'platforms'
@@ -65,19 +65,26 @@ export function AccessTokenSettings(props: React.PropsWithChildren<Props>) {
       title={
         <>
           Access Token{' '}
-          <a href={wikiLinks.createAccessToken} target="_blank">
+          <a
+            href={wikiLinks.createAccessToken}
+            title="A token is required to access private repositories or bypass API rate limits"
+            target="_blank"
+          >
             (?)
           </a>
         </>
       }
     >
       {hasAccessToken ? (
-        <Button onClick={() => configContext.set({ access_token: '' })}>Clear</Button>
+        <div>
+          <Text as="p">Your token has been saved.</Text>
+          <Button onClick={() => configContext.set({ access_token: '' })}>Clear</Button>
+        </div>
       ) : (
         <div>
           {platform === Gitee ? (
             // disabled for Gitee as it does not support dynamic redirect_uri
-            <span>OAuth for Gitee is unavailable</span>
+            <Text>Note: OAuth for Gitee is unavailable</Text>
           ) : (
             <a
               className={'link-button'}

src/components/settings/FileTreeSettings.tsx

@@ -73,6 +73,7 @@ export function FileTreeSettings(props: React.PropsWithChildren<Props>) {
           key: 'compressSingletonFolder',
           label: 'Compress singleton folder',
           wikiLink: wikiLinks.compressSingletonFolder,
+          tooltip: 'Merge folders and their only child folder to make UI more compact.',
         }}
       />
     </SettingsSection>

src/components/settings/SettingsBar.tsx

@@ -37,11 +37,13 @@ function SettingsBarContent() {
             key: 'copyFileButton',
             label: 'Copy file shortcut',
             wikiLink: wikiLinks.copyFileButton,
+            tooltip: `Read more in Gitako's Wiki`,
           },
           {
             key: 'copySnippetButton',
             label: 'Copy snippet shortcut',
             wikiLink: wikiLinks.copySnippet,
+            tooltip: `Read more in Gitako's Wiki`,
           },
           {
             key: 'shrinkGitHubHeader',

src/components/settings/SidebarSettings.tsx

@@ -94,7 +94,9 @@ export function SidebarSettings(props: React.PropsWithChildren<Props>) {
       <SimpleToggleField
         field={{
           key: 'intelligentToggle',
-          label: 'Auto toggle according to page content.',
+          label: 'Auto expand',
+          tooltip:
+            'Gitako will expand when exploring source files, pull requests, etc. And collapse otherwise.',
           overwrite: {
             value: enabled => enabled === null,
             onChange: checked => (checked ? null : true),

src/content.scss

@@ -548,6 +548,10 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           .field {
             margin-bottom: 8px;
 
+            .help {
+              cursor: help;
+            }
+
             label {
               display: inline-block;
               margin-bottom: 0px;