Improve UI of a post

Author: markharding

apps/polycentric/src/common/components/primitives/Text.tsx

@@ -77,6 +77,6 @@ const VARIANT_CONFIG: Record<
   title: { size: 'xl', defaultWeight: 'bold' },
   subtitle: { size: 'lg', defaultWeight: 'semibold' },
   body: { size: 'md', defaultWeight: 'regular' },
-  secondary: { size: 'sm', defaultWeight: 'regular' },
+  secondary: { size: 'md', defaultWeight: 'regular' },
   small: { size: 'xs', defaultWeight: 'semibold' },
 } as const;

apps/polycentric/src/common/lib/polycentric-hooks/helpers.ts

@@ -126,7 +126,15 @@ export function timeAgo(unixMs: number): string {
   if (mins < 60) return `${mins}m`;
   const hours = Math.floor(mins / 60);
   if (hours < 24) return `${hours}h`;
-  return `${Math.floor(hours / 24)}d`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d`;
+  const date = new Date(unixMs);
+  const sameYear = date.getFullYear() === new Date().getFullYear();
+  return date.toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: sameYear ? undefined : 'numeric',
+  });
 }
 
 export function bytesToHex(bytes: Uint8Array): string {

apps/polycentric/src/common/theme/tokens.ts

@@ -2,6 +2,7 @@ import { StyleSheet, TextStyle } from 'react-native';
 
 export const Spacing = {
   '0': 0,
+  '2xs': 2,
   xs: 4,
   sm: 8,
   md: 12,
@@ -31,7 +32,7 @@ export const typography = {
   fontSize: {
     xs: 12,
     sm: 14,
-    md: 17,
+    md: 15,
     lg: 20,
     xl: 24,
   } as const,
@@ -43,7 +44,7 @@ export const typography = {
   lineHeight: {
     xs: 16,
     sm: 20,
-    md: 24,
+    md: 20,
     lg: 28,
     xl: 32,
   } as const,
@@ -250,6 +251,9 @@ export const Atoms = StyleSheet.create({
   gap_0: {
     gap: Spacing['0'],
   },
+  gap_2xs: {
+    gap: Spacing['2xs'],
+  },
   gap_xs: {
     gap: Spacing.xs,
   },

apps/polycentric/src/features/post/ConversationView.tsx

@@ -40,7 +40,7 @@ export function ConversationView({ post }: ConversationViewProps) {
           <View style={[Atoms.w_full]}>
             <Post
               post={item}
-              hideReplyingTo={false}
+              hideReplyingTo={true}
               disablePress={item.id === post.id}
               showThreadLineAbove={lineAbove}
               showThreadLineBelow={lineBelow}

apps/polycentric/src/features/post/Post.tsx

@@ -136,7 +136,7 @@ export const Post = memo(function Post({
       disabled={disablePress}
     >
       {/* Top padding bar */}
-      <View style={[Atoms.flex_row, Atoms.gap_lg]}>
+      <View style={[Atoms.flex_row, Atoms.gap_md]}>
         <View
           style={[
             Atoms.align_center,
@@ -167,7 +167,7 @@ export const Post = memo(function Post({
       </View>
 
       {/* Main post body */}
-      <View style={[Atoms.flex_row, Atoms.gap_lg]}>
+      <View style={[Atoms.flex_row, Atoms.gap_md]}>
         {/* Left side (avatar and thread line) */}
         <View style={[Atoms.align_center]}>
           {authorIdentity ? (
@@ -195,52 +195,48 @@ export const Post = memo(function Post({
         </View>
 
         {/* Main post content */}
-        <View style={[Atoms.flex_1, Atoms.pb_md]}>
+        <View style={[Atoms.flex_1, Atoms.pb_md, Atoms.gap_2xs]}>
           {/* Author name and other topbar items */}
-          <View
-            style={[
-              Atoms.flex_row,
-              Atoms.justify_between,
-              { alignItems: 'baseline', marginTop: -1 },
-            ]}
-          >
+          <View style={[Atoms.flex_row, Atoms.align_center]}>
             <View
               style={[
                 Atoms.flex_1,
                 Atoms.flex_row,
                 Atoms.gap_xs,
-                { alignItems: 'baseline' },
+                Atoms.align_center,
               ]}
             >
               <PostAuthorName
                 name={authorName || '...'}
                 onPress={handleAuthorPress}
               />
               {authorIdentity ? (
-                <IdentityTag
-                  identity={authorIdentity}
-                  style={{ transform: [{ translateY: 1 }] }}
-                />
+                <IdentityTag identity={authorIdentity} />
               ) : null}
-            </View>
 
-            {time ? (
-              <Text
-                variant="small"
-                color="neutral_500"
-                style={{ lineHeight: 18, marginLeft: 8 }}
-              >
-                {time}
-              </Text>
-            ) : null}
+              {time ? (
+                <>
+                  <Text
+                    variant="secondary"
+                    color="neutral_500"
+                    fontWeight="bold"
+                  >
+                    ·
+                  </Text>
+                  <Text variant="secondary" color="neutral_500">
+                    {time}
+                  </Text>
+                </>
+              ) : null}
+            </View>
           </View>
 
           {!hideReplyingTo && post.reply?.parentId ? (
             <ReplyingToSubheader parentId={post.reply.parentId} />
           ) : null}
 
           {displayContent ? (
-            <Text variant="secondary" style={[Atoms.mt_xs]}>
+            <Text variant="secondary">
               {displayContent}
               {isTruncatedPreview ? '...' : ''}
             </Text>
@@ -251,7 +247,7 @@ export const Post = memo(function Post({
               onPress={toggleContentExpanded}
               onHoverIn={onExpandHoverIn}
               onHoverOut={onExpandHoverOut}
-              style={{ marginTop: 2, alignSelf: 'flex-start' }}
+              style={[Atoms.self_start]}
             >
               <Text
                 variant="small"
@@ -272,7 +268,7 @@ export const Post = memo(function Post({
             onDislike={handleDislike}
             liked={liked}
             disliked={disliked}
-            style={{ marginTop: 8 }}
+            style={[Atoms.mt_sm]}
           />
         </View>
       </View>
@@ -302,12 +298,12 @@ function ReplyingToSubheader({ parentId }: { parentId: string }) {
   return (
     <Pressable
       onPress={handlePress}
-      style={[Atoms.flex_row, Atoms.mt_xs, { alignItems: 'baseline' }]}
+      style={[Atoms.flex_row, Atoms.align_center]}
     >
-      <Text variant="small" color="neutral_500" fontWeight="regular">
-        Reply to{' '}
+      <Text variant="secondary" color="neutral_500" fontWeight="regular">
+        Replying to{' '}
       </Text>
-      <Text variant="small" color="primary_500">
+      <Text variant="secondary" color="primary_500">
         {truncateName(parentName || '…', 24)}
       </Text>
     </Pressable>
@@ -328,10 +324,7 @@ function PostAuthorName({
       <Text
         variant="secondary"
         fontWeight="bold"
-        style={[
-          { lineHeight: 18 },
-          hovered && { textDecorationLine: 'underline' },
-        ]}
+        style={[hovered && { textDecorationLine: 'underline' }]}
       >
         {truncateName(name, 16)}
       </Text>

packages/js-node/examples/server/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "tsx src/index.ts"
+    "examples": "tsx src/index.ts"
   },
   "dependencies": {
     "@polycentric/js-node": "workspace:*",