feat: Add links to the user guide

frontend/src/locale/en/translation.json

@@ -278,7 +278,10 @@
           "subscrition-gift_other": "<n>{{name}}</n> gifted <c>{{count}}</c> subscriptions <t>(Tier {{tier}})</t>"
         },
         "replay": "Replay event"
-      }
+      },
+      "quick-links": "Useful links",
+      "link-user-guide": "User guide",
+      "link-api": "API reference"
     },
     "onboarding": {
       "welcome-header": "Welcome to {{APPNAME}}",
@@ -303,7 +306,8 @@
       "done-p1": "That should be enough for now. You can always change any option later, including custom configurations not covered in this procedure (e.g. using a different Twitch account for the bot).",
       "done-p2": "If you have questions or issues, please reach out at any of these places:",
       "done-button": "Complete onboarding",
-      "done-p3": "Click the button below to finish the onboarding and go to {{APPNAME}}'s dashboard."
+      "done-p3": "Click the button below to finish the onboarding and go to {{APPNAME}}'s dashboard.",
+      "welcome-guide": "It might be a good idea to have the {{APPNAME}} user guide open in case you have trouble with any of the following steps, you can open it by <g>clicking here</g>."
     },
     "uiconfig": {
       "title": "User interface settings",

frontend/src/locale/it/translation.json

@@ -162,7 +162,10 @@
           "subscrition-gift_other": "<n>{{name}}</n> ha regalato <c>{{count}}</c> abbonamenti <t>(Livello {{tier}})</t>"
         },
         "replay": "Ripeti evento"
-      }
+      },
+      "link-api": "Documentazione API",
+      "link-user-guide": "Guida utente",
+      "quick-links": "Link utili"
     },
     "debug": {
       "big-ass-warning": "L'utilizzo di questa pagina può danneggiare gravemente il tuo database. \nSpero tu sappia cosa stai facendo!",
@@ -300,7 +303,8 @@
       "twitch-p1": "Per configurare Twitch dovrai creare un'applicazione sul portale per gli sviluppatori. Segui le istruzioni di seguito o fai clic sul pulsante in basso per saltare questo passaggio.",
       "twitch-ev-p1": "Ora che hai creato un'app, devi autenticarci il tuo account Twitch in modo che possiamo accedere a dati come il nome del tuo canale o eventi come nuovi follower o raid.",
       "done-p2": "In caso di domande o problemi, contattaci in uno di questi modi:",
-      "done-header": "È tutto pronto!"
+      "done-header": "È tutto pronto!",
+      "welcome-guide": "Sarebbe una buona idea tenere aperta la guida utente di {{APPNAME}} nel caso incontrassi difficoltà con uno dei seguenti passaggi, puoi aprirla <g>cliccando qui</g>."
     },
     "strimertul": {
       "credits-header": "Ringraziamenti",

frontend/src/ui/pages/Dashboard.tsx

@@ -8,7 +8,6 @@ import {
 import { useLiveKey } from '~/lib/react';
 import { useAppSelector } from '~/store';
 import { PageContainer, SectionHeader, styled, TextBlock } from '../theme';
-import WIPNotice from '../components/utils/WIPNotice';
 import BrowserLink from '../components/BrowserLink';
 import Scrollbar from '../components/utils/Scrollbar';
 
@@ -103,6 +102,14 @@ const TwitchEventTime = styled('time', {
   fontSize: '13px',
 });
 
+const UsefulLinksMenu = styled('ul', {
+  margin: '0',
+  listStyleType: 'square',
+  li: {
+    padding: '3px',
+  },
+});
+
 const supportedMessages: EventSubNotificationType[] = [
   EventSubNotificationType.Followed,
   EventSubNotificationType.CustomRewardRedemptionAdded,
@@ -411,9 +418,23 @@ function TwitchSection() {
 }
 
 export default function Dashboard(): React.ReactElement {
+  const { t } = useTranslation();
   return (
     <PageContainer>
       <TwitchSection />
+      <SectionHeader>{t('pages.dashboard.quick-links')}</SectionHeader>
+      <UsefulLinksMenu>
+        <li>
+          <BrowserLink href="https://strimertul.stream/guide/">
+            {t('pages.dashboard.link-user-guide')}
+          </BrowserLink>
+        </li>
+        <li>
+          <BrowserLink href="https://strimertul.stream/api/v31/">
+            {t('pages.dashboard.link-api')}
+          </BrowserLink>
+        </li>
+      </UsefulLinksMenu>
     </PageContainer>
   );
 }

frontend/src/ui/pages/Onboarding.tsx

@@ -716,6 +716,17 @@ export default function OnboardingPage() {
             <HeroTitle>{t('pages.onboarding.welcome-header')}</HeroTitle>
             <HeroContent>
               <TextBlock>{t('pages.onboarding.welcome-p1')}</TextBlock>
+              <TextBlock>
+                <Trans
+                  t={t}
+                  i18nKey={'pages.onboarding.welcome-guide'}
+                  components={{
+                    g: (
+                      <BrowserLink href="https://strimertul.stream/guide/getting-started/first-time-setup/" />
+                    ),
+                  }}
+                />
+              </TextBlock>
               <TextBlock css={{ color: '$gray11' }}>
                 {t('pages.onboarding.welcome-p2')}
               </TextBlock>