feat: show sub-spaces and parent (#618)

* feat: show sub-spaces * feat: show parent space * fix(ui): fix issue when content is on 2 lines * fix: add turbo and verified property needed for the space cards * fix: fix typing * fix: fix typing * refactor: code DRY-ing * fix(ui): show all sub-spaces on same line with horizontal scroll * fix: remove unnecessary div * refactor: improve variable name * fix: improve typing * fix(ui): add gradient to horizontal scroll * chore: reverting obsolete changes * fix: disable sidebar swipe inside horizontal scroll content * fix: fix line break on flex * Update apps/ui/src/App.vue Co-authored-by: Chaitanya <[email protected]> * fix: fix html structure to be compatible with no-sidebar-swipe detection * fix: use proper type instead of any * fix: improve type * Update apps/ui/src/networks/offchain/api/index.ts Co-authored-by: Chaitanya <[email protected]> * fix: fix missing import * fix(ui): fix missing padding inside overflow-x-scroll element --------- Co-authored-by: Chaitanya <[email protected]>
snapshot-labs · Aug 24, 2024 · 2a96deb · 2a96deb
1 parent e8ea6fa
commit 2a96deb
Show file tree

Hide file tree

Showing 8 changed files with 150 additions and 22 deletions.
diff --git a/apps/ui/src/components/ButtonFollow.vue b/apps/ui/src/components/ButtonFollow.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { Space } from '@/types';
+import { NetworkID } from '@/types';
 
 const props = defineProps<{
-  space: Space;
+  space: { id: string; network: NetworkID; snapshot_chain_id?: number };
 }>();
 
 const spaceIdComposite = `${props.space.network}:${props.space.id}`;

diff --git a/apps/ui/src/components/SpacesListItem.vue b/apps/ui/src/components/SpacesListItem.vue
@@ -1,16 +1,23 @@
 <script lang="ts" setup>
 import { _n } from '@/helpers/utils';
 import { offchainNetworks } from '@/networks';
-import { Space } from '@/types';
+import { RelatedSpace, Space } from '@/types';
 
-const props = defineProps<{ space: Space }>();
+const props = withDefaults(
+  defineProps<{
+    space: Space | RelatedSpace;
+    showAbout?: boolean;
+  }>(),
+  { showAbout: true }
+);
 const compositeSpaceId = `${props.space.network}:${props.space.id}`;
 </script>
 
 <template>
   <router-link
     :to="{ name: 'space-overview', params: { id: compositeSpaceId } }"
-    class="text-skin-text border rounded-lg block h-[280px] relative group overflow-hidden"
+    class="text-skin-text border rounded-lg block relative group overflow-hidden h-[186px]"
+    :class="{ 'h-[280px]': showAbout }"
   >
     <div class="h-[68px] w-full absolute">
       <SpaceCover :space="props.space" size="sm" />
@@ -42,7 +49,11 @@ const compositeSpaceId = `${props.space.network}:${props.space.id}`;
         />
       </div>
 
-      <h5 class="mt-1 line-clamp-2 leading-6" v-text="space.about" />
+      <h5
+        v-if="showAbout"
+        class="mt-1 line-clamp-2 leading-6"
+        v-text="space.about"
+      />
     </div>
     <h5 class="absolute bottom-4 px-4 text-[17px]">
       <b class="text-skin-link" v-text="_n(space.proposal_count, 'compact')" />

diff --git a/apps/ui/src/networks/common/graphqlApi/index.ts b/apps/ui/src/networks/common/graphqlApi/index.ts
@@ -218,7 +218,9 @@ function formatSpace(
     strategies_parsed_metadata: processStrategiesMetadata(
       space.strategies_parsed_metadata,
       space.strategies_indicies
-    )
+    ),
+    children: [],
+    parent: null
   };
 }
 

