[feature] Add logout button to sidebar (#48)

This one should probably be scrutinized a little more than my previous two.

For example, I don't know why I needed to do this: https://codeberg.org/prplecake/masto-fe-standalone/src/commit/1a1f48ceaa544650a8b8f50f8fa4e8c7cdc44c12/app/javascript/flavours/glitch/features/ui/index.jsx#L152

~~But, it appears to work.~~ It's live at https://masto-fe.compostintraining.club if you want to test it out.

~~Edit: it breaks stuff. Images don't load anymore...~~ Maybe that was just a network glitch...

Fixes #21.

Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/48
Co-authored-by: prplecake <me@prplecake.com>
Co-committed-by: prplecake <me@prplecake.com>

app/javascript/flavours/glitch/features/ui/components/columns_area.jsx

@@ -55,6 +55,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
     singleColumn: PropTypes.bool,
     children: PropTypes.node,
     openSettings: PropTypes.func,
+    onLogout: PropTypes.func,
   };
 
   // Corresponds to (max-width: $no-gap-breakpoint + 285px - 1px) in SCSS
@@ -139,7 +140,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
   };
 
   render () {
-    const { columns, children, singleColumn, openSettings } = this.props;
+    const { columns, children, singleColumn, openSettings, onLogout } = this.props;
     const { renderComposePanel } = this.state;
 
     if (singleColumn) {
@@ -158,7 +159,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
 
           <div className='columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational'>
             <div className='columns-area__panels__pane__inner'>
-              <NavigationPanel onOpenSettings={openSettings} />
+              <NavigationPanel onOpenSettings={openSettings} onLogout={onLogout} />
             </div>
           </div>
         </div>

app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx

@@ -30,6 +30,7 @@ const messages = defineMessages({
   advancedInterface: { id: 'navigation_bar.advanced_interface', defaultMessage: 'Open in advanced web interface' },
   openedInClassicInterface: { id: 'navigation_bar.opened_in_classic_interface', defaultMessage: 'Posts, accounts, and other specific pages are opened by default in the classic web interface.' },
   app_settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' },
+  logout: { id: 'navigation_bar.logout', defaultMessage: 'Log out' },
 });
 
 class NavigationPanel extends Component {
@@ -42,6 +43,7 @@ class NavigationPanel extends Component {
   static propTypes = {
     intl: PropTypes.object.isRequired,
     onOpenSettings: PropTypes.func,
+    onLogout: PropTypes.func,
   };
 
   isFirehoseActive = (match, location) => {
@@ -49,7 +51,7 @@ class NavigationPanel extends Component {
   };
 
   render() {
-    const { intl, onOpenSettings } = this.props;
+    const { intl, onOpenSettings, onLogout } = this.props;
     const { signedIn, disabledAccountId } = this.context.identity;
 
     return (
@@ -104,6 +106,7 @@ class NavigationPanel extends Component {
             <hr />
 
             <ColumnLink transparent onClick={onOpenSettings} icon='cogs' text={intl.formatMessage(messages.app_settings)} />
+            <ColumnLink transparent onClick={onLogout} icon='sign-out' text={intl.formatMessage(messages.logout)} />
           </>
         )}
 
@@ -112,6 +115,7 @@ class NavigationPanel extends Component {
           <ColumnLink transparent to='/about' icon='ellipsis-h' text={intl.formatMessage(messages.about)} />
         </div>
 
+
         <NavigationPortal />
       </div>
     );