feat: implement encrypted items info (#641)

* feat: implement encrypted items info

* Update app/assets/javascripts/ui_models/app_state/account_menu_state.ts

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

* Update app/assets/javascripts/ui_models/app_state/account_menu_state.ts

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

* Update app/assets/javascripts/preferences/panes/EndToEndEncryption.tsx

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

* Update app/assets/javascripts/preferences/panes/EndToEndEncryption.tsx

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

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

app/assets/javascripts/preferences/PreferencesView.tsx

@@ -35,6 +35,7 @@ const PaneSelector: FunctionComponent<
         <Security
           mfaProvider={props.mfaProvider}
           userProvider={props.userProvider}
+          appState={props.appState}
         />
       );
     case 'listed':

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

@@ -0,0 +1,40 @@
+import { DecoratedInput } from "@/components/DecoratedInput";
+import { Icon } from "@/components/Icon";
+import { AppState } from "@/ui_models/app_state";
+import { observer } from "mobx-react-lite";
+import { FunctionComponent } from "preact";
+import { PreferencesGroup, PreferencesSegment, Text, Title } from "../components";
+
+const formatCount = (count: number, itemType: string) => `${count} / ${count} ${itemType}`;
+
+export const EndToEndEncryption: FunctionComponent<{ appState: AppState }> = observer(({ appState }) => {
+  const count = appState.accountMenu.structuredNotesAndTagsCount;
+  const notes = formatCount(count.notes, 'notes');
+  const tags = formatCount(count.tags, 'tags');
+  const archived = formatCount(count.archived, 'archived notes');
+  const deleted = formatCount(count.deleted, 'trashed notes');
+
+  const checkIcon = <Icon className="success min-w-5 min-h-5" type="check-bold" />;
+  const noteIcon = <Icon type="rich-text" className="min-w-5 min-h-5" />;
+  const tagIcon = <Icon type="hashtag" className="min-w-5 min-h-5" />;
+  const archiveIcon = <Icon type="archive" className="min-w-5 min-h-5" />;
+  const trashIcon = <Icon type="trash" className="min-w-5 min-h-5" />;
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>End-to-end encryption</Title>
+        <Text>Your data is encrypted before syncing to your private account.</Text>
+        <div className="flex flex-row pb-1 pt-1.5" >
+          <DecoratedInput disabled={true} text={notes} right={[checkIcon]} left={[noteIcon]} />
+          <div className="min-w-3" />
+          <DecoratedInput disabled={true} text={tags} right={[checkIcon]} left={[tagIcon]} />
+        </div>
+        <div className="flex flex-row" >
+          <DecoratedInput disabled={true} text={archived} right={[checkIcon]} left={[archiveIcon]} />
+          <div className="min-w-3" />
+          <DecoratedInput disabled={true} text={deleted} right={[checkIcon]} left={[trashIcon]} />
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  );
+});

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

@@ -1,10 +1,17 @@
+import { AppState } from '@/ui_models/app_state';
 import { FunctionComponent } from 'preact';
 import { PreferencesPane } from '../components';
+import { EndToEndEncryption } from './EndToEndEncryption';
 import { TwoFactorAuthWrapper } from './two-factor-auth';
 import { MfaProps } from './two-factor-auth/MfaProps';
 
-export const Security: FunctionComponent<MfaProps> = (props) => (
+interface SecurityProps extends MfaProps {
+  appState: AppState;
+}
+
+export const Security: FunctionComponent<SecurityProps> = (props) => (
   <PreferencesPane>
+    <EndToEndEncryption appState={props.appState} />
     <TwoFactorAuthWrapper
       mfaProvider={props.mfaProvider}
       userProvider={props.userProvider}