[WIP] Variant A: saved segments

assets/js/dashboard.tsx

@@ -57,8 +57,15 @@ if (container && container.dataset) {
         <ThemeContextProvider>
           <SiteContextProvider site={site}>
             <UserContextProvider
-              role={container.dataset.currentUserRole as Role}
-              loggedIn={container.dataset.loggedIn === 'true'}
+              user={
+                container.dataset.loggedIn === 'true'
+                  ? {
+                      loggedIn: true,
+                      role: container.dataset.currentUserRole! as Role,
+                      id: parseInt(container.dataset.currentUserId!, 10)
+                    }
+                  : { loggedIn: false, role: null, id: null }
+              }
             >
               <RouterProvider router={router} />
             </UserContextProvider>

assets/js/dashboard/components/dropdown.tsx

@@ -13,6 +13,7 @@ import {
   AppNavigationLink,
   AppNavigationTarget
 } from '../navigation/use-app-navigate'
+import { NavigateOptions } from 'react-router-dom'
 
 export const ToggleDropdownButton = forwardRef<
   HTMLDivElement,
@@ -129,22 +130,43 @@ export const DropdownNavigationLink = ({
   children,
   active,
   className,
+  actions,
+  path,
+  params,
+  search,
+  navigateOptions,
+  onLinkClick,
   ...props
 }: AppNavigationTarget & {
-  active?: boolean
-  children: ReactNode
-  className?: string
-  onClick?: () => void
-}) => (
-  <AppNavigationLink
-    {...props}
+  navigateOptions?: NavigateOptions
+} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    active?: boolean
+    onLinkClick?: () => void
+    actions?: ReactNode
+  }) => (
+  <div
     className={classNames(
-      className,
       { 'font-bold': !!active },
       'flex items-center justify-between',
-      `px-4 py-2 text-sm leading-tight hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-900 dark:hover:text-gray-100`
+      'text-sm leading-tight hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-900 dark:hover:text-gray-100',
+      !!actions && 'pr-4',
+      className
     )}
+    {...props}
   >
-    {children}
-  </AppNavigationLink>
+    <AppNavigationLink
+      className={classNames(
+        'flex items-center justify-between w-full py-2',
+        actions ? 'pl-4' : 'px-4'
+      )}
+      path={path}
+      params={params}
+      search={search}
+      onClick={onLinkClick}
+      {...navigateOptions}
+    >
+      {children}
+    </AppNavigationLink>
+    {!!actions && actions}
+  </div>
 )

assets/js/dashboard/dashboard-keybinds.tsx

@@ -21,9 +21,5 @@ const ClearFiltersKeybind = () => (
 )
 
 export function DashboardKeybinds() {
-  return (
-    <>
-      <ClearFiltersKeybind />
-    </>
-  )
+  return <>{false && <ClearFiltersKeybind />}</> // temp disable
 }

assets/js/dashboard/datepicker.tsx

