feat: space user proposals page (#606)

* feat: enable route to proposals tab

* feat: list space user proposals

* fix(ux): make the sticky header optional

* fix: set page title

apps/ui/src/components/ProposalsList.vue

@@ -3,19 +3,21 @@ import { Proposal as ProposalType } from '@/types';
 
 const props = withDefaults(
   defineProps<{
-    title: string;
+    title?: string;
     loading?: boolean;
     loadingMore?: boolean;
     limit?: number | 'off';
     proposals: ProposalType[];
     showSpace?: boolean;
+    showAuthor?: boolean;
     route?: {
       name: string;
       linkTitle: string;
     };
   }>(),
   {
-    showSpace: false
+    showSpace: false,
+    showAuthor: true
   }
 );
 
@@ -32,7 +34,7 @@ const currentLimit = computed(() => {
 
 <template>
   <div>
-    <UiLabel :label="title" sticky />
+    <UiLabel v-if="title" :label="title" sticky />
     <UiLoading v-if="loading" class="block px-4 py-3" />
     <div v-else>
       <UiContainerInfiniteScroll
@@ -44,6 +46,7 @@ const currentLimit = computed(() => {
           :key="i"
           :proposal="proposal"
           :show-space="showSpace"
+          :show-author="showAuthor"
         />
       </UiContainerInfiniteScroll>
       <div

apps/ui/src/components/ProposalsListItem.vue

@@ -3,7 +3,11 @@ import { quorumLabel, quorumProgress } from '@/helpers/quorum';
 import { _n, _p, _rt, getProposalId, shortenAddress } from '@/helpers/utils';
 import { Choice, Proposal as ProposalType } from '@/types';
 
-const props = defineProps<{ proposal: ProposalType; showSpace: boolean }>();
+const props = defineProps<{
+  proposal: ProposalType;
+  showSpace: boolean;
+  showAuthor: boolean;
+}>();
 
 const { getTsFromCurrent } = useMetaStore();
 const { modalAccountOpen } = useModal();
@@ -85,19 +89,21 @@ const handleVoteClick = (choice: Choice) => {
         </div>
         <div class="inline">
           {{ getProposalId(proposal) }}
-          by
-          <router-link
-            class="text-skin-text"
-            :to="{
-              name: 'space-user-statement',
-              params: {
-                id: `${proposal.network}:${proposal.space.id}`,
-                user: proposal.author.id
-              }
-            }"
-          >
-            {{ proposal.author.name || shortenAddress(proposal.author.id) }}
-          </router-link>
+          <template v-if="showAuthor">
+            by
+            <router-link
+              class="text-skin-text"
+              :to="{
+                name: 'space-user-statement',
+                params: {
+                  id: `${proposal.network}:${proposal.space.id}`,
+                  user: proposal.author.id
+                }
+              }"
+            >
+              {{ proposal.author.name || shortenAddress(proposal.author.id) }}
+            </router-link>
+          </template>
         </div>
         <span>
           <template v-if="proposal.vote_count">

apps/ui/src/views/SpaceUser.vue

@@ -59,9 +59,13 @@ const formattedVotingPower = computed(() => {
 });
 
 const navigation = computed(() => [
-  { label: 'Statement', route: 'space-user-statement' }
+  { label: 'Statement', route: 'space-user-statement' },
+  {
+    label: 'Proposals',
+    route: 'space-user-proposals',
+    count: userActivity.value?.proposal_count
+  }
   // { label: 'Delegators', route: 'space-user-delegators', count: delegatesCount.value },
-  // { label: 'Proposals', route: 'space-user-proposals', count: userActivity.value?.proposal_count },
   // { label: 'Latest votes', route: 'space-user-votes', count: userActivity.value?.vote_count }
 ]);
 
@@ -248,7 +252,11 @@ watchEffect(() =>
           :key="i"
           :to="{ name: item.route, params: { user: userId } }"
         >
-          <UiLink :is-active="route.name === item.route" :text="item.label" />
+          <UiLink
+            :is-active="route.name === item.route"
+            :text="item.label"
+            :count="item.count"
+          />
         </router-link>
       </div>
     </div>

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

@@ -1,5 +1,80 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { getNetwork } from '@/networks';
+import { Proposal, Space, User } from '@/types';
+
+const props = defineProps<{ space: Space; user: User }>();
+
+const PROPOSALS_LIMIT = 20;
+
+const metaStore = useMetaStore();
+const { setTitle } = useTitle();
+
+const loaded = ref(false);
+const loadingMore = ref(false);
+const hasMore = ref(false);
+const proposals = ref<Proposal[]>([]);
+
+const network = computed(() => getNetwork(props.space.network));
+
+async function fetch() {
+  loaded.value = false;
+
+  proposals.value = await network.value.api.loadProposals(
+    [props.space.id],
+    {
+      limit: PROPOSALS_LIMIT
+    },
+    metaStore.getCurrent(props.space.network) || 0,
+    { author: props.user.id }
+  );
+
+  hasMore.value = proposals.value.length === PROPOSALS_LIMIT;
+  loaded.value = true;
+}
+
+async function fetchMore() {
+  loadingMore.value = true;
+
+  const moreProposals = await network.value.api.loadProposals(
+    [props.space.id],
+    {
+      limit: PROPOSALS_LIMIT,
+      skip: proposals.value.length
+    },
+    metaStore.getCurrent(props.space.network) || 0,
+    { author: props.user.id }
+  );
+
+  proposals.value = [...proposals.value, ...moreProposals];
+
+  hasMore.value = moreProposals.length === PROPOSALS_LIMIT;
+  loadingMore.value = false;
+}
+
+async function handleEndReached() {
+  if (!hasMore.value) return;
+
+  fetchMore();
+}
+
+onMounted(() => {
+  fetch();
+});
+
+watchEffect(() =>
+  setTitle(
+    `${props.user.name || props.user.id} ${props.space.name}'s proposals`
+  )
+);
+</script>
 
 <template>
-  <div></div>
+  <ProposalsList
+    limit="off"
+    :loading="!loaded"
+    :loading-more="loadingMore"
+    :proposals="proposals"
+    :show-author="false"
+    @end-reached="handleEndReached"
+  />
 </template>