Assorted cleanup, minor bug fixes, styling fixes, eslint rules (#5165

* fix: Logic error in toast
fix: Remove useless component

* fix: Logout not clearing all stores

* Add icons to notification settings

* Add eslint rule to enforce spaced comment

* Add eslint rule for arrow-body-style

* Add eslint rule to enforce self-closing components

* Add menu to api key settings
Fix: Deleting webhook subscription does not remove from UI
Split webhook subscriptions into active and inactive
Styling updates

app/scenes/Settings/Notifications.tsx

@@ -1,9 +1,20 @@
 import { debounce } from "lodash";
 import { observer } from "mobx-react";
-import { EmailIcon } from "outline-icons";
+import {
+  AcademicCapIcon,
+  CheckboxIcon,
+  CollectionIcon,
+  CommentIcon,
+  EditIcon,
+  EmailIcon,
+  PublishIcon,
+  StarredIcon,
+  UserIcon,
+} from "outline-icons";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { NotificationEventType } from "@shared/types";
+import Flex from "~/components/Flex";
 import Heading from "~/components/Heading";
 import Input from "~/components/Input";
 import Notice from "~/components/Notice";
@@ -24,6 +35,7 @@ function Notifications() {
   const options = [
     {
       event: NotificationEventType.PublishDocument,
+      icon: <PublishIcon color="currentColor" />,
       title: t("Document published"),
       description: t(
         "Receive a notification whenever a new document is published"
@@ -31,6 +43,7 @@ function Notifications() {
     },
     {
       event: NotificationEventType.UpdateDocument,
+      icon: <EditIcon color="currentColor" />,
       title: t("Document updated"),
       description: t(
         "Receive a notification when a document you are subscribed to is edited"
@@ -38,6 +51,7 @@ function Notifications() {
     },
     {
       event: NotificationEventType.CreateComment,
+      icon: <CommentIcon color="currentColor" />,
       title: t("Comment posted"),
       description: t(
         "Receive a notification when a document you are subscribed to or a thread you participated in receives a comment"
@@ -45,6 +59,7 @@ function Notifications() {
     },
     {
       event: NotificationEventType.Mentioned,
+      icon: <EmailIcon color="currentColor" />,
       title: t("Mentioned"),
       description: t(
         "Receive a notification when someone mentions you in a document or comment"
@@ -52,6 +67,7 @@ function Notifications() {
     },
     {
       event: NotificationEventType.CreateCollection,
+      icon: <CollectionIcon color="currentColor" />,
       title: t("Collection created"),
       description: t(
         "Receive a notification whenever a new collection is created"
@@ -59,6 +75,7 @@ function Notifications() {
     },
     {
       event: NotificationEventType.InviteAccepted,
+      icon: <UserIcon color="currentColor" />,
       title: t("Invite accepted"),
       description: t(
         "Receive a notification when someone you invited creates an account"
@@ -66,6 +83,7 @@ function Notifications() {
     },
     {
       event: NotificationEventType.ExportCompleted,
+      icon: <CheckboxIcon checked color="currentColor" />,
       title: t("Export completed"),
       description: t(
         "Receive a notification when an export you requested has been completed"
@@ -73,12 +91,14 @@ function Notifications() {
     },
     {
       visible: isCloudHosted,
+      icon: <AcademicCapIcon color="currentColor" />,
       event: NotificationEventType.Onboarding,
       title: t("Getting started"),
       description: t("Tips on getting started with features and functionality"),
     },
     {
       visible: isCloudHosted,
+      icon: <StarredIcon color="currentColor" />,
       event: NotificationEventType.Features,
       title: t("New features"),
       description: t("Receive an email when new features of note are added"),
@@ -138,7 +158,11 @@ function Notifications() {
             return (
               <SettingRow
                 visible={option.visible}
-                label={option.title}
+                label={
+                  <Flex align="center" gap={4}>
+                    {option.icon} {option.title}
+                  </Flex>
+                }
                 name={option.event}
                 description={option.description}
               >