feat(CollectionsManager): minor ui improvements (#363)

LibreTexts · Aug 31, 2024 · 3c2a2b6 · 3c2a2b6
1 parent 21af9a7
commit 3c2a2b6
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/client/src/components/controlpanel/Collections/EditCollection.tsx b/client/src/components/controlpanel/Collections/EditCollection.tsx
@@ -408,12 +408,12 @@ const EditCollection: FC<EditCollectionProps> = ({
       <Modal.Actions>
         <Button onClick={onCloseFunc}>Cancel</Button>
         <Button
-          color={["nest", "create"].includes(mode) ? "green" : "blue"}
+          color="green"
           onClick={handleSubmit(submitForm)}
           loading={loading}
         >
-          <Icon name={["nest", "create"].includes(mode) ? "add" : "edit"} />
-          {["nest", "create"].includes(mode) ? "Create" : "Edit"}
+          <Icon name={["nest", "create"].includes(mode) ? "add" : "save"} />
+          {["nest", "create"].includes(mode) ? "Create" : "Save"}
         </Button>
       </Modal.Actions>
     </Modal>

diff --git a/client/src/screens/conductor/controlpanel/CollectionsManager/index.tsx b/client/src/screens/conductor/controlpanel/CollectionsManager/index.tsx
@@ -32,6 +32,8 @@ import { useTypedSelector } from "../../../../state/hooks";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import api from "../../../../api";
 import { useModals } from "../../../../context/ModalContext";
+import DOMPurify from "dompurify";
+import { marked } from "marked";
 
 type AllCollectionsResponse = {
     collections: Collection[];
@@ -422,6 +424,29 @@ const CollectionsManager = () => {
                                 </div>
                             </div>
                         </Segment>
+                        {
+                            !rootMode && activeCollection && (
+                                <Segment padded>
+                                    {
+                                        activeCollection.description && (
+                                            <p
+                                                className='text-base text-center lg:text-left prose prose-code:before:hidden prose-code:after:hidden max-w-full'
+                                                dangerouslySetInnerHTML={{
+                                                    __html: DOMPurify.sanitize(marked(activeCollection.description, { breaks: true }))
+                                                }}
+                                            />
+                                        )
+                                    }
+                                    {
+                                        !activeCollection.description && (
+                                            <p>
+                                                <em>No collection description yet.</em>
+                                            </p>
+                                        )
+                                    }
+                                </Segment>
+                            )
+                        }
                         <Segment>
                             <Breakpoint name="desktop">
                                 <div className="collections-manager-pagemenu">