diff --git a/src/components/AboutDialog.tsx b/src/components/AboutDialog.tsx
index 261098e1..162acf9e 100644
--- a/src/components/AboutDialog.tsx
+++ b/src/components/AboutDialog.tsx
@@ -16,6 +16,7 @@ import {
pybricksCopyright,
pybricksWebsiteUrl,
} from '../settings/ui';
+import ExternalLinkIcon from './ExternalLinkIcon';
import { AboutStringId } from './about-i18n';
import en from './about-i18n.en.json';
@@ -47,7 +48,8 @@ class AboutDialog extends React.Component {
- {i18n.translate(AboutStringId.WebsiteButtonLabel)}
+ {i18n.translate(AboutStringId.WebsiteButtonLabel)}
+
diff --git a/src/components/ExternalLinkIcon.tsx b/src/components/ExternalLinkIcon.tsx
new file mode 100644
index 00000000..810b968a
--- /dev/null
+++ b/src/components/ExternalLinkIcon.tsx
@@ -0,0 +1,21 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2021 The Pybricks Authors
+
+// Icon for indicating external links
+
+import { Icon } from '@blueprintjs/core';
+import React from 'react';
+
+import './external-link.scss';
+
+class ExternalLinkIcon extends React.Component {
+ render(): JSX.Element {
+ return (
+
+
+
+ );
+ }
+}
+
+export default ExternalLinkIcon;
diff --git a/src/components/SettingsDrawer.tsx b/src/components/SettingsDrawer.tsx
index b1d4b7bf..0b10358c 100644
--- a/src/components/SettingsDrawer.tsx
+++ b/src/components/SettingsDrawer.tsx
@@ -2,7 +2,9 @@
// Copyright (c) 2021 The Pybricks Authors
import {
+ AnchorButton,
Button,
+ ButtonGroup,
Classes,
Drawer,
FormGroup,
@@ -17,9 +19,15 @@ import { Action, Dispatch } from '../actions';
import { closeSettings, openAboutDialog } from '../actions/app';
import { setBoolean } from '../actions/settings';
import { RootState } from '../reducers';
-import { tooltipDelay } from '../settings/ui';
+import {
+ pybricksBugReportsUrl,
+ pybricksGitterUrl,
+ pybricksSupportUrl,
+ tooltipDelay,
+} from '../settings/ui';
import { SettingId } from '../settings/user';
import { isMacOS } from '../utils/os';
+import ExternalLinkIcon from './ExternalLinkIcon';
import { SettingsStringId } from './settings-i18n';
import en from './settings-i18n.en.json';
@@ -143,16 +151,48 @@ class SettingsDrawer extends React.PureComponent {
-
+
+ {i18n.translate(SettingsStringId.HelpSupportLabel)}
+
+
+
+
+ {i18n.translate(SettingsStringId.HelpChatLabel)}
+
+
+
+
+ {i18n.translate(SettingsStringId.HelpBugsLabel)}
+
+
+
+
+
diff --git a/src/components/external-link.scss b/src/components/external-link.scss
new file mode 100644
index 00000000..fb81f8d9
--- /dev/null
+++ b/src/components/external-link.scss
@@ -0,0 +1,9 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2021 The Pybricks Authors
+
+@import '../variables.scss';
+
+// override some button magic in case this is used in a button
+.#{$ns}-button .pb-external-link .#{$ns}-icon:first-child:last-child {
+ margin: 0;
+}
diff --git a/src/components/settings-i18n.en.json b/src/components/settings-i18n.en.json
index f13be9a3..8e30f8bf 100644
--- a/src/components/settings-i18n.en.json
+++ b/src/components/settings-i18n.en.json
@@ -24,6 +24,15 @@
},
"help": {
"title": "Help",
+ "support": {
+ "label": "Support"
+ },
+ "chat": {
+ "label": "Chat"
+ },
+ "bugs": {
+ "label": "Bug Reports"
+ },
"about": {
"label": "About"
}
diff --git a/src/components/settings-i18n.ts b/src/components/settings-i18n.ts
index 48a11306..13c68db1 100644
--- a/src/components/settings-i18n.ts
+++ b/src/components/settings-i18n.ts
@@ -15,5 +15,8 @@ export enum SettingsStringId {
FirmwareCurrentProgramLabel = 'settings.firmware.flash-current-program.label',
FirmwareCurrentProgramTooltip = 'settings.firmware.flash-current-program.tooltip',
HelpTitle = 'settings.help.title',
+ HelpSupportLabel = 'settings.help.support.label',
+ HelpChatLabel = 'settings.help.chat.label',
+ HelpBugsLabel = 'settings.help.bugs.label',
HelpAboutLabel = 'settings.help.about.label',
}
diff --git a/src/settings/ui.ts b/src/settings/ui.ts
index 9bb44b99..4ae33657 100644
--- a/src/settings/ui.ts
+++ b/src/settings/ui.ts
@@ -12,6 +12,15 @@ export const appName = 'Pybricks Code';
/** URL to main Pybricks website. */
export const pybricksWebsiteUrl = 'https://pybricks.com';
+/** URL to Pybricks support site. */
+export const pybricksSupportUrl = 'https://github.com/pybricks/support/discussions';
+
+/** URL to Pybricks bug report site. */
+export const pybricksBugReportsUrl = 'https://github.com/pybricks/support/issues';
+
+/** URL for Pybricks community chat on Gitter */
+export const pybricksGitterUrl = 'https://gitter.im/pybricks/community';
+
/** Pybricks copyright statement. */
export const pybricksCopyright = 'Copyright (c) 2020-2021 The Pybricks Authors';