Update activity features on Teia

src/atoms/tab/Tabs.tsx

@@ -10,6 +10,8 @@ export interface TabOptions {
   restricted?: boolean
   /**only relevant when user is the owner*/
   private?: boolean
+  /**small count indicator after the title*/
+  count?: number
 }
 
 interface TabsProps {
@@ -48,6 +50,9 @@ export const Tabs = ({
                 to={tab?.to}
               >
                 {tab.title}
+                {tab.count != null && (
+                  <span className={styles.count}>{tab.count}</span>
+                )}
               </Button>
             )
           }

src/atoms/tab/index.module.scss

@@ -24,6 +24,12 @@
   }
 }
 
+.count {
+  margin-left: 6px;
+  font-size: 0.75em;
+  color: var(--gray-60);
+}
+
 .tabs {
   display: flex;
   align-self: flex-start;

src/components/activity/ActionRow.jsx

@@ -0,0 +1,49 @@
+import { Link } from 'react-router-dom'
+import { getTimeAgo } from '@utils/time'
+import { UserLink } from '@components/user-link'
+import { ActivityBadge } from './ActivityBadge'
+import styles from './index.module.scss'
+
+/**
+ * One row in a governance-style activity feed (calendar / wiki / copyright):
+ * action · actor · target · time.
+ * This might be merged with the other activity tabs later, Indexer...
+ */
+export function ActionRow({
+  label,
+  color,
+  actor,
+  actorName,
+  to,
+  targetLabel,
+  timestamp,
+  href,
+}) {
+  return (
+    <div className={styles.action_row}>
+      <div className={styles.event}>
+        <ActivityBadge color={color} label={label} />
+      </div>
+
+      <div className={styles.from}>
+        <UserLink address={actor} name={actorName} />
+      </div>
+
+      <div className={styles.action_target}>
+        {to ? <Link to={to}>{targetLabel}</Link> : <span>{targetLabel}</span>}
+      </div>
+
+      <div className={`${styles.num} ${styles.time}`} title={timestamp}>
+        {href ? (
+          <a href={href} target="_blank" rel="noreferrer">
+            {getTimeAgo(timestamp)}
+          </a>
+        ) : (
+          getTimeAgo(timestamp)
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default ActionRow

src/components/activity/ActivityControls.jsx

@@ -0,0 +1,32 @@
+import styles from './filters.module.scss'
+
+export const SORT_OPTIONS = [
+  { key: 'newest', label: 'Newest first' },
+  { key: 'oldest', label: 'Oldest first' },
+]
+
+export function ActivityControls({ sort, onSortChange, children }) {
+  return (
+    <div className={styles.controls}>
+      <div className={styles.controls_filters}>{children}</div>
+
+      <label className={styles.sort}>
+        <span className={styles.sort_label}>Sort</span>
+        <select
+          className={styles.sort_select}
+          value={sort}
+          onChange={(e) => onSortChange(e.target.value)}
+          aria-label="Sort activity"
+        >
+          {SORT_OPTIONS.map((o) => (
+            <option key={o.key} value={o.key}>
+              {o.label}
+            </option>
+          ))}
+        </select>
+      </label>
+    </div>
+  )
+}
+
+export default ActivityControls

src/components/activity/filters.module.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: 0.5rem;
+  gap: 0.4rem;
   margin-bottom: 1rem;
 
   // Primary & Secondary Sales row
@@ -12,16 +12,17 @@
 }
 
 .chip {
-  padding: 0.35rem 0.85rem;
+  padding: 0.2rem 0.7rem;
   border: 1px solid var(--border-color);
   border-radius: 0;
   background: transparent;
-  color: var(--text-color);
+  color: var(--secondary-color);
   cursor: pointer;
-  font-size: 0.85rem;
+  font-size: 0.78rem;
   transition: background 200ms ease;
 
   &:hover {
+    color: var(--text-color);
     background: var(--border-color);
   }
 }
@@ -31,3 +32,75 @@
   color: var(--background-color);
   border-color: var(--text-color);
 }
+
+.controls {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.controls_filters {
+  flex: 1;
+  min-width: 0;
+
+  > .filters {
+    margin-bottom: 0;
+  }
+
+  > .filters + .filters {
+    margin-top: 0.4rem;
+  }
+}
+
+.sort {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-shrink: 0;
+  color: var(--secondary-color);
+  font-size: 0.78rem;
+}
+
+.sort_label {
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.sort_select {
+  appearance: none;
+  padding: 0.2rem 1.4rem 0.2rem 0.6rem;
+  border: 1px solid var(--border-color);
+  border-radius: 0;
+  background: transparent;
+  color: var(--text-color);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 0.78rem;
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position: right 0.65rem center, right 0.4rem center;
+  background-size: 4px 4px, 4px 4px;
+  background-repeat: no-repeat;
+
+  &:hover {
+    border-color: var(--text-color);
+  }
+
+  option {
+    background: var(--background-color);
+    color: var(--text-color);
+  }
+}
+
+@media (max-width: 600px) {
+  .controls {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.6rem;
+  }
+
+  .sort {
+    justify-content: center;
+  }
+}

src/components/activity/index.js

@@ -2,4 +2,6 @@ export { ActivityRow, default } from './ActivityRow'
 export { ActivityBadge } from './ActivityBadge'
 export { ActivityList } from './ActivityList'
 export { ActivityFilters } from './ActivityFilters'
+export { ActivityControls } from './ActivityControls'
 export { SocialActivityRow } from './SocialActivityRow'
+export { ActionRow } from './ActionRow'

src/components/activity/index.module.scss

@@ -162,6 +162,37 @@ $social-grid: 104px minmax(120px, 1fr) minmax(180px, 3fr) minmax(120px, 1fr)
   padding: 1.2rem 0;
 }
 
+.action_head,
+.action_row {
+  display: grid;
+  grid-template-columns: 110px 200px minmax(0, 1fr) 100px;
+  align-items: center;
+  gap: 1rem;
+  min-width: 560px;
+}
+
+.action_head {
+  padding: 0 0 0.6rem;
+  color: var(--secondary-color);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.action_row {
+  padding: 0.6rem 0;
+  border-bottom: 1px solid var(--border-color);
+  font-size: 0.9rem;
+}
+
+.action_target {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .badge_channel {
   background: var(--gray-60);
 }
@@ -171,3 +202,92 @@ $social-grid: 104px minmax(120px, 1fr) minmax(180px, 3fr) minmax(120px, 1fr)
 .badge_token {
   background: var(--gray-90);
 }
+
+// Mobile styling
+@media (max-width: 600px) {
+  .social_head,
+  .action_head {
+    display: none;
+  }
+
+  .badge {
+    min-width: 0;
+  }
+
+  .row,
+  .social_row,
+  .action_row {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: 0.4rem 0.6rem;
+    min-width: 0;
+    padding: 0.8rem 0;
+  }
+
+  .row {
+    grid-template-areas:
+      'badge amount time'
+      'item item item'
+      'from to price';
+  }
+
+  .social_row {
+    grid-template-areas:
+      'badge from time'
+      'content content content'
+      'target target target';
+  }
+
+  .action_row {
+    grid-template-areas:
+      'badge from time'
+      'target target target';
+  }
+
+  .event {
+    grid-area: badge;
+  }
+  .item {
+    grid-area: item;
+  }
+  .from {
+    grid-area: from;
+  }
+  .to {
+    grid-area: to;
+  }
+  .amount {
+    grid-area: amount;
+  }
+  .price {
+    grid-area: price;
+  }
+  .time {
+    grid-area: time;
+  }
+  .social_content {
+    grid-area: content;
+    white-space: normal;
+  }
+  .social_target,
+  .action_target {
+    grid-area: target;
+  }
+
+  .amount,
+  .from,
+  .to {
+    text-align: left;
+  }
+
+  .row .to:not(:empty) {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+
+    &::before {
+      content: '→';
+      flex-shrink: 0;
+      color: var(--secondary-color);
+    }
+  }
+}

src/components/activity/list.module.scss

@@ -21,6 +21,12 @@
   }
 }
 
+@media (max-width: 600px) {
+  .head {
+    display: none;
+  }
+}
+
 .more {
   display: flex;
   justify-content: center;

src/components/token-comments/TokenComments.jsx

@@ -13,7 +13,7 @@ import styles from './index.module.scss'
 
 const POST_FEE_LABEL = '0.025 XTZ'
 
-function buildTree(comments) {
+export function buildTree(comments) {
   const visible = []
   const hiddenIds = new Set()
   for (const c of comments) {