feat: Add Listed pane in preferences (#651)

* feat: Add Listed pane in preferences

* feat: Add list of blogs in Listed preferences

feat: Allow custom classnames in LinkButton

feat: Add mt-0 class

* fix: Don't show non-Listed Action Extensions

* fix: Use streamItems()

* fix: Re-render UI when item is deleted

* feat: Remove hardcoded margin-top for LinkButton

* fix: Fix ESLint exhaustive-deps error

* fix: Use useCallback hook

feat: Disconnect shows state "Disconnecting..." when deleting item

* fix: Remove unused imports

* fix: Simplify disconnect function

fix: Use key in the correct place

* feat: Add confirmation dialog when deleting a blog

feat: Show Blog/Blogs in the title depending on the
number of items

* style: Revert file to original formatting

* refactor: Use preact instead of react

refactor: Use FunctionalComponent type

* feat: Show alert when disconnecting errors out

fix: Set state to false even if errors

refactor: Use ternary operator for Getting
Started section

* feat: Load Listed blog actions asynchronously

* feat: Only fetch actions if not already available

* refactor: Use async/await for disconnecting

Co-authored-by: Mo Bitar <mo@standardnotes.org>

app/assets/javascripts/preferences/panes/HelpFeedback.tsx

@@ -52,7 +52,11 @@ export const HelpAndFeedback: FunctionComponent = () => (
       </PreferencesSegment>
       <PreferencesSegment>
         <Subtitle>Can’t find your question here?</Subtitle>
-        <LinkButton label="Open FAQ" link="https://standardnotes.com/help" />
+        <LinkButton
+          className="mt-3"
+          label="Open FAQ"
+          link="https://standardnotes.com/help"
+        />
       </PreferencesSegment>
     </PreferencesGroup>
     <PreferencesGroup>
@@ -68,6 +72,7 @@ export const HelpAndFeedback: FunctionComponent = () => (
           before advocating for a feature request.
         </Text>
         <LinkButton
+          className="mt-3"
           label="Go to the forum"
           link="https://forum.standardnotes.org/"
         />
@@ -82,6 +87,7 @@ export const HelpAndFeedback: FunctionComponent = () => (
           group for discussions on security, themes, editors and more.
         </Text>
         <LinkButton
+          className="mt-3"
           link="https://standardnotes.com/slack"
           label="Join our Slack group"
         />
@@ -93,7 +99,7 @@ export const HelpAndFeedback: FunctionComponent = () => (
         <Text>
           Send an email to help@standardnotes.com and we’ll sort it out.
         </Text>
-        <LinkButton link="mailto: help@standardnotes.com" label="Email us" />
+        <LinkButton className="mt-3" link="mailto: help@standardnotes.com" label="Email us" />
       </PreferencesSegment>
     </PreferencesGroup>
   </PreferencesPane>