update toggle filter design (#6888)

change toggle filters to just use exclude-only filters, same design as the others.

packages/ui/src/components/search/SearchFilterGroup.vue

@@ -19,7 +19,7 @@
 						:option="option"
 						:included="included(option)"
 						:excluded="excluded(option)"
-						:supports-negative-filter="supportsNegativeFilter"
+						:supports="supports"
 						@toggle="(o) => emit('toggle', o)"
 						@toggle-exclude="(o) => emit('toggleExclude', o)"
 					>
@@ -44,13 +44,13 @@
 import { DropdownIcon } from '@modrinth/assets'
 import { ref } from 'vue'
 
-import type { FilterOption } from '../../utils/search'
+import type { FilterMode, FilterOption } from '../../utils/search'
 import SearchFilterOption from './SearchFilterOption.vue'
 
 defineProps<{
 	groupName: string
 	options: FilterOption[]
-	supportsNegativeFilter: boolean
+	supports: FilterMode[]
 	included: (option: FilterOption) => boolean
 	excluded: (option: FilterOption) => boolean
 }>()

packages/ui/src/components/search/SearchFilterOption.vue

@@ -1,13 +1,13 @@
 <template>
 	<div class="search-filter-option group flex gap-1 items-center">
 		<button
-			:class="`flex border-none cursor-pointer !w-full items-center gap-2 truncate rounded-xl px-2 py-2 [@media(hover:hover)]:py-1 text-sm font-semibold transition-all hover:text-contrast focus-visible:text-contrast active:scale-[0.98] ${included ? 'bg-brand-highlight text-contrast hover:brightness-125' : excluded ? 'bg-highlight-red text-contrast hover:brightness-125' : 'bg-transparent text-secondary hover:bg-button-bg focus-visible:bg-button-bg [&>svg.check-icon]:hover:text-brand [&>svg.check-icon]:focus-visible:text-brand'}`"
-			@click="() => emit('toggle', option)"
+			:class="`flex border-none cursor-pointer !w-full items-center gap-2 truncate rounded-xl px-2 py-2 [@media(hover:hover)]:py-1 text-sm font-semibold transition-all hover:text-contrast focus-visible:text-contrast active:scale-[0.98] ${included ? 'bg-brand-highlight text-contrast hover:brightness-125' : excluded ? 'bg-highlight-red text-contrast hover:brightness-125' : 'bg-transparent text-secondary hover:bg-button-bg focus-visible:bg-button-bg [&>svg.check-icon]:hover:text-brand [&>svg.check-icon]:focus-visible:text-brand [&>svg.ban-icon]:hover:text-red [&>svg.ban-icon]:focus-visible:text-red'}`"
+			@click="() => emit(primaryAction === 'exclude' ? 'toggleExclude' : 'toggle', option)"
 		>
 			<slot> </slot>
 			<BanIcon
-				v-if="excluded"
-				:class="`filter-action-icon ml-auto h-4 w-4 shrink-0 transition-opacity group-hover:opacity-100 ${excluded ? '' : '[@media(hover:hover)]:opacity-0'}`"
+				v-if="excluded || primaryAction === 'exclude'"
+				:class="`filter-action-icon ban-icon ml-auto h-4 w-4 shrink-0 transition-opacity group-hover:opacity-100 ${excluded ? '' : '[@media(hover:hover)]:opacity-0'}`"
 				aria-hidden="true"
 			/>
 			<CheckIcon
@@ -17,12 +17,12 @@
 			/>
 		</button>
 		<div
-			v-if="supportsNegativeFilter && !excluded"
+			v-if="showExcludeButton"
 			class="w-px h-[1.75rem] bg-button-bg [@media(hover:hover)]:contents"
 			:class="{ 'opacity-0': included }"
 		></div>
 		<button
-			v-if="supportsNegativeFilter && !excluded"
+			v-if="showExcludeButton"
 			v-tooltip="formatMessage(messages.excludeTooltip)"
 			class="flex border-none cursor-pointer items-center justify-center gap-2 rounded-xl bg-transparent px-2 py-1 text-sm font-semibold text-secondary [@media(hover:hover)]:opacity-0 transition-all hover:bg-button-bg hover:text-red focus-visible:bg-button-bg focus-visible:text-red active:scale-[0.96]"
 			@click="() => emit('toggleExclude', option)"
@@ -34,22 +34,30 @@
 
 <script setup lang="ts">
 import { BanIcon, CheckIcon } from '@modrinth/assets'
+import { computed } from 'vue'
 
 import { defineMessages, useVIntl } from '../../composables/i18n'
-import type { FilterOption } from '../../utils/search'
+import type { FilterMode, FilterOption } from '../../utils/search'
 
-withDefaults(
+const props = withDefaults(
 	defineProps<{
 		option: FilterOption
 		included: boolean
 		excluded: boolean
-		supportsNegativeFilter?: boolean
+		supports?: FilterMode[]
 	}>(),
 	{
-		supportsNegativeFilter: false,
+		supports: () => ['include'],
 	},
 )
 
+const supportsInclude = computed(() => props.supports.includes('include'))
+const supportsExclude = computed(() => props.supports.includes('exclude'))
+const primaryAction = computed<FilterMode>(() => (supportsInclude.value ? 'include' : 'exclude'))
+const showExcludeButton = computed(
+	() => supportsInclude.value && supportsExclude.value && !props.excluded,
+)
+
 const { formatMessage } = useVIntl()
 
 const emit = defineEmits<{

packages/ui/src/components/search/SearchSidebarFilter.vue

@@ -71,105 +71,82 @@
 		</template>
 		<template v-else #default>
 			<slot name="prefix" />
-			<div
-				v-if="filterType.display === 'toggle'"
-				:class="innerPanelClass ? innerPanelClass : ''"
-				class="flex flex-col gap-3"
-			>
-				<label
-					v-for="option in filterType.options"
-					:key="`${filterType.id}-toggle-${option.id}`"
-					class="flex cursor-pointer items-center justify-between text-secondary gap-3 font-semibold"
-				>
-					<span class="text-sm">{{ option.formatted_name ?? option.id }}</span>
-					<Toggle
-						:model-value="isExcluded(option)"
-						small
-						class="shrink-0"
-						@update:model-value="toggleNegativeFilter(option)"
-					/>
-				</label>
-			</div>
-			<template v-if="filterType.display !== 'toggle'">
-				<StyledInput
-					v-if="filterType.searchable"
-					:id="`search-${filterType.id}`"
-					v-model="query"
-					:icon="SearchIcon"
-					type="text"
-					:placeholder="formatMessage(messages.searchPlaceholder)"
-					autocomplete="off"
-					clearable
-					size="small"
-					input-class="!bg-button-bg"
-					wrapper-class="mx-2 my-1 w-[calc(100%-1rem)]"
-				/>
-				<ScrollablePanel :class="{ 'h-[16rem]': scrollable }" :disable-scrolling="!scrollable">
-					<div :class="innerPanelClass ? innerPanelClass : ''" class="flex flex-col gap-1">
-						<template v-if="groupedOptions">
-							<SearchFilterGroup
-								v-for="[groupName, options] in groupedOptions"
-								:key="`${filterType.id}-group-${groupName}`"
-								:group-name="groupName"
-								:options="options"
-								:supports-negative-filter="filterType.supports_negative_filter"
-								:included="isIncluded"
-								:excluded="isExcluded"
-								@toggle="toggleFilter"
-								@toggle-exclude="toggleNegativeFilter"
-							/>
-						</template>
-						<template v-else>
-							<SearchFilterOption
-								v-for="option in visibleOptions"
-								:key="`${filterType.id}-${option}`"
-								:option="option"
-								:included="isIncluded(option)"
-								:excluded="isExcluded(option)"
-								:supports-negative-filter="filterType.supports_negative_filter"
-								:class="{
-									'mr-3': scrollable,
-								}"
-								@toggle="toggleFilter"
-								@toggle-exclude="toggleNegativeFilter"
-							>
-								<slot name="option" :filter="filterType" :option="option">
-									<span
-										v-if="option.icon"
-										class="inline-flex items-center justify-center shrink-0 h-4 w-4"
-										:style="iconStyle(option)"
-									>
-										<div
-											v-if="typeof option.icon === 'string'"
-											class="h-4 w-4"
-											v-html="option.icon"
-										/>
-										<component :is="option.icon" v-else class="h-4 w-4" />
-									</span>
-									<span class="truncate text-sm" :style="iconStyle(option)">
-										{{ option.formatted_name ?? option.id }}
-									</span>
-								</slot>
-							</SearchFilterOption>
-						</template>
-						<button
-							v-if="filterType.display === 'expandable'"
-							class="flex bg-transparent text-secondary border-none cursor-pointer !w-full items-center gap-2 truncate rounded-xl px-2 py-1 text-sm font-semibold transition-all hover:text-contrast focus-visible:text-contrast active:scale-[0.98]"
-							@click="showMore = !showMore"
+			<StyledInput
+				v-if="filterType.searchable"
+				:id="`search-${filterType.id}`"
+				v-model="query"
+				:icon="SearchIcon"
+				type="text"
+				:placeholder="formatMessage(messages.searchPlaceholder)"
+				autocomplete="off"
+				clearable
+				size="small"
+				input-class="!bg-button-bg"
+				wrapper-class="mx-2 my-1 w-[calc(100%-1rem)]"
+			/>
+			<ScrollablePanel :class="{ 'h-[16rem]': scrollable }" :disable-scrolling="!scrollable">
+				<div :class="innerPanelClass ? innerPanelClass : ''" class="flex flex-col gap-1">
+					<template v-if="groupedOptions">
+						<SearchFilterGroup
+							v-for="[groupName, options] in groupedOptions"
+							:key="`${filterType.id}-group-${groupName}`"
+							:group-name="groupName"
+							:options="options"
+							:supports="filterType.supports"
+							:included="isIncluded"
+							:excluded="isExcluded"
+							@toggle="toggleFilter"
+							@toggle-exclude="toggleNegativeFilter"
+						/>
+					</template>
+					<template v-else>
+						<SearchFilterOption
+							v-for="option in visibleOptions"
+							:key="`${filterType.id}-${option}`"
+							:option="option"
+							:included="isIncluded(option)"
+							:excluded="isExcluded(option)"
+							:supports="filterType.supports"
+							:class="{
+								'mr-3': scrollable,
+							}"
+							@toggle="toggleFilter"
+							@toggle-exclude="toggleNegativeFilter"
 						>
-							<DropdownIcon
-								class="h-4 w-4 transition-transform"
-								:class="{ 'rotate-180': showMore }"
-							/>
-							<span class="truncate text-sm">
-								{{
-									showMore ? formatMessage(messages.showFewer) : formatMessage(messages.showMore)
-								}}
-							</span>
-						</button>
-					</div>
-				</ScrollablePanel>
-			</template>
+							<slot name="option" :filter="filterType" :option="option">
+								<span
+									v-if="option.icon"
+									class="inline-flex items-center justify-center shrink-0 h-4 w-4"
+									:style="iconStyle(option)"
+								>
+									<div
+										v-if="typeof option.icon === 'string'"
+										class="h-4 w-4"
+										v-html="option.icon"
+									/>
+									<component :is="option.icon" v-else class="h-4 w-4" />
+								</span>
+								<span class="truncate text-sm" :style="iconStyle(option)">
+									{{ option.formatted_name ?? option.id }}
+								</span>
+							</slot>
+						</SearchFilterOption>
+					</template>
+					<button
+						v-if="filterType.display === 'expandable'"
+						class="flex bg-transparent text-secondary border-none cursor-pointer !w-full items-center gap-2 truncate rounded-xl px-2 py-1 text-sm font-semibold transition-all hover:text-contrast focus-visible:text-contrast active:scale-[0.98]"
+						@click="showMore = !showMore"
+					>
+						<DropdownIcon
+							class="h-4 w-4 transition-transform"
+							:class="{ 'rotate-180': showMore }"
+						/>
+						<span class="truncate text-sm">
+							{{ showMore ? formatMessage(messages.showFewer) : formatMessage(messages.showMore) }}
+						</span>
+					</button>
+				</div>
+			</ScrollablePanel>
 			<div :class="innerPanelClass ? innerPanelClass : ''" class="empty:hidden">
 				<Checkbox
 					v-for="group in filterType.toggle_groups"
@@ -213,7 +190,6 @@ import { defineMessages, useVIntl } from '../../composables/i18n'
 import type { FilterOption, FilterType, FilterValue } from '../../utils/search'
 import Accordion from '../base/Accordion.vue'
 import ButtonStyled from '../base/ButtonStyled.vue'
-import Toggle from '../base/Toggle.vue'
 import { Checkbox, ScrollablePanel, StyledInput } from '../index'
 import SearchFilterGroup from './SearchFilterGroup.vue'
 import SearchFilterOption from './SearchFilterOption.vue'