JournalsList: show journal color

src/Journals/JournalsList.tsx

@@ -14,6 +14,8 @@ import Container from '../widgets/Container';
 import { routeResolver } from '../App';
 
 import { JournalsData, UserInfoData, CredentialsData } from '../store';
+import ColorBox from '../widgets/ColorBox';
+import { colorIntToHtml } from '../journal-processors';
 
 interface PropsType {
   etesync: CredentialsData;
@@ -35,16 +37,27 @@ export default function JournalsList(props: PropsType) {
       const keyPair = userInfo.getKeyPair(userInfo.getCryptoManager(derived));
       const cryptoManager = journal.getCryptoManager(derived, keyPair);
       const info = journal.getInfo(cryptoManager);
+      let colorBox: React.ReactNode;
+      switch (info.type) {
+        case 'CALENDAR':
+        case 'TASKS':
+          colorBox = (
+            <ColorBox size={24} color={colorIntToHtml(info.color)} />
+          );
+          break;
+      }
       ret[info.type] = ret[info.type] || [];
       ret[info.type].push(
-        <ListItem key={journal.uid} onClick={() => journalClicked(journal.uid)}>
+        <ListItem key={journal.uid} rightIcon={colorBox}
+          onClick={() => journalClicked(journal.uid)}>
           {info.displayName} ({journal.uid.slice(0, 5)})
         </ListItem>
       );
 
       return ret;
     },
-    { CALENDAR: [],
+    {
+      CALENDAR: [],
       ADDRESS_BOOK: [],
       TASKS: [],
     });

src/Journals/JournalsListImport.tsx

@@ -8,6 +8,8 @@ import Container from '../widgets/Container';
 import { JournalsData, UserInfoData, CredentialsData } from '../store';
 import ImportDialog from './ImportDialog';
 import { SyncInfo, SyncInfoJournal } from '../SyncGate';
+import { colorIntToHtml } from '../journal-processors';
+import ColorBox from '../widgets/ColorBox';
 
 interface PropsType {
   etesync: CredentialsData;
@@ -26,16 +28,27 @@ export default function JournalsList(props: PropsType) {
       const keyPair = userInfo.getKeyPair(userInfo.getCryptoManager(derived));
       const cryptoManager = journal.getCryptoManager(derived, keyPair);
       const info = journal.getInfo(cryptoManager);
+      let colorBox: React.ReactNode;
+      switch (info.type) {
+        case 'CALENDAR':
+        case 'TASKS':
+          colorBox = (
+            <ColorBox size={24} color={colorIntToHtml(info.color)} />
+          );
+          break;
+      }
       ret[info.type] = ret[info.type] || [];
       ret[info.type].push(
-        <ListItem key={journal.uid} onClick={() => setSelectedJournal(props.syncInfo.get(journal.uid))}>
+        <ListItem key={journal.uid} rightIcon={colorBox}
+          onClick={() => setSelectedJournal(props.syncInfo.get(journal.uid))}>
           {info.displayName} ({journal.uid.slice(0, 5)})
         </ListItem>
       );
 
       return ret;
     },
-    { CALENDAR: [],
+    {
+      CALENDAR: [],
       ADDRESS_BOOK: [],
       TASKS: [],
     });

src/widgets/ColorBox.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+interface PropsType {
+  color: string;
+  size?: number | string;
+  style?: React.CSSProperties;
+}
+
+export default function ColorBox(props: PropsType) {
+  const size = props.size ?? 64;
+  const style = { ...props.style, backgroundColor: props.color, width: size, height: size };
+  return (
+    <div style={style} />
+  );
+}