/explore

.gitignore

@@ -35,6 +35,7 @@ yarn-error.log*
 # vercel
 .vercel
 
+#vs code workspace files
 *.code-workspace
 
 # JetBrains IDE related things

assets/_globalCss.css

@@ -65,7 +65,7 @@
         --destructive: 348 78% 50%;
         --destructive-foreground: 348 98% 70%;
         --border: 0 0% 90%;
-        --input: 0 0% 90%;
+        --input: 0 0% 50%;
         --ring: 0 0% 0%;
 
         /* color definitions (legacy support) */

components/CachedContextMultiLevelSelect.js

@@ -0,0 +1,185 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import _ from 'lodash';
+import { useTranslation } from 'react-i18next';
+
+import { useAuth } from '@/lib/Auth';
+import { useMatrix } from '@/lib/Matrix';
+import LoadingSpinnerInline from './UI/LoadingSpinnerInline';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/UI/shadcn/Select';
+
+const CachedContextMultiLevelSelectSingleLevel = ({
+    parentSpaceRoomId,
+    selectedContextRoomId,
+    onSelect,
+    onFetchedChildren,
+    templatePlaceholderMapping,
+    templatePrefixFilter,
+    sortAlphabetically,
+    showTopics,
+    rootId,
+}) => {
+    const auth = useAuth();
+    const matrixClient = auth.getAuthenticationProvider('matrix').getMatrixClient();
+    const matrix = useMatrix(auth.getAuthenticationProvider('matrix'));
+    const [isLoading, setIsLoading] = useState(true);
+    const [parentSpaceMetaEvent, setParentSpaceMetaEvent] = useState();
+    const [childContexts, setChildContexts] = useState();
+    const { t } = useTranslation();
+
+    useEffect(() => {
+        let isSubscribed = true;
+
+        // Fetch all child contexts from our storage
+        const fetchChildContexts = async () => {
+            let newChildContexts = [];
+            const spaceCache = (await matrix.spaces.get(parentSpaceRoomId)) || (await matrix.rooms.get(parentSpaceRoomId));
+            if (!spaceCache) return;
+            setParentSpaceMetaEvent(spaceCache.meta);
+
+            for (const room of spaceCache.children) {
+                const roomObject = matrix.spaces.get(room) || matrix.rooms.get(room);
+                // // If this is not a context, ignore this space child
+                // if (metaEvent && metaEvent.type !== 'context') continue;
+                // // If we only want to show specific contexts, ignore this space child if its template doesn't have the given prefix
+                if (templatePrefixFilter && roomObject.meta && !_.startsWith(roomObject.meta.template, templatePrefixFilter)) continue;
+                // // ... otherwise show this space child:
+                newChildContexts.push(roomObject);
+            }
+
+            if (sortAlphabetically) {
+                newChildContexts = _.sortBy(newChildContexts, 'name');
+            }
+
+            if (!isSubscribed) return;
+            onFetchedChildren(newChildContexts.length > 0);
+            setChildContexts(newChildContexts);
+        };
+
+        const fetch = async () => {
+            setIsLoading(true);
+            await fetchChildContexts();
+            setIsLoading(false);
+        };
+
+        fetch();
+
+        return () => {
+            isSubscribed = false;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [matrixClient, parentSpaceRoomId, sortAlphabetically, templatePlaceholderMapping, templatePrefixFilter]);
+
+    if (isLoading) {
+        return (
+            <Select key="loading" disabled>
+                <SelectTrigger>
+                    <SelectValue placeholder={<LoadingSpinnerInline />} />
+                </SelectTrigger>
+            </Select>
+        );
+    }
+
+    if (!childContexts || childContexts.length < 1) {
+        return null;
+    }
+
+    return (
+        <Select
+            defaultValue={selectedContextRoomId}
+            onValueChange={(value) => {
+                onSelect(parentSpaceRoomId, value);
+            }}
+        >
+            <SelectTrigger>
+                {templatePlaceholderMapping && parentSpaceMetaEvent && templatePlaceholderMapping[parentSpaceMetaEvent.template] ? (
+                    // If we have a template-specific placeholder, show that...
+                    <SelectValue placeholder={templatePlaceholderMapping[parentSpaceMetaEvent.template]} />
+                ) : (
+                    // ... otherwise just show an empty placeholder
+                    <SelectValue placeholder={`-- ${t('select option')} --`} />
+                )}
+            </SelectTrigger>
+            <SelectContent>
+                {Object.entries(childContexts).map(([key, room]) => {
+                    // if room is undefined we jump to the next one
+                    // this can happen when for example a room was not removed as a space child from its parent but is already deleted
+                    if (!room) return;
+                    const disabled = matrix.spaces.get(rootId).children?.includes(room.roomId);
+
+                    return (
+                        <SelectItem key={key} disabled={disabled} value={room.roomId}>
+                            {room.name}
+                            {showTopics && room.topic && ` (${room.topic})`}
+                        </SelectItem>
+                    );
+                })}
+            </SelectContent>
+        </Select>
+    );
+};
+
+/**
+ * This component renders a multi-level <select> UI for an arbitrary set of contexts in the sense of Matrix spaces.
+ * `activeContexts` is the array of room IDs for the currently set context spaces.
+ *
+ * @param {Array} activeContexts
+ * @param {function} onChange (newActiveContexts, isLeaf)
+ * @param {boolean} showTopics - If the contents of m.room.topic should be displayed in parentheses next to the name
+ * @param {boolean} sortAlphabetically - If entries should be ordered alphabetically
+ * @param {Object} templatePlaceholderMapping - Optional object containing placeholders for each <select> based on the `dev.medienhaus.meta.template` of the parent context
+ * @param {string} templatePrefixFilter - Optional prefix to filter contexts by their templates
+ * @param {string} rootId - The root context from where to start fetching room hierarchies
+ *
+ * @return {React.ReactElement}
+ */
+const CachedContextMultiLevelSelect = ({
+    activeContexts,
+    onChange,
+    showTopics,
+    sortAlphabetically,
+    templatePlaceholderMapping,
+    templatePrefixFilter,
+    rootId,
+}) => {
+    const onSelect = useCallback(
+        (parentContextRoomId, selectedChildContextRoomId) => {
+            const newActiveContexts = [
+                ...activeContexts.splice(0, activeContexts.findIndex((contextRoomId) => contextRoomId === parentContextRoomId) + 1),
+            ];
+            if (selectedChildContextRoomId) newActiveContexts.push(selectedChildContextRoomId);
+            onChange(newActiveContexts, undefined);
+        },
+        [activeContexts, onChange],
+    );
+
+    const onFinishedFetchingChildren = useCallback(
+        (hasChildren) => {
+            if (onChange.length > 1) {
+                onChange(activeContexts, !hasChildren);
+            }
+        },
+        [activeContexts, onChange],
+    );
+
+    return (
+        <>
+            {activeContexts &&
+                activeContexts.map((contextRoomId, i) => (
+                    <CachedContextMultiLevelSelectSingleLevel
+                        key={contextRoomId}
+                        onSelect={onSelect}
+                        onFetchedChildren={onFinishedFetchingChildren}
+                        parentSpaceRoomId={contextRoomId}
+                        selectedContextRoomId={activeContexts[i + 1] ?? ''}
+                        showTopics={showTopics}
+                        sortAlphabetically={sortAlphabetically}
+                        templatePlaceholderMapping={templatePlaceholderMapping}
+                        templatePrefixFilter={templatePrefixFilter}
+                        rootId={rootId}
+                    />
+                ))}
+        </>
+    );
+};
+
+export default CachedContextMultiLevelSelect;

components/ContextMultiLevelSelect.js

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { useAuth } from '@/lib/Auth';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/UI/shadcn/Select';
+import LoadingSpinnerInline from '@/components/UI/LoadingSpinnerInline';
 
 const ContextMultiLevelSelectSingleLevel = ({
     parentSpaceRoomId,
@@ -14,15 +15,15 @@ const ContextMultiLevelSelectSingleLevel = ({
     templatePrefixFilter,
     sortAlphabetically,
     showTopics,
+    setSelectedContextName,
 }) => {
-    const { t } = useTranslation();
-
     const auth = useAuth();
     const matrix = auth.getAuthenticationProvider('matrix');
     const matrixClient = matrix.getMatrixClient();
     const [isLoading, setIsLoading] = useState(true);
     const [parentSpaceMetaEvent, setParentSpaceMetaEvent] = useState();
     const [childContexts, setChildContexts] = useState();
+    const { t } = useTranslation();
 
     useEffect(() => {
         let isSubscribed = true;
@@ -45,7 +46,10 @@ const ContextMultiLevelSelectSingleLevel = ({
             );
             if (!roomHierarchy) roomHierarchy = { rooms: [] };
 
+            // return name of selected context
+            setSelectedContextName && setSelectedContextName(roomHierarchy.rooms[0].name);
             // Remove the first entry, which is the context we retrieved the children for
+
             roomHierarchy.rooms.shift();
 
             // Ensure we're looking at contexts, and not spaces/rooms of other types
@@ -54,7 +58,7 @@ const ContextMultiLevelSelectSingleLevel = ({
                 // If this space/room does not have a meta event we do not care about it
                 if (!metaEvent) continue;
                 // If this is not a context, ignore this space child
-                if (metaEvent && metaEvent.type !== 'context') continue;
+                // if (metaEvent && metaEvent.type !== 'context') continue;
                 // If we only want to show specific contexts, ignore this space child if its template doesn't have the given prefix
                 if (templatePrefixFilter && metaEvent && !_.startsWith(metaEvent.template, templatePrefixFilter)) continue;
                 // ... otherwise show this space child:
@@ -90,7 +94,7 @@ const ContextMultiLevelSelectSingleLevel = ({
         return (
             <Select key="loading" disabled>
                 <SelectTrigger>
-                    <SelectValue placeholder={t('loading...')} />
+                    <SelectValue placeholder={<LoadingSpinnerInline />} />
                 </SelectTrigger>
             </Select>
         );
@@ -113,7 +117,7 @@ const ContextMultiLevelSelectSingleLevel = ({
                     <SelectValue placeholder={templatePlaceholderMapping[parentSpaceMetaEvent.template]} />
                 ) : (
                     // ... otherwise just show an empty placeholder
-                    <SelectValue />
+                    <SelectValue placeholder={`-- ${t('select option')} --`} />
                 )}
             </SelectTrigger>
             <SelectContent>
@@ -138,6 +142,7 @@ const ContextMultiLevelSelectSingleLevel = ({
  * @param {boolean} sortAlphabetically - If entries should be ordered alphabetically
  * @param {Object} templatePlaceholderMapping - Optional object containing placeholders for each <select> based on the `dev.medienhaus.meta.template` of the parent context
  * @param {string} templatePrefixFilter - Optional prefix to filter contexts by their templates
+ * @param {React.setState} setSelectedContextName- Oprional setter function for parent name
  *
  * @return {React.ReactNode}
  */
@@ -148,12 +153,14 @@ const ContextMultiLevelSelect = ({
     sortAlphabetically,
     templatePlaceholderMapping,
     templatePrefixFilter,
+    setSelectedContextName,
 }) => {
     const onSelect = useCallback(
         (parentContextRoomId, selectedChildContextRoomId) => {
             const newActiveContexts = [
                 ...activeContexts.splice(0, activeContexts.findIndex((contextRoomId) => contextRoomId === parentContextRoomId) + 1),
             ];
+
             if (selectedChildContextRoomId) newActiveContexts.push(selectedChildContextRoomId);
             onChange(newActiveContexts, undefined);
         },
@@ -183,6 +190,7 @@ const ContextMultiLevelSelect = ({
                         sortAlphabetically={sortAlphabetically}
                         templatePlaceholderMapping={templatePlaceholderMapping}
                         templatePrefixFilter={templatePrefixFilter}
+                        setSelectedContextName={setSelectedContextName}
                     />
                 ))}
         </>

components/UI/ConfirmCancelButtons.js

@@ -1,33 +1,19 @@
-import { styled } from 'styled-components';
 import { useTranslation } from 'react-i18next';
 
 import { Button } from '@/components/UI/shadcn/Button';
 
-const ConfirmCancelButtonsWrapper = styled.div`
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-gap: var(--margin);
-`;
-
-const SmallConfirmCancelButtonsWrapper = styled(ConfirmCancelButtonsWrapper)`
-    width: fit-content;
-`;
-
-const ConfirmCancelButtons = ({ disabled, confirmLabel, cancelLabel, small }) => {
+const ConfirmCancelButtons = ({ disabled, confirmLabel, cancelLabel, destructive, disableConfirm }) => {
     const { t } = useTranslation();
 
-    // We might want to use a special wrapper if we want to use a small version of this component
-    const Wrapper = small ? SmallConfirmCancelButtonsWrapper : ConfirmCancelButtonsWrapper;
-
     return (
-        <Wrapper>
+        <div className="grid grid-cols-2 gap-4">
             <Button variant="outline" type="reset" disabled={disabled}>
                 {cancelLabel || t('Cancel')}
             </Button>
-            <Button type="submit" disabled={disabled}>
+            <Button type="submit" variant={destructive ? 'destructive' : 'default'} disabled={disabled || disableConfirm}>
                 {confirmLabel || t('Confirm')}
             </Button>
-        </Wrapper>
+        </div>
     );
 };
 

components/UI/CopyToClipboard.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RiCheckLine, RiClipboardLine } from '@remixicon/react';
+import _ from 'lodash';
 
 import Icon from './Icon';
 import TextButton from './TextButton';
@@ -12,8 +13,7 @@ const CopyToClipboard = ({ content, title }) => {
     const copyToClipboard = async () => {
         navigator.clipboard.writeText(content);
         setWasContentCopied(true);
-        await new Promise((r) => setTimeout(r, 2000));
-        setWasContentCopied(false);
+        _.delay(() => setWasContentCopied(false), 2500);
     };
 
     return (

components/UI/DataList.js

@@ -6,7 +6,7 @@ import _ from 'lodash';
 import { ServiceTable } from './ServiceTable';
 import Form from './Form';
 import { Input } from '@/components/UI/shadcn/Input';
-import { Button } from '@/components/UI/shadcn/Button';
+import ConfirmCancelButtons from '@/components/UI/ConfirmCancelButtons';
 
 /**
  * Datalist component that functions as an input with a datalist and supports keyboard navigation and mouse interaction.
@@ -44,7 +44,7 @@ const TableWrapper = styled.section`
     overflow-x: auto;
 `;
 
-export default function DataList({ options, onInputChange, keysToDisplay, onSubmit }) {
+export default function DataList({ options, onInputChange, keysToDisplay, onSubmit, onCancel }) {
     const [value, setValue] = useState('');
     const [isOpen, setIsOpen] = useState(false);
     const [selectedIndex, setSelectedIndex] = useState(-1);
@@ -144,7 +144,7 @@ export default function DataList({ options, onInputChange, keysToDisplay, onSubm
     };
 
     return (
-        <InviteUserForm onSubmit={handleSubmit}>
+        <InviteUserForm onSubmit={handleSubmit} onReset={onCancel}>
             <Input
                 type="text"
                 value={value}
@@ -188,7 +188,12 @@ export default function DataList({ options, onInputChange, keysToDisplay, onSubm
                     </ServiceTable.Body>
                 </ServiceTable>
             </TableWrapper>
-            <Button disabled={selected.length === 0 && checked.length === 0}>{t('Invite')}</Button>
+            <ConfirmCancelButtons
+                onCancel={onCancel}
+                disableConfirm={selected.length === 0 && checked.length === 0}
+                cancelLabel="Close"
+                confirmLabel="Invite"
+            />
         </InviteUserForm>
     );
 }