feat: implement UI for logging out (#638)

* feat: implement UI for logging out

* feat: use old style dialogs for logout confirmation

* feat: implement manage sessions

* feat: implement session logout success dialog

* feat: use snjs alert for revoking sessions confirmation

* fix: make OtherSessionsLogout easier to read

app/assets/javascripts/preferences/components/PreferencesGroup.tsx

@@ -0,0 +1,24 @@
+import { FunctionComponent } from 'preact';
+import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
+
+const HorizontalLine: FunctionComponent<{ index: number; length: number }> = ({
+  index,
+  length,
+}) => (index < length - 1 ? <HorizontalSeparator classes="my-4" /> : null);
+
+export const PreferencesGroup: FunctionComponent = ({ children }) => (
+  <div className="bg-default border-1 border-solid rounded border-gray-300 px-6 py-6 flex flex-col">
+    {Array.isArray(children)
+      ? children
+          .filter(
+            (child) => child != undefined && child !== '' && child !== false
+          )
+          .map((child, i, arr) => (
+            <>
+              {child}
+              <HorizontalLine index={i} length={arr.length} />
+            </>
+          ))
+      : children}
+  </div>
+);

app/assets/javascripts/preferences/components/PreferencesPane.tsx

@@ -1,43 +1,18 @@
 import { FunctionComponent } from 'preact';
-import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
-
-const HorizontalLine: FunctionComponent<{ index: number; length: number }> = ({
-  index,
-  length,
-}) => (index < length - 1 ? <HorizontalSeparator classes="my-4" /> : null);
-
-export const PreferencesSegment: FunctionComponent = ({ children }) => (
-  <div className="flex flex-col">{children}</div>
-);
-
-export const PreferencesGroup: FunctionComponent = ({ children }) => (
-  <div className="bg-default border-1 border-solid rounded border-gray-300 px-6 py-6 flex flex-col">
-    {Array.isArray(children)
-      ? children
-          .filter(
-            (child) => child != undefined && child !== '' && child !== false
-          )
-          .map((child, i, arr) => (
-            <>
-              {child}
-              <HorizontalLine index={i} length={arr.length} />
-            </>
-          ))
-      : children}
-  </div>
-);
 
 export const PreferencesPane: FunctionComponent = ({ children }) => (
   <div className="color-black flex-grow flex flex-row overflow-y-auto min-h-0">
     <div className="flex-grow flex flex-col py-6 items-center">
       <div className="w-125 max-w-125 flex flex-col">
         {children != undefined && Array.isArray(children)
-          ? children.map((child, idx, arr) => (
-              <>
-                {child}
-                {idx < arr.length - 1 ? <div className="min-h-3" /> : undefined}
-              </>
-            ))
+          ? children
+              .filter((child) => child != undefined)
+              .map((child) => (
+                <>
+                  {child}
+                  <div className="min-h-3" />
+                </>
+              ))
           : children}
       </div>
     </div>

app/assets/javascripts/preferences/components/PreferencesSegment.tsx

@@ -0,0 +1,5 @@
+import { FunctionComponent } from 'preact';
+
+export const PreferencesSegment: FunctionComponent = ({ children }) => (
+  <div className="flex flex-col">{children}</div>
+);

app/assets/javascripts/preferences/components/index.ts

@@ -1,3 +1,5 @@
 export * from './Content';
 export * from './MenuItem';
 export * from './PreferencesPane';
+export * from './PreferencesGroup';
+export * from './PreferencesSegment';