diff --git a/apps/ui/src/networks/offchain/api/index.ts b/apps/ui/src/networks/offchain/api/index.ts
@@ -21,6 +21,7 @@ import {
   Proposal,
   ProposalExecution,
   ProposalState,
+  RelatedSpace,
   Space,
   SpaceMetadataTreasury,
   Statement,
@@ -42,7 +43,7 @@ import {
   USER_VOTES_QUERY,
   VOTES_QUERY
 } from './queries';
-import { ApiProposal, ApiSpace, ApiVote } from './types';
+import { ApiProposal, ApiRelatedSpace, ApiSpace, ApiVote } from './types';
 import { DEFAULT_VOTING_DELAY } from '../constants';
 
 const DEFAULT_AUTHENTICATOR = 'OffchainAuthenticator';
@@ -97,6 +98,21 @@ function formatSpace(
     validationParams.addresses = space.members.concat(space.admins);
   }
 
+  function formatRelatedSpace(space: ApiRelatedSpace): RelatedSpace {
+    return {
+      id: space.id,
+      name: space.name,
+      network: networkId,
+      avatar: space.avatar,
+      cover: '',
+      proposal_count: space.proposalsCount,
+      vote_count: space.votesCount,
+      turbo: space.turbo,
+      verified: space.verified,
+      snapshot_chain_id: parseInt(space.network)
+    };
+  }
+
   return {
     id: space.id,
     network: networkId,
@@ -151,7 +167,9 @@ function formatSpace(
     validation_strategy_params: '',
     voting_power_validation_strategy_strategies: [validationName],
     voting_power_validation_strategy_strategies_params: [validationParams],
-    voting_power_validation_strategies_parsed_metadata: []
+    voting_power_validation_strategies_parsed_metadata: [],
+    children: space.children.map(formatRelatedSpace),
+    parent: space.parent ? formatRelatedSpace(space.parent) : null
   };
 }
 

diff --git a/apps/ui/src/networks/offchain/api/queries.ts b/apps/ui/src/networks/offchain/api/queries.ts
@@ -48,6 +48,26 @@ const SPACE_FRAGMENT = gql`
     proposalsCount
     votesCount
     followersCount
+    children {
+      id
+      name
+      avatar
+      proposalsCount
+      votesCount
+      turbo
+      verified
+      network
+    }
+    parent {
+      id
+      name
+      avatar
+      proposalsCount
+      votesCount
+      turbo
+      verified
+      network
+    }
   }
 `;
 

diff --git a/apps/ui/src/networks/offchain/api/types.ts b/apps/ui/src/networks/offchain/api/types.ts
@@ -1,4 +1,15 @@
-import { Privacy, VoteType } from '@/types';
+import { NetworkID, Privacy, VoteType } from '@/types';
+
+export type ApiRelatedSpace = {
+  id: string;
+  name: string;
+  network: NetworkID;
+  avatar: string;
+  proposalsCount: number;
+  votesCount: number;
+  turbo: boolean;
+  verified: boolean;
+};
 
 export type ApiSpace = {
   id: string;
@@ -45,6 +56,8 @@ export type ApiSpace = {
   proposalsCount: number;
   votesCount: number;
   followersCount: number;
+  children: [ApiRelatedSpace];
+  parent: ApiRelatedSpace | null;
 };
 
 export type ApiProposal = {

diff --git a/apps/ui/src/types.ts b/apps/ui/src/types.ts
@@ -94,6 +94,20 @@ export type StrategyParsedMetadata = {
   payload: string | null;
 };
 
+export type RelatedSpace = {
+  id: string;
+  name: string;
+  network: NetworkID;
+  avatar: string;
+  cover: string;
+  about?: string;
+  proposal_count: number;
+  vote_count: number;
+  turbo: boolean;
+  verified: boolean;
+  snapshot_chain_id: number;
+};
+
 export type Space = {
   id: string;
   network: NetworkID;
@@ -142,6 +156,8 @@ export type Space = {
   vote_count: number;
   follower_count?: number;
   created: number;
+  children: RelatedSpace[];
+  parent: RelatedSpace | null;
 };
 
 export type ProposalExecution = {

diff --git a/apps/ui/src/views/Space/Overview.vue b/apps/ui/src/views/Space/Overview.vue
@@ -85,18 +85,44 @@ watchEffect(() => setTitle(props.space.name));
             :turbo="space.turbo"
           />
         </div>
-        <div class="mb-3">
-          <b class="text-skin-link">{{ _n(space.proposal_count) }}</b> proposals
-          ·
-          <b class="text-skin-link">{{ _n(space.vote_count, 'compact') }}</b>
-          votes
-          <span v-if="isOffchainSpace">
-            ·
-            <b class="text-skin-link">{{
-              _n(space.follower_count, 'compact')
-            }}</b>
-            followers
-          </span>
+        <div class="mb-3 flex flex-wrap gap-x-1 items-center">
+          <div>
+            <b class="text-skin-link">{{ _n(space.proposal_count) }}</b>
+            proposals
+          </div>
+          <div>·</div>
+          <div>
+            <b class="text-skin-link">{{ _n(space.vote_count, 'compact') }}</b>
+            votes
+          </div>
+          <template v-if="isOffchainSpace">
+            <div>·</div>
+            <div>
+              <b class="text-skin-link">
+                {{ _n(space.follower_count, 'compact') }}
+              </b>
+              followers
+            </div>
+          </template>
+          <template v-if="space.parent">
+            <div>·</div>
+            <router-link
+              :to="{
+                name: 'space-overview',
+                params: {
+                  id: `${space.parent.network}:${space.parent.id}`
+                }
+              }"
+              class="flex space-x-1 items-center whitespace-nowrap"
+            >
+              <SpaceAvatar
+                :space="space.parent"
+                :size="22"
+                class="rounded-md"
+              />
+              <span>{{ space.parent.name }}</span>
+            </router-link>
+          </template>
         </div>
         <div
           v-if="space.about"
@@ -116,6 +142,28 @@ watchEffect(() => setTitle(props.space.name));
         </div>
       </div>
     </div>
+    <template v-if="space.children.length">
+      <UiLabel :label="'Sub-spaces'" />
+      <div class="relative">
+        <div
+          class="bg-gradient-to-r from-skin-bg left-0 top-0 bottom-0 w-3 absolute z-10 pointer-events-none"
+        />
+        <div class="overflow-x-auto no-scrollbar flex">
+          <div class="px-4 py-3 flex gap-3" data-no-sidebar-swipe>
+            <SpacesListItem
+              v-for="child in space.children"
+              :key="child.id"
+              :space="child"
+              :show-about="false"
+              class="basis-[230px] shrink-0"
+            />
+          </div>
+        </div>
+        <div
+          class="bg-gradient-to-l from-skin-bg right-0 top-0 bottom-0 w-3 absolute z-10 pointer-events-none"
+        />
+      </div>
+    </template>
     <div>
       <ProposalsList
         title="Proposals"