@@ -201,7 +201,7 @@ function ComparisonMenu({
         <DropdownNavigationLink
           active={query.comparison === ComparisonMode.custom}
           search={(s) => s}
-          onClick={toggleCompareMenuCalendar}
+          onLinkClick={toggleCompareMenuCalendar}
         >
           {COMPARISON_MODES[ComparisonMode.custom]}
         </DropdownNavigationLink>
@@ -250,7 +250,7 @@ function QueryPeriodsMenu({
                 key={label}
                 active={isActive({ site, query })}
                 search={search}
-                onClick={onClick || closeMenu}
+                onLinkClick={onClick || closeMenu}
               >
                 {label}
                 {!!keyboardKey && <KeybindHint>{keyboardKey}</KeybindHint>}

assets/js/dashboard/nav-menu/filter-menu.tsx

@@ -15,6 +15,7 @@ import {
 import { PlausibleSite, useSiteContext } from '../site-context'
 import { filterRoute } from '../router'
 import { useOnClickOutside } from '../util/use-on-click-outside'
+import { SegmentsList } from '../segments/segments-dropdown'
 
 export function getFilterListItems({
   propsAvailable
@@ -26,7 +27,7 @@ export function getFilterListItems({
     keyof typeof FILTER_MODAL_TO_FILTER_GROUP
   >
   const keysToOmit: Array<keyof typeof FILTER_MODAL_TO_FILTER_GROUP> =
-    propsAvailable ? [] : ['props']
+    propsAvailable ? ['segment'] : ['segment', 'props']
   return allKeys
     .filter((k) => !keysToOmit.includes(k))
     .map((modalKey) => ({ modalKey, label: formatFilterGroup(modalKey) }))
@@ -63,9 +64,11 @@ export const FilterMenu = () => {
     >
       {opened && (
         <DropdownMenuWrapper id="filter-menu" className="md:left-auto md:w-56">
+          <SegmentsList closeList={() => setOpened(false)} />
           <DropdownLinkGroup>
             {filterListItems.map(({ modalKey, label }) => (
               <DropdownNavigationLink
+                onLinkClick={() => setOpened(false)}
                 active={false}
                 key={modalKey}
                 path={filterRoute.path}

assets/js/dashboard/nav-menu/filter-pills-list.tsx

@@ -76,17 +76,18 @@ export const FilterPillsList = React.forwardRef<
           }
           plainText={plainFilterText(query, filter)}
           key={index}
-          onRemoveClick={() =>
+          onRemoveClick={() => {
+            const newFilters = query.filters.filter(
+              (_, i) => i !== index + indexAdjustment
+            )
             navigate({
               search: (search) => ({
                 ...search,
-                filters: query.filters.filter(
-                  (_, i) => i !== index + indexAdjustment
-                ),
-                labels: cleanLabels(query.filters, query.labels)
+                filters: newFilters,
+                labels: cleanLabels(newFilters, query.labels)
               })
             })
-          }
+          }}
         >
           {styledFilterText(query, filter)}
         </FilterPill>

assets/js/dashboard/nav-menu/filters-bar.tsx

@@ -11,6 +11,10 @@ import {
 } from '../components/dropdown'
 import { FilterPillsList, PILL_X_GAP } from './filter-pills-list'
 import { useQueryContext } from '../query-context'
+import { SaveSegmentAction } from '../segments/segment-actions'
+import { EditingSegmentState, isSegmentFilter } from '../segments/segments'
+import { useLocation } from 'react-router-dom'
+import { useUserContext } from '../user-context'
 
 const SEE_MORE_GAP_PX = 16
 const SEE_MORE_WIDTH_PX = 36
@@ -91,12 +95,34 @@ type VisibilityState = {
 }
 
 export const FiltersBar = () => {
+  const user = useUserContext();
   const containerRef = useRef<HTMLDivElement>(null)
   const pillsRef = useRef<HTMLDivElement>(null)
   const actionsRef = useRef<HTMLDivElement>(null)
   const seeMoreRef = useRef<HTMLDivElement>(null)
   const [visibility, setVisibility] = useState<null | VisibilityState>(null)
   const { query } = useQueryContext()
+  const { state: locationState } = useLocation() as {
+    state?: EditingSegmentState
+  }
+  const [editingSegment, setEditingSegment] = useState<
+    null | EditingSegmentState['editingSegment']
+  >(null)
+
+  useLayoutEffect(() => {
+    if (locationState?.editingSegment) {
+      setEditingSegment(locationState?.editingSegment)
+    }
+    if (locationState?.editingSegment === null) {
+      setEditingSegment(null)
+    }
+  }, [locationState?.editingSegment])
+
+  useLayoutEffect(() => {
+    if (!query.filters.length) {
+      setEditingSegment(null)
+    }
+  }, [query.filters.length])
 
   const [opened, setOpened] = useState(false)
 
@@ -146,7 +172,7 @@ export const FiltersBar = () => {
   return (
     <div
       className={classNames(
-        'flex w-full mt-4',
+        'flex w-full mt-3',
         visibility === null && 'invisible' // hide until we've calculated the positions
       )}
       ref={containerRef}
@@ -198,6 +224,27 @@ export const FiltersBar = () => {
             </ToggleDropdownButton>
           )}
         <ClearAction />
+        {user.loggedIn && editingSegment === null &&
+          !query.filters.some((f) => isSegmentFilter(f)) && (
+            <>
+              <VerticalSeparator />
+              <SaveSegmentAction options={[{ type: 'create segment' }]} />
+            </>
+          )}
+        {user.loggedIn && editingSegment !== null && (
+          <>
+            <VerticalSeparator />
+            <SaveSegmentAction
+              options={[
+                {
+                  type: 'update segment',
+                  segment: editingSegment
+                },
+                { type: 'create segment' }
+              ]}
+            />
+          </>
+        )}
       </div>
     </div>
   )
@@ -206,7 +253,7 @@ export const FiltersBar = () => {
 export const ClearAction = () => (
   <AppNavigationLink
     title="Clear all filters"
-    className="w-9 text-gray-500 hover:text-indigo-700 dark:hover:text-indigo-500 flex items-center justify-center"
+    className="px-1 text-gray-500 hover:text-indigo-700 dark:hover:text-indigo-500 flex items-center justify-center"
     search={(search) => ({
       ...search,
       filters: null,
@@ -216,3 +263,9 @@ export const ClearAction = () => (
     <XMarkIcon className="w-4 h-4" />
   </AppNavigationLink>
 )
+
+const VerticalSeparator = () => {
+  return (
+    <div className="border-gray-300 dark:border-gray-500 border-1 border-l h-9"></div>
+  )
+}