Merge fix/category-filter-position into main

Fix category chips rendering in wrong position (between search and add button). Chips now appear inline after the Categories toggle pill. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-13 01:27:20 +08:00 · 2026-03-13 01:27:20 +08:00 · 652be41da4
commit 652be41da4
parent bb5cbfa4b3 85a9882d26
4 changed files with 116 additions and 127 deletions
--- a/frontend/src/components/locations/LocationsPage.tsx
+++ b/frontend/src/components/locations/LocationsPage.tsx
@ -291,21 +291,19 @@ export default function LocationsPage() {
      <div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-2 md:gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
        <h1 className="font-heading text-xl md:text-2xl font-bold tracking-tight">Locations</h1>

-        <div className="w-full md:flex-1 md:w-auto min-w-0 order-last md:order-none">
-          <CategoryFilterBar
-            categories={orderedCategories}
-            activeFilters={activeFilters}
-            pinnedLabel="Frequent"
-            showPinned={showPinned}
-            onToggleAll={() => setActiveFilters([])}
-            onTogglePinned={() => setShowPinned((v) => !v)}
-            onToggleCategory={handleToggleCategory}
-            onSelectAllCategories={selectAllCategories}
-            onReorderCategories={reorderCategories}
-            searchValue={search}
-            onSearchChange={setSearch}
-          />
-        </div>
+        <CategoryFilterBar
+          categories={orderedCategories}
+          activeFilters={activeFilters}
+          pinnedLabel="Frequent"
+          showPinned={showPinned}
+          onToggleAll={() => setActiveFilters([])}
+          onTogglePinned={() => setShowPinned((v) => !v)}
+          onToggleCategory={handleToggleCategory}
+          onSelectAllCategories={selectAllCategories}
+          onReorderCategories={reorderCategories}
+          searchValue={search}
+          onSearchChange={setSearch}
+        />

        <Button onClick={() => setShowForm(true)} size="sm" aria-label="Add location">
          <Plus className="h-4 w-4 md:mr-2" /><span className="hidden md:inline">Add Location</span>
--- a/frontend/src/components/people/PeoplePage.tsx
+++ b/frontend/src/components/people/PeoplePage.tsx
@ -560,28 +560,26 @@ export default function PeoplePage() {
      {/* Header */}
      <div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-2 md:gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
        <h1 className="font-heading text-xl md:text-2xl font-bold tracking-tight">People</h1>
-        <div className="w-full md:flex-1 md:w-auto min-w-0 order-last md:order-none">
-          <CategoryFilterBar
-            activeFilters={activeFilters}
-            pinnedLabel="Favourites"
-            showPinned={showPinned}
-            categories={orderedCategories}
-            onToggleAll={toggleAll}
-            onTogglePinned={togglePinned}
-            onToggleCategory={toggleCategory}
-            onSelectAllCategories={selectAllCategories}
-            onReorderCategories={reorderCategories}
-            searchValue={search}
-            onSearchChange={setSearch}
-            extraPinnedFilters={[
-              {
-                label: 'Umbral',
-                isActive: showUmbralOnly,
-                onToggle: () => setShowUmbralOnly((p) => !p),
-              },
-            ]}
-          />
-        </div>
+        <CategoryFilterBar
+          activeFilters={activeFilters}
+          pinnedLabel="Favourites"
+          showPinned={showPinned}
+          categories={orderedCategories}
+          onToggleAll={toggleAll}
+          onTogglePinned={togglePinned}
+          onToggleCategory={toggleCategory}
+          onSelectAllCategories={selectAllCategories}
+          onReorderCategories={reorderCategories}
+          searchValue={search}
+          onSearchChange={setSearch}
+          extraPinnedFilters={[
+            {
+              label: 'Umbral',
+              isActive: showUmbralOnly,
+              onToggle: () => setShowUmbralOnly((p) => !p),
+            },
+          ]}
+        />
        <div className="relative" ref={addDropdownRef}>
          <div className="flex">
            <Button
--- a/frontend/src/components/shared/CategoryFilterBar.tsx
+++ b/frontend/src/components/shared/CategoryFilterBar.tsx
@ -146,90 +146,72 @@ export default function CategoryFilterBar({
  };

  return (
-    <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-2">
-      {/* Top row: pills + search */}
-      <div className="flex items-center gap-2 overflow-x-auto min-w-0 flex-1">
-        {/* All pill */}
-        <button
-          type="button"
-          onClick={onToggleAll}
-          aria-label="Show all"
-          className={pillBase}
-          style={isAllActive ? activePillStyle : undefined}
+    <div className="flex items-center gap-2 overflow-x-auto min-w-0 flex-1">
+      {/* All pill */}
+      <button
+        type="button"
+        onClick={onToggleAll}
+        aria-label="Show all"
+        className={pillBase}
+        style={isAllActive ? activePillStyle : undefined}
+      >
+        <span
+          className={
+            isAllActive ? '' : 'text-muted-foreground hover:text-foreground hover:bg-card-elevated'
+          }
        >
-          <span
-            className={
-              isAllActive ? '' : 'text-muted-foreground hover:text-foreground hover:bg-card-elevated'
-            }
-          >
-            All
+          All
+        </span>
+      </button>
+
+      {/* Pinned pill */}
+      <button
+        type="button"
+        onClick={onTogglePinned}
+        aria-label={`Toggle ${pinnedLabel}`}
+        className={pillBase}
+        style={showPinned ? activePillStyle : undefined}
+      >
+        <span className={showPinned ? '' : 'text-muted-foreground hover:text-foreground'}>
+          {pinnedLabel}
+        </span>
+      </button>
+
+      {/* Extra pinned filters (e.g. "Umbral") */}
+      {extraPinnedFilters.map((epf) => (
+        <button
+          key={epf.label}
+          type="button"
+          onClick={epf.onToggle}
+          aria-label={`Filter by ${epf.label}`}
+          className={pillBase}
+          style={epf.isActive ? activePillStyle : undefined}
+        >
+          <span className={epf.isActive ? '' : 'text-muted-foreground hover:text-foreground'}>
+            {epf.label}
          </span>
        </button>
+      ))}

-        {/* Pinned pill */}
+      {/* Categories pill */}
+      {categories.length > 0 && (
        <button
          type="button"
-          onClick={onTogglePinned}
-          aria-label={`Toggle ${pinnedLabel}`}
+          onClick={() => setOtherOpen((p) => !p)}
+          aria-label="Toggle category filters"
          className={pillBase}
-          style={showPinned ? activePillStyle : undefined}
+          style={otherOpen ? activePillStyle : undefined}
        >
-          <span className={showPinned ? '' : 'text-muted-foreground hover:text-foreground'}>
-            {pinnedLabel}
+          <span className={otherOpen ? '' : 'text-muted-foreground hover:text-foreground'}>
+            Categories
          </span>
        </button>
+      )}

-        {/* Extra pinned filters (e.g. "Umbral") */}
-        {extraPinnedFilters.map((epf) => (
-          <button
-            key={epf.label}
-            type="button"
-            onClick={epf.onToggle}
-            aria-label={`Filter by ${epf.label}`}
-            className={pillBase}
-            style={epf.isActive ? activePillStyle : undefined}
-          >
-            <span className={epf.isActive ? '' : 'text-muted-foreground hover:text-foreground'}>
-              {epf.label}
-            </span>
-          </button>
-        ))}
-
-        {/* Categories pill */}
-        {categories.length > 0 && (
-          <button
-            type="button"
-            onClick={() => setOtherOpen((p) => !p)}
-            aria-label="Toggle category filters"
-            className={pillBase}
-            style={otherOpen ? activePillStyle : undefined}
-          >
-            <span className={otherOpen ? '' : 'text-muted-foreground hover:text-foreground'}>
-              Categories
-            </span>
-          </button>
-        )}
-
-        {/* Search */}
-        <div className="flex-1" />
-        <div className="relative shrink-0">
-          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
-          <Input
-            ref={searchInputRef}
-            type="search"
-            placeholder="Search..."
-            value={searchValue}
-            onChange={(e) => onSearchChange(e.target.value)}
-            className="w-28 sm:w-52 h-8 pl-8 text-sm ring-inset"
-            aria-label="Search"
-          />
-        </div>
-      </div>
-
-      {/* Expanded categories row — shows below on mobile, inline on desktop */}
+      {/* Expanded category chips — inline after Categories pill */}
      {categories.length > 0 && otherOpen && (
-        <div className="flex items-center gap-1.5 overflow-x-auto pb-1 md:pb-0">
-          {/* "All" chip inside categories — non-draggable */}
+        <>
+          <div className="w-px h-5 bg-border shrink-0" />
          {onSelectAllCategories && (
            <button
              type="button"
@ -250,8 +232,6 @@ export default function CategoryFilterBar({
              </span>
            </button>
          )}
-
-          {/* Draggable category chips */}
          <DndContext
            sensors={sensors}
            collisionDetection={closestCenter}
@ -272,8 +252,23 @@ export default function CategoryFilterBar({
              ))}
            </SortableContext>
          </DndContext>
-        </div>
+        </>
      )}
+
+      {/* Search — pushed to the right */}
+      <div className="flex-1" />
+      <div className="relative shrink-0">
+        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
+        <Input
+          ref={searchInputRef}
+          type="search"
+          placeholder="Search..."
+          value={searchValue}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="w-28 sm:w-52 h-8 pl-8 text-sm ring-inset"
+          aria-label="Search"
+        />
+      </div>
    </div>
  );
 }
--- a/frontend/src/components/todos/TodosPage.tsx
+++ b/frontend/src/components/todos/TodosPage.tsx
@ -168,21 +168,19 @@ export default function TodosPage() {
        </div>

        {/* Category filter bar (All + Completed + Categories with drag) */}
-        <div className="w-full md:flex-1 md:w-auto min-w-0 order-last md:order-none">
-          <CategoryFilterBar
-            activeFilters={activeFilters}
-            pinnedLabel="Completed"
-            showPinned={showCompleted}
-            categories={orderedCategories}
-            onToggleAll={toggleAll}
-            onTogglePinned={toggleCompleted}
-            onToggleCategory={toggleCategory}
-            onSelectAllCategories={selectAllCategories}
-            onReorderCategories={reorderCategories}
-            searchValue={search}
-            onSearchChange={setSearch}
-          />
-        </div>
+        <CategoryFilterBar
+          activeFilters={activeFilters}
+          pinnedLabel="Completed"
+          showPinned={showCompleted}
+          categories={orderedCategories}
+          onToggleAll={toggleAll}
+          onTogglePinned={toggleCompleted}
+          onToggleCategory={toggleCategory}
+          onSelectAllCategories={selectAllCategories}
+          onReorderCategories={reorderCategories}
+          searchValue={search}
+          onSearchChange={setSearch}
+        />

        <Button onClick={handleCreateNew} size="sm">
          <Plus className="h-4 w-4 md:mr-2" /><span className="hidden md:inline">Add Todo</span>