fix(project): align metadata and ranking tabs (#1138)

* fix(project): align conversation metadata

Extract shared inline metadata primitives for compact time and edited labels, and reuse them in feed identity metadata, project activity cards, and project conversation headers. Reuse the same metadata styling for translation controls so translated/original labels align visually with timestamp metadata.

Move the project conversation header card into a focused component so breadcrumb/menu/title/body/status layout is no longer embedded in the full project conversation page. Keep the conversation action menu pinned to the breadcrumb row while the breadcrumb wraps independently.

Expose createdAt and isEdited for project page activities so cards can show created-time metadata and Edited state without relying on updatedAt, which can reflect non-content updates.

Deploy: agora, api

* fix(agora): clean up ranking tabs

Hide completed and canceled prioritization tabs for manual MaxDiff conversations, since those lifecycle categories are only useful for GitHub-linked items. Manual URLs targeting those tabs now fall back to Summary and manual conversations skip lifecycle fetches.

Only make result rows clickable when the dialog adds information: a body, an external GitHub link, or a likely truncated compact title. Full result tabs now show uncropped titles.

Clarify COCM copy across MaxDiff learn-more text in supported languages as an optional setup that is not currently enabled and can help correct unrepresentative participation by improving vote distribution across groups.

Deploy: agora

Author: nicobao

services/agora/src/api/api.ts

@@ -5173,6 +5173,8 @@ export interface ApiV1ProjectPageFetchPost200ResponseActivitiesInner {
     'slug': string;
     'kind': ApiV1ProjectPageFetchPost200ResponseActivitiesInnerKindEnum;
     'isClosed': boolean;
+    'createdAt': string;
+    'isEdited': boolean;
     'title': string;
     'bodyPlainText': string;
     'originalContent': ApiV1ProjectPageFetchPost200ResponseActivitiesInnerOriginalContent;

services/agora/src/api/docs/ApiV1ProjectPageFetchPost200ResponseActivitiesInner.md

@@ -8,6 +8,8 @@ Name | Type | Description | Notes
 **slug** | **string** |  | [default to undefined]
 **kind** | **string** |  | [default to undefined]
 **isClosed** | **boolean** |  | [default to undefined]
+**createdAt** | **string** |  | [default to undefined]
+**isEdited** | **boolean** |  | [default to undefined]
 **title** | **string** |  | [default to undefined]
 **bodyPlainText** | **string** |  | [default to '']
 **originalContent** | [**ApiV1ProjectPageFetchPost200ResponseActivitiesInnerOriginalContent**](ApiV1ProjectPageFetchPost200ResponseActivitiesInnerOriginalContent.md) |  | [default to undefined]
@@ -25,6 +27,8 @@ const instance: ApiV1ProjectPageFetchPost200ResponseActivitiesInner = {
     slug,
     kind,
     isClosed,
+    createdAt,
+    isEdited,
     title,
     bodyPlainText,
     originalContent,

services/agora/src/components/features/user/UserIdentityCard.vue

@@ -25,12 +25,12 @@
         />
       </div>
 
-      <div :style="{ fontSize: '0.75rem' }" class="timestamp-container">
-        {{ timeAgo }}
-        <template v-if="isEdited">
-          <span class="bullet">•</span>
-          <span>{{ t("edited") }}</span>
-        </template>
+      <div class="timestamp-container">
+        <ContentMetadataLine
+          :created-at="createdAt"
+          :is-edited="isEdited"
+          :edited-label="t('edited')"
+        />
         <template v-if="participationMode">
           <span class="bullet">•</span>
           <span
@@ -67,16 +67,16 @@
 import OrganizationImage from "src/components/account/OrganizationImage.vue";
 import UserAvatar from "src/components/account/UserAvatar.vue";
 import UserMetadata from "src/components/features/user/UserMetadata.vue";
+import ContentMetadataLine from "src/components/ui-library/ContentMetadataLine.vue";
 import { useComponentI18n } from "src/composables/ui/useComponentI18n";
-import { useLocalizedTimeAgo } from "src/composables/ui/useLocalizedTimeAgo";
 import type { ParticipationMode } from "src/shared/types/zod";
 
 import {
   type UserIdentityCardTranslations,
   userIdentityCardTranslations,
 } from "./UserIdentityCard.i18n";
 
-const props = defineProps<{
+defineProps<{
   userIdentity: string;
   authorVerified: boolean;
   createdAt: Date;
@@ -87,8 +87,6 @@ const props = defineProps<{
   participationMode?: ParticipationMode;
 }>();
 
-const timeAgo = useLocalizedTimeAgo(() => props.createdAt);
-
 const { t } = useComponentI18n<UserIdentityCardTranslations>(
   userIdentityCardTranslations
 );

services/agora/src/components/post/maxdiff/MaxDiffItemListSection.vue

@@ -35,14 +35,15 @@
               v-for="(item, index) in displayItems"
               :key="item.slugId"
               class="item-row"
-              @click="props.onClickItem({ title: item.title, body: item.body, externalUrl: item.externalUrl })"
+              :class="{ 'item-row--clickable': canOpenItem(item) }"
+              @click="handleItemClick(item)"
             >
               <span class="item-number">{{ index + 1 }}</span>
               <div class="item-details">
                 <ZKHtmlContent
                   class="item-content"
                   :html-body="item.title"
-                  :compact-mode="true"
+                  :compact-mode="compactMode"
                   :enable-links="false"
                   content-role="title"
                 />
@@ -108,12 +109,45 @@ const props = defineProps<{
 }>();
 
 const COMPACT_LIMIT = 3;
+const EXPANDABLE_COMPACT_TITLE_LENGTH = 220;
 
 const displayItems = computed(() =>
   props.compactMode ? props.items.slice(0, COMPACT_LIMIT) : props.items,
 );
 
 const hasMore = computed(() => props.items.length > COMPACT_LIMIT);
+
+function plainTextFromHtml(html: string): string {
+  return html.replace(/<[^>]*>/g, " ").replace(/&nbsp;/g, " ").trim();
+}
+
+function hasBodyContent(body: string | null): boolean {
+  return body !== null && plainTextFromHtml(body).length > 0;
+}
+
+function canOpenItem(item: MaxDiffListItem): boolean {
+  if (hasBodyContent(item.body)) {
+    return true;
+  }
+  if (item.externalUrl !== null) {
+    return true;
+  }
+  return (
+    props.compactMode &&
+    plainTextFromHtml(item.title).length > EXPANDABLE_COMPACT_TITLE_LENGTH
+  );
+}
+
+function handleItemClick(item: MaxDiffListItem): void {
+  if (!canOpenItem(item)) {
+    return;
+  }
+  props.onClickItem({
+    title: item.title,
+    body: item.body,
+    externalUrl: item.externalUrl,
+  });
+}
 </script>
 
 <style scoped lang="scss">
@@ -146,8 +180,11 @@ const hasMore = computed(() => props.items.length > COMPACT_LIMIT);
   padding: 0.75rem 1rem;
   background: $app-background-color;
   border-radius: 8px;
-  cursor: pointer;
   transition: background-color 0.2s ease;
+}
+
+.item-row--clickable {
+  cursor: pointer;
 
   &:hover {
     background-color: rgba(0, 0, 0, 0.05);