Revert "feat: filters proposals by label (#910)" (#967)

This reverts commit 23d407a.

apps/ui/src/components/EditorLabels.vue

@@ -12,11 +12,7 @@ const labels = defineModel<string[]>({
 
 <template>
   <div v-if="space.labels?.length">
-    <PickerLabel
-      v-model="labels"
-      :labels="space.labels"
-      :button-props="{ class: 'outline-none focus-within:text-skin-link' }"
-    >
+    <PickerLabel v-model="labels" :labels="space.labels">
       <template #button>
         <div class="flex justify-between items-center mb-2.5">
           <h4 class="eyebrow" v-text="'Labels'" />

apps/ui/src/components/PickerLabel.vue

@@ -12,12 +12,6 @@ import { SpaceMetadataLabel } from '@/types';
 
 const props = defineProps<{
   labels: SpaceMetadataLabel[];
-  buttonProps?: Record<string, any>;
-  panelProps?: Record<string, any>;
-}>();
-
-defineSlots<{
-  button(props: { close: () => void }): any;
 }>();
 
 const selectedLabels = defineModel<string[]>({
@@ -38,16 +32,16 @@ const filteredLabels = computed(() =>
 </script>
 
 <template>
-  <Popover v-slot="{ open, close }" class="relative contents">
+  <Popover v-slot="{ open }" class="relative contents">
     <PopoverButton
-      class="w-full"
+      class="outline-none focus-within:text-skin-link w-full"
       :class="open ? 'text-skin-link' : 'text-skin-text'"
-      v-bind="buttonProps"
     >
-      <slot name="button" :close="close">
+      <slot name="button">
         <IH-pencil />
       </slot>
     </PopoverButton>
+
     <transition
       enter-active-class="transition duration-200 ease-out"
       enter-from-class="translate-y-1 opacity-0"
@@ -58,9 +52,8 @@ const filteredLabels = computed(() =>
     >
       <PopoverPanel
         focus
-        class="absolute z-[11] left-0 -mt-2 mx-4 pb-3"
+        class="absolute z-10 left-0 -mt-2 mx-4 pb-3"
         style="width: calc(100% - 48px)"
-        v-bind="panelProps"
       >
         <Combobox
           v-slot="{ activeOption }"

apps/ui/src/stores/proposals.ts

@@ -64,8 +64,7 @@ export const useProposalsStore = defineStore('proposals', () => {
   async function fetch(
     spaceId: string,
     networkId: NetworkID,
-    state?: ProposalsFilter['state'],
-    labels?: string[]
+    state?: ProposalsFilter['state']
   ) {
     await metaStore.fetchBlock(networkId);
 
@@ -97,7 +96,7 @@ export const useProposalsStore = defineStore('proposals', () => {
           limit: PROPOSALS_LIMIT
         },
         metaStore.getCurrent(networkId) || 0,
-        { state, labels_in: labels }
+        { state }
       )
     );
 

apps/ui/src/views/Space/Proposals.vue

@@ -18,7 +18,6 @@ const route = useRoute();
 const proposalsStore = useProposalsStore();
 
 const state = ref<NonNullable<ProposalsFilter['state']>>('any');
-const labels = ref<string[]>([]);
 
 const selectIconBaseProps = {
   size: 16
@@ -28,17 +27,6 @@ const proposalsRecord = computed(
   () => proposalsStore.proposals[`${props.space.network}:${props.space.id}`]
 );
 
-const spaceLabels = computed(() => {
-  if (!props.space.labels) return {};
-
-  return Object.fromEntries(props.space.labels.map(label => [label.id, label]));
-});
-
-function handleClearLabelsFilter(close: () => void) {
-  labels.value = [];
-  close();
-}
-
 async function handleEndReached() {
   if (!proposalsRecord.value?.hasMoreProposals) return;
 
@@ -49,44 +37,25 @@ function handleFetchVotingPower() {
   fetchVotingPower(props.space);
 }
 
-watchThrottled(
-  [
-    () => route.query.state as string,
-    () => route.query.labels as string[] | string
-  ],
-  ([toState, toLabels]) => {
+watch(
+  [() => route.query.state as string],
+  ([toState]) => {
     state.value = ['any', 'active', 'pending', 'closed'].includes(toState)
       ? (toState as NonNullable<ProposalsFilter['state']>)
       : 'any';
-    let normalizedLabels = toLabels || [];
-    normalizedLabels = Array.isArray(normalizedLabels)
-      ? normalizedLabels
-      : [normalizedLabels];
-    labels.value = normalizedLabels.filter(id => spaceLabels.value[id]);
-
     proposalsStore.reset(props.space.id, props.space.network);
-    proposalsStore.fetch(
-      props.space.id,
-      props.space.network,
-      state.value,
-      labels.value
-    );
+    proposalsStore.fetch(props.space.id, props.space.network, state.value);
   },
-  { throttle: 1000, immediate: true }
+  { immediate: true }
 );
 
 watch(
-  [props.space, state, labels],
-  ([toSpace, toState, toLabels], [fromSpace, fromState, fromLabels]) => {
-    if (
-      toSpace.id !== fromSpace?.id ||
-      toState !== fromState ||
-      toLabels !== fromLabels
-    ) {
+  [props.space, state],
+  ([toSpace, toState], [fromSpace, fromState]) => {
+    if (toSpace.id !== fromSpace?.id || toState !== fromState) {
       const query: LocationQueryRaw = {
         ...route.query,
-        state: toState === 'any' ? undefined : toState,
-        labels: !toLabels?.length ? undefined : toLabels
+        state: toState === 'any' ? undefined : toState
       };
 
       router.push({ query });
@@ -114,10 +83,7 @@ watchEffect(() => setTitle(`Proposals - ${props.space.name}`));
 
 <template>
   <div>
-    <div
-      class="flex justify-between p-4 gap-2 gap-y-3 flex-row"
-      :class="{ 'flex-col-reverse sm:flex-row': space.labels?.length }"
-    >
+    <div class="flex justify-between p-4 gap-2">
       <div class="flex gap-2">
         <UiSelectDropdown
           v-model="state"
@@ -149,56 +115,6 @@ watchEffect(() => setTitle(`Proposals - ${props.space.name}`));
             }
           ]"
         />
-        <div v-if="space.labels?.length" class="sm:relative">
-          <PickerLabel
-            v-model="labels"
-            :labels="space.labels"
-            :button-props="{
-              class: [
-                'flex items-center gap-2 relative rounded-full leading-[100%] min-w-[75px] max-w-[230px] border button h-[42px] top-1 text-skin-link bg-skin-bg'
-              ]
-            }"
-            :panel-props="{ class: 'sm:min-w-[290px] sm:ml-0 !mt-3' }"
-          >
-            <template #button="{ close }">
-              <div
-                class="absolute top-[-10px] bg-skin-bg px-1 left-2.5 text-sm text-skin-text"
-              >
-                Labels
-              </div>
-              <div
-                v-if="labels.length"
-                class="flex gap-1 mx-2.5 overflow-hidden items-center"
-              >
-                <ul v-if="labels.length" class="flex gap-1 mr-4">
-                  <li v-for="id in labels" :key="id">
-                    <UiProposalLabel
-                      :label="spaceLabels[id].name"
-                      :color="spaceLabels[id].color"
-                    />
-                  </li>
-                </ul>
-                <div
-                  class="flex items-center absolute rounded-r-full right-[1px] pr-2 h-[23px] bg-skin-bg"
-                >
-                  <div
-                    class="block w-2 -ml-2 h-full bg-gradient-to-l from-skin-bg"
-                  />
-                  <button
-                    v-if="labels.length"
-                    class="text-skin-text rounded-full hover:text-skin-link"
-                    title="Clear all labels"
-                    @click.stop="handleClearLabelsFilter(close)"
-                    @keydown.enter.stop="handleClearLabelsFilter(close)"
-                  >
-                    <IH-x-circle size="16" />
-                  </button>
-                </div>
-              </div>
-              <span v-else class="px-3 text-skin-link">Any</span>
-            </template>
-          </PickerLabel>
-        </div>
       </div>
       <div class="flex gap-2 truncate">
         <IndicatorVotingPower