feat: change filter bar

woss · Mar 29, 2024 · a7cec9f · a7cec9f
1 parent cfab0c7
commit a7cec9f
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 98 deletions.
diff --git a/apps/web/app/api/analytics/[endpoint]/route.ts b/apps/web/app/api/analytics/[endpoint]/route.ts
@@ -15,6 +15,8 @@ export const GET = withAuth(
     const parsedParams = getAnalyticsQuerySchema.parse(searchParams);
     const { domain, key, interval } = parsedParams;
 
+    console.log(domain, key, interval);
+
     // return 403 if workspace is on the free plan and interval is 90d or all
     if (
       workspace?.plan === "free" &&

diff --git a/apps/web/ui/analytics/domain-selector.tsx b/apps/web/ui/analytics/domain-selector.tsx
@@ -1,7 +1,7 @@
 import useDomains from "@/lib/swr/use-domains";
-import useTags from "@/lib/swr/use-tags";
 import { InputSelect, useRouterStuff } from "@dub/ui";
-import { Globe, Tag } from "lucide-react";
+import { GOOGLE_FAVICON_URL } from "@dub/utils";
+import { Globe } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
 
 export default function DomainSelector() {
@@ -23,6 +23,11 @@ export default function DomainSelector() {
       selectedItem={{
         id: selectedDomainId!,
         value: domains.find(({ id }) => id === selectedDomainId)?.slug || "",
+        image: selectedDomainId
+          ? `${GOOGLE_FAVICON_URL}${
+              domains.find(({ id }) => id === selectedDomainId)?.target
+            }`
+          : undefined,
       }}
       setSelectedItem={(domain) => {
         if (domain && typeof domain !== "function" && domain.id)
@@ -40,7 +45,7 @@ export default function DomainSelector() {
       inputAttrs={{
         placeholder: "Filter domains",
       }}
-      className="md:w-48"
+      className="md:w-auto"
     />
   ) : undefined;
 }
diff --git a/apps/web/ui/analytics/filter-bar.tsx b/apps/web/ui/analytics/filter-bar.tsx
@@ -1,15 +1,17 @@
 import { Plus } from "lucide-react";
 import DomainSelector from "./domain-selector";
 import TagSelector from "./tag-selector";
+import useDomains from "@/lib/swr/use-domains";
 
 export default function FilterBar() {
+  const { allDomains } = useDomains();
   return (
-    <div className="flex w-full max-w-lg gap-1 rounded-lg bg-gray-100 p-1">
-      <DomainSelector />
+    <div className="flex w-full flex-wrap gap-1 rounded-lg bg-gray-100 p-1">
+      {allDomains.length > 0 && <DomainSelector />}
       <TagSelector />
-      <button className="flex items-center justify-center gap-2 truncate rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm text-gray-400">
-        <Plus className="h-5 w-5 flex-shrink-0 text-black" />
-        Add filter
+      <button className="flex items-center justify-center gap-2 truncate rounded-lg border border-gray-200 bg-white py-2 pl-2 pr-4 text-sm text-gray-400">
+        <Plus className="h-4 w-4 flex-shrink-0 text-black" />
+        <span>Add Filter</span>
       </button>
     </div>
   );

diff --git a/apps/web/ui/analytics/tag-selector.tsx b/apps/web/ui/analytics/tag-selector.tsx
@@ -41,7 +41,7 @@ export default function TagSelector() {
       inputAttrs={{
         placeholder: "Filter tags",
       }}
-      className="md:w-48"
+      className="w-auto"
     />
   ) : undefined;
 }
diff --git a/apps/web/ui/analytics/toggle.tsx b/apps/web/ui/analytics/toggle.tsx
@@ -40,103 +40,61 @@ export default function Toggle() {
 
   return (
     <div
-      className={cn("sticky top-[6.85rem] z-10 mb-5 bg-gray-50 py-3 md:py-5", {
+      className={cn("sticky top-[6.85rem] z-10 mb-5 bg-gray-50 py-3 md:py-3", {
         "top-14": isPublicStatsPage,
         "top-0": admin,
         "shadow-md": scrolled,
       })}
     >
-      <div className="mx-auto flex h-20 max-w-4xl flex-col items-center justify-between space-y-3 px-2.5 md:h-10 md:flex-row md:space-y-0 lg:px-0">
-        {isPublicStatsPage ? (
-          <a
-            className="group flex items-center text-lg font-semibold text-gray-800"
-            href={linkConstructor({ domain, key })}
-            target="_blank"
-            rel="noreferrer"
-          >
-            <BlurImage
-              alt={url || "Dub.co"}
-              src={
-                url ? `${GOOGLE_FAVICON_URL}${getApexDomain(url)}` : DUB_LOGO
-              }
-              className="mr-2 h-6 w-6 flex-shrink-0 overflow-hidden rounded-full"
-              width={48}
-              height={48}
-            />
-            {linkConstructor({
-              domain: punycode.toUnicode(domain),
-              key,
-              pretty: true,
-            })}
-            <ExpandingArrow className="h-5 w-5" />
-          </a>
-        ) : (
-          <div className="flex items-center space-x-2 pr-2">
-            <BlurImage
-              alt={name || "Workspace Logo"}
-              src={logo || DUB_LOGO}
-              className="h-6 w-6 flex-shrink-0 overflow-hidden rounded-full"
-              width={48}
-              height={48}
-            />
-            <h2 className="truncate text-lg font-semibold text-gray-800">
-              {primaryDomain}
-            </h2>
+      <div className="mx-auto flex h-20 w-full max-w-4xl flex-col gap-2 space-y-3 px-2.5 md:h-24 md:space-y-0 lg:px-0">
+        <div className="flex w-full items-center justify-between gap-2">
+          {isPublicStatsPage ? (
+            <a
+              className="group flex items-center text-lg font-semibold text-gray-800"
+              href={linkConstructor({ domain, key })}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <BlurImage
+                alt={url || "Dub.co"}
+                src={
+                  url ? `${GOOGLE_FAVICON_URL}${getApexDomain(url)}` : DUB_LOGO
+                }
+                className="mr-2 h-6 w-6 flex-shrink-0 overflow-hidden rounded-full"
+                width={48}
+                height={48}
+              />
+              {linkConstructor({
+                domain: punycode.toUnicode(domain),
+                key,
+                pretty: true,
+              })}
+              <ExpandingArrow className="h-5 w-5" />
+            </a>
+          ) : (
+            <div className="flex items-center space-x-2 pr-2">
+              <BlurImage
+                alt={name || "Workspace Logo"}
+                src={logo || DUB_LOGO}
+                className="h-6 w-6 flex-shrink-0 overflow-hidden rounded-full"
+                width={48}
+                height={48}
+              />
+              <h2 className="truncate text-lg font-semibold text-gray-800">
+                {primaryDomain}
+              </h2>
+            </div>
+          )}
+          <div className="flex items-center gap-2">
+            <DateRangePicker />
+            {!isPublicStatsPage && <ExportButton />}
           </div>
-        )}
-        <div className="flex w-full items-center justify-end gap-2">
+        </div>
+        <div className="flex w-full">
           {!isPublicStatsPage && key && <SharePopover />}
           {!isPublicStatsPage && !key && <FilterBar />}
-          <DateRangePicker />
-          {!isPublicStatsPage && <ExportButton />}
         </div>
       </div>
     </div>
   );
 }
-
-const DomainsFilterTooltip = () => {
-  const { allActiveDomains } = useDomains();
-  const searchParams = useSearchParams();
-  const domain = searchParams?.get("domain");
-  const key = searchParams?.get("key");
-  const { queryParams } = useRouterStuff();
-
-  return (
-    <div className="flex w-full flex-col items-start space-y-2 divide-y divide-gray-200 p-2 md:w-48">
-      <div className="flex w-full flex-col">
-        {allActiveDomains.map(({ slug, target }) => (
-          <Link
-            key={slug}
-            href={
-              queryParams({
-                set: {
-                  domain: slug,
-                },
-                del: "key",
-                getNewPath: true,
-              }) as string
-            }
-            className="group flex items-center justify-between space-x-2 rounded-md p-2 text-gray-500 transition-all hover:bg-gray-100 active:bg-gray-200"
-          >
-            <div className="flex items-center space-x-2">
-              <BlurImage
-                src={`${GOOGLE_FAVICON_URL}${
-                  target ? getApexDomain(target) : SHORT_DOMAIN
-                }`}
-                alt={slug}
-                className="h-5 w-5 rounded-full"
-                width={20}
-                height={20}
-              />
-              <p className="w-32 truncate text-left text-sm font-semibold text-gray-500">
-                {slug}
-              </p>
-            </div>
-            {domain === slug && !key && <Tick className="h-4 w-4" />}
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
-};
diff --git a/packages/ui/src/input-select.tsx b/packages/ui/src/input-select.tsx
@@ -92,7 +92,16 @@ export function InputSelect({
               setOpenCommandList(true);
             }
           }}
-          className="block w-full rounded-md border-none px-0 text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-0"
+          // make the width dynamic to save space
+          style={{
+            width:
+              inputValue.length === 0
+                ? inputAttrs?.placeholder?.length
+                  ? `${inputAttrs?.placeholder?.length * 6 + 16}px`
+                  : "136px"
+                : `${inputValue.length * 6 + 16}px`,
+          }}
+          className="block w-full rounded-md border-none px-0 text-sm text-gray-900 placeholder-gray-400 outline-none outline-0 transition-all duration-300 focus:ring-0"
         />
       </>
     );
@@ -278,7 +287,7 @@ export function InputSelect({
         </div>
       </div>
       {openCommandList && (
-        <Command.List className="dub-scrollbar absolute z-20 mt-2 h-[calc(var(--cmdk-list-height)+17px)] max-h-[300px] w-full overflow-auto rounded-md border border-gray-200 bg-white p-2 shadow-md transition-all">
+        <Command.List className="dub-scrollbar absolute z-20 mt-2 h-[calc(var(--cmdk-list-height)+17px)] max-h-[300px] w-full min-w-[160px] overflow-auto rounded-md border border-gray-200 bg-white p-2 shadow-md transition-all duration-75">
           <Command.Empty className="px-4 py-2 text-sm text-gray-600">
             No results found for "{inputValue}"
           </Command.Empty>