silberengel
/
jumble
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

make mobile display more efficient

imwald
Silberengel 5 months ago
parent
bbe700971d
commit
af89e5ae01
2 changed files with 68 additions and 27 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 89
      src/pages/primary/DiscussionsPage/ThreadCard.tsx
  2. 6
      src/pages/primary/DiscussionsPage/index.tsx

89
src/pages/primary/DiscussionsPage/ThreadCard.tsx
Unescape View File

@ -10,6 +10,7 @@ import { DISCUSSION_TOPICS } from './CreateThreadDialog' @@ -10,6 +10,7 @@ import { DISCUSSION_TOPICS } from './CreateThreadDialog'
import Username from '@/components/Username'
import UserAvatar from '@/components/UserAvatar'
import VoteButtons from '@/components/NoteStats/VoteButtons'
import { useScreenSize } from '@/providers/ScreenSizeProvider'
interface ThreadWithRelaySource extends NostrEvent {
_relaySource?: string
@ -23,6 +24,7 @@ interface ThreadCardProps { @@ -23,6 +24,7 @@ interface ThreadCardProps {
export default function ThreadCard({ thread, onThreadClick, className }: ThreadCardProps) {
const { t } = useTranslation()
const { isSmallScreen } = useScreenSize()
// Extract title from tags
const titleTag = thread.tags.find(tag => tag[0] === 'title' && tag[1])
@ -68,42 +70,81 @@ export default function ThreadCard({ thread, onThreadClick, className }: ThreadC @@ -68,42 +70,81 @@ export default function ThreadCard({ thread, onThreadClick, className }: ThreadC
onClick={onThreadClick}
>
<CardHeader className="pb-3">
<div className="flex items-start justify-between gap-3">
<div className="flex items-start gap-3 flex-1 min-w-0">
<VoteButtons event={thread} />
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-2">
<h3 className="font-semibold text-lg leading-tight line-clamp-2">
{isSmallScreen ? (
<div className="space-y-3">
<div className="flex items-start gap-3">
<VoteButtons event={thread} />
<div className="flex-1 min-w-0">
<h3 className="font-semibold text-lg leading-tight line-clamp-2 mb-2">
{title}
</h3>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Badge variant="secondary" className="text-xs">
<topicInfo.icon className="w-3 h-3 mr-1" />
{topicInfo.label}
</Badge>
<div className="flex items-center gap-1">
<Clock className="w-3 h-3" />
{timeAgo}
</div>
</div>
</div>
<div className="flex flex-col items-end gap-2">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<UserAvatar userId={thread.pubkey} size="xSmall" />
<Username
userId={thread.pubkey}
className="truncate font-medium"
skeletonClassName="h-4 w-20"
/>
</div>
{thread._relaySource && (
<Badge variant="outline" className="text-xs shrink-0">
<Badge variant="outline" className="text-xs">
<Server className="w-3 h-3 mr-1" />
{formatRelayName(thread._relaySource)}
</Badge>
)}
</div>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Badge variant="secondary" className="text-xs">
<topicInfo.icon className="w-3 h-3 mr-1" />
{topicInfo.label}
</Badge>
<div className="flex items-center gap-1">
<Clock className="w-3 h-3" />
{timeAgo}
</div>
</div>
) : (
<div className="flex items-start justify-between gap-3">
<div className="flex items-start gap-3 flex-1 min-w-0">
<VoteButtons event={thread} />
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-2">
<h3 className="font-semibold text-lg leading-tight line-clamp-2">
{title}
</h3>
{thread._relaySource && (
<Badge variant="outline" className="text-xs shrink-0">
<Server className="w-3 h-3 mr-1" />
{formatRelayName(thread._relaySource)}
</Badge>
)}
</div>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Badge variant="secondary" className="text-xs">
<topicInfo.icon className="w-3 h-3 mr-1" />
{topicInfo.label}
</Badge>
<div className="flex items-center gap-1">
<Clock className="w-3 h-3" />
{timeAgo}
</div>
</div>
</div>
</div>
<div className="flex items-center gap-2 text-sm text-muted-foreground shrink-0">
<UserAvatar userId={thread.pubkey} size="xSmall" />
<Username
userId={thread.pubkey}
className="truncate font-medium"
skeletonClassName="h-4 w-20"
/>
</div>
</div>
<div className="flex items-center gap-2 text-sm text-muted-foreground shrink-0">
<UserAvatar userId={thread.pubkey} size="xSmall" />
<Username
userId={thread.pubkey}
className="truncate font-medium"
skeletonClassName="h-4 w-20"
/>
</div>
</div>
)}
</CardHeader>
<CardContent className="pt-0">

6
src/pages/primary/DiscussionsPage/index.tsx
Unescape View File

@ -1,6 +1,6 @@ @@ -1,6 +1,6 @@
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { DEFAULT_FAVORITE_RELAYS } from '@/constants'
import { DEFAULT_FAVORITE_RELAYS, FAST_READ_RELAY_URLS } from '@/constants'
import { useFavoriteRelays } from '@/providers/FavoriteRelaysProvider'
import { useNostr } from '@/providers/NostrProvider'
import { forwardRef, useEffect, useState } from 'react'
@ -172,8 +172,8 @@ const DiscussionsPage = forwardRef((_, ref) => { @@ -172,8 +172,8 @@ const DiscussionsPage = forwardRef((_, ref) => {
const fetchAllThreads = async () => {
setLoading(true)
try {
// Filter by relay if selected, otherwise use all available relays
const relayUrls = selectedRelay ? [selectedRelay] : availableRelays
// Filter by relay if selected, otherwise use all available relays plus fast read relays
const relayUrls = selectedRelay ? [selectedRelay] : Array.from(new Set([...availableRelays, ...FAST_READ_RELAY_URLS]))
// Fetch all kind 11 events (limit 100, newest first) with relay source tracking
console.log('Fetching kind 11 events from relays:', relayUrls)

Write Preview
Loading…
Cancel
Save