feat: add the ability to choose default collection (#3029)

Co-authored-by: Tom Moor <tom@getoutline.com>
Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/components/DefaultCollectionInputSelect.tsx

@@ -0,0 +1,103 @@
+import { HomeIcon } from "outline-icons";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import CollectionIcon from "~/components/CollectionIcon";
+import Flex from "~/components/Flex";
+import InputSelect from "~/components/InputSelect";
+import { IconWrapper } from "~/components/Sidebar/components/SidebarLink";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
+
+type DefaultCollectionInputSelectProps = {
+  onSelectCollection: (collection: string) => void;
+  defaultCollectionId: string | null;
+};
+
+const DefaultCollectionInputSelect = ({
+  onSelectCollection,
+  defaultCollectionId,
+}: DefaultCollectionInputSelectProps) => {
+  const { t } = useTranslation();
+  const { collections } = useStores();
+  const [fetching, setFetching] = useState(false);
+  const [fetchError, setFetchError] = useState();
+  const { showToast } = useToasts();
+
+  React.useEffect(() => {
+    async function load() {
+      if (!collections.isLoaded && !fetching && !fetchError) {
+        try {
+          setFetching(true);
+          await collections.fetchPage({
+            limit: 100,
+          });
+        } catch (error) {
+          showToast(
+            t("Collections could not be loaded, please reload the app"),
+            {
+              type: "error",
+            }
+          );
+          setFetchError(error);
+        } finally {
+          setFetching(false);
+        }
+      }
+    }
+    load();
+  }, [showToast, fetchError, t, fetching, collections]);
+
+  const options = React.useMemo(
+    () =>
+      collections.publicCollections.reduce(
+        (acc, collection) => [
+          ...acc,
+          {
+            label: (
+              <Flex align="center">
+                <IconWrapper>
+                  <CollectionIcon collection={collection} />
+                </IconWrapper>
+                {collection.name}
+              </Flex>
+            ),
+            value: collection.id,
+          },
+        ],
+        [
+          {
+            label: (
+              <Flex align="center">
+                <IconWrapper>
+                  <HomeIcon color="currentColor" />
+                </IconWrapper>
+                {t("Home")}
+              </Flex>
+            ),
+            value: "home",
+          },
+        ]
+      ),
+    [collections.publicCollections, t]
+  );
+
+  if (fetching) {
+    return null;
+  }
+
+  return (
+    <InputSelect
+      value={defaultCollectionId ?? "home"}
+      label={t("Start view")}
+      options={options}
+      onChange={onSelectCollection}
+      ariaLabel={t("Default collection")}
+      note={t(
+        "This is the screen that team members will first see when they sign in."
+      )}
+      short
+    />
+  );
+};
+
+export default DefaultCollectionInputSelect;