feat(Filter/Filters): add emptystate

components/core/Filter/Filters.js

@@ -15,8 +15,8 @@ import { css } from "@emotion/react";
 import { useFilterContext } from "~/components/core/Filter/Provider";
 import { Link } from "~/components/core/Link";
 import { ButtonPrimary, ButtonSecondary } from "~/components/system/components/Buttons";
-import { motion } from "framer-motion";
 import { FocusRing } from "../FocusRing";
+import { Show } from "~/components/utility/Show";
 
 /* -------------------------------------------------------------------------------------------------
  *  Shared components between filters
@@ -77,7 +77,7 @@ const FilterButton = React.forwardRef(({ children, Icon, image, isSelected, ...p
   </Link>
 ));
 
-const FilterSection = React.forwardRef(({ title, children, ...props }, ref) => {
+const FilterSection = React.forwardRef(({ title, children, emptyState, ...props }, ref) => {
   const [isExpanded, setExpanded] = React.useState(true);
   const toggleExpandState = () => setExpanded((prev) => !prev);
 
@@ -89,7 +89,7 @@ const FilterSection = React.forwardRef(({ title, children, ...props }, ref) => {
           <Tooltip.Trigger aria-describedby={titleButtonId} aria-expanded={isExpanded}>
             <FocusRing>
               <Typography.H6
-                as={motion.button}
+                as="button"
                 layoutId={title + "title"}
                 css={STYLES_FILTER_TITLE_BUTTON}
                 style={{ paddingLeft: 8, marginBottom: 4 }}
@@ -108,25 +108,26 @@ const FilterSection = React.forwardRef(({ title, children, ...props }, ref) => {
         </Tooltip.Root>
       )}
       {isExpanded ? (
+        Array.isArray(children) && children?.length === 0 ? (
+          <Show when={emptyState}>
+            <System.P2 color="textGrayDark" style={{ paddingLeft: "8px" }}>
+              {emptyState}
+            </System.P2>
+          </Show>
+        ) : (
           <RovingTabIndex.Provider axis="vertical">
             <RovingTabIndex.List>
-            <motion.ul
-              layoutId={title + "section"}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              css={STYLES_FILTERS_GROUP}
-            >
-              {children}
-            </motion.ul>
+              <ul css={STYLES_FILTERS_GROUP}>{children}</ul>
             </RovingTabIndex.List>
           </RovingTabIndex.Provider>
+        )
       ) : null}
     </div>
   );
 });
 
 /* -------------------------------------------------------------------------------------------------
- *  InitialFilters
+ *  Library
  * -----------------------------------------------------------------------------------------------*/
 
 function Library({ page, onAction }) {
@@ -151,11 +152,19 @@ function Library({ page, onAction }) {
   );
 }
 
+/* -------------------------------------------------------------------------------------------------
+ *  Tags
+ * -----------------------------------------------------------------------------------------------*/
+
 function Tags({ viewer, data, onAction, ...props }) {
   const [, { hidePopup }] = useFilterContext();
 
   return (
-    <FilterSection title="Tags" {...props}>
+    <FilterSection
+      title="Tags"
+      emptyState="when you tag a file, that tag will automatically show up here"
+      {...props}
+    >
       {viewer.slates.map((slate, index) => (
         <li key={slate.id}>
           <RovingTabIndex.Item index={index}>
@@ -175,13 +184,15 @@ function Tags({ viewer, data, onAction, ...props }) {
   );
 }
 
+/* -------------------------------------------------------------------------------------------------
+ *  Following
+ * -----------------------------------------------------------------------------------------------*/
+
 function Following({ viewer, onAction, ...props }) {
   const [, { hidePopup }] = useFilterContext();
 
   return (
-    <RovingTabIndex.Provider axis="vertical">
-      <RovingTabIndex.List>
-        <FilterSection title="Following" {...props}>
+    <FilterSection title="Following" emptyState="follow users to see them here" {...props}>
       {viewer.following.map((user, index) => (
         <li key={user.id}>
           <RovingTabIndex.Item index={index}>
@@ -199,11 +210,13 @@ function Following({ viewer, onAction, ...props }) {
         </li>
       ))}
     </FilterSection>
-      </RovingTabIndex.List>
-    </RovingTabIndex.Provider>
   );
 }
 
+/* -------------------------------------------------------------------------------------------------
+ *  Profile
+ * -----------------------------------------------------------------------------------------------*/
+
 function Profile({ viewer, data, page, ...props }) {
   if (page.id === "NAV_SLATE") {
     data = data.owner;
@@ -288,6 +301,10 @@ function Profile({ viewer, data, page, ...props }) {
   );
 }
 
+/* -------------------------------------------------------------------------------------------------
+ *  ProfileTags
+ * -----------------------------------------------------------------------------------------------*/
+
 function ProfileTags({ data, page, onAction, ...props }) {
   const [, { hidePopup }] = useFilterContext();
 
@@ -297,8 +314,6 @@ function ProfileTags({ data, page, onAction, ...props }) {
   }
 
   return (
-    <RovingTabIndex.Provider axis="vertical">
-      <RovingTabIndex.List>
     <FilterSection {...props}>
       {user?.slates?.map((slate, index) => (
         <li key={slate.id}>
@@ -316,8 +331,6 @@ function ProfileTags({ data, page, onAction, ...props }) {
         </li>
       ))}
     </FilterSection>
-      </RovingTabIndex.List>
-    </RovingTabIndex.Provider>
   );
 }