Page home & explore for community (goplus#973)

* community explore & home

* ProjectItem hover details

spx-gui/src/apis/common/index.ts

@@ -33,4 +33,9 @@ export type FileCollection = {
  [path: string]: UniversalUrl
 }
 
+/** Get time string for spx-backend APIs */
+export function timeStringify(time: number) {
+ return new Date(time).toISOString()
+}
+
 export const client = new Client()

spx-gui/src/apis/project.ts

@@ -1,5 +1,6 @@
+import dayjs from 'dayjs'
 import type { FileCollection, ByPage, PaginationParams } from './common'
-import { client, IsPublic, ownerAll } from './common'
+import { client, IsPublic, ownerAll, timeStringify } from './common'
 import { ApiException, ApiExceptionCode } from './common/exception'
 
 export { IsPublic, ownerAll }
@@ -105,6 +106,14 @@ export type ListProjectParams = PaginationParams & {
  owner?: string
  /** Filter projects by name pattern */
  keyword?: string
+ /** Filter projects that were created after this timestamp */
+ createdAfter?: string
+ /** Filter projects that gained new likes after this timestamp */
+ likesReceivedAfter?: string
+ /** Filter projects that were remixed after this timestamp */
+ remixesReceivedAfter?: string
+ /** If filter projects created by followees of logged-in user */
+ fromFollowees?: boolean
  /** Field by which to order the results */
  orderBy?: 'cTime' | 'uTime' | 'likeCount' | 'remixCount' | 'recentLikeCount' | 'recentRemixCount'
  /** Order in which to sort the results */
@@ -125,6 +134,49 @@ export async function getProject(owner: string, name: string) {
  return __adaptProjectData(await client.get(`/project/${encode(owner, name)}`))
 }
 
+export enum ExploreOrder {
+ MostLikes = 'likes',
+ MostRemixes = 'remix',
+ FollowingCreated = 'following'
+}
+
+export type ExploreParams = {
+ order: ExploreOrder
+ count: number
+}
+
+/** Get project list for explore purpose */
+export async function exploreProjects({ order, count }: ExploreParams) {
+ // count within the last month
+ const countAfter = timeStringify(dayjs().subtract(1, 'month').valueOf())
+ const p: ListProjectParams = {
+ isPublic: IsPublic.public,
+ owner: ownerAll,
+ pageSize: count,
+ pageIndex: 1
+ }
+ switch (order) {
+ case ExploreOrder.MostLikes:
+ p.likesReceivedAfter = countAfter
+ p.orderBy = 'recentLikeCount'
+ p.sortOrder = 'desc'
+ break
+ case ExploreOrder.MostRemixes:
+ p.remixesReceivedAfter = countAfter
+ p.orderBy = 'recentRemixCount'
+ p.sortOrder = 'desc'
+ break
+ case ExploreOrder.FollowingCreated:
+ p.fromFollowees = true
+ p.createdAfter = countAfter
+ p.orderBy = 'cTime'
+ p.sortOrder = 'desc'
+ break
+ }
+ const listResult = await listProject(p)
+ return listResult.data
+}
+
 /**
  * Check if given project liked by current logged-in user.
  * If not logged in, `false` will be returned.

spx-gui/src/components/community/CommunityHeader.vue

@@ -0,0 +1,47 @@
+<!-- Simple header component for pages like search & explore -->
+
+<template>
+ <section class="header">
+ <CenteredWrapper class="header-content">
+ <h1 class="title">
+ <slot></slot>
+ </h1>
+ <label class="options">
+ <slot name="options"></slot>
+ </label>
+ </CenteredWrapper>
+ </section>
+</template>
+
+<script setup lang="ts">
+import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
+</script>
+
+<style lang="scss" scoped>
+@import '@/utils/utils';
+
+.header {
+ flex: 0 0 auto;
+ background-color: var(--ui-color-grey-100);
+}
+
+.header-content {
+ height: 64px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 20px;
+
+ .title {
+ flex: 1 1 0;
+ @include text-ellipsis;
+ line-height: 26px;
+ font-size: 16px;
+ color: var(--ui-color-title);
+ }
+
+ .options {
+ flex: 0 0 auto;
+ }
+}
+</style>

spx-gui/src/components/community/CommunityNavbar.vue

@@ -2,7 +2,9 @@
  <NavbarWrapper centered>
  <template #left>
  <NavbarDropdown>
- <template #trigger> Create(TODO) </template>
+ <template #trigger>
+ <UIIcon type="plus" />
+ </template>
  <UIMenu>
  <NavbarNewProjectItem />
  <NavbarOpenProjectItem />

spx-gui/src/components/community/ProjectsSection.vue

@@ -0,0 +1,80 @@
+<!-- Project list as a section -->
+
+<template>
+ <section>
+ <header class="header">
+ <h2 class="title">
+ <slot name="title"></slot>
+ </h2>
+ <RouterLink class="link" :to="linkTo">
+ <slot name="link"></slot>
+ <UIIcon class="link-icon" type="arrowRightSmall" />
+ </RouterLink>
+ </header>
+ <ul class="projects">
+ <UILoading v-if="queryRet.isLoading.value" :mask="false" />
+ <!-- TODO: simpler UIError & UIEmpty here -->
+ <UIError v-else-if="queryRet.error.value != null" :retry="queryRet.refetch">
+ {{ $t(queryRet.error.value.userMessage) }}
+ </UIError>
+ <UIEmpty
+ v-else-if="queryRet.data.value != null && queryRet.data.value.length === 0"
+ size="large"
+ />
+ <template v-else-if="queryRet.data.value != null">
+ <slot></slot>
+ </template>
+ </ul>
+ </section>
+</template>
+
+<script setup lang="ts">
+import type { QueryRet } from '@/utils/exception'
+import { UIIcon, UILoading, UIError, UIEmpty } from '@/components/ui'
+
+defineProps<{
+ linkTo: string
+ queryRet: QueryRet<unknown[]>
+}>()
+</script>
+
+<style lang="scss" scoped>
+.header {
+ height: 56px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .title {
+ line-height: 28px;
+ font-size: 20px;
+ color: var(--ui-color-title);
+ }
+
+ .link {
+ display: flex;
+ color: var(--ui-color-primary-main);
+ text-decoration: none;
+ }
+
+ .link-icon {
+ margin-left: 8px;
+ width: 20px;
+ height: 20px;
+ }
+}
+
+.projects {
+ padding: 20px 0;
+ margin-bottom: 12px;
+
+ // same height as `ProjectItem`, to prevent layout shift
+ min-height: 260px;
+ position: relative;
+
+ display: flex;
+ overflow: hidden;
+ align-items: center;
+ gap: 20px;
+}
+</style>

spx-gui/src/components/navbar/NavbarProfile.vue

@@ -1,6 +1,6 @@
 <template>
  <div v-if="!userStore.userInfo" class="sign-in">
- <UIButton :disabled="!isOnline" @click="userStore.signInWithRedirection()">{{
+ <UIButton type="secondary" :disabled="!isOnline" @click="userStore.signInWithRedirection()">{{
  $t({ en: 'Sign in', zh: '登录' })
  }}</UIButton>
  </div>
@@ -37,14 +37,18 @@ const { isOnline } = useNetwork()
 <style lang="scss" scoped>
 .sign-in,
 .avatar {
+ margin: 0 8px;
  height: 100%;
  display: flex;
  align-items: center;
 }
 
+.sign-in {
+ white-space: nowrap;
+}
+
 .avatar {
- margin-right: 8px;
- padding: 0 24px;
+ padding: 0 16px;
 
  &:hover {
  background-color: var(--ui-color-primary-600);

spx-gui/src/components/navbar/NavbarWrapper.vue

@@ -72,6 +72,7 @@ withDefaults(
 .right {
  flex-basis: 30%;
  display: flex;
+ gap: 8px;
 }
 
 .center {

spx-gui/src/components/project/item/ProjectItem.vue

@@ -128,18 +128,16 @@ const handleRemove = useMessageHandle(
 </script>
 
 <style lang="scss" scoped>
-@mixin text-ellipsis {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
+@import '@/utils/utils';
 
 .project-item {
  width: 240px;
+ flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--ui-border-radius-2);
  border: 1px solid var(--ui-color-grey-400);
  background-color: var(--ui-color-grey-100);
+ transition: 0.1s;
 }
 
 .link {
@@ -159,6 +157,8 @@ const handleRemove = useMessageHandle(
  }
 
  .options {
+ opacity: 0;
+ visibility: hidden;
  position: absolute;
  top: 8px;
  right: 8px;
@@ -171,7 +171,7 @@ const handleRemove = useMessageHandle(
  color: var(--ui-color-grey-800);
  background-color: var(--ui-color-grey-100);
  cursor: pointer;
- transition: 0.3s;
+ transition: 0.1s;
 
  &:hover {
  color: var(--ui-color-grey-100);
@@ -191,6 +191,14 @@ const handleRemove = useMessageHandle(
  }
 }
 
+.project-item:hover {
+ box-shadow: 0px 4px 12px 0px rgba(36, 41, 47, 0.08);
+ .options {
+ visibility: visible;
+ opacity: 1;
+ }
+}
+
 .info {
  padding: var(--ui-gap-middle);
 

spx-gui/src/components/ui/empty/UIEmpty.vue

@@ -101,6 +101,7 @@ const slots = useSlots()
 }
 
 .size-large {
+ width: 100%;
  flex-direction: column;
  gap: 12px;
 

spx-gui/src/components/ui/error/UIError.vue

@@ -1,7 +1,7 @@
 <template>
  <div class="ui-error">
  <img :src="defaultErrorImg" />
- <h5 class="error">
+ <h5 class="message">
  <slot></slot>
  </h5>
  <button v-if="retry != null" class="retry" @click="retry">{{ retryText }}</button>
@@ -32,7 +32,7 @@ const retryText = computed(() => config.error?.retryText ?? 'Retry')
  justify-content: center;
 }
 
-.error {
+.message {
  margin-top: 12px;
  font-size: 16px;
  line-height: 26px;

spx-gui/src/components/ui/icons/UIIcon.vue

@@ -37,6 +37,7 @@ import volumeOff from './volume-off.svg?raw'
 import statePublic from './state-public.svg?raw'
 import statePrivate from './state-private.svg?raw'
 import heart from './heart.svg?raw'
+import arrowRightSmall from './arrow-right-small.svg?raw'
 
 const typeIconMap = {
  file,
@@ -70,7 +71,8 @@ const typeIconMap = {
  volumeOff,
  statePublic,
  statePrivate,
- heart
+ heart,
+ arrowRightSmall
 }
 
 export type Type = keyof typeof typeIconMap