From 26fa6e3474b634626aacf3a6a8c95f80dfe75262 Mon Sep 17 00:00:00 2001
From: Rafetikus <raufjabarov1@gmail.com>
Date: Mon, 20 Apr 2026 12:54:26 +0400
Subject: [PATCH 1/7] refactor(ui): update layout, pages for ui

---
 ui/src/components/layout/PageHeader.tsx | 481 +++++++++++++++++++++++-
 ui/src/pages/ProjectsListPage.tsx       | 136 ++++++-
 2 files changed, 591 insertions(+), 26 deletions(-)

diff --git a/ui/src/components/layout/PageHeader.tsx b/ui/src/components/layout/PageHeader.tsx
index 93178e9..e574fae 100644
--- a/ui/src/components/layout/PageHeader.tsx
+++ b/ui/src/components/layout/PageHeader.tsx
@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from 'react';
 import { Link, useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';
-import { Button, Tooltip } from '../ui';
+import { Avatar, Button, Tooltip } from '../ui';
 import { Dropdown } from '../work-item';
 import { useModulesFilter } from '../../contexts/ModulesFilterContext';
 import { useWorkspaceViewsState } from '../../contexts/WorkspaceViewsStateContext';
@@ -11,6 +11,7 @@ import {
   CreateViewModal,
   ModuleFiltersPanel,
 } from '../workspace-views';
+import { CollapsibleSection } from '../workspace-views/WorkspaceViewsFiltersShared';
 import { ProjectSavedViewDisplayDropdown } from '../project-saved-view/ProjectSavedViewDisplayDropdown';
 import { ProjectSavedViewMoreMenu } from '../project-saved-view/ProjectSavedViewMoreMenu';
 import { DateRangeModal } from '../workspace-views/DateRangeModal';
@@ -285,6 +286,40 @@ const IconFilter = () => (
     <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
   </svg>
 );
+const IconLock = () => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden
+  >
+    <rect width="18" height="12" x="3" y="11" rx="2" />
+    <path d="M7 11V8a5 5 0 0 1 10 0v3" />
+  </svg>
+);
+const IconGlobe = () => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden
+  >
+    <circle cx="12" cy="12" r="10" />
+    <path d="M2 12h20" />
+    <path d="M12 2a15 15 0 0 1 0 20" />
+    <path d="M12 2a15 15 0 0 0 0 20" />
+  </svg>
+);
 const IconPlus = () => (
   <svg
     width="16"
@@ -792,11 +827,177 @@ function DraftsHeader() {
 }
 
 function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
+  const { user: authUser } = useAuth();
   const [searchParams, setSearchParams] = useSearchParams();
   const searchQuery = searchParams.get('q') ?? '';
+  const sortFieldParam = searchParams.get('sortField');
+  const sortDirParam = searchParams.get('sortDir');
+  const legacySortParam = searchParams.get('sort');
+  const sortField =
+    sortFieldParam === 'manual' ||
+    sortFieldParam === 'name' ||
+    sortFieldParam === 'created_date' ||
+    sortFieldParam === 'member_count'
+      ? sortFieldParam
+      : legacySortParam === 'name_asc' || legacySortParam === 'name_desc'
+        ? 'name'
+        : 'created_date';
+  const sortDir =
+    sortDirParam === 'asc' || sortDirParam === 'desc'
+      ? sortDirParam
+      : legacySortParam === 'created_asc' || legacySortParam === 'name_asc'
+        ? 'asc'
+        : 'desc';
+  const parseCsvParam = (key: string) =>
+    (searchParams.get(key) ?? '')
+      .split(',')
+      .map((v) => v.trim())
+      .filter(Boolean);
+  const selectedAccess = parseCsvParam('access').filter(
+    (value): value is 'private' | 'public' => value === 'private' || value === 'public',
+  );
+  const selectedLeadIds = parseCsvParam('lead');
+  const selectedMemberIds = parseCsvParam('members');
+  const myProjectsOnly = searchParams.get('myProjects') === '1';
+  const createdDateFilter =
+    searchParams.get('createdDate') === 'today' ||
+    searchParams.get('createdDate') === 'last7' ||
+    searchParams.get('createdDate') === 'last30'
+      ? (searchParams.get('createdDate') as 'today' | 'last7' | 'last30')
+      : '';
+  const [projectsDropdownOpen, setProjectsDropdownOpen] = useState<string | null>(null);
   const [searchOpen, setSearchOpen] = useState(!!searchQuery);
+  const [projectsFiltersSearch, setProjectsFiltersSearch] = useState('');
+  const [workspaceMembers, setWorkspaceMembers] = useState<WorkspaceMemberApiResponse[]>([]);
+  const [showAllLeads, setShowAllLeads] = useState(false);
+  const [showAllMembers, setShowAllMembers] = useState(false);
+  const [projectsFilterSectionOpen, setProjectsFilterSectionOpen] = useState({
+    createdDate: true,
+    access: true,
+    lead: true,
+    members: true,
+  });
 
   const baseUrl = `/${workspaceSlug}`;
+  const sortFieldLabelMap: Record<typeof sortField, string> = {
+    manual: 'Manual',
+    name: 'Name',
+    created_date: 'Created date',
+    member_count: 'Number of members',
+  };
+  const activeFilterCount =
+    (myProjectsOnly ? 1 : 0) +
+    (createdDateFilter ? 1 : 0) +
+    selectedAccess.length +
+    selectedLeadIds.length +
+    selectedMemberIds.length;
+
+  useEffect(() => {
+    if (!workspaceSlug) return;
+    let cancelled = false;
+    workspaceService
+      .listMembers(workspaceSlug)
+      .then((members) => {
+        if (!cancelled) setWorkspaceMembers(members ?? []);
+      })
+      .catch(() => {
+        if (!cancelled) setWorkspaceMembers([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [workspaceSlug]);
+
+  const updateParam = (
+    key:
+      | 'q'
+      | 'sort'
+      | 'sortField'
+      | 'sortDir'
+      | 'filter'
+      | 'access'
+      | 'lead'
+      | 'members'
+      | 'myProjects'
+      | 'createdDate',
+    value?: string,
+  ) => {
+    setSearchParams(
+      (prev) => {
+        const next = new URLSearchParams(prev);
+        if (!value) next.delete(key);
+        else next.set(key, value);
+        return next;
+      },
+      { replace: true },
+    );
+  };
+  const updateParams = (
+    updates: Partial<
+      Record<
+        | 'q'
+        | 'sort'
+        | 'sortField'
+        | 'sortDir'
+        | 'filter'
+        | 'access'
+        | 'lead'
+        | 'members'
+        | 'myProjects'
+        | 'createdDate',
+        string | undefined
+      >
+    >,
+  ) => {
+    setSearchParams(
+      (prev) => {
+        const next = new URLSearchParams(prev);
+        Object.entries(updates).forEach(([key, value]) => {
+          if (!value) next.delete(key);
+          else next.set(key, value);
+        });
+        return next;
+      },
+      { replace: true },
+    );
+  };
+  const setCsvParam = (key: 'access' | 'lead' | 'members', values: string[]) => {
+    updateParam(key, values.length ? values.join(',') : undefined);
+  };
+  const toggleCsvParam = (key: 'access' | 'lead' | 'members', value: string) => {
+    const current = parseCsvParam(key);
+    setCsvParam(
+      key,
+      current.includes(value) ? current.filter((v) => v !== value) : [...current, value],
+    );
+  };
+
+  const memberOptions = [
+    ...(authUser
+      ? [{ id: authUser.id, label: 'You', avatarUrl: authUser.avatarUrl, sortLabel: 'You' }]
+      : []),
+    ...workspaceMembers
+      .filter((member) => member.member_id !== authUser?.id)
+      .map((member) => ({
+        id: member.member_id,
+        label:
+          member.member_display_name?.trim() ||
+          member.member_email?.trim() ||
+          member.member_id.slice(0, 8),
+        avatarUrl: member.member_avatar ?? null,
+        sortLabel:
+          member.member_display_name?.trim() || member.member_email?.trim() || member.member_id,
+      })),
+  ].sort((a, b) => a.sortLabel.localeCompare(b.sortLabel));
+  const normalizedFilterSearch = projectsFiltersSearch.trim().toLowerCase();
+  const includeBySearch = (label: string) =>
+    !normalizedFilterSearch || label.toLowerCase().includes(normalizedFilterSearch);
+  const visibleLeadOptions = memberOptions.filter((opt) => includeBySearch(opt.label));
+  const visibleMemberOptions = memberOptions.filter((opt) => includeBySearch(opt.label));
+  const leadOptionsToRender = showAllLeads ? visibleLeadOptions : visibleLeadOptions.slice(0, 5);
+  const memberOptionsToRender = showAllMembers
+    ? visibleMemberOptions
+    : visibleMemberOptions.slice(0, 5);
 
   return (
     <>
@@ -817,7 +1018,7 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
             <input
               type="text"
               value={searchQuery}
-              onChange={(e) => setSearchParams({ q: e.target.value }, { replace: true })}
+              onChange={(e) => updateParam('q', e.target.value)}
               placeholder="Search projects"
               className="min-w-0 flex-1 bg-transparent text-sm text-(--txt-primary) placeholder:text-(--txt-placeholder) focus:outline-none"
               aria-label="Search projects"
@@ -825,7 +1026,7 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
             <button
               type="button"
               onClick={() => {
-                setSearchParams({}, { replace: true });
+                updateParam('q');
                 setSearchOpen(false);
               }}
               className="shrink-0 rounded p-0.5 text-(--txt-icon-tertiary) hover:bg-(--bg-layer-transparent-hover) hover:text-(--txt-secondary)"
@@ -845,22 +1046,268 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
             <IconSearch />
           </button>
         )}
-        <button
-          type="button"
-          className="flex items-center gap-1.5 rounded-md border border-(--border-subtle) bg-(--bg-layer-2) px-2.5 py-1.5 text-[13px] font-medium text-(--txt-secondary) hover:bg-(--bg-layer-2-hover)"
+        <Dropdown
+          id="projects-sort"
+          openId={projectsDropdownOpen}
+          onOpen={setProjectsDropdownOpen}
+          label="Sort projects"
+          icon={<IconArrowUpDown />}
+          displayValue={sortFieldLabelMap[sortField]}
+          panelClassName="min-w-52 rounded-md border border-(--border-subtle) bg-(--bg-surface-1) py-1 shadow-(--shadow-raised)"
+          triggerContent={
+            <>
+              <span className="text-(--txt-icon-tertiary)">
+                <IconArrowUpDown />
+              </span>
+              <span className="truncate">{sortFieldLabelMap[sortField]}</span>
+              {projectsDropdownOpen === 'projects-sort' ? <IconChevronUp /> : <IconChevronDown />}
+            </>
+          }
+          triggerClassName="flex items-center gap-1.5 rounded-md border border-(--border-subtle) bg-(--bg-layer-2) px-2.5 py-1.5 text-[13px] font-medium text-(--txt-secondary) hover:bg-(--bg-layer-2-hover)"
         >
-          <IconCalendar />
-          Created date
-          <IconChevronDown />
-        </button>
-        <button
-          type="button"
-          className="flex items-center gap-1.5 rounded-md border border-(--border-subtle) bg-(--bg-layer-2) px-2.5 py-1.5 text-[13px] font-medium text-(--txt-secondary) hover:bg-(--bg-layer-2-hover)"
+          {[
+            { value: 'manual', label: 'Manual' },
+            { value: 'name', label: 'Name' },
+            { value: 'created_date', label: 'Created date' },
+            { value: 'member_count', label: 'Number of members' },
+          ].map((opt) => {
+            const active = sortField === opt.value;
+            return (
+              <button
+                key={opt.value}
+                type="button"
+                className={`flex w-full items-center justify-between px-3 py-1.5 text-left text-sm ${
+                  active
+                    ? 'text-(--txt-primary)'
+                    : 'text-(--txt-secondary) hover:bg-(--bg-layer-1-hover)'
+                }`}
+                onClick={() => {
+                  updateParams({ sortField: opt.value, sort: undefined });
+                }}
+              >
+                <span>{opt.label}</span>
+                {active ? <IconCheck /> : null}
+              </button>
+            );
+          })}
+          <div className="mx-2 my-1 h-px bg-(--border-subtle)" />
+          {[
+            { value: 'asc', label: 'Ascending' },
+            { value: 'desc', label: 'Descending' },
+          ].map((opt) => {
+            const active = sortDir === opt.value;
+            return (
+              <button
+                key={opt.value}
+                type="button"
+                className={`flex w-full items-center justify-between px-3 py-1.5 text-left text-sm ${
+                  active
+                    ? 'text-(--txt-primary)'
+                    : 'text-(--txt-secondary) hover:bg-(--bg-layer-1-hover)'
+                }`}
+                onClick={() => {
+                  updateParams({ sortDir: opt.value, sort: undefined });
+                }}
+              >
+                <span>{opt.label}</span>
+                {active ? <IconCheck /> : null}
+              </button>
+            );
+          })}
+        </Dropdown>
+        <Dropdown
+          id="projects-filters"
+          openId={projectsDropdownOpen}
+          onOpen={setProjectsDropdownOpen}
+          label="Filter projects"
+          icon={<IconFilter />}
+          displayValue={activeFilterCount > 0 ? `Filters (${activeFilterCount})` : 'Filters'}
+          panelClassName="w-80 rounded-md border border-(--border-subtle) bg-(--bg-surface-1) py-1 shadow-(--shadow-raised)"
+          triggerContent={
+            <>
+              <span className="text-(--txt-icon-tertiary)">
+                <IconFilter />
+              </span>
+              <span className="truncate">
+                {activeFilterCount > 0 ? `Filters (${activeFilterCount})` : 'Filters'}
+              </span>
+              {projectsDropdownOpen === 'projects-filters' ? (
+                <IconChevronUp />
+              ) : (
+                <IconChevronDown />
+              )}
+            </>
+          }
+          triggerClassName="flex items-center gap-1.5 rounded-md border border-(--border-subtle) bg-(--bg-layer-2) px-2.5 py-1.5 text-[13px] font-medium text-(--txt-secondary) hover:bg-(--bg-layer-2-hover)"
         >
-          <IconFilter />
-          Filters
-          <IconChevronDown />
-        </button>
+          <div className="px-3 py-1">
+            <div className="flex items-center gap-2 rounded-md border border-(--border-subtle) px-2 py-1.5">
+              <span className="shrink-0 text-(--txt-icon-tertiary)">
+                <IconSearch />
+              </span>
+              <input
+                type="text"
+                value={projectsFiltersSearch}
+                onChange={(e) => setProjectsFiltersSearch(e.target.value)}
+                placeholder="Search"
+                className="min-w-0 flex-1 bg-transparent text-sm text-(--txt-primary) placeholder:text-(--txt-placeholder) focus:outline-none"
+                aria-label="Search project filters"
+              />
+            </div>
+          </div>
+          <div className="max-h-[70vh] overflow-y-auto">
+            <label className="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-(--txt-primary) hover:bg-(--bg-layer-1-hover)">
+              <input
+                type="checkbox"
+                checked={myProjectsOnly}
+                onChange={() => updateParam('myProjects', myProjectsOnly ? '' : '1')}
+                className="rounded border-(--border-subtle)"
+              />
+              <span>My projects</span>
+            </label>
+            <CollapsibleSection
+              title="Created date"
+              open={projectsFilterSectionOpen.createdDate}
+              onToggle={() =>
+                setProjectsFilterSectionOpen((prev) => ({
+                  ...prev,
+                  createdDate: !prev.createdDate,
+                }))
+              }
+            >
+              {[
+                { value: 'today', label: 'Today' },
+                { value: 'last7', label: 'Last 7 days' },
+                { value: 'last30', label: 'Last 30 days' },
+              ]
+                .filter((opt) => includeBySearch(opt.label))
+                .map((opt) => (
+                  <label
+                    key={opt.value}
+                    className="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-(--txt-primary) hover:bg-(--bg-layer-1-hover)"
+                  >
+                    <input
+                      type="radio"
+                      name="projects-created-date"
+                      checked={createdDateFilter === opt.value}
+                      onChange={() => updateParam('createdDate', opt.value)}
+                      className="border-(--border-subtle)"
+                    />
+                    <span>{opt.label}</span>
+                  </label>
+                ))}
+              <button
+                type="button"
+                onClick={() => updateParam('createdDate')}
+                className="px-3 py-1 text-sm text-(--txt-secondary) hover:text-(--txt-primary)"
+              >
+                Clear date
+              </button>
+            </CollapsibleSection>
+            <CollapsibleSection
+              title="Access"
+              open={projectsFilterSectionOpen.access}
+              onToggle={() =>
+                setProjectsFilterSectionOpen((prev) => ({ ...prev, access: !prev.access }))
+              }
+            >
+              {[
+                { value: 'private' as const, label: 'Private', icon: <IconLock /> },
+                { value: 'public' as const, label: 'Public', icon: <IconGlobe /> },
+              ]
+                .filter((opt) => includeBySearch(opt.label))
+                .map((opt) => (
+                  <label
+                    key={opt.value}
+                    className="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-(--txt-primary) hover:bg-(--bg-layer-1-hover)"
+                  >
+                    <input
+                      type="checkbox"
+                      checked={selectedAccess.includes(opt.value)}
+                      onChange={() => toggleCsvParam('access', opt.value)}
+                      className="rounded border-(--border-subtle)"
+                    />
+                    <span className="text-(--txt-icon-tertiary)">{opt.icon}</span>
+                    <span>{opt.label}</span>
+                  </label>
+                ))}
+            </CollapsibleSection>
+            <CollapsibleSection
+              title="Lead"
+              open={projectsFilterSectionOpen.lead}
+              onToggle={() =>
+                setProjectsFilterSectionOpen((prev) => ({ ...prev, lead: !prev.lead }))
+              }
+            >
+              {leadOptionsToRender.map((opt) => (
+                <label
+                  key={`lead-${opt.id}`}
+                  className="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-(--txt-primary) hover:bg-(--bg-layer-1-hover)"
+                >
+                  <input
+                    type="checkbox"
+                    checked={selectedLeadIds.includes(opt.id)}
+                    onChange={() => toggleCsvParam('lead', opt.id)}
+                    className="rounded border-(--border-subtle)"
+                  />
+                  <Avatar
+                    name={opt.label}
+                    src={opt.avatarUrl}
+                    size="sm"
+                    className="h-5 w-5 text-[10px]"
+                  />
+                  <span className="truncate">{opt.label}</span>
+                </label>
+              ))}
+              {visibleLeadOptions.length > 5 && (
+                <button
+                  type="button"
+                  onClick={() => setShowAllLeads((prev) => !prev)}
+                  className="px-3 py-1 text-sm text-(--txt-secondary) hover:text-(--txt-primary)"
+                >
+                  {showAllLeads ? 'View less' : 'View all'}
+                </button>
+              )}
+            </CollapsibleSection>
+            <CollapsibleSection
+              title="Members"
+              open={projectsFilterSectionOpen.members}
+              onToggle={() =>
+                setProjectsFilterSectionOpen((prev) => ({ ...prev, members: !prev.members }))
+              }
+            >
+              {memberOptionsToRender.map((opt) => (
+                <label
+                  key={`member-${opt.id}`}
+                  className="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-(--txt-primary) hover:bg-(--bg-layer-1-hover)"
+                >
+                  <input
+                    type="checkbox"
+                    checked={selectedMemberIds.includes(opt.id)}
+                    onChange={() => toggleCsvParam('members', opt.id)}
+                    className="rounded border-(--border-subtle)"
+                  />
+                  <Avatar
+                    name={opt.label}
+                    src={opt.avatarUrl}
+                    size="sm"
+                    className="h-5 w-5 text-[10px]"
+                  />
+                  <span className="truncate">{opt.label}</span>
+                </label>
+              ))}
+              {visibleMemberOptions.length > 5 && (
+                <button
+                  type="button"
+                  onClick={() => setShowAllMembers((prev) => !prev)}
+                  className="px-3 py-1 text-sm text-(--txt-secondary) hover:text-(--txt-primary)"
+                >
+                  {showAllMembers ? 'View less' : 'View all'}
+                </button>
+              )}
+            </CollapsibleSection>
+          </div>
+        </Dropdown>
         <Link to={`${baseUrl}/projects?createProject=1`}>
           <Button size="sm" className="gap-1.5 text-[13px] font-medium">
             <IconPlus />
diff --git a/ui/src/pages/ProjectsListPage.tsx b/ui/src/pages/ProjectsListPage.tsx
index 7427c8f..d881dd2 100644
--- a/ui/src/pages/ProjectsListPage.tsx
+++ b/ui/src/pages/ProjectsListPage.tsx
@@ -8,6 +8,7 @@ import { workspaceService } from '../services/workspaceService';
 import { projectService } from '../services/projectService';
 import { favoriteService } from '../services/favoriteService';
 import { useFavorites } from '../contexts/FavoritesContext';
+import { useAuth } from '../contexts/AuthContext';
 import type { WorkspaceApiResponse, ProjectApiResponse } from '../api/types';
 
 const MAX_AVATARS = 3;
@@ -55,8 +56,45 @@ function getCoverGradient(projectId: string): string {
 
 export function ProjectsListPage() {
   const { workspaceSlug } = useParams<{ workspaceSlug: string }>();
+  const { user: authUser } = useAuth();
   const [searchParams, setSearchParams] = useSearchParams();
   const searchQuery = (searchParams.get('q') ?? '').toLowerCase().trim();
+  const parseCsvParam = (key: string) =>
+    (searchParams.get(key) ?? '')
+      .split(',')
+      .map((v) => v.trim())
+      .filter(Boolean);
+  const accessFilters = parseCsvParam('access').filter(
+    (value): value is 'private' | 'public' => value === 'private' || value === 'public',
+  );
+  const leadFilters = parseCsvParam('lead');
+  const memberFilters = parseCsvParam('members');
+  const myProjectsOnly = searchParams.get('myProjects') === '1';
+  const sortFieldParam = searchParams.get('sortField');
+  const sortDirParam = searchParams.get('sortDir');
+  const sortParam = searchParams.get('sort');
+  const sortField =
+    sortFieldParam === 'manual' ||
+    sortFieldParam === 'name' ||
+    sortFieldParam === 'created_date' ||
+    sortFieldParam === 'member_count'
+      ? sortFieldParam
+      : sortParam === 'name_asc' || sortParam === 'name_desc'
+        ? 'name'
+        : 'created_date';
+  const sortDir =
+    sortDirParam === 'asc' || sortDirParam === 'desc'
+      ? sortDirParam
+      : sortParam === 'created_asc' || sortParam === 'name_asc'
+        ? 'asc'
+        : 'desc';
+  const createdDateFilter =
+    searchParams.get('createdDate') === 'today' ||
+    searchParams.get('createdDate') === 'last7' ||
+    searchParams.get('createdDate') === 'last30'
+      ? (searchParams.get('createdDate') as 'today' | 'last7' | 'last30')
+      : '';
+  const favoritesOnly = searchParams.get('filter') === 'favorites';
   const [workspace, setWorkspace] = useState<WorkspaceApiResponse | null>(null);
   const [allProjects, setAllProjects] = useState<ProjectApiResponse[]>([]);
   const [membersByProject, setMembersByProject] = useState<Record<string, string[]>>({});
@@ -180,14 +218,83 @@ export function ProjectsListPage() {
     };
   }, [workspaceSlug, allProjects]);
 
-  const projects = searchQuery
-    ? allProjects.filter(
-        (p) =>
-          p.name.toLowerCase().includes(searchQuery) ||
-          p.identifier?.toLowerCase().includes(searchQuery) ||
-          p.description?.toLowerCase().includes(searchQuery),
-      )
-    : allProjects;
+  const projectOrderById = new Map(allProjects.map((p, index) => [p.id, index]));
+
+  const projects = allProjects
+    .filter((p) => {
+      if (!searchQuery) return true;
+      return (
+        p.name.toLowerCase().includes(searchQuery) ||
+        p.identifier?.toLowerCase().includes(searchQuery) ||
+        p.description?.toLowerCase().includes(searchQuery)
+      );
+    })
+    .filter((p) => (favoritesOnly ? favoriteProjectIds.includes(p.id) : true))
+    .filter((p) => {
+      if (accessFilters.length === 0) return true;
+      const accessValue: 'private' | 'public' = p.guest_view_all_features ? 'public' : 'private';
+      return accessFilters.includes(accessValue);
+    })
+    .filter((p) => {
+      if (leadFilters.length === 0) return true;
+      return !!p.project_lead_id && leadFilters.includes(p.project_lead_id);
+    })
+    .filter((p) => {
+      if (memberFilters.length === 0) return true;
+      const memberIds = membersByProject[p.id] ?? [];
+      return memberFilters.some(
+        (memberId) => memberIds.includes(memberId) || p.project_lead_id === memberId,
+      );
+    })
+    .filter((p) => {
+      if (!myProjectsOnly || !authUser) return true;
+      const memberIds = membersByProject[p.id] ?? [];
+      return memberIds.includes(authUser.id) || p.project_lead_id === authUser.id;
+    })
+    .filter((p) => {
+      if (!createdDateFilter) return true;
+      const createdAtMs = Date.parse(p.created_at ?? '');
+      if (!Number.isFinite(createdAtMs)) return false;
+      const now = new Date();
+      if (createdDateFilter === 'today') {
+        const startOfDay = new Date(now);
+        startOfDay.setHours(0, 0, 0, 0);
+        return createdAtMs >= startOfDay.getTime();
+      }
+      const days = createdDateFilter === 'last7' ? 7 : 30;
+      const threshold = now.getTime() - days * 24 * 60 * 60 * 1000;
+      return createdAtMs >= threshold;
+    })
+    .slice()
+    .sort((a, b) => {
+      const createdA = Date.parse(a.created_at ?? '') || 0;
+      const createdB = Date.parse(b.created_at ?? '') || 0;
+      const membersA = new Set([
+        ...(membersByProject[a.id] ?? []),
+        ...(a.project_lead_id ? [a.project_lead_id] : []),
+      ]).size;
+      const membersB = new Set([
+        ...(membersByProject[b.id] ?? []),
+        ...(b.project_lead_id ? [b.project_lead_id] : []),
+      ]).size;
+      let result = 0;
+      switch (sortField) {
+        case 'name':
+          result = a.name.localeCompare(b.name);
+          break;
+        case 'member_count':
+          result = membersA - membersB;
+          break;
+        case 'manual':
+          result = (projectOrderById.get(a.id) ?? 0) - (projectOrderById.get(b.id) ?? 0);
+          break;
+        case 'created_date':
+        default:
+          result = createdA - createdB;
+          break;
+      }
+      return sortDir === 'desc' ? -result : result;
+    });
 
   if (loading) {
     return (
@@ -327,7 +434,18 @@ export function ProjectsListPage() {
           );
         })}
       </div>
-      {projects.length === 0 && <p className="text-sm text-(--txt-tertiary)">No projects yet.</p>}
+      {projects.length === 0 && (
+        <p className="text-sm text-(--txt-tertiary)">
+          {favoritesOnly ||
+          accessFilters.length > 0 ||
+          leadFilters.length > 0 ||
+          memberFilters.length > 0 ||
+          !!createdDateFilter ||
+          myProjectsOnly
+            ? 'No projects match the selected filters.'
+            : 'No projects yet.'}
+        </p>
+      )}
     </div>
   );
 }

From 50a58070107142c724480156ae1ebc23c1af99d3 Mon Sep 17 00:00:00 2001
From: Rafetikus <raufjabarov1@gmail.com>
Date: Mon, 20 Apr 2026 13:10:00 +0400
Subject: [PATCH 2/7] refactor(ui): update layout, pages for ui

---
 ui/src/components/layout/PageHeader.tsx | 30 +++++++++----------------
 ui/src/pages/ProjectsListPage.tsx       | 11 +++------
 2 files changed, 13 insertions(+), 28 deletions(-)

diff --git a/ui/src/components/layout/PageHeader.tsx b/ui/src/components/layout/PageHeader.tsx
index e574fae..653e811 100644
--- a/ui/src/components/layout/PageHeader.tsx
+++ b/ui/src/components/layout/PageHeader.tsx
@@ -922,15 +922,10 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
       | 'createdDate',
     value?: string,
   ) => {
-    setSearchParams(
-      (prev) => {
-        const next = new URLSearchParams(prev);
-        if (!value) next.delete(key);
-        else next.set(key, value);
-        return next;
-      },
-      { replace: true },
-    );
+    const next = new URLSearchParams(searchParams);
+    if (!value) next.delete(key);
+    else next.set(key, value);
+    setSearchParams(next, { replace: true });
   };
   const updateParams = (
     updates: Partial<
@@ -949,17 +944,12 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
       >
     >,
   ) => {
-    setSearchParams(
-      (prev) => {
-        const next = new URLSearchParams(prev);
-        Object.entries(updates).forEach(([key, value]) => {
-          if (!value) next.delete(key);
-          else next.set(key, value);
-        });
-        return next;
-      },
-      { replace: true },
-    );
+    const next = new URLSearchParams(searchParams);
+    Object.entries(updates).forEach(([key, value]) => {
+      if (!value) next.delete(key);
+      else next.set(key, value);
+    });
+    setSearchParams(next, { replace: true });
   };
   const setCsvParam = (key: 'access' | 'lead' | 'members', values: string[]) => {
     updateParam(key, values.length ? values.join(',') : undefined);
diff --git a/ui/src/pages/ProjectsListPage.tsx b/ui/src/pages/ProjectsListPage.tsx
index d881dd2..00a408a 100644
--- a/ui/src/pages/ProjectsListPage.tsx
+++ b/ui/src/pages/ProjectsListPage.tsx
@@ -106,14 +106,9 @@ export function ProjectsListPage() {
   const createProjectOpen = searchParams.get('createProject') === '1';
 
   const closeCreateModal = () => {
-    setSearchParams(
-      (prev) => {
-        const next = new URLSearchParams(prev);
-        next.delete('createProject');
-        return next;
-      },
-      { replace: true },
-    );
+    const next = new URLSearchParams(searchParams);
+    next.delete('createProject');
+    setSearchParams(next, { replace: true });
   };
 
   useEffect(() => {

From 5862741482be77628bfe56b407058c52e7c24bdd Mon Sep 17 00:00:00 2001
From: Rafetikus <raufjabarov1@gmail.com>
Date: Mon, 20 Apr 2026 13:33:16 +0400
Subject: [PATCH 3/7] refactor(ui): update layout, pages for ui

---
 ui/src/components/layout/PageHeader.tsx |  2 +-
 ui/src/pages/ProjectsListPage.tsx       | 44 ++++++++++++++-----------
 2 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/ui/src/components/layout/PageHeader.tsx b/ui/src/components/layout/PageHeader.tsx
index 653e811..f7d3b70 100644
--- a/ui/src/components/layout/PageHeader.tsx
+++ b/ui/src/components/layout/PageHeader.tsx
@@ -847,7 +847,7 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
       ? sortDirParam
       : legacySortParam === 'created_asc' || legacySortParam === 'name_asc'
         ? 'asc'
-        : 'desc';
+        : 'asc';
   const parseCsvParam = (key: string) =>
     (searchParams.get(key) ?? '')
       .split(',')
diff --git a/ui/src/pages/ProjectsListPage.tsx b/ui/src/pages/ProjectsListPage.tsx
index 00a408a..5ebac94 100644
--- a/ui/src/pages/ProjectsListPage.tsx
+++ b/ui/src/pages/ProjectsListPage.tsx
@@ -87,7 +87,7 @@ export function ProjectsListPage() {
       ? sortDirParam
       : sortParam === 'created_asc' || sortParam === 'name_asc'
         ? 'asc'
-        : 'desc';
+        : 'asc';
   const createdDateFilter =
     searchParams.get('createdDate') === 'today' ||
     searchParams.get('createdDate') === 'last7' ||
@@ -215,7 +215,7 @@ export function ProjectsListPage() {
 
   const projectOrderById = new Map(allProjects.map((p, index) => [p.id, index]));
 
-  const projects = allProjects
+  const filteredProjects = allProjects
     .filter((p) => {
       if (!searchQuery) return true;
       return (
@@ -259,37 +259,38 @@ export function ProjectsListPage() {
       const days = createdDateFilter === 'last7' ? 7 : 30;
       const threshold = now.getTime() - days * 24 * 60 * 60 * 1000;
       return createdAtMs >= threshold;
-    })
-    .slice()
+    });
+
+  const projects = filteredProjects
+    .map((project) => ({
+      project,
+      createdAtMs: Date.parse(project.created_at ?? '') || 0,
+      membersCount: new Set([
+        ...(membersByProject[project.id] ?? []),
+        ...(project.project_lead_id ? [project.project_lead_id] : []),
+      ]).size,
+    }))
     .sort((a, b) => {
-      const createdA = Date.parse(a.created_at ?? '') || 0;
-      const createdB = Date.parse(b.created_at ?? '') || 0;
-      const membersA = new Set([
-        ...(membersByProject[a.id] ?? []),
-        ...(a.project_lead_id ? [a.project_lead_id] : []),
-      ]).size;
-      const membersB = new Set([
-        ...(membersByProject[b.id] ?? []),
-        ...(b.project_lead_id ? [b.project_lead_id] : []),
-      ]).size;
       let result = 0;
       switch (sortField) {
         case 'name':
-          result = a.name.localeCompare(b.name);
+          result = a.project.name.localeCompare(b.project.name);
           break;
         case 'member_count':
-          result = membersA - membersB;
+          result = a.membersCount - b.membersCount;
           break;
         case 'manual':
-          result = (projectOrderById.get(a.id) ?? 0) - (projectOrderById.get(b.id) ?? 0);
+          result =
+            (projectOrderById.get(a.project.id) ?? 0) - (projectOrderById.get(b.project.id) ?? 0);
           break;
         case 'created_date':
         default:
-          result = createdA - createdB;
+          result = a.createdAtMs - b.createdAtMs;
           break;
       }
       return sortDir === 'desc' ? -result : result;
-    });
+    })
+    .map(({ project }) => project);
 
   if (loading) {
     return (
@@ -432,12 +433,15 @@ export function ProjectsListPage() {
       {projects.length === 0 && (
         <p className="text-sm text-(--txt-tertiary)">
           {favoritesOnly ||
+          !!searchQuery ||
           accessFilters.length > 0 ||
           leadFilters.length > 0 ||
           memberFilters.length > 0 ||
           !!createdDateFilter ||
           myProjectsOnly
-            ? 'No projects match the selected filters.'
+            ? searchQuery
+              ? 'No results match your search'
+              : 'No projects match the selected filters.'
             : 'No projects yet.'}
         </p>
       )}

From 6174b308373037d73e10e9ea65e6bef091b251fc Mon Sep 17 00:00:00 2001
From: Rafetikus <raufjabarov1@gmail.com>
Date: Mon, 20 Apr 2026 13:59:30 +0400
Subject: [PATCH 4/7] refactor(ui): update pages for ui

---
 ui/src/pages/ProjectsListPage.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/ui/src/pages/ProjectsListPage.tsx b/ui/src/pages/ProjectsListPage.tsx
index 5ebac94..21c5359 100644
--- a/ui/src/pages/ProjectsListPage.tsx
+++ b/ui/src/pages/ProjectsListPage.tsx
@@ -292,6 +292,15 @@ export function ProjectsListPage() {
     })
     .map(({ project }) => project);
 
+  const hasActiveFiltersOrSearch =
+    !!searchQuery ||
+    favoritesOnly ||
+    accessFilters.length > 0 ||
+    leadFilters.length > 0 ||
+    memberFilters.length > 0 ||
+    !!createdDateFilter ||
+    myProjectsOnly;
+
   if (loading) {
     return (
       <div className="flex items-center justify-center p-8 text-sm text-(--txt-tertiary)">
@@ -432,13 +441,7 @@ export function ProjectsListPage() {
       </div>
       {projects.length === 0 && (
         <p className="text-sm text-(--txt-tertiary)">
-          {favoritesOnly ||
-          !!searchQuery ||
-          accessFilters.length > 0 ||
-          leadFilters.length > 0 ||
-          memberFilters.length > 0 ||
-          !!createdDateFilter ||
-          myProjectsOnly
+          {hasActiveFiltersOrSearch
             ? searchQuery
               ? 'No results match your search'
               : 'No projects match the selected filters.'

From 30836dfb1a56a66472894894c893a7c81dbb19b3 Mon Sep 17 00:00:00 2001
From: Rafetikus <raufjabarov1@gmail.com>
Date: Sat, 25 Apr 2026 18:22:59 +0400
Subject: [PATCH 5/7] refactor(ui): update layout, pages for ui

---
 ui/src/components/layout/PageHeader.tsx | 134 ++++++++++++++++--------
 ui/src/pages/ProjectsListPage.tsx       |  16 ++-
 2 files changed, 102 insertions(+), 48 deletions(-)

diff --git a/ui/src/components/layout/PageHeader.tsx b/ui/src/components/layout/PageHeader.tsx
index f7d3b70..036fa9e 100644
--- a/ui/src/components/layout/PageHeader.tsx
+++ b/ui/src/components/layout/PageHeader.tsx
@@ -862,10 +862,14 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
   const createdDateFilter =
     searchParams.get('createdDate') === 'today' ||
     searchParams.get('createdDate') === 'last7' ||
-    searchParams.get('createdDate') === 'last30'
-      ? (searchParams.get('createdDate') as 'today' | 'last7' | 'last30')
+    searchParams.get('createdDate') === 'last30' ||
+    searchParams.get('createdDate') === 'custom'
+      ? (searchParams.get('createdDate') as 'today' | 'last7' | 'last30' | 'custom')
       : '';
+  const createdAfter = searchParams.get('createdAfter');
+  const createdBefore = searchParams.get('createdBefore');
   const [projectsDropdownOpen, setProjectsDropdownOpen] = useState<string | null>(null);
+  const [projectsDateRangeModalOpen, setProjectsDateRangeModalOpen] = useState(false);
   const [searchOpen, setSearchOpen] = useState(!!searchQuery);
   const [projectsFiltersSearch, setProjectsFiltersSearch] = useState('');
   const [workspaceMembers, setWorkspaceMembers] = useState<WorkspaceMemberApiResponse[]>([]);
@@ -919,7 +923,9 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
       | 'lead'
       | 'members'
       | 'myProjects'
-      | 'createdDate',
+      | 'createdDate'
+      | 'createdAfter'
+      | 'createdBefore',
     value?: string,
   ) => {
     const next = new URLSearchParams(searchParams);
@@ -939,7 +945,9 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
         | 'lead'
         | 'members'
         | 'myProjects'
-        | 'createdDate',
+        | 'createdDate'
+        | 'createdAfter'
+        | 'createdBefore',
         string | undefined
       >
     >,
@@ -1072,7 +1080,11 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
                     : 'text-(--txt-secondary) hover:bg-(--bg-layer-1-hover)'
                 }`}
                 onClick={() => {
-                  updateParams({ sortField: opt.value, sort: undefined });
+                  updateParams({
+                    sortField: opt.value,
+                    sort: undefined,
+                    ...(opt.value === 'manual' ? { sortDir: undefined } : {}),
+                  });
                 }}
               >
                 <span>{opt.label}</span>
@@ -1086,6 +1098,7 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
             { value: 'desc', label: 'Descending' },
           ].map((opt) => {
             const active = sortDir === opt.value;
+            const disabled = sortField === 'manual';
             return (
               <button
                 key={opt.value}
@@ -1094,8 +1107,10 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
                   active
                     ? 'text-(--txt-primary)'
                     : 'text-(--txt-secondary) hover:bg-(--bg-layer-1-hover)'
-                }`}
+                } ${disabled ? 'cursor-not-allowed opacity-50 hover:bg-transparent' : ''}`}
+                disabled={disabled}
                 onClick={() => {
+                  if (disabled) return;
                   updateParams({ sortDir: opt.value, sort: undefined });
                 }}
               >
@@ -1155,45 +1170,6 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
               />
               <span>My projects</span>
             </label>
-            <CollapsibleSection
-              title="Created date"
-              open={projectsFilterSectionOpen.createdDate}
-              onToggle={() =>
-                setProjectsFilterSectionOpen((prev) => ({
-                  ...prev,
-                  createdDate: !prev.createdDate,
-                }))
-              }
-            >
-              {[
-                { value: 'today', label: 'Today' },
-                { value: 'last7', label: 'Last 7 days' },
-                { value: 'last30', label: 'Last 30 days' },
-              ]
-                .filter((opt) => includeBySearch(opt.label))
-                .map((opt) => (
-                  <label
-                    key={opt.value}
-                    className="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-(--txt-primary) hover:bg-(--bg-layer-1-hover)"
-                  >
-                    <input
-                      type="radio"
-                      name="projects-created-date"
-                      checked={createdDateFilter === opt.value}
-                      onChange={() => updateParam('createdDate', opt.value)}
-                      className="border-(--border-subtle)"
-                    />
-                    <span>{opt.label}</span>
-                  </label>
-                ))}
-              <button
-                type="button"
-                onClick={() => updateParam('createdDate')}
-                className="px-3 py-1 text-sm text-(--txt-secondary) hover:text-(--txt-primary)"
-              >
-                Clear date
-              </button>
-            </CollapsibleSection>
             <CollapsibleSection
               title="Access"
               open={projectsFilterSectionOpen.access}
@@ -1296,6 +1272,59 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
                 </button>
               )}
             </CollapsibleSection>
+            <CollapsibleSection
+              title="Created date"
+              open={projectsFilterSectionOpen.createdDate}
+              onToggle={() =>
+                setProjectsFilterSectionOpen((prev) => ({
+                  ...prev,
+                  createdDate: !prev.createdDate,
+                }))
+              }
+            >
+              {[
+                { value: 'today', label: 'Today' },
+                { value: 'last7', label: 'Last 7 days' },
+                { value: 'last30', label: 'Last 30 days' },
+                { value: 'custom', label: 'Custom' },
+              ]
+                .filter((opt) => includeBySearch(opt.label))
+                .map((opt) => {
+                  const active = createdDateFilter === opt.value;
+                  return (
+                    <label
+                      key={opt.value}
+                      className="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-(--txt-primary) hover:bg-(--bg-layer-1-hover)"
+                    >
+                      <input
+                        type="checkbox"
+                        checked={active}
+                        onChange={() => {
+                          if (active) {
+                            updateParams({
+                              createdDate: undefined,
+                              createdAfter: undefined,
+                              createdBefore: undefined,
+                            });
+                            return;
+                          }
+                          if (opt.value === 'custom') {
+                            setProjectsDateRangeModalOpen(true);
+                            return;
+                          }
+                          updateParams({
+                            createdDate: opt.value,
+                            createdAfter: undefined,
+                            createdBefore: undefined,
+                          });
+                        }}
+                        className="rounded border-(--border-subtle)"
+                      />
+                      <span>{opt.label}</span>
+                    </label>
+                  );
+                })}
+            </CollapsibleSection>
           </div>
         </Dropdown>
         <Link to={`${baseUrl}/projects?createProject=1`}>
@@ -1305,6 +1334,21 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
           </Button>
         </Link>
       </div>
+      <DateRangeModal
+        open={projectsDateRangeModalOpen}
+        onClose={() => setProjectsDateRangeModalOpen(false)}
+        title="Created date range"
+        after={createdAfter}
+        before={createdBefore}
+        onApply={(after, before) => {
+          updateParams({
+            createdDate: 'custom',
+            createdAfter: after,
+            createdBefore: before,
+          });
+          setProjectsDateRangeModalOpen(false);
+        }}
+      />
     </>
   );
 }
diff --git a/ui/src/pages/ProjectsListPage.tsx b/ui/src/pages/ProjectsListPage.tsx
index 21c5359..8eac11a 100644
--- a/ui/src/pages/ProjectsListPage.tsx
+++ b/ui/src/pages/ProjectsListPage.tsx
@@ -91,9 +91,12 @@ export function ProjectsListPage() {
   const createdDateFilter =
     searchParams.get('createdDate') === 'today' ||
     searchParams.get('createdDate') === 'last7' ||
-    searchParams.get('createdDate') === 'last30'
-      ? (searchParams.get('createdDate') as 'today' | 'last7' | 'last30')
+    searchParams.get('createdDate') === 'last30' ||
+    searchParams.get('createdDate') === 'custom'
+      ? (searchParams.get('createdDate') as 'today' | 'last7' | 'last30' | 'custom')
       : '';
+  const createdAfter = searchParams.get('createdAfter');
+  const createdBefore = searchParams.get('createdBefore');
   const favoritesOnly = searchParams.get('filter') === 'favorites';
   const [workspace, setWorkspace] = useState<WorkspaceApiResponse | null>(null);
   const [allProjects, setAllProjects] = useState<ProjectApiResponse[]>([]);
@@ -247,15 +250,21 @@ export function ProjectsListPage() {
       return memberIds.includes(authUser.id) || p.project_lead_id === authUser.id;
     })
     .filter((p) => {
-      if (!createdDateFilter) return true;
       const createdAtMs = Date.parse(p.created_at ?? '');
       if (!Number.isFinite(createdAtMs)) return false;
+      if (!createdDateFilter) return true;
       const now = new Date();
       if (createdDateFilter === 'today') {
         const startOfDay = new Date(now);
         startOfDay.setHours(0, 0, 0, 0);
         return createdAtMs >= startOfDay.getTime();
       }
+      if (createdDateFilter === 'custom') {
+        const afterMs = createdAfter ? Date.parse(createdAfter) : NaN;
+        const beforeMs = createdBefore ? Date.parse(createdBefore) : NaN;
+        if (!Number.isFinite(afterMs) || !Number.isFinite(beforeMs)) return true;
+        return createdAtMs >= afterMs && createdAtMs <= beforeMs + (24 * 60 * 60 * 1000 - 1);
+      }
       const days = createdDateFilter === 'last7' ? 7 : 30;
       const threshold = now.getTime() - days * 24 * 60 * 60 * 1000;
       return createdAtMs >= threshold;
@@ -288,6 +297,7 @@ export function ProjectsListPage() {
           result = a.createdAtMs - b.createdAtMs;
           break;
       }
+      if (sortField === 'manual') return result;
       return sortDir === 'desc' ? -result : result;
     })
     .map(({ project }) => project);

From 47f6ffeb10612b4ecd2eb5e3f6a4f10d3c21c3e5 Mon Sep 17 00:00:00 2001
From: Rafetikus <raufjabarov1@gmail.com>
Date: Sat, 25 Apr 2026 18:35:25 +0400
Subject: [PATCH 6/7] feat(projects): extract search parameter parsing to
 utility function

---
 ui/src/components/layout/PageHeader.tsx | 53 +++++-------------
 ui/src/lib/projectsListSearchParams.ts  | 74 +++++++++++++++++++++++++
 ui/src/pages/ProjectsListPage.tsx       | 54 +++++-------------
 3 files changed, 102 insertions(+), 79 deletions(-)
 create mode 100644 ui/src/lib/projectsListSearchParams.ts

diff --git a/ui/src/components/layout/PageHeader.tsx b/ui/src/components/layout/PageHeader.tsx
index 036fa9e..c191d79 100644
--- a/ui/src/components/layout/PageHeader.tsx
+++ b/ui/src/components/layout/PageHeader.tsx
@@ -59,6 +59,7 @@ import {
 import { PROJECT_VIEWS_FILTER_EVENT } from '../../lib/projectViewsEvents';
 import { slugify } from '../../lib/slug';
 import { MODULE_WORK_ITEMS_COUNT_EVENT } from '../../lib/moduleWorkItemsPrefs';
+import { parseProjectsListSearchParams } from '../../lib/projectsListSearchParams';
 import { ModuleDetailHeader } from './ModuleDetailHeader';
 
 export type ProjectSection = 'issues' | 'cycles' | 'modules' | 'views' | 'pages';
@@ -830,44 +831,17 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
   const { user: authUser } = useAuth();
   const [searchParams, setSearchParams] = useSearchParams();
   const searchQuery = searchParams.get('q') ?? '';
-  const sortFieldParam = searchParams.get('sortField');
-  const sortDirParam = searchParams.get('sortDir');
-  const legacySortParam = searchParams.get('sort');
-  const sortField =
-    sortFieldParam === 'manual' ||
-    sortFieldParam === 'name' ||
-    sortFieldParam === 'created_date' ||
-    sortFieldParam === 'member_count'
-      ? sortFieldParam
-      : legacySortParam === 'name_asc' || legacySortParam === 'name_desc'
-        ? 'name'
-        : 'created_date';
-  const sortDir =
-    sortDirParam === 'asc' || sortDirParam === 'desc'
-      ? sortDirParam
-      : legacySortParam === 'created_asc' || legacySortParam === 'name_asc'
-        ? 'asc'
-        : 'asc';
-  const parseCsvParam = (key: string) =>
-    (searchParams.get(key) ?? '')
-      .split(',')
-      .map((v) => v.trim())
-      .filter(Boolean);
-  const selectedAccess = parseCsvParam('access').filter(
-    (value): value is 'private' | 'public' => value === 'private' || value === 'public',
-  );
-  const selectedLeadIds = parseCsvParam('lead');
-  const selectedMemberIds = parseCsvParam('members');
-  const myProjectsOnly = searchParams.get('myProjects') === '1';
-  const createdDateFilter =
-    searchParams.get('createdDate') === 'today' ||
-    searchParams.get('createdDate') === 'last7' ||
-    searchParams.get('createdDate') === 'last30' ||
-    searchParams.get('createdDate') === 'custom'
-      ? (searchParams.get('createdDate') as 'today' | 'last7' | 'last30' | 'custom')
-      : '';
-  const createdAfter = searchParams.get('createdAfter');
-  const createdBefore = searchParams.get('createdBefore');
+  const {
+    sortField,
+    sortDir,
+    accessFilters: selectedAccess,
+    leadFilters: selectedLeadIds,
+    memberFilters: selectedMemberIds,
+    myProjectsOnly,
+    createdDateFilter,
+    createdAfter,
+    createdBefore,
+  } = parseProjectsListSearchParams(searchParams);
   const [projectsDropdownOpen, setProjectsDropdownOpen] = useState<string | null>(null);
   const [projectsDateRangeModalOpen, setProjectsDateRangeModalOpen] = useState(false);
   const [searchOpen, setSearchOpen] = useState(!!searchQuery);
@@ -963,7 +937,8 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
     updateParam(key, values.length ? values.join(',') : undefined);
   };
   const toggleCsvParam = (key: 'access' | 'lead' | 'members', value: string) => {
-    const current = parseCsvParam(key);
+    const current =
+      key === 'access' ? selectedAccess : key === 'lead' ? selectedLeadIds : selectedMemberIds;
     setCsvParam(
       key,
       current.includes(value) ? current.filter((v) => v !== value) : [...current, value],
diff --git a/ui/src/lib/projectsListSearchParams.ts b/ui/src/lib/projectsListSearchParams.ts
new file mode 100644
index 0000000..c322232
--- /dev/null
+++ b/ui/src/lib/projectsListSearchParams.ts
@@ -0,0 +1,74 @@
+export type ProjectsSortField = 'manual' | 'name' | 'created_date' | 'member_count';
+export type ProjectsSortDir = 'asc' | 'desc';
+export type ProjectsCreatedDateFilter = '' | 'today' | 'last7' | 'last30' | 'custom';
+
+export interface ProjectsListSearchParamsState {
+  searchQuery: string;
+  sortField: ProjectsSortField;
+  sortDir: ProjectsSortDir;
+  accessFilters: Array<'private' | 'public'>;
+  leadFilters: string[];
+  memberFilters: string[];
+  myProjectsOnly: boolean;
+  createdDateFilter: ProjectsCreatedDateFilter;
+  createdAfter: string | null;
+  createdBefore: string | null;
+  favoritesOnly: boolean;
+}
+
+function parseCsvParam(searchParams: URLSearchParams, key: string): string[] {
+  return (searchParams.get(key) ?? '')
+    .split(',')
+    .map((value) => value.trim())
+    .filter(Boolean);
+}
+
+export function parseProjectsListSearchParams(
+  searchParams: URLSearchParams,
+): ProjectsListSearchParamsState {
+  const sortFieldParam = searchParams.get('sortField');
+  const sortDirParam = searchParams.get('sortDir');
+  const legacySortParam = searchParams.get('sort');
+  const createdDateParam = searchParams.get('createdDate');
+
+  const sortField: ProjectsSortField =
+    sortFieldParam === 'manual' ||
+    sortFieldParam === 'name' ||
+    sortFieldParam === 'created_date' ||
+    sortFieldParam === 'member_count'
+      ? sortFieldParam
+      : legacySortParam === 'name_asc' || legacySortParam === 'name_desc'
+        ? 'name'
+        : 'created_date';
+
+  const sortDir: ProjectsSortDir =
+    sortDirParam === 'asc' || sortDirParam === 'desc'
+      ? sortDirParam
+      : legacySortParam === 'created_asc' || legacySortParam === 'name_asc'
+        ? 'asc'
+        : 'asc';
+
+  const createdDateFilter: ProjectsCreatedDateFilter =
+    createdDateParam === 'today' ||
+    createdDateParam === 'last7' ||
+    createdDateParam === 'last30' ||
+    createdDateParam === 'custom'
+      ? createdDateParam
+      : '';
+
+  return {
+    searchQuery: (searchParams.get('q') ?? '').toLowerCase().trim(),
+    sortField,
+    sortDir,
+    accessFilters: parseCsvParam(searchParams, 'access').filter(
+      (value): value is 'private' | 'public' => value === 'private' || value === 'public',
+    ),
+    leadFilters: parseCsvParam(searchParams, 'lead'),
+    memberFilters: parseCsvParam(searchParams, 'members'),
+    myProjectsOnly: searchParams.get('myProjects') === '1',
+    createdDateFilter,
+    createdAfter: searchParams.get('createdAfter'),
+    createdBefore: searchParams.get('createdBefore'),
+    favoritesOnly: searchParams.get('filter') === 'favorites',
+  };
+}
diff --git a/ui/src/pages/ProjectsListPage.tsx b/ui/src/pages/ProjectsListPage.tsx
index 8eac11a..2985ed9 100644
--- a/ui/src/pages/ProjectsListPage.tsx
+++ b/ui/src/pages/ProjectsListPage.tsx
@@ -9,6 +9,7 @@ import { projectService } from '../services/projectService';
 import { favoriteService } from '../services/favoriteService';
 import { useFavorites } from '../contexts/FavoritesContext';
 import { useAuth } from '../contexts/AuthContext';
+import { parseProjectsListSearchParams } from '../lib/projectsListSearchParams';
 import type { WorkspaceApiResponse, ProjectApiResponse } from '../api/types';
 
 const MAX_AVATARS = 3;
@@ -58,46 +59,19 @@ export function ProjectsListPage() {
   const { workspaceSlug } = useParams<{ workspaceSlug: string }>();
   const { user: authUser } = useAuth();
   const [searchParams, setSearchParams] = useSearchParams();
-  const searchQuery = (searchParams.get('q') ?? '').toLowerCase().trim();
-  const parseCsvParam = (key: string) =>
-    (searchParams.get(key) ?? '')
-      .split(',')
-      .map((v) => v.trim())
-      .filter(Boolean);
-  const accessFilters = parseCsvParam('access').filter(
-    (value): value is 'private' | 'public' => value === 'private' || value === 'public',
-  );
-  const leadFilters = parseCsvParam('lead');
-  const memberFilters = parseCsvParam('members');
-  const myProjectsOnly = searchParams.get('myProjects') === '1';
-  const sortFieldParam = searchParams.get('sortField');
-  const sortDirParam = searchParams.get('sortDir');
-  const sortParam = searchParams.get('sort');
-  const sortField =
-    sortFieldParam === 'manual' ||
-    sortFieldParam === 'name' ||
-    sortFieldParam === 'created_date' ||
-    sortFieldParam === 'member_count'
-      ? sortFieldParam
-      : sortParam === 'name_asc' || sortParam === 'name_desc'
-        ? 'name'
-        : 'created_date';
-  const sortDir =
-    sortDirParam === 'asc' || sortDirParam === 'desc'
-      ? sortDirParam
-      : sortParam === 'created_asc' || sortParam === 'name_asc'
-        ? 'asc'
-        : 'asc';
-  const createdDateFilter =
-    searchParams.get('createdDate') === 'today' ||
-    searchParams.get('createdDate') === 'last7' ||
-    searchParams.get('createdDate') === 'last30' ||
-    searchParams.get('createdDate') === 'custom'
-      ? (searchParams.get('createdDate') as 'today' | 'last7' | 'last30' | 'custom')
-      : '';
-  const createdAfter = searchParams.get('createdAfter');
-  const createdBefore = searchParams.get('createdBefore');
-  const favoritesOnly = searchParams.get('filter') === 'favorites';
+  const {
+    searchQuery,
+    accessFilters,
+    leadFilters,
+    memberFilters,
+    myProjectsOnly,
+    sortField,
+    sortDir,
+    createdDateFilter,
+    createdAfter,
+    createdBefore,
+    favoritesOnly,
+  } = parseProjectsListSearchParams(searchParams);
   const [workspace, setWorkspace] = useState<WorkspaceApiResponse | null>(null);
   const [allProjects, setAllProjects] = useState<ProjectApiResponse[]>([]);
   const [membersByProject, setMembersByProject] = useState<Record<string, string[]>>({});

From cfd75806e248b5e89205bdddaf82eb3f720884e0 Mon Sep 17 00:00:00 2001
From: Rafetikus <raufjabarov1@gmail.com>
Date: Sat, 25 Apr 2026 19:51:20 +0400
Subject: [PATCH 7/7] refactor(ui): update layout, lib, pages for ui

---
 ui/src/components/layout/PageHeader.tsx | 11 +++++++++++
 ui/src/lib/projectsListSearchParams.ts  |  4 +++-
 ui/src/pages/ProjectsListPage.tsx       | 20 ++++++++++++++++----
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/layout/PageHeader.tsx b/ui/src/components/layout/PageHeader.tsx
index c191d79..43d65cb 100644
--- a/ui/src/components/layout/PageHeader.tsx
+++ b/ui/src/components/layout/PageHeader.tsx
@@ -841,6 +841,7 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
     createdDateFilter,
     createdAfter,
     createdBefore,
+    favoritesOnly,
   } = parseProjectsListSearchParams(searchParams);
   const [projectsDropdownOpen, setProjectsDropdownOpen] = useState<string | null>(null);
   const [projectsDateRangeModalOpen, setProjectsDateRangeModalOpen] = useState(false);
@@ -864,6 +865,7 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
     member_count: 'Number of members',
   };
   const activeFilterCount =
+    (favoritesOnly ? 1 : 0) +
     (myProjectsOnly ? 1 : 0) +
     (createdDateFilter ? 1 : 0) +
     selectedAccess.length +
@@ -1136,6 +1138,15 @@ function ProjectsHeader({ workspaceSlug }: { workspaceSlug: string }) {
             </div>
           </div>
           <div className="max-h-[70vh] overflow-y-auto">
+            <label className="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-(--txt-primary) hover:bg-(--bg-layer-1-hover)">
+              <input
+                type="checkbox"
+                checked={favoritesOnly}
+                onChange={() => updateParam('filter', favoritesOnly ? '' : 'favorites')}
+                className="rounded border-(--border-subtle)"
+              />
+              <span>Favorites</span>
+            </label>
             <label className="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-(--txt-primary) hover:bg-(--bg-layer-1-hover)">
               <input
                 type="checkbox"
diff --git a/ui/src/lib/projectsListSearchParams.ts b/ui/src/lib/projectsListSearchParams.ts
index c322232..899218e 100644
--- a/ui/src/lib/projectsListSearchParams.ts
+++ b/ui/src/lib/projectsListSearchParams.ts
@@ -46,7 +46,9 @@ export function parseProjectsListSearchParams(
       ? sortDirParam
       : legacySortParam === 'created_asc' || legacySortParam === 'name_asc'
         ? 'asc'
-        : 'asc';
+        : legacySortParam === 'created_desc' || legacySortParam === 'name_desc'
+          ? 'desc'
+          : 'asc';
 
   const createdDateFilter: ProjectsCreatedDateFilter =
     createdDateParam === 'today' ||
diff --git a/ui/src/pages/ProjectsListPage.tsx b/ui/src/pages/ProjectsListPage.tsx
index 2985ed9..139f765 100644
--- a/ui/src/pages/ProjectsListPage.tsx
+++ b/ui/src/pages/ProjectsListPage.tsx
@@ -9,6 +9,7 @@ import { projectService } from '../services/projectService';
 import { favoriteService } from '../services/favoriteService';
 import { useFavorites } from '../contexts/FavoritesContext';
 import { useAuth } from '../contexts/AuthContext';
+import { parseISODateLocal } from '../lib/dateOnly';
 import { parseProjectsListSearchParams } from '../lib/projectsListSearchParams';
 import type { WorkspaceApiResponse, ProjectApiResponse } from '../api/types';
 
@@ -224,9 +225,9 @@ export function ProjectsListPage() {
       return memberIds.includes(authUser.id) || p.project_lead_id === authUser.id;
     })
     .filter((p) => {
+      if (!createdDateFilter) return true;
       const createdAtMs = Date.parse(p.created_at ?? '');
       if (!Number.isFinite(createdAtMs)) return false;
-      if (!createdDateFilter) return true;
       const now = new Date();
       if (createdDateFilter === 'today') {
         const startOfDay = new Date(now);
@@ -234,10 +235,21 @@ export function ProjectsListPage() {
         return createdAtMs >= startOfDay.getTime();
       }
       if (createdDateFilter === 'custom') {
-        const afterMs = createdAfter ? Date.parse(createdAfter) : NaN;
-        const beforeMs = createdBefore ? Date.parse(createdBefore) : NaN;
+        const afterMs = createdAfter ? parseISODateLocal(createdAfter).getTime() : NaN;
+        const beforeDate = createdBefore ? parseISODateLocal(createdBefore) : null;
+        const beforeMs = beforeDate
+          ? new Date(
+              beforeDate.getFullYear(),
+              beforeDate.getMonth(),
+              beforeDate.getDate(),
+              23,
+              59,
+              59,
+              999,
+            ).getTime()
+          : NaN;
         if (!Number.isFinite(afterMs) || !Number.isFinite(beforeMs)) return true;
-        return createdAtMs >= afterMs && createdAtMs <= beforeMs + (24 * 60 * 60 * 1000 - 1);
+        return createdAtMs >= afterMs && createdAtMs <= beforeMs;
       }
       const days = createdDateFilter === 'last7' ? 7 : 30;
       const threshold = now.getTime() - days * 24 * 60 * 60 * 1000;