Colors: fix handling of collection and event colors.

src/Calendars/Main.tsx

@@ -21,7 +21,7 @@ import LoadingIndicator from "../widgets/LoadingIndicator";
 import EventEdit from "./EventEdit";
 import PageNotFound, { PageNotFoundRoute } from "../PageNotFound";
 
-import { CachedCollection, getItemNavigationUid, getDecryptCollectionsFunction, getDecryptItemsFunction, PimFab, itemDelete, itemSave } from "../Pim/helpers";
+import { CachedCollection, getItemNavigationUid, getDecryptCollectionsFunction, getDecryptItemsFunction, PimFab, itemDelete, itemSave, defaultColor } from "../Pim/helpers";
 import { historyPersistor } from "../persist-state-history";
 
 const PersistCalendar = historyPersistor("Calendar")(Calendar);
@@ -41,16 +41,26 @@ export default function CalendarsMain() {
   const items = useItems(etebase, colType);
 
   React.useEffect(() => {
-    if (items) {
+    if (!collections || !items) {
-      decryptItems(items)
+      return;
-        .then((entries) => setEntries(entries));
-      // FIXME: handle failure to decrypt items
     }
-    if (collections) {
+    (async () => {
-      decryptCollections(collections)
+      const colEntries = await decryptCollections(collections);
-        .then((entries) => setCachedCollections(entries));
       // FIXME: handle failure to decrypt collections
-    }
+
+      const entries = await decryptItems(items);
+      // FIXME: handle failure to decrypt items
+
+      for (const collection of colEntries) {
+        const items = entries.get(collection.collection.uid)!;
+        for (const item of items.values()) {
+          item.color = collection.metadata.color || defaultColor;
+        }
+      }
+
+      setCachedCollections(colEntries);
+      setEntries(entries);
+    })();
   }, [items, collections]);
 
   if (!entries || !cachedCollections) {

src/Collections/CollectionImport.tsx

@@ -12,7 +12,7 @@ import { List, ListItem } from "../widgets/List";
 import AppBarOverride from "../widgets/AppBarOverride";
 import Container from "../widgets/Container";
 
-import { CachedCollection } from "../Pim/helpers";
+import { CachedCollection, defaultColor } from "../Pim/helpers";
 import ColorBox from "../widgets/ColorBox";
 import ImportDialog from "./ImportDialog";
 
@@ -36,8 +36,9 @@ export default function CollectionImport(props: PropsType) {
 
   for (const col of props.collections) {
     if (collectionMap[col.metadata.type]) {
-      const colorBox = (col.metadata.color) ? (
+      const supportsColor = (["etebase.vevent", "etebase.vtodo"].includes(col.metadata.type));
-        <ColorBox size={24} color={col.metadata.color} />
+      const colorBox = (supportsColor) ? (
+        <ColorBox size={24} color={col.metadata.color || defaultColor} />
       ) : undefined;
 
       collectionMap[col.metadata.type].push((

src/Collections/CollectionList.tsx

@@ -17,7 +17,7 @@ import AppBarOverride from "../widgets/AppBarOverride";
 import Container from "../widgets/Container";
 
 import { routeResolver } from "../App";
-import { CachedCollection } from "../Pim/helpers";
+import { CachedCollection, defaultColor } from "../Pim/helpers";
 import ColorBox from "../widgets/ColorBox";
 
 interface PropsType {
@@ -39,8 +39,9 @@ export default function CollectionList(props: PropsType) {
 
   for (const col of props.collections) {
     if (collectionMap[col.metadata.type]) {
-      const colorBox = (col.metadata.color) ? (
+      const supportsColor = (["etebase.vevent", "etebase.vtodo"].includes(col.metadata.type));
-        <ColorBox size={24} color={col.metadata.color} />
+      const colorBox = (supportsColor) ? (
+        <ColorBox size={24} color={col.metadata.color || defaultColor} />
       ) : undefined;
 
       collectionMap[col.metadata.type].push((