Repository: supabase/supabase
File: apps/studio/components/interfaces/HomePageActions.tsx (TypeScript)

Code before:
              <Button
                key="clear"
                size="tiny"
                type="text"
                icon={<X />}
                onClick={() => setSearch('')}
                className="p-0 h-5 w-5"
              />
            ),
          ]}
        />

        <FilterPopover
          name="Status"
          title="Filter projects by status"
          options={[
            { key: PROJECT_STATUS.ACTIVE_HEALTHY, label: 'Active' },
            { key: PROJECT_STATUS.INACTIVE, label: 'Paused' },
          ]}
          activeOptions={filterStatus}
          valueKey="key"
          labelKey="label"
          onSaveFilters={(options) => setFilterStatusStorage(options)}
        />

        {showViewToggle && (
          <ProjectListSortDropdown
            value={sort}
            onChange={(value) => {
              void setSort(value)
            }}
          />
        )}

        {isFetchingProjects && <Loader2 className="animate-spin" size={14} />}
      </div>

      <div className="flex items-center gap-2">
        {showViewToggle && viewMode && setViewMode && (
          <ToggleGroup
            type="single"
            size="sm"
            value={viewMode}
            onValueChange={(value) => value && setViewMode(value as 'grid' | 'table')}
          >
            <ToggleGroupItem value="grid" size="sm" className="h-[26px] w-[26px] p-0">
              <Grid size={14} strokeWidth={1.5} />
            </ToggleGroupItem>
            <ToggleGroupItem value="table" size="sm" className="h-[26px] w-[26px] p-0">
              <List size={14} strokeWidth={1.5} />
            </ToggleGroupItem>

Review comment (suggestion):
nit but i don't think we need this `showViewToggle` param tbh

`HomePageActions` is being used for the projects page + projects wildcard route - both UI could benefit with a sort action + card/list view i reckon

Code after:
            search && (
              <Button
                key="clear"
                size="tiny"
                type="text"
                icon={<X />}
                onClick={() => setSearch('')}
                className="p-0 h-5 w-5"
              />
            ),
          ]}
        />

        <FilterPopover
          name="Status"
          title="Filter projects by status"
          options={[
            { key: PROJECT_STATUS.ACTIVE_HEALTHY, label: 'Active' },
            { key: PROJECT_STATUS.INACTIVE, label: 'Paused' },
          ]}
          activeOptions={filterStatus}
          valueKey="key"
          labelKey="label"
          onSaveFilters={(options) => setFilterStatusStorage(options)}
        />

        <SortDropdown
          options={[
            { label: 'name', value: 'name' },
            { label: 'creation date', value: 'created' },
          ]}
          value={sort}
          setValue={(val) => setSortStorage(val as ProjectListSort)}
        />

        {isFetchingProjects && <Loader2 className="animate-spin" size={14} />}
      </div>

      <div className="flex items-center gap-2">
        {viewMode && setViewMode && (
          <ToggleGroup
            type="single"
            size="sm"
            value={viewMode}
            onValueChange={(value) => value && setViewMode(value as 'grid' | 'table')}
          >
            <ToggleGroupItem value="grid" size="sm" className="h-[26px] w-[26px] p-0">
              <Grid size={14} strokeWidth={1.5} />
            </ToggleGroupItem>
            <ToggleGroupItem value="table" size="sm" className="h-[26px] w-[26px] p-0">
              <List size={14} strokeWidth={1.5} />