feat: add link to label (#924)

* fix: allow voting power indicator to shrink

* feat: add labels filter to proposals

* fix: improve filters UI

* feat: persist proposals filters in query param

* fix: allow voting power indicator to shrink

* feat: link proposal label to filtered proposals page

* fix: proposal list should react to url change

* fix: proposals list should refresh on url labels changer

* fix: standardize spacing in editor sidebar

* refactor: refactor proposals labels component

* feat: persist state filter in url

* fix: reduce label height to keep same line height as proposal title

* fix: use line height to control label height

* revert: revert changes

* fix: decrease spacing

* fix: remove duplicate watcher

* fix: improve responsive layout

* fix: ignore invalid label id from query param

* fix: enable outline on labels filter button

* fix: fix left margin on combobox

* perf: improve labels validation

* fix: prevent event bubbling

* fix: fix combobox min width on small screen

* feat: add link to label

* fix: fix spacing

* fix: use simple notation for doublons query params

* refactor: move the optional to check to AppLink

---------

Co-authored-by: Chaitanya <[email protected]>

apps/ui/src/components/AppLink.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import { RouteLocationRaw, RouterLinkProps } from 'vue-router';
 
-const props = defineProps<RouterLinkProps>();
+const props = defineProps<
+  Omit<RouterLinkProps, 'to'> & { to?: RouteLocationRaw }
+>();
 
 const { isWhiteLabel } = useWhiteLabel();
 
@@ -32,7 +34,10 @@ function normalize(to: RouteLocationRaw) {
 </script>
 
 <template>
-  <router-link :to="normalize(props.to)">
+  <router-link v-if="props.to" :to="normalize(props.to)">
     <slot />
   </router-link>
+  <div v-else>
+    <slot />
+  </div>
 </template>

apps/ui/src/components/ProposalLabels.vue

@@ -6,9 +6,11 @@ const props = withDefaults(
     space: Space;
     labels: string[];
     inline?: boolean;
+    withLink?: boolean;
   }>(),
   {
-    inline: false
+    inline: false,
+    withLink: false
   }
 );
 
@@ -27,6 +29,15 @@ const validLabels = computed(() => {
       :key="label.id"
       :label="label.name"
       :color="label.color"
+      :to="
+        withLink
+          ? {
+              name: 'space-proposals',
+              params: { space: `${space.network}:${space.id}` },
+              query: { labels: label.id }
+            }
+          : undefined
+      "
       v-bind="$attrs"
       class="inline-flex !max-w-[160px] mr-1 last:mr-0"
     />
@@ -38,7 +49,19 @@ const validLabels = computed(() => {
   >
     <li v-for="label in validLabels" :key="label.id">
       <UiTooltip :title="label.description" class="inline">
-        <UiProposalLabel :label="label.name" :color="label.color" />
+        <UiProposalLabel
+          :label="label.name"
+          :color="label.color"
+          :to="
+            withLink
+              ? {
+                  name: 'space-proposals',
+                  params: { space: `${space.network}:${space.id}` },
+                  query: { labels: label.id }
+                }
+              : undefined
+          "
+        />
       </UiTooltip>
     </li>
   </ul>

apps/ui/src/components/ProposalsListItemHeading.vue

@@ -43,8 +43,7 @@ const space = computed(() =>
       >
         <ProposalIconStatus size="17" :state="proposal.state" class="top-1.5" />
       </AppLink>
-
-      <div class="min-w-0 my-1 items-center leading-6">
+      <div class="min-w-0 my-1 items-center leading-6 space-x-2">
         <AppLink
           v-if="showSpace"
           :to="{
@@ -53,11 +52,10 @@ const space = computed(() =>
               space: `${proposal.network}:${proposal.space.id}`
             }
           }"
-          class="text-[21px] text-skin-text mr-2 font-bold inline shrink-0"
+          class="text-[21px] text-skin-text font-bold inline shrink-0"
         >
           {{ proposal.space.name }}
         </AppLink>
-
         <AppLink
           :to="{
             name: 'space-proposal-overview',
@@ -66,16 +64,18 @@ const space = computed(() =>
               space: `${proposal.network}:${proposal.space.id}`
             }
           }"
+          class="space-x-2"
         >
           <h3
-            class="text-[21px] inline [overflow-wrap:anywhere] mr-2 min-w-0"
+            class="text-[21px] inline [overflow-wrap:anywhere] min-w-0"
             v-text="proposal.title || `Proposal #${proposal.proposal_id}`"
           />
           <ProposalLabels
             v-if="space?.labels && proposal.labels.length"
             :labels="proposal.labels"
             :space="space"
             inline
+            with-link
           />
           <IH-check
             v-if="

apps/ui/src/components/Ui/ProposalLabel.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import { RouteLocationNamedRaw } from 'vue-router';
+
 const props = defineProps<{
   label: string;
   color: string;
+  to?: RouteLocationNamedRaw;
 }>();
 
 const { currentMode } = useUserSkin();
@@ -46,7 +49,8 @@ function checkColorProximity(color: string): {
 </script>
 
 <template>
-  <div
+  <AppLink
+    :to="to"
     class="rounded-full w-fit max-w-[220px] shrink-0 flex"
     :class="{
       border: colorProperties.showBorder
@@ -60,5 +64,5 @@ function checkColorProximity(color: string): {
       class="truncate text-sm leading-[11px] whitespace-nowrap px-2 py-[6px]"
       v-text="label"
     />
-  </div>
+  </AppLink>
 </template>

apps/ui/src/views/Proposal.vue

@@ -345,7 +345,11 @@ watchEffect(() => {
               <IH-tag />
               Labels
             </h4>
-            <ProposalLabels :labels="proposal.labels" :space="space" />
+            <ProposalLabels
+              :labels="proposal.labels"
+              :space="space"
+              with-link
+            />
           </div>
           <div>
             <h4 class="mb-2.5 eyebrow flex items-center gap-2">