chore(tagsSelectorComponent): add useContext hook to import statement to use darkContext

chore(tagsSelectorComponent): add darkContext to useContext hook to access dark mode state
chore(tagsSelectorComponent): add className conditionally based on dark mode state to fade-container div
chore(shareModal): change initial state of checked variable to false
chore(shareModal): add saveFlow function to useContext hook to access saveFlow function from FlowsContext
chore(shareModal): add saveFlow function call to saveFlowStore function call to save flow data to store
chore(shareModal): add saveFlow function call to addFlow function call to add flow to FlowsContext
chore(shareModal): set checked variable to false when sharePublic state changes
chore(shareModal): disable save with my API keys checkbox when sharePublic is true
chore(shareModal): add warning message about deselecting save with my API keys checkbox
chore(components): add resetFilter function to reset filter state variables and set allData to original flows data
chore(components): call resetFilter function when flow is deleted to reset filter state variables and set allData to original flows data
chore(applies.css): rearrange classes in community-page-arrangement to match order of properties
chore(applies.css): add fade-container-dark class to handle dark mode for fade-container div
chore(applies.css): add linear gradient background color for fade-container-dark class to handle dark mode

src/frontend/src/components/tagsSelectorComponent/index.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
+import { darkContext } from "../../contexts/darkContext";
 import { cn } from "../../utils/utils";
 import { Badge } from "../ui/badge";
 
@@ -23,6 +24,7 @@ export function TagsSelector({
         : selectedTags.filter((_, i) => i !== index);
     setSelectedTags(newArray);
   };
+  const { dark } = useContext(darkContext);
 
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const fadeContainerRef = useRef<HTMLDivElement>(null);
@@ -70,7 +72,10 @@ export function TagsSelector({
   }, [divWidth, loadingTags]); // Depend on divWidth
 
   return (
-    <div ref={fadeContainerRef} className="fade-container">
+    <div
+      ref={fadeContainerRef}
+      className={dark ? "fade-container-dark" : "fade-container"}
+    >
       <div ref={scrollContainerRef} className="scroll-container flex gap-2">
         {!loadingTags &&
           tags.map((tag, idx) => (

src/frontend/src/modals/shareModal/index.tsx

@@ -35,18 +35,19 @@ export default function ShareModal({
   const { version, addFlow } = useContext(FlowsContext);
   const { hasApiKey } = useContext(StoreContext);
   const { setSuccessData, setErrorData } = useContext(alertContext);
-  const [checked, setChecked] = useState(true);
+  const [checked, setChecked] = useState(false);
   const [name, setName] = useState(component?.name ?? "");
   const [description, setDescription] = useState(component?.description ?? "");
   const [internalOpen, internalSetOpen] = useState(children ? false : true);
 
-  const nameComponent = is_component ? "Component" : "Flow";
+  const nameComponent = is_component ? "component" : "flow";
 
   const [tags, setTags] = useState<{ id: string; name: string }[]>([]);
   const [loadingTags, setLoadingTags] = useState<boolean>(false);
   const [sharePublic, setSharePublic] = useState(true);
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
   const [unavaliableNames, setUnavaliableNames] = useState<string[]>([]);
+  const { saveFlow } = useContext(FlowsContext);
 
   useEffect(() => {
     if (open || internalOpen) {
@@ -78,10 +79,10 @@ export default function ShareModal({
   useEffect(() => {
     setName(component?.name ?? "");
     setDescription(component?.description ?? "");
-  }, [component]);
+  }, [component, open]);
 
   const handleShareComponent = () => {
-    const saveFlow: FlowType = checked
+    const flow: FlowType = checked
       ? {
           id: component!.id,
           data: component!.data,
@@ -98,10 +99,18 @@ export default function ShareModal({
           last_tested_version: version,
           is_component: is_component,
         });
-    saveFlowStore(saveFlow, getTagsIds(selectedTags, tags), sharePublic).then(
+
+    saveFlow(
+      {
+        ...flow!,
+      },
+      true
+    );
+
+    saveFlowStore(flow!, getTagsIds(selectedTags, tags), sharePublic).then(
       () => {
         if (is_component) {
-          addFlow(true, saveFlow);
+          addFlow(true, flow);
         }
         setSuccessData({
           title: `${nameComponent} shared successfully`,
@@ -124,7 +133,7 @@ export default function ShareModal({
     >
       <BaseModal.Trigger>{children ? children : <></>}</BaseModal.Trigger>
       <BaseModal.Header
-        description={`Share your ${nameComponent} to the Langflow Store`}
+        description={`Share your ${nameComponent} to the Langflow Store.`}
       >
         <span className="pr-2">Share</span>
         <IconComponent
@@ -156,10 +165,11 @@ export default function ShareModal({
             checked={sharePublic}
             onCheckedChange={(event: boolean) => {
               setSharePublic(event);
+              setChecked(false);
             }}
           />
           <label htmlFor="public" className="export-modal-save-api text-sm ">
-            Make {nameComponent} Public
+            Make {nameComponent} public
           </label>
         </div>
         <div className="mt-3 flex items-center space-x-2">
@@ -169,14 +179,15 @@ export default function ShareModal({
             onCheckedChange={(event: boolean) => {
               setChecked(event);
             }}
+            disabled={sharePublic}
           />
           <label htmlFor="terms" className="export-modal-save-api text-sm ">
             Save with my API keys
           </label>
         </div>
         <span className=" text-xs text-destructive ">
-          Caution: Uncheck this box only removes API keys from fields
-          specifically designated for API keys.
+          Warning: Deselecting this box will exclusively eliminate API keys from
+          fields explicitly designated for API keys.
         </span>
       </BaseModal.Content>
 

src/frontend/src/pages/MainPage/components/components/index.tsx

@@ -88,6 +88,12 @@ export default function ComponentsComponent({
     }
   };
 
+  function resetFilter() {
+    setPageIndex(1);
+    setPageSize(10);
+    setAllData(flows);
+  }
+
   return (
     <CardsWrapComponent
       onFileDrop={onFileDrop}
@@ -106,6 +112,12 @@ export default function ComponentsComponent({
                   <CollectionCardComponent
                     onDelete={() => {
                       removeFlow(item.id);
+                      setSuccessData({
+                        title: `${
+                          item.is_component ? "Component" : "Flow"
+                        } deleted successfully!`,
+                      });
+                      resetFilter();
                     }}
                     key={idx}
                     data={item}

src/frontend/src/style/applies.css

@@ -241,7 +241,7 @@
   }
 
   .community-page-arrangement {
-    @apply flex-max-width justify-between h-full flex-col overflow-auto bg-background px-16;
+    @apply flex-max-width h-full flex-col justify-between overflow-auto bg-background px-16;
   }
 
   .community-page-nav-arrangement {
@@ -1037,27 +1037,51 @@
   .fade-container {
     @apply relative overflow-hidden;
   }
-  
+
   .fade-container::before,
   .fade-container::after {
-    @apply absolute top-0 bottom-0 pointer-events-none;
-    content: '';
+    @apply pointer-events-none absolute bottom-0 top-0;
+    content: "";
     width: 50px;
     opacity: 0;
     transition: opacity 0.3s;
     background: linear-gradient(to right, white, transparent);
   }
-  
+
   .fade-container::after {
     @apply right-0;
     transform: rotate(180deg);
   }
-  
+
   .fade-container.fade-left::before,
   .fade-container.fade-right::after {
     opacity: 1;
   }
-  
+
+  .fade-container-dark {
+    @apply relative overflow-hidden;
+  }
+
+  .fade-container-dark::before,
+  .fade-container-dark::after {
+    @apply pointer-events-none absolute bottom-0 top-0;
+    content: "";
+    width: 50px;
+    opacity: 0;
+    transition: opacity 0.3s;
+    background: linear-gradient(to right, black, transparent);
+  }
+
+  .fade-container-dark:after {
+    @apply right-0;
+    transform: rotate(180deg);
+  }
+
+  .fade-container-dark.fade-left::before,
+  .fade-container-dark.fade-right::after {
+    opacity: 1;
+  }
+
   .scroll-container {
     @apply flex overflow-x-scroll scrollbar-hide;
   }