[Draft] feat(nostr-feed): Reddit-style link aggregator #9
20 changed files with 5262 additions and 243 deletions
|
|
@ -137,6 +137,11 @@ export const SERVICE_TOKENS = {
|
|||
PROFILE_SERVICE: Symbol('profileService'),
|
||||
REACTION_SERVICE: Symbol('reactionService'),
|
||||
|
||||
// Link aggregator services
|
||||
SUBMISSION_SERVICE: Symbol('submissionService'),
|
||||
LINK_PREVIEW_SERVICE: Symbol('linkPreviewService'),
|
||||
COMMUNITY_SERVICE: Symbol('communityService'),
|
||||
|
||||
// Nostr metadata services
|
||||
NOSTR_METADATA_SERVICE: Symbol('nostrMetadataService'),
|
||||
|
||||
|
|
|
|||
176
src/modules/nostr-feed/LINK_AGGREGATOR_PLAN.md
Normal file
176
src/modules/nostr-feed/LINK_AGGREGATOR_PLAN.md
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
# Link Aggregator Implementation Plan
|
||||
|
||||
## Overview
|
||||
|
||||
Transform the nostr-feed module into a Reddit-style link aggregator with support for:
|
||||
- **Link posts** - External URLs with Open Graph previews
|
||||
- **Media posts** - Images/videos with inline display
|
||||
- **Self posts** - Text/markdown content
|
||||
|
||||
## NIP Compliance
|
||||
|
||||
| NIP | Purpose | Usage |
|
||||
|-----|---------|-------|
|
||||
| NIP-72 | Moderated Communities | Community definitions (kind 34550), approvals (kind 4550) |
|
||||
| NIP-22 | Comments | Community posts (kind 1111) with scoped threading |
|
||||
| NIP-92 | Media Attachments | `imeta` tags for media metadata |
|
||||
| NIP-94 | File Metadata | Reference for media fields |
|
||||
| NIP-25 | Reactions | Upvote (`+`) / Downvote (`-`) |
|
||||
| NIP-10 | Reply Threading | Fallback for kind 1 compatibility |
|
||||
|
||||
## Event Structure
|
||||
|
||||
### Submission (kind 1111)
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"kind": 1111,
|
||||
"content": "<self-post body or link description>",
|
||||
"tags": [
|
||||
// Community scope (NIP-72 + NIP-22)
|
||||
["A", "34550:<community-pubkey>:<community-d>", "<relay>"],
|
||||
["a", "34550:<community-pubkey>:<community-d>", "<relay>"],
|
||||
["K", "34550"],
|
||||
["k", "34550"],
|
||||
["P", "<community-pubkey>"],
|
||||
["p", "<community-pubkey>"],
|
||||
|
||||
// Submission metadata
|
||||
["title", "<post title>"],
|
||||
["post-type", "link|media|self"],
|
||||
|
||||
// Link post fields
|
||||
["r", "<url>"],
|
||||
["preview-title", "<og:title>"],
|
||||
["preview-description", "<og:description>"],
|
||||
["preview-image", "<og:image>"],
|
||||
["preview-site-name", "<og:site_name>"],
|
||||
|
||||
// Media post fields (NIP-92)
|
||||
["imeta", "url <url>", "m <mime>", "dim <WxH>", "blurhash <hash>", "alt <desc>"],
|
||||
|
||||
// Common
|
||||
["t", "<hashtag>"],
|
||||
["nsfw", "true|false"]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Comment on Submission (kind 1111)
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"kind": 1111,
|
||||
"content": "<comment text>",
|
||||
"tags": [
|
||||
// Root scope (the community)
|
||||
["A", "34550:<community-pubkey>:<community-d>", "<relay>"],
|
||||
["K", "34550"],
|
||||
["P", "<community-pubkey>"],
|
||||
|
||||
// Parent (the submission or parent comment)
|
||||
["e", "<parent-event-id>", "<relay>", "<parent-pubkey>"],
|
||||
["k", "1111"],
|
||||
["p", "<parent-pubkey>"]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Implementation Phases
|
||||
|
||||
### Phase 1: Core Data Model
|
||||
- [x] Create feature branch
|
||||
- [x] Document plan
|
||||
- [x] Create `types/submission.ts` - Type definitions
|
||||
- [x] Create `SubmissionService.ts` - Submission CRUD
|
||||
- [x] Create `LinkPreviewService.ts` - OG tag fetching
|
||||
- [x] Extend `FeedService.ts` - Handle kind 1111
|
||||
|
||||
### Phase 2: Post Creation
|
||||
- [x] Create `SubmitComposer.vue` - Multi-type composer
|
||||
- [x] Add link preview on URL paste
|
||||
- [x] Add NSFW toggle
|
||||
- [x] Add route `/submit` for composer
|
||||
- [ ] Integrate with pictrs for media upload (Future)
|
||||
|
||||
### Phase 3: Feed Display
|
||||
- [x] Create `SubmissionRow.vue` - Link aggregator row (Reddit/Lemmy style)
|
||||
- [x] Create `VoteControls.vue` - Up/down voting
|
||||
- [x] Create `SortTabs.vue` - Sort tabs (hot, new, top, controversial)
|
||||
- [x] Create `SubmissionList.vue` - Main feed container
|
||||
- [x] Create `SubmissionThumbnail.vue` - Thumbnail display
|
||||
- [x] Add feed sorting (hot, new, top, controversial)
|
||||
- [x] Add score calculation
|
||||
- [x] Create `LinkAggregatorTest.vue` - Test page with mock data & live mode
|
||||
|
||||
### Phase 4: Detail View
|
||||
- [x] Create `SubmissionDetail.vue` - Full post view with content display
|
||||
- [x] Create `SubmissionComment.vue` - Recursive threaded comments
|
||||
- [x] Create `SubmissionDetailPage.vue` - Route page wrapper
|
||||
- [x] Add route `/submission/:id` for detail view
|
||||
- [x] Add comment sorting (best, new, old, controversial)
|
||||
- [x] Integrate comment submission via SubmissionService.createComment()
|
||||
|
||||
### Phase 5: Communities (Future)
|
||||
- [ ] Create `CommunityService.ts`
|
||||
- [ ] Create community browser
|
||||
- [ ] Add moderation queue
|
||||
|
||||
## Ranking Algorithms
|
||||
|
||||
### Hot Rank (Lemmy-style)
|
||||
```typescript
|
||||
function hotRank(score: number, createdAt: Date): number {
|
||||
const order = Math.log10(Math.max(Math.abs(score), 1))
|
||||
const sign = score > 0 ? 1 : score < 0 ? -1 : 0
|
||||
const seconds = (createdAt.getTime() - EPOCH.getTime()) / 1000
|
||||
return sign * order + seconds / 45000
|
||||
}
|
||||
```
|
||||
|
||||
### Controversy Rank
|
||||
```typescript
|
||||
function controversyRank(upvotes: number, downvotes: number): number {
|
||||
const total = upvotes + downvotes
|
||||
if (total === 0) return 0
|
||||
const magnitude = Math.pow(total, 0.8)
|
||||
const balance = total > 0 ? Math.min(upvotes, downvotes) / Math.max(upvotes, downvotes) : 0
|
||||
return magnitude * balance
|
||||
}
|
||||
```
|
||||
|
||||
## File Structure
|
||||
|
||||
```
|
||||
src/modules/nostr-feed/
|
||||
├── types/
|
||||
│ └── submission.ts # NEW
|
||||
├── services/
|
||||
│ ├── FeedService.ts # MODIFY
|
||||
│ ├── SubmissionService.ts # NEW
|
||||
│ ├── LinkPreviewService.ts # NEW
|
||||
│ ├── CommunityService.ts # NEW (Phase 5)
|
||||
│ ├── ProfileService.ts # EXISTING
|
||||
│ └── ReactionService.ts # EXISTING (enhance for up/down)
|
||||
├── components/
|
||||
│ ├── SubmissionCard.vue # NEW (Phase 3)
|
||||
│ ├── SubmitComposer.vue # NEW (Phase 2)
|
||||
│ ├── SubmissionDetail.vue # NEW (Phase 4)
|
||||
│ ├── VoteButtons.vue # NEW (Phase 3)
|
||||
│ ├── ThreadedPost.vue # EXISTING (reuse)
|
||||
│ ├── NostrFeed.vue # EXISTING (modify)
|
||||
│ └── NoteComposer.vue # EXISTING
|
||||
├── composables/
|
||||
│ ├── useSubmissions.ts # NEW
|
||||
│ ├── useCommunities.ts # NEW (Phase 5)
|
||||
│ ├── useFeed.ts # EXISTING
|
||||
│ └── useReactions.ts # EXISTING
|
||||
└── config/
|
||||
└── content-filters.ts # MODIFY
|
||||
```
|
||||
|
||||
## Migration Strategy
|
||||
|
||||
1. **Backwards compatible** - Continue supporting kind 1 notes
|
||||
2. **Gradual adoption** - Add kind 1111 alongside existing
|
||||
3. **Feature flag** - Toggle between classic feed and link aggregator view
|
||||
107
src/modules/nostr-feed/components/SortTabs.vue
Normal file
107
src/modules/nostr-feed/components/SortTabs.vue
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* SortTabs - Sort/filter tabs for submission list
|
||||
* Minimal tab row like old Reddit: hot | new | top | controversial
|
||||
*/
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { Flame, Clock, TrendingUp, Swords } from 'lucide-vue-next'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from '@/components/ui/select'
|
||||
import type { SortType, TimeRange } from '../types/submission'
|
||||
|
||||
interface Props {
|
||||
currentSort: SortType
|
||||
currentTimeRange?: TimeRange
|
||||
showTimeRange?: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:sort', sort: SortType): void
|
||||
(e: 'update:timeRange', range: TimeRange): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
currentTimeRange: 'day',
|
||||
showTimeRange: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const sortOptions: { id: SortType; label: string; icon: any }[] = [
|
||||
{ id: 'hot', label: 'hot', icon: Flame },
|
||||
{ id: 'new', label: 'new', icon: Clock },
|
||||
{ id: 'top', label: 'top', icon: TrendingUp },
|
||||
{ id: 'controversial', label: 'controversial', icon: Swords }
|
||||
]
|
||||
|
||||
const timeRangeOptions: { id: TimeRange; label: string }[] = [
|
||||
{ id: 'hour', label: 'hour' },
|
||||
{ id: 'day', label: 'day' },
|
||||
{ id: 'week', label: 'week' },
|
||||
{ id: 'month', label: 'month' },
|
||||
{ id: 'year', label: 'year' },
|
||||
{ id: 'all', label: 'all time' }
|
||||
]
|
||||
|
||||
// Show time range dropdown when top is selected
|
||||
const showTimeDropdown = computed(() =>
|
||||
props.showTimeRange && props.currentSort === 'top'
|
||||
)
|
||||
|
||||
function selectSort(sort: SortType) {
|
||||
emit('update:sort', sort)
|
||||
}
|
||||
|
||||
function selectTimeRange(range: TimeRange) {
|
||||
emit('update:timeRange', range)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center gap-1 text-sm border-b border-border pt-3 pb-2 mb-2">
|
||||
<!-- Sort tabs -->
|
||||
<template v-for="option in sortOptions" :key="option.id">
|
||||
<button
|
||||
type="button"
|
||||
:class="[
|
||||
'px-2 py-1 rounded transition-colors flex items-center gap-1',
|
||||
currentSort === option.id
|
||||
? 'bg-accent text-foreground font-medium'
|
||||
: 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
|
||||
]"
|
||||
@click="selectSort(option.id)"
|
||||
>
|
||||
<component :is="option.icon" class="h-3.5 w-3.5" />
|
||||
<span>{{ option.label }}</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<!-- Time range dropdown (for top) -->
|
||||
<template v-if="showTimeDropdown">
|
||||
<span class="text-muted-foreground mx-1">·</span>
|
||||
<Select
|
||||
:model-value="currentTimeRange"
|
||||
@update:model-value="selectTimeRange($event as TimeRange)"
|
||||
>
|
||||
<SelectTrigger class="h-auto w-auto gap-1 border-0 bg-transparent px-1 py-0.5 text-sm text-muted-foreground shadow-none hover:text-foreground focus:ring-0">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
v-for="range in timeRangeOptions"
|
||||
:key="range.id"
|
||||
:value="range.id"
|
||||
>
|
||||
{{ range.label }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
275
src/modules/nostr-feed/components/SubmissionComment.vue
Normal file
275
src/modules/nostr-feed/components/SubmissionComment.vue
Normal file
|
|
@ -0,0 +1,275 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* SubmissionComment - Recursive comment component for submission threads
|
||||
* Displays a single comment with vote controls and nested replies
|
||||
*/
|
||||
|
||||
import { computed, ref } from 'vue'
|
||||
import { formatDistanceToNow } from 'date-fns'
|
||||
import { ChevronUp, ChevronDown, Reply, Flag, MoreHorizontal, Send } from 'lucide-vue-next'
|
||||
import type { SubmissionComment as CommentType } from '../types/submission'
|
||||
|
||||
interface Props {
|
||||
comment: CommentType
|
||||
depth: number
|
||||
collapsedComments: Set<string>
|
||||
getDisplayName: (pubkey: string) => string
|
||||
isAuthenticated: boolean
|
||||
currentUserPubkey?: string | null
|
||||
replyingToId?: string | null
|
||||
isSubmittingReply?: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'toggle-collapse', commentId: string): void
|
||||
(e: 'reply', comment: CommentType): void
|
||||
(e: 'cancel-reply'): void
|
||||
(e: 'submit-reply', commentId: string, text: string): void
|
||||
(e: 'upvote', comment: CommentType): void
|
||||
(e: 'downvote', comment: CommentType): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
replyingToId: null,
|
||||
isSubmittingReply: false
|
||||
})
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// Local reply text
|
||||
const replyText = ref('')
|
||||
|
||||
// Is this comment being replied to
|
||||
const isBeingRepliedTo = computed(() => props.replyingToId === props.comment.id)
|
||||
|
||||
// Handle reply click
|
||||
function onReplyClick() {
|
||||
emit('reply', props.comment)
|
||||
}
|
||||
|
||||
// Submit the reply
|
||||
function submitReply() {
|
||||
if (!replyText.value.trim()) return
|
||||
emit('submit-reply', props.comment.id, replyText.value.trim())
|
||||
replyText.value = ''
|
||||
}
|
||||
|
||||
// Cancel reply
|
||||
function cancelReply() {
|
||||
replyText.value = ''
|
||||
emit('cancel-reply')
|
||||
}
|
||||
|
||||
// Is this comment collapsed
|
||||
const isCollapsed = computed(() => props.collapsedComments.has(props.comment.id))
|
||||
|
||||
// Has replies
|
||||
const hasReplies = computed(() => props.comment.replies && props.comment.replies.length > 0)
|
||||
|
||||
// Count total nested replies
|
||||
const replyCount = computed(() => {
|
||||
const count = (c: CommentType): number => {
|
||||
let total = c.replies?.length || 0
|
||||
c.replies?.forEach(r => { total += count(r) })
|
||||
return total
|
||||
}
|
||||
return count(props.comment)
|
||||
})
|
||||
|
||||
// Format time
|
||||
function formatTime(timestamp: number): string {
|
||||
return formatDistanceToNow(timestamp * 1000, { addSuffix: true })
|
||||
}
|
||||
|
||||
// Depth colors for threading lines (using theme-aware chart colors)
|
||||
const depthColors = [
|
||||
'bg-chart-1',
|
||||
'bg-chart-2',
|
||||
'bg-chart-3',
|
||||
'bg-chart-4',
|
||||
'bg-chart-5'
|
||||
]
|
||||
|
||||
const depthColor = computed(() => depthColors[props.depth % depthColors.length])
|
||||
|
||||
// Is own comment
|
||||
const isOwnComment = computed(() =>
|
||||
props.currentUserPubkey && props.currentUserPubkey === props.comment.pubkey
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'relative',
|
||||
depth > 0 ? 'ml-0.5' : ''
|
||||
]"
|
||||
>
|
||||
<!-- Threading line -->
|
||||
<div
|
||||
v-if="depth > 0"
|
||||
:class="[
|
||||
'absolute left-0 top-0 bottom-0 w-0.5',
|
||||
depthColor,
|
||||
'hover:w-1 transition-all cursor-pointer'
|
||||
]"
|
||||
@click="emit('toggle-collapse', comment.id)"
|
||||
/>
|
||||
|
||||
<!-- Comment content -->
|
||||
<div
|
||||
:class="[
|
||||
'py-1',
|
||||
depth > 0 ? 'pl-2' : '',
|
||||
'hover:bg-accent/20 transition-colors'
|
||||
]"
|
||||
>
|
||||
<!-- Header row -->
|
||||
<div class="flex items-center gap-2 text-xs">
|
||||
<!-- Collapse toggle -->
|
||||
<button
|
||||
v-if="hasReplies"
|
||||
class="text-muted-foreground hover:text-foreground"
|
||||
@click="emit('toggle-collapse', comment.id)"
|
||||
>
|
||||
<ChevronDown v-if="!isCollapsed" class="h-3.5 w-3.5" />
|
||||
<ChevronUp v-else class="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<div v-else class="w-3.5" />
|
||||
|
||||
<!-- Author -->
|
||||
<span class="font-medium hover:underline cursor-pointer">
|
||||
{{ getDisplayName(comment.pubkey) }}
|
||||
</span>
|
||||
|
||||
<!-- Score -->
|
||||
<span class="text-muted-foreground">
|
||||
{{ comment.votes.score }} {{ comment.votes.score === 1 ? 'point' : 'points' }}
|
||||
</span>
|
||||
|
||||
<!-- Time -->
|
||||
<span class="text-muted-foreground">
|
||||
{{ formatTime(comment.created_at) }}
|
||||
</span>
|
||||
|
||||
<!-- Collapsed indicator -->
|
||||
<span v-if="isCollapsed && hasReplies" class="text-muted-foreground">
|
||||
({{ replyCount }} {{ replyCount === 1 ? 'child' : 'children' }})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Content (hidden when collapsed) -->
|
||||
<div v-if="!isCollapsed">
|
||||
<!-- Comment body -->
|
||||
<div class="mt-1 text-sm whitespace-pre-wrap leading-relaxed pl-5">
|
||||
{{ comment.content }}
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center gap-1 mt-1 pl-5">
|
||||
<!-- Vote buttons (inline style) -->
|
||||
<button
|
||||
:class="[
|
||||
'p-1 transition-colors',
|
||||
comment.votes.userVote === 'upvote'
|
||||
? 'text-orange-500'
|
||||
: 'text-muted-foreground hover:text-orange-500'
|
||||
]"
|
||||
:disabled="!isAuthenticated"
|
||||
@click="emit('upvote', comment)"
|
||||
>
|
||||
<ChevronUp class="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
:class="[
|
||||
'p-1 transition-colors',
|
||||
comment.votes.userVote === 'downvote'
|
||||
? 'text-blue-500'
|
||||
: 'text-muted-foreground hover:text-blue-500'
|
||||
]"
|
||||
:disabled="!isAuthenticated"
|
||||
@click="emit('downvote', comment)"
|
||||
>
|
||||
<ChevronDown class="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<!-- Reply -->
|
||||
<button
|
||||
class="flex items-center gap-1 px-2 py-1 text-xs text-muted-foreground hover:text-foreground hover:bg-accent rounded transition-colors"
|
||||
:disabled="!isAuthenticated"
|
||||
@click="onReplyClick"
|
||||
>
|
||||
<Reply class="h-3 w-3" />
|
||||
<span>reply</span>
|
||||
</button>
|
||||
|
||||
<!-- Report (not for own comments) -->
|
||||
<button
|
||||
v-if="!isOwnComment"
|
||||
class="flex items-center gap-1 px-2 py-1 text-xs text-muted-foreground hover:text-foreground hover:bg-accent rounded transition-colors"
|
||||
>
|
||||
<Flag class="h-3 w-3" />
|
||||
<span>report</span>
|
||||
</button>
|
||||
|
||||
<!-- More options -->
|
||||
<button
|
||||
class="p-1 text-muted-foreground hover:text-foreground hover:bg-accent rounded transition-colors"
|
||||
>
|
||||
<MoreHorizontal class="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Inline reply form -->
|
||||
<div v-if="isBeingRepliedTo" class="mt-2 pl-5">
|
||||
<div class="border rounded-lg bg-background p-2">
|
||||
<textarea
|
||||
v-model="replyText"
|
||||
placeholder="Write a reply..."
|
||||
rows="3"
|
||||
class="w-full px-2 py-1.5 text-sm bg-transparent resize-none focus:outline-none"
|
||||
:disabled="isSubmittingReply"
|
||||
/>
|
||||
<div class="flex items-center justify-end gap-2 mt-1">
|
||||
<button
|
||||
class="px-3 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||||
@click="cancelReply"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
class="flex items-center gap-1 px-3 py-1 text-xs bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors disabled:opacity-50"
|
||||
:disabled="!replyText.trim() || isSubmittingReply"
|
||||
@click="submitReply"
|
||||
>
|
||||
<Send class="h-3 w-3" />
|
||||
Reply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Nested replies -->
|
||||
<div v-if="hasReplies" class="mt-1">
|
||||
<SubmissionComment
|
||||
v-for="reply in comment.replies"
|
||||
:key="reply.id"
|
||||
:comment="reply"
|
||||
:depth="depth + 1"
|
||||
:collapsed-comments="collapsedComments"
|
||||
:get-display-name="getDisplayName"
|
||||
:is-authenticated="isAuthenticated"
|
||||
:current-user-pubkey="currentUserPubkey"
|
||||
:replying-to-id="replyingToId"
|
||||
:is-submitting-reply="isSubmittingReply"
|
||||
@toggle-collapse="emit('toggle-collapse', $event)"
|
||||
@reply="emit('reply', $event)"
|
||||
@cancel-reply="emit('cancel-reply')"
|
||||
@submit-reply="(commentId, text) => emit('submit-reply', commentId, text)"
|
||||
@upvote="emit('upvote', $event)"
|
||||
@downvote="emit('downvote', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
553
src/modules/nostr-feed/components/SubmissionDetail.vue
Normal file
553
src/modules/nostr-feed/components/SubmissionDetail.vue
Normal file
|
|
@ -0,0 +1,553 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* SubmissionDetail - Full post view with comments
|
||||
* Displays complete submission content and threaded comments
|
||||
*/
|
||||
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { formatDistanceToNow } from 'date-fns'
|
||||
import {
|
||||
ArrowLeft,
|
||||
MessageSquare,
|
||||
Share2,
|
||||
Bookmark,
|
||||
Flag,
|
||||
ExternalLink,
|
||||
Image as ImageIcon,
|
||||
FileText,
|
||||
Loader2,
|
||||
Send
|
||||
} from 'lucide-vue-next'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import VoteControls from './VoteControls.vue'
|
||||
import SubmissionCommentComponent from './SubmissionComment.vue'
|
||||
import { useSubmission } from '../composables/useSubmissions'
|
||||
import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||
import type { ProfileService } from '../services/ProfileService'
|
||||
import type { SubmissionService } from '../services/SubmissionService'
|
||||
import type {
|
||||
SubmissionComment as SubmissionCommentType,
|
||||
LinkSubmission,
|
||||
MediaSubmission,
|
||||
SelfSubmission
|
||||
} from '../types/submission'
|
||||
|
||||
interface Props {
|
||||
/** Submission ID to display */
|
||||
submissionId: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const router = useRouter()
|
||||
|
||||
// Comment sort options
|
||||
type CommentSort = 'best' | 'new' | 'old' | 'controversial'
|
||||
|
||||
// Inject services
|
||||
const profileService = tryInjectService<ProfileService>(SERVICE_TOKENS.PROFILE_SERVICE)
|
||||
const authService = tryInjectService<any>(SERVICE_TOKENS.AUTH_SERVICE)
|
||||
const submissionService = tryInjectService<SubmissionService>(SERVICE_TOKENS.SUBMISSION_SERVICE)
|
||||
|
||||
// Use submission composable - handles subscription automatically
|
||||
const { submission, comments, upvote, downvote, isLoading, error } = useSubmission(props.submissionId)
|
||||
|
||||
// Comment composer state
|
||||
const showComposer = ref(false)
|
||||
const replyingTo = ref<{ id: string; author: string } | null>(null)
|
||||
const commentText = ref('')
|
||||
const isSubmittingComment = ref(false)
|
||||
const commentError = ref<string | null>(null)
|
||||
|
||||
// Comment sorting state
|
||||
const commentSort = ref<CommentSort>('best')
|
||||
|
||||
// Collapsed comments state
|
||||
const collapsedComments = ref(new Set<string>())
|
||||
|
||||
// Sorted comments
|
||||
const sortedComments = computed(() => {
|
||||
if (submissionService) {
|
||||
return submissionService.getSortedComments(props.submissionId, commentSort.value)
|
||||
}
|
||||
return comments.value
|
||||
})
|
||||
|
||||
// Auth state
|
||||
const isAuthenticated = computed(() => authService?.isAuthenticated?.value || false)
|
||||
const currentUserPubkey = computed(() => authService?.user?.value?.pubkey || null)
|
||||
|
||||
// Get display name for a pubkey
|
||||
function getDisplayName(pubkey: string): string {
|
||||
if (profileService) {
|
||||
return profileService.getDisplayName(pubkey)
|
||||
}
|
||||
return `${pubkey.slice(0, 8)}...`
|
||||
}
|
||||
|
||||
// Format timestamp
|
||||
function formatTime(timestamp: number): string {
|
||||
return formatDistanceToNow(timestamp * 1000, { addSuffix: true })
|
||||
}
|
||||
|
||||
// Extract domain from URL
|
||||
function extractDomain(url: string): string {
|
||||
try {
|
||||
return new URL(url).hostname.replace('www.', '')
|
||||
} catch {
|
||||
return url
|
||||
}
|
||||
}
|
||||
|
||||
// Cast submission to specific type
|
||||
const linkSubmission = computed(() =>
|
||||
submission.value?.postType === 'link' ? submission.value as LinkSubmission : null
|
||||
)
|
||||
const mediaSubmission = computed(() =>
|
||||
submission.value?.postType === 'media' ? submission.value as MediaSubmission : null
|
||||
)
|
||||
const selfSubmission = computed(() =>
|
||||
submission.value?.postType === 'self' ? submission.value as SelfSubmission : null
|
||||
)
|
||||
|
||||
// Community name
|
||||
const communityName = computed(() => {
|
||||
if (!submission.value?.communityRef) return null
|
||||
const parts = submission.value.communityRef.split(':')
|
||||
return parts.length >= 3 ? parts.slice(2).join(':') : null
|
||||
})
|
||||
|
||||
// Handle voting
|
||||
async function onUpvote() {
|
||||
if (!isAuthenticated.value) return
|
||||
try {
|
||||
await upvote()
|
||||
} catch (err) {
|
||||
console.error('Failed to upvote:', err)
|
||||
}
|
||||
}
|
||||
|
||||
async function onDownvote() {
|
||||
if (!isAuthenticated.value) return
|
||||
try {
|
||||
await downvote()
|
||||
} catch (err) {
|
||||
console.error('Failed to downvote:', err)
|
||||
}
|
||||
}
|
||||
|
||||
// Handle comment voting
|
||||
async function onCommentUpvote(comment: SubmissionCommentType) {
|
||||
if (!isAuthenticated.value || !submissionService) return
|
||||
try {
|
||||
await submissionService.upvoteComment(props.submissionId, comment.id)
|
||||
} catch (err) {
|
||||
console.error('Failed to upvote comment:', err)
|
||||
}
|
||||
}
|
||||
|
||||
async function onCommentDownvote(comment: SubmissionCommentType) {
|
||||
if (!isAuthenticated.value || !submissionService) return
|
||||
try {
|
||||
await submissionService.downvoteComment(props.submissionId, comment.id)
|
||||
} catch (err) {
|
||||
console.error('Failed to downvote comment:', err)
|
||||
}
|
||||
}
|
||||
|
||||
// Handle share
|
||||
function onShare() {
|
||||
const url = window.location.href
|
||||
navigator.clipboard?.writeText(url)
|
||||
// TODO: Show toast
|
||||
}
|
||||
|
||||
// Computed for passing to comment components
|
||||
const replyingToId = computed(() => replyingTo.value?.id || null)
|
||||
|
||||
// Handle comment reply - for inline replies to comments
|
||||
function startReply(comment?: SubmissionCommentType) {
|
||||
if (comment) {
|
||||
// Replying to a comment - show inline form (handled by SubmissionComment)
|
||||
replyingTo.value = { id: comment.id, author: getDisplayName(comment.pubkey) }
|
||||
showComposer.value = false // Hide top composer
|
||||
} else {
|
||||
// Top-level comment - show top composer
|
||||
replyingTo.value = null
|
||||
showComposer.value = true
|
||||
}
|
||||
commentText.value = ''
|
||||
}
|
||||
|
||||
function cancelReply() {
|
||||
showComposer.value = false
|
||||
replyingTo.value = null
|
||||
commentText.value = ''
|
||||
}
|
||||
|
||||
// Submit top-level comment (from top composer)
|
||||
async function submitComment() {
|
||||
if (!commentText.value.trim() || !isAuthenticated.value || !submissionService) return
|
||||
|
||||
isSubmittingComment.value = true
|
||||
commentError.value = null
|
||||
|
||||
try {
|
||||
await submissionService.createComment(
|
||||
props.submissionId,
|
||||
commentText.value.trim(),
|
||||
undefined // Top-level comment
|
||||
)
|
||||
cancelReply()
|
||||
} catch (err: any) {
|
||||
console.error('Failed to submit comment:', err)
|
||||
commentError.value = err.message || 'Failed to post comment'
|
||||
} finally {
|
||||
isSubmittingComment.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Submit inline reply (from SubmissionComment's inline form)
|
||||
async function submitReply(commentId: string, text: string) {
|
||||
if (!text.trim() || !isAuthenticated.value || !submissionService) return
|
||||
|
||||
isSubmittingComment.value = true
|
||||
commentError.value = null
|
||||
|
||||
try {
|
||||
await submissionService.createComment(
|
||||
props.submissionId,
|
||||
text.trim(),
|
||||
commentId
|
||||
)
|
||||
cancelReply()
|
||||
} catch (err: any) {
|
||||
console.error('Failed to submit reply:', err)
|
||||
commentError.value = err.message || 'Failed to post reply'
|
||||
} finally {
|
||||
isSubmittingComment.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle comment collapse
|
||||
function toggleCollapse(commentId: string) {
|
||||
if (collapsedComments.value.has(commentId)) {
|
||||
collapsedComments.value.delete(commentId)
|
||||
} else {
|
||||
collapsedComments.value.add(commentId)
|
||||
}
|
||||
// Trigger reactivity
|
||||
collapsedComments.value = new Set(collapsedComments.value)
|
||||
}
|
||||
|
||||
// Go back
|
||||
function goBack() {
|
||||
router.back()
|
||||
}
|
||||
|
||||
// Helper to collect all pubkeys from comments recursively
|
||||
function collectCommentPubkeys(comments: SubmissionCommentType[]): string[] {
|
||||
const pubkeys: string[] = []
|
||||
for (const comment of comments) {
|
||||
pubkeys.push(comment.pubkey)
|
||||
if (comment.replies?.length) {
|
||||
pubkeys.push(...collectCommentPubkeys(comment.replies))
|
||||
}
|
||||
}
|
||||
return pubkeys
|
||||
}
|
||||
|
||||
// Fetch profiles when submission loads
|
||||
watch(submission, (sub) => {
|
||||
if (profileService && sub) {
|
||||
profileService.fetchProfiles([sub.pubkey])
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
// Fetch profiles when comments load
|
||||
watch(comments, (newComments) => {
|
||||
if (profileService && newComments.length > 0) {
|
||||
const pubkeys = [...new Set(collectCommentPubkeys(newComments))]
|
||||
profileService.fetchProfiles(pubkeys)
|
||||
}
|
||||
}, { immediate: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-background">
|
||||
<!-- Header -->
|
||||
<header class="sticky top-0 z-40 bg-background/95 backdrop-blur border-b">
|
||||
<div class="max-w-4xl mx-auto px-4 py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<Button variant="ghost" size="sm" @click="goBack" class="h-8 w-8 p-0">
|
||||
<ArrowLeft class="h-4 w-4" />
|
||||
</Button>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h1 class="text-sm font-medium truncate">
|
||||
{{ submission?.title || 'Loading...' }}
|
||||
</h1>
|
||||
<p v-if="communityName" class="text-xs text-muted-foreground">
|
||||
{{ communityName }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Loading state -->
|
||||
<div v-if="isLoading && !submission" class="flex items-center justify-center py-16">
|
||||
<Loader2 class="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
<span class="ml-2 text-sm text-muted-foreground">Loading submission...</span>
|
||||
</div>
|
||||
|
||||
<!-- Error state -->
|
||||
<div v-else-if="error" class="max-w-4xl mx-auto p-4">
|
||||
<div class="text-center py-8">
|
||||
<p class="text-sm text-destructive">{{ error }}</p>
|
||||
<Button variant="outline" size="sm" class="mt-4" @click="goBack">
|
||||
Go Back
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submission content -->
|
||||
<main v-else-if="submission" class="max-w-4xl mx-auto">
|
||||
<article class="p-4 border-b">
|
||||
<!-- Post header with votes -->
|
||||
<div class="flex gap-3">
|
||||
<!-- Vote controls -->
|
||||
<VoteControls
|
||||
:score="submission.votes.score"
|
||||
:user-vote="submission.votes.userVote"
|
||||
:disabled="!isAuthenticated"
|
||||
@upvote="onUpvote"
|
||||
@downvote="onDownvote"
|
||||
/>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Title -->
|
||||
<h1 class="text-xl font-semibold leading-tight mb-2">
|
||||
{{ submission.title }}
|
||||
</h1>
|
||||
|
||||
<!-- Badges -->
|
||||
<div v-if="submission.nsfw || submission.flair" class="flex items-center gap-2 mb-2">
|
||||
<Badge v-if="submission.nsfw" variant="destructive" class="text-xs">
|
||||
NSFW
|
||||
</Badge>
|
||||
<Badge v-if="submission.flair" variant="secondary" class="text-xs">
|
||||
{{ submission.flair }}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<!-- Metadata -->
|
||||
<div class="text-sm text-muted-foreground mb-4">
|
||||
<span>submitted {{ formatTime(submission.created_at) }}</span>
|
||||
<span> by </span>
|
||||
<span class="font-medium hover:underline cursor-pointer">
|
||||
{{ getDisplayName(submission.pubkey) }}
|
||||
</span>
|
||||
<template v-if="communityName">
|
||||
<span> to </span>
|
||||
<span class="font-medium hover:underline cursor-pointer">{{ communityName }}</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Link post content -->
|
||||
<div v-if="linkSubmission" class="mb-4">
|
||||
<a
|
||||
:href="linkSubmission.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="block p-4 border rounded-lg hover:bg-accent/30 transition-colors group"
|
||||
>
|
||||
<div class="flex items-start gap-4">
|
||||
<!-- Preview image -->
|
||||
<div
|
||||
v-if="linkSubmission.preview?.image"
|
||||
class="flex-shrink-0 w-32 h-24 rounded overflow-hidden bg-muted"
|
||||
>
|
||||
<img
|
||||
:src="linkSubmission.preview.image"
|
||||
:alt="linkSubmission.preview.title || ''"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="flex-shrink-0 w-16 h-16 rounded bg-muted flex items-center justify-center">
|
||||
<ExternalLink class="h-6 w-6 text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
<!-- Preview content -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 text-xs text-muted-foreground mb-1">
|
||||
<ExternalLink class="h-3 w-3" />
|
||||
<span>{{ extractDomain(linkSubmission.url) }}</span>
|
||||
</div>
|
||||
<h3 v-if="linkSubmission.preview?.title" class="font-medium text-sm group-hover:underline">
|
||||
{{ linkSubmission.preview.title }}
|
||||
</h3>
|
||||
<p v-if="linkSubmission.preview?.description" class="text-xs text-muted-foreground mt-1 line-clamp-2">
|
||||
{{ linkSubmission.preview.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Optional body -->
|
||||
<div v-if="linkSubmission.body" class="mt-4 text-sm whitespace-pre-wrap">
|
||||
{{ linkSubmission.body }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Media post content -->
|
||||
<div v-if="mediaSubmission" class="mb-4">
|
||||
<div class="rounded-lg overflow-hidden bg-muted">
|
||||
<img
|
||||
v-if="mediaSubmission.media.mimeType?.startsWith('image/')"
|
||||
:src="mediaSubmission.media.url"
|
||||
:alt="mediaSubmission.media.alt || ''"
|
||||
class="max-w-full max-h-[600px] mx-auto"
|
||||
/>
|
||||
<video
|
||||
v-else-if="mediaSubmission.media.mimeType?.startsWith('video/')"
|
||||
:src="mediaSubmission.media.url"
|
||||
controls
|
||||
class="max-w-full max-h-[600px] mx-auto"
|
||||
/>
|
||||
<div v-else class="p-8 flex flex-col items-center justify-center">
|
||||
<ImageIcon class="h-12 w-12 text-muted-foreground mb-2" />
|
||||
<a
|
||||
:href="mediaSubmission.media.url"
|
||||
target="_blank"
|
||||
class="text-sm text-primary hover:underline"
|
||||
>
|
||||
View media
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Caption -->
|
||||
<div v-if="mediaSubmission.body" class="mt-4 text-sm whitespace-pre-wrap">
|
||||
{{ mediaSubmission.body }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Self post content -->
|
||||
<div v-if="selfSubmission" class="mb-4">
|
||||
<div class="text-sm whitespace-pre-wrap leading-relaxed">
|
||||
{{ selfSubmission.body }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<button
|
||||
class="flex items-center gap-1.5 hover:text-foreground transition-colors"
|
||||
@click="startReply()"
|
||||
>
|
||||
<MessageSquare class="h-4 w-4" />
|
||||
<span>{{ submission.commentCount }} comments</span>
|
||||
</button>
|
||||
<button
|
||||
class="flex items-center gap-1.5 hover:text-foreground transition-colors"
|
||||
@click="onShare"
|
||||
>
|
||||
<Share2 class="h-4 w-4" />
|
||||
<span>share</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-1.5 hover:text-foreground transition-colors">
|
||||
<Bookmark class="h-4 w-4" />
|
||||
<span>save</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-1.5 hover:text-foreground transition-colors">
|
||||
<Flag class="h-4 w-4" />
|
||||
<span>report</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Top-level comment composer (only for new comments, not replies) -->
|
||||
<div v-if="isAuthenticated && !replyingTo" class="p-4 border-b">
|
||||
<div class="flex gap-2">
|
||||
<textarea
|
||||
v-model="commentText"
|
||||
placeholder="Write a comment..."
|
||||
rows="3"
|
||||
class="flex-1 px-3 py-2 text-sm border rounded-lg bg-background resize-none focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
<!-- Comment error -->
|
||||
<div v-if="commentError" class="mt-2 text-sm text-destructive">
|
||||
{{ commentError }}
|
||||
</div>
|
||||
<div class="flex justify-end mt-2">
|
||||
<Button
|
||||
size="sm"
|
||||
:disabled="!commentText.trim() || isSubmittingComment"
|
||||
@click="submitComment"
|
||||
>
|
||||
<Loader2 v-if="isSubmittingComment" class="h-4 w-4 animate-spin mr-2" />
|
||||
<Send v-else class="h-4 w-4 mr-2" />
|
||||
Comment
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Comments section -->
|
||||
<section class="divide-y divide-border">
|
||||
<!-- Comment sort selector -->
|
||||
<div v-if="sortedComments.length > 0" class="px-4 py-3 border-b flex items-center gap-2">
|
||||
<span class="text-sm text-muted-foreground">Sort by:</span>
|
||||
<select
|
||||
v-model="commentSort"
|
||||
class="text-sm bg-background border rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
>
|
||||
<option value="best">Best</option>
|
||||
<option value="new">New</option>
|
||||
<option value="old">Old</option>
|
||||
<option value="controversial">Controversial</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div v-if="sortedComments.length === 0" class="p-8 text-center text-sm text-muted-foreground">
|
||||
No comments yet. Be the first to comment!
|
||||
</div>
|
||||
|
||||
<!-- Recursive comment rendering -->
|
||||
<template v-for="comment in sortedComments" :key="comment.id">
|
||||
<SubmissionCommentComponent
|
||||
:comment="comment"
|
||||
:depth="0"
|
||||
:collapsed-comments="collapsedComments"
|
||||
:get-display-name="getDisplayName"
|
||||
:is-authenticated="isAuthenticated"
|
||||
:current-user-pubkey="currentUserPubkey"
|
||||
:replying-to-id="replyingToId"
|
||||
:is-submitting-reply="isSubmittingComment"
|
||||
@toggle-collapse="toggleCollapse"
|
||||
@reply="startReply"
|
||||
@cancel-reply="cancelReply"
|
||||
@submit-reply="submitReply"
|
||||
@upvote="onCommentUpvote"
|
||||
@downvote="onCommentDownvote"
|
||||
/>
|
||||
</template>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Not found state -->
|
||||
<div v-else class="max-w-4xl mx-auto p-4">
|
||||
<div class="text-center py-16">
|
||||
<FileText class="h-12 w-12 text-muted-foreground mx-auto mb-4" />
|
||||
<p class="text-sm text-muted-foreground">Submission not found</p>
|
||||
<Button variant="outline" size="sm" class="mt-4" @click="goBack">
|
||||
Go Back
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
235
src/modules/nostr-feed/components/SubmissionList.vue
Normal file
235
src/modules/nostr-feed/components/SubmissionList.vue
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* SubmissionList - Main container for Reddit/Lemmy style submission feed
|
||||
* Includes sort tabs, submission rows, and loading states
|
||||
*/
|
||||
|
||||
import { computed, onMounted, watch } from 'vue'
|
||||
import { Loader2 } from 'lucide-vue-next'
|
||||
import SortTabs from './SortTabs.vue'
|
||||
import SubmissionRow from './SubmissionRow.vue'
|
||||
import { useSubmissions } from '../composables/useSubmissions'
|
||||
import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||
import type { ProfileService } from '../services/ProfileService'
|
||||
import type { SubmissionWithMeta, SortType, TimeRange, CommunityRef } from '../types/submission'
|
||||
|
||||
interface Props {
|
||||
/** Community to filter by */
|
||||
community?: CommunityRef | null
|
||||
/** Show rank numbers */
|
||||
showRanks?: boolean
|
||||
/** Show time range selector for top sort */
|
||||
showTimeRange?: boolean
|
||||
/** Initial sort */
|
||||
initialSort?: SortType
|
||||
/** Max submissions to show */
|
||||
limit?: number
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'submission-click', submission: SubmissionWithMeta): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
showRanks: false,
|
||||
showTimeRange: true,
|
||||
initialSort: 'hot',
|
||||
limit: 50
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// Inject profile service for display names
|
||||
const profileService = tryInjectService<ProfileService>(SERVICE_TOKENS.PROFILE_SERVICE)
|
||||
|
||||
// Auth service for checking authentication
|
||||
const authService = tryInjectService<any>(SERVICE_TOKENS.AUTH_SERVICE)
|
||||
|
||||
// Use submissions composable
|
||||
const {
|
||||
submissions,
|
||||
isLoading,
|
||||
error,
|
||||
currentSort,
|
||||
currentTimeRange,
|
||||
subscribe,
|
||||
upvote,
|
||||
downvote,
|
||||
setSort
|
||||
} = useSubmissions({
|
||||
autoSubscribe: false,
|
||||
config: {
|
||||
community: props.community,
|
||||
limit: props.limit
|
||||
}
|
||||
})
|
||||
|
||||
// Set initial sort
|
||||
currentSort.value = props.initialSort
|
||||
|
||||
// Current user pubkey
|
||||
const currentUserPubkey = computed(() => authService?.user?.value?.pubkey || null)
|
||||
|
||||
// Is user authenticated
|
||||
const isAuthenticated = computed(() => authService?.isAuthenticated?.value || false)
|
||||
|
||||
// Get display name for a pubkey
|
||||
function getDisplayName(pubkey: string): string {
|
||||
if (profileService) {
|
||||
return profileService.getDisplayName(pubkey)
|
||||
}
|
||||
// Fallback to truncated pubkey
|
||||
return `${pubkey.slice(0, 8)}...`
|
||||
}
|
||||
|
||||
// Handle sort change
|
||||
function onSortChange(sort: SortType) {
|
||||
setSort(sort, currentTimeRange.value)
|
||||
}
|
||||
|
||||
// Handle time range change
|
||||
function onTimeRangeChange(range: TimeRange) {
|
||||
setSort(currentSort.value, range)
|
||||
}
|
||||
|
||||
// Handle upvote
|
||||
async function onUpvote(submission: SubmissionWithMeta) {
|
||||
try {
|
||||
await upvote(submission.id)
|
||||
} catch (err) {
|
||||
console.error('Failed to upvote:', err)
|
||||
}
|
||||
}
|
||||
|
||||
// Handle downvote
|
||||
async function onDownvote(submission: SubmissionWithMeta) {
|
||||
try {
|
||||
await downvote(submission.id)
|
||||
} catch (err) {
|
||||
console.error('Failed to downvote:', err)
|
||||
}
|
||||
}
|
||||
|
||||
// Handle submission click
|
||||
function onSubmissionClick(submission: SubmissionWithMeta) {
|
||||
emit('submission-click', submission)
|
||||
}
|
||||
|
||||
// Handle share
|
||||
function onShare(submission: SubmissionWithMeta) {
|
||||
// Copy link to clipboard or open share dialog
|
||||
const url = `${window.location.origin}/submission/${submission.id}`
|
||||
navigator.clipboard?.writeText(url)
|
||||
// TODO: Show toast notification
|
||||
}
|
||||
|
||||
// Handle save
|
||||
function onSave(submission: SubmissionWithMeta) {
|
||||
// TODO: Implement save functionality
|
||||
console.log('Save:', submission.id)
|
||||
}
|
||||
|
||||
// Handle hide
|
||||
function onHide(submission: SubmissionWithMeta) {
|
||||
// TODO: Implement hide functionality
|
||||
console.log('Hide:', submission.id)
|
||||
}
|
||||
|
||||
// Handle report
|
||||
function onReport(submission: SubmissionWithMeta) {
|
||||
// TODO: Implement report functionality
|
||||
console.log('Report:', submission.id)
|
||||
}
|
||||
|
||||
// Fetch profiles when submissions change
|
||||
watch(submissions, (newSubmissions) => {
|
||||
if (profileService && newSubmissions.length > 0) {
|
||||
const pubkeys = [...new Set(newSubmissions.map(s => s.pubkey))]
|
||||
profileService.fetchProfiles(pubkeys)
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
// Subscribe when community changes
|
||||
watch(() => props.community, () => {
|
||||
subscribe({
|
||||
community: props.community,
|
||||
limit: props.limit
|
||||
})
|
||||
}, { immediate: false })
|
||||
|
||||
// Initial subscribe
|
||||
onMounted(() => {
|
||||
subscribe({
|
||||
community: props.community,
|
||||
limit: props.limit
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="submission-list">
|
||||
<!-- Sort tabs -->
|
||||
<SortTabs
|
||||
:current-sort="currentSort"
|
||||
:current-time-range="currentTimeRange"
|
||||
:show-time-range="showTimeRange"
|
||||
@update:sort="onSortChange"
|
||||
@update:time-range="onTimeRangeChange"
|
||||
/>
|
||||
|
||||
<!-- Loading state -->
|
||||
<div v-if="isLoading && submissions.length === 0" class="flex items-center justify-center py-8">
|
||||
<Loader2 class="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
<span class="ml-2 text-sm text-muted-foreground">Loading submissions...</span>
|
||||
</div>
|
||||
|
||||
<!-- Error state -->
|
||||
<div v-else-if="error" class="text-center py-8">
|
||||
<p class="text-sm text-destructive">{{ error }}</p>
|
||||
<button
|
||||
type="button"
|
||||
class="mt-2 text-sm text-primary hover:underline"
|
||||
@click="subscribe({ community, limit })"
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div v-else-if="submissions.length === 0" class="text-center py-8">
|
||||
<p class="text-sm text-muted-foreground">No submissions yet</p>
|
||||
</div>
|
||||
|
||||
<!-- Submission list -->
|
||||
<div v-else class="divide-y divide-border">
|
||||
<SubmissionRow
|
||||
v-for="(submission, index) in submissions"
|
||||
:key="submission.id"
|
||||
:submission="submission"
|
||||
:rank="showRanks ? index + 1 : undefined"
|
||||
:get-display-name="getDisplayName"
|
||||
:current-user-pubkey="currentUserPubkey"
|
||||
:is-authenticated="isAuthenticated"
|
||||
@upvote="onUpvote"
|
||||
@downvote="onDownvote"
|
||||
@click="onSubmissionClick"
|
||||
@share="onShare"
|
||||
@save="onSave"
|
||||
@hide="onHide"
|
||||
@report="onReport"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Loading more indicator -->
|
||||
<div v-if="isLoading && submissions.length > 0" class="flex items-center justify-center py-4">
|
||||
<Loader2 class="h-4 w-4 animate-spin text-muted-foreground" />
|
||||
<span class="ml-2 text-xs text-muted-foreground">Loading more...</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.submission-list {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
247
src/modules/nostr-feed/components/SubmissionRow.vue
Normal file
247
src/modules/nostr-feed/components/SubmissionRow.vue
Normal file
|
|
@ -0,0 +1,247 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* SubmissionRow - Single submission row in Reddit/Lemmy style
|
||||
* Compact, information-dense layout with votes, thumbnail, title, metadata
|
||||
*/
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { formatDistanceToNow } from 'date-fns'
|
||||
import { MessageSquare, Share2, Bookmark, EyeOff, Flag, Link2 } from 'lucide-vue-next'
|
||||
import VoteControls from './VoteControls.vue'
|
||||
import SubmissionThumbnail from './SubmissionThumbnail.vue'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import type { SubmissionWithMeta, LinkSubmission, MediaSubmission } from '../types/submission'
|
||||
import { extractDomain } from '../types/submission'
|
||||
|
||||
interface Props {
|
||||
submission: SubmissionWithMeta
|
||||
/** Display name resolver */
|
||||
getDisplayName: (pubkey: string) => string
|
||||
/** Current user pubkey for "own post" detection */
|
||||
currentUserPubkey?: string | null
|
||||
/** Show rank number */
|
||||
rank?: number
|
||||
/** Whether user is authenticated (for voting) */
|
||||
isAuthenticated?: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'upvote', submission: SubmissionWithMeta): void
|
||||
(e: 'downvote', submission: SubmissionWithMeta): void
|
||||
(e: 'click', submission: SubmissionWithMeta): void
|
||||
(e: 'save', submission: SubmissionWithMeta): void
|
||||
(e: 'hide', submission: SubmissionWithMeta): void
|
||||
(e: 'report', submission: SubmissionWithMeta): void
|
||||
(e: 'share', submission: SubmissionWithMeta): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
isAuthenticated: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// Extract thumbnail URL based on post type
|
||||
const thumbnailUrl = computed(() => {
|
||||
const s = props.submission
|
||||
|
||||
if (s.postType === 'link') {
|
||||
const link = s as LinkSubmission
|
||||
return link.preview?.image || undefined
|
||||
}
|
||||
|
||||
if (s.postType === 'media') {
|
||||
const media = s as MediaSubmission
|
||||
return media.media.thumbnail || media.media.url
|
||||
}
|
||||
|
||||
return undefined
|
||||
})
|
||||
|
||||
// Extract domain for link posts
|
||||
const domain = computed(() => {
|
||||
if (props.submission.postType === 'link') {
|
||||
const link = props.submission as LinkSubmission
|
||||
return extractDomain(link.url)
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
// Format timestamp
|
||||
const timeAgo = computed(() => {
|
||||
return formatDistanceToNow(props.submission.created_at * 1000, { addSuffix: true })
|
||||
})
|
||||
|
||||
// Author display name
|
||||
const authorName = computed(() => {
|
||||
return props.getDisplayName(props.submission.pubkey)
|
||||
})
|
||||
|
||||
// Is this the user's own post?
|
||||
const isOwnPost = computed(() => {
|
||||
return props.currentUserPubkey === props.submission.pubkey
|
||||
})
|
||||
|
||||
// Community name (if any)
|
||||
const communityName = computed(() => {
|
||||
const ref = props.submission.communityRef
|
||||
if (!ref) return null
|
||||
// Extract identifier from "34550:pubkey:identifier"
|
||||
const parts = ref.split(':')
|
||||
return parts.length >= 3 ? parts.slice(2).join(':') : null
|
||||
})
|
||||
|
||||
// Post type indicator for self posts
|
||||
const postTypeLabel = computed(() => {
|
||||
if (props.submission.postType === 'self') return 'self'
|
||||
return null
|
||||
})
|
||||
|
||||
function onTitleClick() {
|
||||
if (props.submission.postType === 'link') {
|
||||
// Open external link
|
||||
const link = props.submission as LinkSubmission
|
||||
window.open(link.url, '_blank', 'noopener,noreferrer')
|
||||
} else {
|
||||
// Navigate to post detail
|
||||
emit('click', props.submission)
|
||||
}
|
||||
}
|
||||
|
||||
function onCommentsClick() {
|
||||
emit('click', props.submission)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-start gap-2 py-2 px-1 hover:bg-accent/30 transition-colors group">
|
||||
<!-- Rank number (optional) -->
|
||||
<div v-if="rank" class="w-6 text-right text-sm text-muted-foreground font-medium pt-1">
|
||||
{{ rank }}
|
||||
</div>
|
||||
|
||||
<!-- Vote controls -->
|
||||
<VoteControls
|
||||
:score="submission.votes.score"
|
||||
:user-vote="submission.votes.userVote"
|
||||
:disabled="!isAuthenticated"
|
||||
@upvote="emit('upvote', submission)"
|
||||
@downvote="emit('downvote', submission)"
|
||||
/>
|
||||
|
||||
<!-- Thumbnail -->
|
||||
<SubmissionThumbnail
|
||||
:src="thumbnailUrl"
|
||||
:post-type="submission.postType"
|
||||
:nsfw="submission.nsfw"
|
||||
:size="70"
|
||||
class="cursor-pointer"
|
||||
@click="onCommentsClick"
|
||||
/>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Title row -->
|
||||
<div class="flex items-start gap-2">
|
||||
<h3
|
||||
class="text-sm font-medium leading-snug cursor-pointer hover:underline"
|
||||
@click="onTitleClick"
|
||||
>
|
||||
{{ submission.title }}
|
||||
</h3>
|
||||
|
||||
<!-- Domain for link posts -->
|
||||
<span v-if="domain" class="text-xs text-muted-foreground flex-shrink-0">
|
||||
({{ domain }})
|
||||
</span>
|
||||
|
||||
<!-- Self post indicator -->
|
||||
<span v-if="postTypeLabel" class="text-xs text-muted-foreground flex-shrink-0">
|
||||
({{ postTypeLabel }})
|
||||
</span>
|
||||
|
||||
<!-- External link icon for link posts -->
|
||||
<Link2
|
||||
v-if="submission.postType === 'link'"
|
||||
class="h-3 w-3 text-muted-foreground flex-shrink-0 mt-0.5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Flair badges -->
|
||||
<div v-if="submission.nsfw || submission.flair" class="flex items-center gap-1 mt-0.5">
|
||||
<Badge v-if="submission.nsfw" variant="destructive" class="text-[10px] px-1 py-0">
|
||||
NSFW
|
||||
</Badge>
|
||||
<Badge v-if="submission.flair" variant="secondary" class="text-[10px] px-1 py-0">
|
||||
{{ submission.flair }}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<!-- Metadata row -->
|
||||
<div class="text-xs text-muted-foreground mt-1">
|
||||
<span>submitted {{ timeAgo }}</span>
|
||||
<span> by </span>
|
||||
<span class="hover:underline cursor-pointer">{{ authorName }}</span>
|
||||
<template v-if="communityName">
|
||||
<span> to </span>
|
||||
<span class="hover:underline cursor-pointer font-medium">{{ communityName }}</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Actions row -->
|
||||
<div class="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
|
||||
<!-- Comments -->
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-1 hover:text-foreground transition-colors"
|
||||
@click="onCommentsClick"
|
||||
>
|
||||
<MessageSquare class="h-3.5 w-3.5" />
|
||||
<span>{{ submission.commentCount }} comments</span>
|
||||
</button>
|
||||
|
||||
<!-- Share -->
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-1 hover:text-foreground transition-colors opacity-0 group-hover:opacity-100"
|
||||
@click="emit('share', submission)"
|
||||
>
|
||||
<Share2 class="h-3.5 w-3.5" />
|
||||
<span>share</span>
|
||||
</button>
|
||||
|
||||
<!-- Save -->
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-1 hover:text-foreground transition-colors opacity-0 group-hover:opacity-100"
|
||||
:class="{ 'text-yellow-500': submission.isSaved }"
|
||||
@click="emit('save', submission)"
|
||||
>
|
||||
<Bookmark class="h-3.5 w-3.5" :class="{ 'fill-current': submission.isSaved }" />
|
||||
<span>{{ submission.isSaved ? 'saved' : 'save' }}</span>
|
||||
</button>
|
||||
|
||||
<!-- Hide -->
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-1 hover:text-foreground transition-colors opacity-0 group-hover:opacity-100"
|
||||
@click="emit('hide', submission)"
|
||||
>
|
||||
<EyeOff class="h-3.5 w-3.5" />
|
||||
<span>hide</span>
|
||||
</button>
|
||||
|
||||
<!-- Report (not for own posts) -->
|
||||
<button
|
||||
v-if="!isOwnPost"
|
||||
type="button"
|
||||
class="flex items-center gap-1 hover:text-foreground transition-colors opacity-0 group-hover:opacity-100"
|
||||
@click="emit('report', submission)"
|
||||
>
|
||||
<Flag class="h-3.5 w-3.5" />
|
||||
<span>report</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
114
src/modules/nostr-feed/components/SubmissionThumbnail.vue
Normal file
114
src/modules/nostr-feed/components/SubmissionThumbnail.vue
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* SubmissionThumbnail - Small square thumbnail for submissions
|
||||
* Shows preview image, video indicator, or placeholder icon
|
||||
*/
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { FileText, Image, ExternalLink } from 'lucide-vue-next'
|
||||
import type { SubmissionType } from '../types/submission'
|
||||
|
||||
interface Props {
|
||||
/** Thumbnail URL */
|
||||
src?: string
|
||||
/** Submission type for fallback icon */
|
||||
postType: SubmissionType
|
||||
/** Alt text */
|
||||
alt?: string
|
||||
/** Whether this is NSFW content */
|
||||
nsfw?: boolean
|
||||
/** Size in pixels */
|
||||
size?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
size: 70,
|
||||
nsfw: false
|
||||
})
|
||||
|
||||
// Determine fallback icon based on post type
|
||||
const FallbackIcon = computed(() => {
|
||||
switch (props.postType) {
|
||||
case 'link':
|
||||
return ExternalLink
|
||||
case 'media':
|
||||
return Image
|
||||
case 'self':
|
||||
default:
|
||||
return FileText
|
||||
}
|
||||
})
|
||||
|
||||
// Background color for fallback
|
||||
const fallbackBgClass = computed(() => {
|
||||
switch (props.postType) {
|
||||
case 'link':
|
||||
return 'bg-blue-500/10'
|
||||
case 'media':
|
||||
return 'bg-purple-500/10'
|
||||
case 'self':
|
||||
default:
|
||||
return 'bg-muted'
|
||||
}
|
||||
})
|
||||
|
||||
// Icon color for fallback
|
||||
const fallbackIconClass = computed(() => {
|
||||
switch (props.postType) {
|
||||
case 'link':
|
||||
return 'text-blue-500'
|
||||
case 'media':
|
||||
return 'text-purple-500'
|
||||
case 'self':
|
||||
default:
|
||||
return 'text-muted-foreground'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex-shrink-0 rounded overflow-hidden"
|
||||
:style="{ width: `${size}px`, height: `${size}px` }"
|
||||
>
|
||||
<!-- NSFW blur overlay -->
|
||||
<template v-if="nsfw && src">
|
||||
<div class="relative w-full h-full">
|
||||
<img
|
||||
:src="src"
|
||||
:alt="alt || 'Thumbnail'"
|
||||
class="w-full h-full object-cover blur-lg"
|
||||
/>
|
||||
<div class="absolute inset-0 flex items-center justify-center bg-black/50">
|
||||
<span class="text-[10px] font-bold text-red-500 uppercase">NSFW</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Image thumbnail -->
|
||||
<template v-else-if="src">
|
||||
<img
|
||||
:src="src"
|
||||
:alt="alt || 'Thumbnail'"
|
||||
class="w-full h-full object-cover bg-muted"
|
||||
loading="lazy"
|
||||
@error="($event.target as HTMLImageElement).style.display = 'none'"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Fallback icon -->
|
||||
<template v-else>
|
||||
<div
|
||||
:class="[
|
||||
'w-full h-full flex items-center justify-center',
|
||||
fallbackBgClass
|
||||
]"
|
||||
>
|
||||
<component
|
||||
:is="FallbackIcon"
|
||||
:class="['h-6 w-6', fallbackIconClass]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
406
src/modules/nostr-feed/components/SubmitComposer.vue
Normal file
406
src/modules/nostr-feed/components/SubmitComposer.vue
Normal file
|
|
@ -0,0 +1,406 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* SubmitComposer - Create new submissions (link, media, self posts)
|
||||
* Similar to Lemmy's Create Post form
|
||||
*/
|
||||
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
Link2,
|
||||
FileText,
|
||||
Image as ImageIcon,
|
||||
Loader2,
|
||||
ExternalLink,
|
||||
X,
|
||||
AlertCircle
|
||||
} from 'lucide-vue-next'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||
import type { SubmissionService } from '../services/SubmissionService'
|
||||
import type { LinkPreviewService } from '../services/LinkPreviewService'
|
||||
import type {
|
||||
LinkPreview,
|
||||
SubmissionType,
|
||||
LinkSubmissionForm,
|
||||
SelfSubmissionForm,
|
||||
SubmissionForm
|
||||
} from '../types/submission'
|
||||
|
||||
interface Props {
|
||||
/** Pre-selected community */
|
||||
community?: string
|
||||
/** Initial post type */
|
||||
initialType?: SubmissionType
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
initialType: 'self'
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'submitted', submissionId: string): void
|
||||
(e: 'cancel'): void
|
||||
}>()
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// Services
|
||||
const submissionService = tryInjectService<SubmissionService>(SERVICE_TOKENS.SUBMISSION_SERVICE)
|
||||
const linkPreviewService = tryInjectService<LinkPreviewService>(SERVICE_TOKENS.LINK_PREVIEW_SERVICE)
|
||||
const authService = tryInjectService<any>(SERVICE_TOKENS.AUTH_SERVICE)
|
||||
|
||||
// Auth state
|
||||
const isAuthenticated = computed(() => authService?.isAuthenticated?.value || false)
|
||||
|
||||
// Form state
|
||||
const postType = ref<SubmissionType>(props.initialType)
|
||||
const title = ref('')
|
||||
const url = ref('')
|
||||
const body = ref('')
|
||||
const thumbnailUrl = ref('')
|
||||
const nsfw = ref(false)
|
||||
|
||||
// Link preview state
|
||||
const linkPreview = ref<LinkPreview | null>(null)
|
||||
const isLoadingPreview = ref(false)
|
||||
const previewError = ref<string | null>(null)
|
||||
|
||||
// Submission state
|
||||
const isSubmitting = ref(false)
|
||||
const submitError = ref<string | null>(null)
|
||||
|
||||
// Validation
|
||||
const isValid = computed(() => {
|
||||
if (!title.value.trim()) return false
|
||||
if (postType.value === 'link' && !url.value.trim()) return false
|
||||
if (postType.value === 'self' && !body.value.trim()) return false
|
||||
return true
|
||||
})
|
||||
|
||||
// Debounced URL preview fetching
|
||||
let previewTimeout: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
watch(url, (newUrl) => {
|
||||
if (previewTimeout) {
|
||||
clearTimeout(previewTimeout)
|
||||
}
|
||||
|
||||
linkPreview.value = null
|
||||
previewError.value = null
|
||||
|
||||
if (!newUrl.trim() || postType.value !== 'link') {
|
||||
return
|
||||
}
|
||||
|
||||
// Validate URL format
|
||||
try {
|
||||
new URL(newUrl)
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
|
||||
// Debounce the preview fetch
|
||||
previewTimeout = setTimeout(async () => {
|
||||
await fetchLinkPreview(newUrl)
|
||||
}, 500)
|
||||
})
|
||||
|
||||
async function fetchLinkPreview(urlToFetch: string) {
|
||||
if (!linkPreviewService) {
|
||||
previewError.value = 'Link preview service not available'
|
||||
return
|
||||
}
|
||||
|
||||
isLoadingPreview.value = true
|
||||
previewError.value = null
|
||||
|
||||
try {
|
||||
const preview = await linkPreviewService.fetchPreview(urlToFetch)
|
||||
linkPreview.value = preview
|
||||
} catch (err: any) {
|
||||
console.error('Failed to fetch link preview:', err)
|
||||
previewError.value = err.message || 'Failed to load preview'
|
||||
} finally {
|
||||
isLoadingPreview.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function clearPreview() {
|
||||
linkPreview.value = null
|
||||
previewError.value = null
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!isValid.value || !isAuthenticated.value || !submissionService) return
|
||||
|
||||
isSubmitting.value = true
|
||||
submitError.value = null
|
||||
|
||||
try {
|
||||
let form: SubmissionForm
|
||||
|
||||
if (postType.value === 'link') {
|
||||
const linkForm: LinkSubmissionForm = {
|
||||
postType: 'link',
|
||||
title: title.value.trim(),
|
||||
url: url.value.trim(),
|
||||
body: body.value.trim() || undefined,
|
||||
communityRef: props.community,
|
||||
nsfw: nsfw.value
|
||||
}
|
||||
form = linkForm
|
||||
} else if (postType.value === 'self') {
|
||||
const selfForm: SelfSubmissionForm = {
|
||||
postType: 'self',
|
||||
title: title.value.trim(),
|
||||
body: body.value.trim(),
|
||||
communityRef: props.community,
|
||||
nsfw: nsfw.value
|
||||
}
|
||||
form = selfForm
|
||||
} else if (postType.value === 'media') {
|
||||
// TODO: Implement media submission with file upload
|
||||
submitError.value = 'Media uploads not yet implemented'
|
||||
return
|
||||
} else {
|
||||
submitError.value = 'Unknown post type'
|
||||
return
|
||||
}
|
||||
|
||||
const submissionId = await submissionService.createSubmission(form)
|
||||
|
||||
if (submissionId) {
|
||||
emit('submitted', submissionId)
|
||||
// Navigate to the new submission
|
||||
router.push({ name: 'submission-detail', params: { id: submissionId } })
|
||||
} else {
|
||||
submitError.value = 'Failed to create submission'
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error('Failed to submit:', err)
|
||||
submitError.value = err.message || 'Failed to create submission'
|
||||
} finally {
|
||||
isSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
emit('cancel')
|
||||
router.back()
|
||||
}
|
||||
|
||||
function selectPostType(type: SubmissionType) {
|
||||
postType.value = type
|
||||
// Clear URL when switching away from link type
|
||||
if (type !== 'link') {
|
||||
url.value = ''
|
||||
clearPreview()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="max-w-2xl mx-auto p-4">
|
||||
<h1 class="text-xl font-semibold mb-6">Create Post</h1>
|
||||
|
||||
<!-- Auth warning -->
|
||||
<div v-if="!isAuthenticated" class="mb-4 p-4 bg-destructive/10 border border-destructive/20 rounded-lg">
|
||||
<div class="flex items-center gap-2 text-destructive">
|
||||
<AlertCircle class="h-4 w-4" />
|
||||
<span class="text-sm font-medium">You must be logged in to create a post</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post type selector -->
|
||||
<div class="flex gap-2 mb-6">
|
||||
<Button
|
||||
:variant="postType === 'self' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
@click="selectPostType('self')"
|
||||
>
|
||||
<FileText class="h-4 w-4 mr-2" />
|
||||
Text
|
||||
</Button>
|
||||
<Button
|
||||
:variant="postType === 'link' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
@click="selectPostType('link')"
|
||||
>
|
||||
<Link2 class="h-4 w-4 mr-2" />
|
||||
Link
|
||||
</Button>
|
||||
<Button
|
||||
:variant="postType === 'media' ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
@click="selectPostType('media')"
|
||||
disabled
|
||||
title="Coming soon"
|
||||
>
|
||||
<ImageIcon class="h-4 w-4 mr-2" />
|
||||
Image
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleSubmit" class="space-y-4">
|
||||
<!-- Title -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1.5">
|
||||
Title <span class="text-destructive">*</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="title"
|
||||
type="text"
|
||||
placeholder="An interesting title"
|
||||
maxlength="300"
|
||||
class="w-full px-3 py-2 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
:disabled="!isAuthenticated"
|
||||
/>
|
||||
<div class="text-xs text-muted-foreground mt-1 text-right">
|
||||
{{ title.length }}/300
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- URL (for link posts) -->
|
||||
<div v-if="postType === 'link'">
|
||||
<label class="block text-sm font-medium mb-1.5">
|
||||
URL <span class="text-destructive">*</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="url"
|
||||
type="url"
|
||||
placeholder="https://example.com/article"
|
||||
class="w-full px-3 py-2 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
:disabled="!isAuthenticated"
|
||||
/>
|
||||
|
||||
<!-- Link preview -->
|
||||
<div v-if="isLoadingPreview" class="mt-3 p-4 border rounded-lg bg-muted/30">
|
||||
<div class="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Loader2 class="h-4 w-4 animate-spin" />
|
||||
Loading preview...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="previewError" class="mt-3 p-3 border border-destructive/20 rounded-lg bg-destructive/5">
|
||||
<div class="flex items-center gap-2 text-sm text-destructive">
|
||||
<AlertCircle class="h-4 w-4" />
|
||||
{{ previewError }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="linkPreview" class="mt-3 p-4 border rounded-lg bg-muted/30">
|
||||
<div class="flex items-start gap-3">
|
||||
<!-- Preview image -->
|
||||
<div v-if="linkPreview.image" class="flex-shrink-0 w-24 h-18 rounded overflow-hidden bg-muted">
|
||||
<img
|
||||
:src="linkPreview.image"
|
||||
:alt="linkPreview.title || ''"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Preview content -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 text-xs text-muted-foreground mb-1">
|
||||
<ExternalLink class="h-3 w-3" />
|
||||
<span>{{ linkPreview.domain }}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-auto p-1 hover:bg-accent rounded"
|
||||
@click="clearPreview"
|
||||
>
|
||||
<X class="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
<h4 v-if="linkPreview.title" class="font-medium text-sm line-clamp-2">
|
||||
{{ linkPreview.title }}
|
||||
</h4>
|
||||
<p v-if="linkPreview.description" class="text-xs text-muted-foreground mt-1 line-clamp-2">
|
||||
{{ linkPreview.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Thumbnail URL (optional) -->
|
||||
<div v-if="postType === 'link'">
|
||||
<label class="block text-sm font-medium mb-1.5">
|
||||
Thumbnail URL
|
||||
<span class="text-muted-foreground font-normal">(optional)</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="thumbnailUrl"
|
||||
type="url"
|
||||
placeholder="https://example.com/image.jpg"
|
||||
class="w-full px-3 py-2 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
:disabled="!isAuthenticated"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1.5">
|
||||
Body
|
||||
<span v-if="postType === 'self'" class="text-destructive">*</span>
|
||||
<span v-else class="text-muted-foreground font-normal">(optional)</span>
|
||||
</label>
|
||||
<textarea
|
||||
v-model="body"
|
||||
:placeholder="postType === 'self' ? 'Write your post content...' : 'Optional description or commentary...'"
|
||||
rows="6"
|
||||
class="w-full px-3 py-2 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary resize-y min-h-[120px]"
|
||||
:disabled="!isAuthenticated"
|
||||
/>
|
||||
<div class="text-xs text-muted-foreground mt-1">
|
||||
Markdown supported
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- NSFW toggle -->
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
id="nsfw"
|
||||
v-model="nsfw"
|
||||
type="checkbox"
|
||||
class="rounded border-muted-foreground"
|
||||
:disabled="!isAuthenticated"
|
||||
/>
|
||||
<label for="nsfw" class="text-sm font-medium cursor-pointer">
|
||||
NSFW
|
||||
</label>
|
||||
<Badge v-if="nsfw" variant="destructive" class="text-xs">
|
||||
Not Safe For Work
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<!-- Error message -->
|
||||
<div v-if="submitError" class="p-3 border border-destructive/20 rounded-lg bg-destructive/5">
|
||||
<div class="flex items-center gap-2 text-sm text-destructive">
|
||||
<AlertCircle class="h-4 w-4" />
|
||||
{{ submitError }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center gap-3 pt-4">
|
||||
<Button
|
||||
type="submit"
|
||||
:disabled="!isValid || isSubmitting || !isAuthenticated"
|
||||
>
|
||||
<Loader2 v-if="isSubmitting" class="h-4 w-4 animate-spin mr-2" />
|
||||
Create
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
@click="handleCancel"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
107
src/modules/nostr-feed/components/VoteControls.vue
Normal file
107
src/modules/nostr-feed/components/VoteControls.vue
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* VoteControls - Compact upvote/downvote arrows with score
|
||||
* Lemmy/Reddit style vertical layout
|
||||
*/
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { ChevronUp, ChevronDown } from 'lucide-vue-next'
|
||||
|
||||
interface Props {
|
||||
score: number
|
||||
userVote: 'upvote' | 'downvote' | null
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'upvote'): void
|
||||
(e: 'downvote'): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
disabled: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// Format score for display (e.g., 1.2k for 1200)
|
||||
const displayScore = computed(() => {
|
||||
const score = props.score
|
||||
if (Math.abs(score) >= 10000) {
|
||||
return (score / 1000).toFixed(0) + 'k'
|
||||
}
|
||||
if (Math.abs(score) >= 1000) {
|
||||
return (score / 1000).toFixed(1) + 'k'
|
||||
}
|
||||
return score.toString()
|
||||
})
|
||||
|
||||
// Score color based on value
|
||||
const scoreClass = computed(() => {
|
||||
if (props.userVote === 'upvote') return 'text-orange-500'
|
||||
if (props.userVote === 'downvote') return 'text-blue-500'
|
||||
if (props.score > 0) return 'text-foreground'
|
||||
if (props.score < 0) return 'text-muted-foreground'
|
||||
return 'text-muted-foreground'
|
||||
})
|
||||
|
||||
function onUpvote() {
|
||||
if (!props.disabled) {
|
||||
emit('upvote')
|
||||
}
|
||||
}
|
||||
|
||||
function onDownvote() {
|
||||
if (!props.disabled) {
|
||||
emit('downvote')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col items-center gap-0 min-w-[40px]">
|
||||
<!-- Upvote button -->
|
||||
<button
|
||||
type="button"
|
||||
:disabled="disabled"
|
||||
:class="[
|
||||
'p-1 rounded transition-colors',
|
||||
'hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
userVote === 'upvote' ? 'text-orange-500' : 'text-muted-foreground hover:text-orange-500'
|
||||
]"
|
||||
@click="onUpvote"
|
||||
>
|
||||
<ChevronUp
|
||||
class="h-5 w-5"
|
||||
:class="{ 'fill-current': userVote === 'upvote' }"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<!-- Score -->
|
||||
<span
|
||||
:class="[
|
||||
'text-xs font-bold tabular-nums min-w-[24px] text-center',
|
||||
scoreClass
|
||||
]"
|
||||
>
|
||||
{{ displayScore }}
|
||||
</span>
|
||||
|
||||
<!-- Downvote button -->
|
||||
<button
|
||||
type="button"
|
||||
:disabled="disabled"
|
||||
:class="[
|
||||
'p-1 rounded transition-colors',
|
||||
'hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
userVote === 'downvote' ? 'text-blue-500' : 'text-muted-foreground hover:text-blue-500'
|
||||
]"
|
||||
@click="onDownvote"
|
||||
>
|
||||
<ChevronDown
|
||||
class="h-5 w-5"
|
||||
:class="{ 'fill-current': userVote === 'downvote' }"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
335
src/modules/nostr-feed/composables/useSubmissions.ts
Normal file
335
src/modules/nostr-feed/composables/useSubmissions.ts
Normal file
|
|
@ -0,0 +1,335 @@
|
|||
/**
|
||||
* useSubmissions Composable
|
||||
*
|
||||
* Provides reactive access to the SubmissionService for Reddit-style submissions.
|
||||
*/
|
||||
|
||||
import { computed, ref, onMounted, onUnmounted, watch, type Ref, type ComputedRef } from 'vue'
|
||||
import { tryInjectService, SERVICE_TOKENS } from '@/core/di-container'
|
||||
import type { SubmissionService } from '../services/SubmissionService'
|
||||
import type { LinkPreviewService } from '../services/LinkPreviewService'
|
||||
import type {
|
||||
SubmissionWithMeta,
|
||||
SubmissionForm,
|
||||
SubmissionFeedConfig,
|
||||
SubmissionComment,
|
||||
SortType,
|
||||
TimeRange,
|
||||
LinkPreview
|
||||
} from '../types/submission'
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
export interface UseSubmissionsOptions {
|
||||
/** Auto-subscribe on mount */
|
||||
autoSubscribe?: boolean
|
||||
/** Feed configuration */
|
||||
config?: Partial<SubmissionFeedConfig>
|
||||
}
|
||||
|
||||
export interface UseSubmissionsReturn {
|
||||
// State
|
||||
submissions: ComputedRef<SubmissionWithMeta[]>
|
||||
isLoading: ComputedRef<boolean>
|
||||
error: ComputedRef<string | null>
|
||||
|
||||
// Sorting
|
||||
currentSort: Ref<SortType>
|
||||
currentTimeRange: Ref<TimeRange>
|
||||
|
||||
// Actions
|
||||
subscribe: (config?: Partial<SubmissionFeedConfig>) => Promise<void>
|
||||
unsubscribe: () => Promise<void>
|
||||
refresh: () => Promise<void>
|
||||
createSubmission: (form: SubmissionForm) => Promise<string>
|
||||
upvote: (submissionId: string) => Promise<void>
|
||||
downvote: (submissionId: string) => Promise<void>
|
||||
setSort: (sort: SortType, timeRange?: TimeRange) => void
|
||||
|
||||
// Getters
|
||||
getSubmission: (id: string) => SubmissionWithMeta | undefined
|
||||
getComments: (submissionId: string) => SubmissionComment[]
|
||||
getThreadedComments: (submissionId: string) => SubmissionComment[]
|
||||
|
||||
// Link preview
|
||||
fetchLinkPreview: (url: string) => Promise<LinkPreview>
|
||||
isPreviewLoading: (url: string) => boolean
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Composable
|
||||
// ============================================================================
|
||||
|
||||
export function useSubmissions(options: UseSubmissionsOptions = {}): UseSubmissionsReturn {
|
||||
const {
|
||||
autoSubscribe = true,
|
||||
config: initialConfig = {}
|
||||
} = options
|
||||
|
||||
// Inject services
|
||||
const submissionService = tryInjectService<SubmissionService>(SERVICE_TOKENS.SUBMISSION_SERVICE)
|
||||
const linkPreviewService = tryInjectService<LinkPreviewService>(SERVICE_TOKENS.LINK_PREVIEW_SERVICE)
|
||||
|
||||
// Local state
|
||||
const currentSort = ref<SortType>('hot')
|
||||
const currentTimeRange = ref<TimeRange>('day')
|
||||
|
||||
// Default feed config
|
||||
const defaultConfig: SubmissionFeedConfig = {
|
||||
sort: 'hot',
|
||||
timeRange: 'day',
|
||||
includeNsfw: false,
|
||||
limit: 50,
|
||||
...initialConfig
|
||||
}
|
||||
|
||||
// Computed values from service
|
||||
const submissions = computed(() => {
|
||||
if (!submissionService) return []
|
||||
return submissionService.getSortedSubmissions(currentSort.value)
|
||||
})
|
||||
|
||||
const isLoading = computed(() => submissionService?.isLoading.value ?? false)
|
||||
const error = computed(() => submissionService?.error.value ?? null)
|
||||
|
||||
// ============================================================================
|
||||
// Actions
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Subscribe to submissions feed
|
||||
*/
|
||||
async function subscribe(config?: Partial<SubmissionFeedConfig>): Promise<void> {
|
||||
if (!submissionService) {
|
||||
console.warn('SubmissionService not available')
|
||||
return
|
||||
}
|
||||
|
||||
const feedConfig: SubmissionFeedConfig = {
|
||||
...defaultConfig,
|
||||
...config,
|
||||
sort: currentSort.value,
|
||||
timeRange: currentTimeRange.value
|
||||
}
|
||||
|
||||
await submissionService.subscribe(feedConfig)
|
||||
}
|
||||
|
||||
/**
|
||||
* Unsubscribe from feed
|
||||
*/
|
||||
async function unsubscribe(): Promise<void> {
|
||||
await submissionService?.unsubscribe()
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the feed
|
||||
*/
|
||||
async function refresh(): Promise<void> {
|
||||
submissionService?.clear()
|
||||
await subscribe()
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new submission
|
||||
*/
|
||||
async function createSubmission(form: SubmissionForm): Promise<string> {
|
||||
if (!submissionService) {
|
||||
throw new Error('SubmissionService not available')
|
||||
}
|
||||
return submissionService.createSubmission(form)
|
||||
}
|
||||
|
||||
/**
|
||||
* Upvote a submission
|
||||
*/
|
||||
async function upvote(submissionId: string): Promise<void> {
|
||||
if (!submissionService) {
|
||||
throw new Error('SubmissionService not available')
|
||||
}
|
||||
await submissionService.upvote(submissionId)
|
||||
}
|
||||
|
||||
/**
|
||||
* Downvote a submission
|
||||
*/
|
||||
async function downvote(submissionId: string): Promise<void> {
|
||||
if (!submissionService) {
|
||||
throw new Error('SubmissionService not available')
|
||||
}
|
||||
await submissionService.downvote(submissionId)
|
||||
}
|
||||
|
||||
/**
|
||||
* Change sort order
|
||||
*/
|
||||
function setSort(sort: SortType, timeRange?: TimeRange): void {
|
||||
currentSort.value = sort
|
||||
if (timeRange) {
|
||||
currentTimeRange.value = timeRange
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Getters
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Get a single submission by ID
|
||||
*/
|
||||
function getSubmission(id: string): SubmissionWithMeta | undefined {
|
||||
return submissionService?.getSubmission(id)
|
||||
}
|
||||
|
||||
/**
|
||||
* Get comments for a submission
|
||||
*/
|
||||
function getComments(submissionId: string): SubmissionComment[] {
|
||||
return submissionService?.getComments(submissionId) ?? []
|
||||
}
|
||||
|
||||
/**
|
||||
* Get threaded comments for a submission
|
||||
*/
|
||||
function getThreadedComments(submissionId: string): SubmissionComment[] {
|
||||
return submissionService?.getThreadedComments(submissionId) ?? []
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Link Preview
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Fetch link preview for a URL
|
||||
*/
|
||||
async function fetchLinkPreview(url: string): Promise<LinkPreview> {
|
||||
if (!linkPreviewService) {
|
||||
return {
|
||||
url,
|
||||
domain: new URL(url).hostname.replace(/^www\./, '')
|
||||
}
|
||||
}
|
||||
return linkPreviewService.fetchPreview(url)
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if preview is loading
|
||||
*/
|
||||
function isPreviewLoading(url: string): boolean {
|
||||
return linkPreviewService?.isLoading(url) ?? false
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Lifecycle
|
||||
// ============================================================================
|
||||
|
||||
// Watch for sort changes and re-sort
|
||||
watch([currentSort, currentTimeRange], async () => {
|
||||
// Re-subscribe with new sort if needed for time-based filtering
|
||||
if (currentSort.value === 'top') {
|
||||
await subscribe()
|
||||
}
|
||||
})
|
||||
|
||||
// Auto-subscribe on mount
|
||||
onMounted(() => {
|
||||
if (autoSubscribe) {
|
||||
subscribe()
|
||||
}
|
||||
})
|
||||
|
||||
// Cleanup on unmount
|
||||
onUnmounted(() => {
|
||||
unsubscribe()
|
||||
})
|
||||
|
||||
// ============================================================================
|
||||
// Return
|
||||
// ============================================================================
|
||||
|
||||
return {
|
||||
// State
|
||||
submissions,
|
||||
isLoading,
|
||||
error,
|
||||
|
||||
// Sorting
|
||||
currentSort,
|
||||
currentTimeRange,
|
||||
|
||||
// Actions
|
||||
subscribe,
|
||||
unsubscribe,
|
||||
refresh,
|
||||
createSubmission,
|
||||
upvote,
|
||||
downvote,
|
||||
setSort,
|
||||
|
||||
// Getters
|
||||
getSubmission,
|
||||
getComments,
|
||||
getThreadedComments,
|
||||
|
||||
// Link preview
|
||||
fetchLinkPreview,
|
||||
isPreviewLoading
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Single Submission Hook
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Hook for working with a single submission
|
||||
*/
|
||||
export function useSubmission(submissionId: string) {
|
||||
const submissionService = tryInjectService<SubmissionService>(SERVICE_TOKENS.SUBMISSION_SERVICE)
|
||||
|
||||
const isLoading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
const submission = computed(() => submissionService?.getSubmission(submissionId))
|
||||
const comments = computed(() => submissionService?.getThreadedComments(submissionId) ?? [])
|
||||
|
||||
async function subscribe(): Promise<void> {
|
||||
if (!submissionService) return
|
||||
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
await submissionService.subscribeToSubmission(submissionId)
|
||||
} catch (err: any) {
|
||||
error.value = err.message || 'Failed to load submission'
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function upvote(): Promise<void> {
|
||||
await submissionService?.upvote(submissionId)
|
||||
}
|
||||
|
||||
async function downvote(): Promise<void> {
|
||||
await submissionService?.downvote(submissionId)
|
||||
}
|
||||
|
||||
// Subscribe on mount
|
||||
onMounted(() => {
|
||||
subscribe()
|
||||
})
|
||||
|
||||
return {
|
||||
submission,
|
||||
comments,
|
||||
isLoading: computed(() => isLoading.value || submissionService?.isLoading.value || false),
|
||||
error: computed(() => error.value || submissionService?.error.value || null),
|
||||
subscribe,
|
||||
upvote,
|
||||
downvote
|
||||
}
|
||||
}
|
||||
|
|
@ -2,10 +2,20 @@ import type { App } from 'vue'
|
|||
import type { ModulePlugin } from '@/core/types'
|
||||
import { container, SERVICE_TOKENS } from '@/core/di-container'
|
||||
import NostrFeed from './components/NostrFeed.vue'
|
||||
import SubmissionList from './components/SubmissionList.vue'
|
||||
import SubmissionRow from './components/SubmissionRow.vue'
|
||||
import SubmissionDetail from './components/SubmissionDetail.vue'
|
||||
import SubmissionComment from './components/SubmissionComment.vue'
|
||||
import SubmitComposer from './components/SubmitComposer.vue'
|
||||
import VoteControls from './components/VoteControls.vue'
|
||||
import SortTabs from './components/SortTabs.vue'
|
||||
import { useFeed } from './composables/useFeed'
|
||||
import { useSubmissions, useSubmission } from './composables/useSubmissions'
|
||||
import { FeedService } from './services/FeedService'
|
||||
import { ProfileService } from './services/ProfileService'
|
||||
import { ReactionService } from './services/ReactionService'
|
||||
import { SubmissionService } from './services/SubmissionService'
|
||||
import { LinkPreviewService } from './services/LinkPreviewService'
|
||||
|
||||
/**
|
||||
* Nostr Feed Module Plugin
|
||||
|
|
@ -16,6 +26,27 @@ export const nostrFeedModule: ModulePlugin = {
|
|||
version: '1.0.0',
|
||||
dependencies: ['base'],
|
||||
|
||||
routes: [
|
||||
{
|
||||
path: '/submission/:id',
|
||||
name: 'submission-detail',
|
||||
component: () => import('./views/SubmissionDetailPage.vue'),
|
||||
meta: {
|
||||
title: 'Submission',
|
||||
requiresAuth: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/submit',
|
||||
name: 'submit-post',
|
||||
component: () => import('./views/SubmitPage.vue'),
|
||||
meta: {
|
||||
title: 'Create Post',
|
||||
requiresAuth: true
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
async install(app: App) {
|
||||
console.log('nostr-feed module: Starting installation...')
|
||||
|
||||
|
|
@ -23,10 +54,14 @@ export const nostrFeedModule: ModulePlugin = {
|
|||
const feedService = new FeedService()
|
||||
const profileService = new ProfileService()
|
||||
const reactionService = new ReactionService()
|
||||
const submissionService = new SubmissionService()
|
||||
const linkPreviewService = new LinkPreviewService()
|
||||
|
||||
container.provide(SERVICE_TOKENS.FEED_SERVICE, feedService)
|
||||
container.provide(SERVICE_TOKENS.PROFILE_SERVICE, profileService)
|
||||
container.provide(SERVICE_TOKENS.REACTION_SERVICE, reactionService)
|
||||
container.provide(SERVICE_TOKENS.SUBMISSION_SERVICE, submissionService)
|
||||
container.provide(SERVICE_TOKENS.LINK_PREVIEW_SERVICE, linkPreviewService)
|
||||
console.log('nostr-feed module: Services registered in DI container')
|
||||
|
||||
// Initialize services
|
||||
|
|
@ -43,21 +78,39 @@ export const nostrFeedModule: ModulePlugin = {
|
|||
reactionService.initialize({
|
||||
waitForDependencies: true,
|
||||
maxRetries: 3
|
||||
}),
|
||||
submissionService.initialize({
|
||||
waitForDependencies: true,
|
||||
maxRetries: 3
|
||||
}),
|
||||
linkPreviewService.initialize({
|
||||
waitForDependencies: true,
|
||||
maxRetries: 3
|
||||
})
|
||||
])
|
||||
console.log('nostr-feed module: Services initialized')
|
||||
|
||||
// Register components globally
|
||||
app.component('NostrFeed', NostrFeed)
|
||||
app.component('SubmissionList', SubmissionList)
|
||||
console.log('nostr-feed module: Installation complete')
|
||||
},
|
||||
|
||||
components: {
|
||||
NostrFeed
|
||||
NostrFeed,
|
||||
SubmissionList,
|
||||
SubmissionRow,
|
||||
SubmissionDetail,
|
||||
SubmissionComment,
|
||||
SubmitComposer,
|
||||
VoteControls,
|
||||
SortTabs
|
||||
},
|
||||
|
||||
composables: {
|
||||
useFeed
|
||||
useFeed,
|
||||
useSubmissions,
|
||||
useSubmission
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
552
src/modules/nostr-feed/services/LinkPreviewService.ts
Normal file
552
src/modules/nostr-feed/services/LinkPreviewService.ts
Normal file
|
|
@ -0,0 +1,552 @@
|
|||
/**
|
||||
* LinkPreviewService
|
||||
*
|
||||
* Fetches Open Graph and meta tags from URLs to generate link previews.
|
||||
* Used when creating link submissions to embed preview data.
|
||||
*/
|
||||
|
||||
import { reactive } from 'vue'
|
||||
import { BaseService } from '@/core/base/BaseService'
|
||||
import type { LinkPreview } from '../types/submission'
|
||||
import { extractDomain } from '../types/submission'
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
interface CacheEntry {
|
||||
preview: LinkPreview
|
||||
timestamp: number
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Service Definition
|
||||
// ============================================================================
|
||||
|
||||
export class LinkPreviewService extends BaseService {
|
||||
protected readonly metadata = {
|
||||
name: 'LinkPreviewService',
|
||||
version: '1.0.0',
|
||||
dependencies: []
|
||||
}
|
||||
|
||||
// Cache for previews (URL -> preview)
|
||||
private cache = reactive(new Map<string, CacheEntry>())
|
||||
|
||||
// Cache TTL (15 minutes)
|
||||
private readonly CACHE_TTL = 15 * 60 * 1000
|
||||
|
||||
// Loading state per URL
|
||||
private _loading = reactive(new Map<string, boolean>())
|
||||
|
||||
// Error state per URL
|
||||
private _errors = reactive(new Map<string, string>())
|
||||
|
||||
// CORS proxy URL (configurable)
|
||||
private proxyUrl = ''
|
||||
|
||||
// ============================================================================
|
||||
// Lifecycle
|
||||
// ============================================================================
|
||||
|
||||
protected async onInitialize(): Promise<void> {
|
||||
console.log('LinkPreviewService: Initializing...')
|
||||
|
||||
// Try to get proxy URL from environment
|
||||
this.proxyUrl = import.meta.env.VITE_CORS_PROXY_URL || ''
|
||||
|
||||
// Clean expired cache entries periodically
|
||||
setInterval(() => this.cleanCache(), this.CACHE_TTL)
|
||||
|
||||
console.log('LinkPreviewService: Initialization complete')
|
||||
}
|
||||
|
||||
protected async onDispose(): Promise<void> {
|
||||
this.cache.clear()
|
||||
this._loading.clear()
|
||||
this._errors.clear()
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Public API
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Fetch link preview for a URL
|
||||
*/
|
||||
async fetchPreview(url: string): Promise<LinkPreview> {
|
||||
// Normalize URL
|
||||
const normalizedUrl = this.normalizeUrl(url)
|
||||
|
||||
// Check cache
|
||||
const cached = this.getCachedPreview(normalizedUrl)
|
||||
if (cached) {
|
||||
return cached
|
||||
}
|
||||
|
||||
// Check if already loading
|
||||
if (this._loading.get(normalizedUrl)) {
|
||||
// Wait for existing request
|
||||
return this.waitForPreview(normalizedUrl)
|
||||
}
|
||||
|
||||
// Mark as loading
|
||||
this._loading.set(normalizedUrl, true)
|
||||
this._errors.delete(normalizedUrl)
|
||||
|
||||
try {
|
||||
const preview = await this.doFetch(normalizedUrl)
|
||||
|
||||
// Cache the result
|
||||
this.cache.set(normalizedUrl, {
|
||||
preview,
|
||||
timestamp: Date.now()
|
||||
})
|
||||
|
||||
return preview
|
||||
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : 'Failed to fetch preview'
|
||||
this._errors.set(normalizedUrl, message)
|
||||
|
||||
// Return minimal preview on error
|
||||
return {
|
||||
url: normalizedUrl,
|
||||
domain: extractDomain(normalizedUrl)
|
||||
}
|
||||
|
||||
} finally {
|
||||
this._loading.set(normalizedUrl, false)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get cached preview if available and not expired
|
||||
*/
|
||||
getCachedPreview(url: string): LinkPreview | null {
|
||||
const cached = this.cache.get(url)
|
||||
if (!cached) return null
|
||||
|
||||
// Check if expired
|
||||
if (Date.now() - cached.timestamp > this.CACHE_TTL) {
|
||||
this.cache.delete(url)
|
||||
return null
|
||||
}
|
||||
|
||||
return cached.preview
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if URL is currently loading
|
||||
*/
|
||||
isLoading(url: string): boolean {
|
||||
return this._loading.get(url) || false
|
||||
}
|
||||
|
||||
/**
|
||||
* Get error for URL
|
||||
*/
|
||||
getError(url: string): string | null {
|
||||
return this._errors.get(url) || null
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear cache for a specific URL or all
|
||||
*/
|
||||
clearCache(url?: string): void {
|
||||
if (url) {
|
||||
this.cache.delete(url)
|
||||
} else {
|
||||
this.cache.clear()
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Fetching
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Perform the actual fetch
|
||||
*/
|
||||
private async doFetch(url: string): Promise<LinkPreview> {
|
||||
// Try different methods in order of preference
|
||||
|
||||
// 1. Try direct fetch (works for same-origin or CORS-enabled sites)
|
||||
try {
|
||||
return await this.fetchDirect(url)
|
||||
} catch (directError) {
|
||||
this.debug('Direct fetch failed:', directError)
|
||||
}
|
||||
|
||||
// 2. Try CORS proxy if configured
|
||||
if (this.proxyUrl) {
|
||||
try {
|
||||
return await this.fetchViaProxy(url)
|
||||
} catch (proxyError) {
|
||||
this.debug('Proxy fetch failed:', proxyError)
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Try oEmbed for supported sites
|
||||
try {
|
||||
return await this.fetchOembed(url)
|
||||
} catch (oembedError) {
|
||||
this.debug('oEmbed fetch failed:', oembedError)
|
||||
}
|
||||
|
||||
// 4. Return basic preview with just the domain
|
||||
return {
|
||||
url,
|
||||
domain: extractDomain(url)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Direct fetch (may fail due to CORS)
|
||||
*/
|
||||
private async fetchDirect(url: string): Promise<LinkPreview> {
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'text/html'
|
||||
}
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`)
|
||||
}
|
||||
|
||||
const html = await response.text()
|
||||
return this.parseHtml(url, html)
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch via CORS proxy
|
||||
*/
|
||||
private async fetchViaProxy(url: string): Promise<LinkPreview> {
|
||||
const proxyUrl = `${this.proxyUrl}${encodeURIComponent(url)}`
|
||||
|
||||
const response = await fetch(proxyUrl, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'text/html'
|
||||
}
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Proxy HTTP ${response.status}`)
|
||||
}
|
||||
|
||||
const html = await response.text()
|
||||
return this.parseHtml(url, html)
|
||||
}
|
||||
|
||||
/**
|
||||
* Try oEmbed for supported providers
|
||||
*/
|
||||
private async fetchOembed(url: string): Promise<LinkPreview> {
|
||||
// oEmbed providers and their endpoints
|
||||
const providers = [
|
||||
{
|
||||
pattern: /youtube\.com\/watch|youtu\.be/,
|
||||
endpoint: 'https://www.youtube.com/oembed'
|
||||
},
|
||||
{
|
||||
pattern: /twitter\.com|x\.com/,
|
||||
endpoint: 'https://publish.twitter.com/oembed'
|
||||
},
|
||||
{
|
||||
pattern: /vimeo\.com/,
|
||||
endpoint: 'https://vimeo.com/api/oembed.json'
|
||||
}
|
||||
]
|
||||
|
||||
const provider = providers.find(p => p.pattern.test(url))
|
||||
if (!provider) {
|
||||
throw new Error('No oEmbed provider for URL')
|
||||
}
|
||||
|
||||
const oembedUrl = `${provider.endpoint}?url=${encodeURIComponent(url)}&format=json`
|
||||
const response = await fetch(oembedUrl)
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`oEmbed HTTP ${response.status}`)
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
return {
|
||||
url,
|
||||
domain: extractDomain(url),
|
||||
title: data.title,
|
||||
description: data.description || data.author_name,
|
||||
image: data.thumbnail_url,
|
||||
siteName: data.provider_name,
|
||||
type: data.type,
|
||||
videoUrl: data.html?.includes('iframe') ? url : undefined
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// HTML Parsing
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Parse HTML to extract Open Graph and meta tags
|
||||
*/
|
||||
private parseHtml(url: string, html: string): LinkPreview {
|
||||
const preview: LinkPreview = {
|
||||
url,
|
||||
domain: extractDomain(url)
|
||||
}
|
||||
|
||||
// Create a DOM parser
|
||||
const parser = new DOMParser()
|
||||
const doc = parser.parseFromString(html, 'text/html')
|
||||
|
||||
// Extract Open Graph tags
|
||||
const ogTags = this.extractOgTags(doc)
|
||||
|
||||
// Extract Twitter Card tags (fallback)
|
||||
const twitterTags = this.extractTwitterTags(doc)
|
||||
|
||||
// Extract standard meta tags (fallback)
|
||||
const metaTags = this.extractMetaTags(doc)
|
||||
|
||||
// Merge with priority: OG > Twitter > Meta > Title
|
||||
preview.title = ogTags.title || twitterTags.title || metaTags.title || this.extractTitle(doc)
|
||||
preview.description = ogTags.description || twitterTags.description || metaTags.description
|
||||
preview.image = ogTags.image || twitterTags.image
|
||||
preview.siteName = ogTags.siteName || twitterTags.site
|
||||
preview.type = ogTags.type
|
||||
preview.videoUrl = ogTags.video
|
||||
preview.favicon = this.extractFavicon(doc, url)
|
||||
|
||||
return preview
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract Open Graph tags
|
||||
*/
|
||||
private extractOgTags(doc: Document): Record<string, string | undefined> {
|
||||
const tags: Record<string, string | undefined> = {}
|
||||
|
||||
const ogMetas = doc.querySelectorAll('meta[property^="og:"]')
|
||||
ogMetas.forEach(meta => {
|
||||
const property = meta.getAttribute('property')?.replace('og:', '')
|
||||
const content = meta.getAttribute('content')
|
||||
if (property && content) {
|
||||
switch (property) {
|
||||
case 'title':
|
||||
tags.title = content
|
||||
break
|
||||
case 'description':
|
||||
tags.description = content
|
||||
break
|
||||
case 'image':
|
||||
tags.image = content
|
||||
break
|
||||
case 'site_name':
|
||||
tags.siteName = content
|
||||
break
|
||||
case 'type':
|
||||
tags.type = content
|
||||
break
|
||||
case 'video':
|
||||
case 'video:url':
|
||||
tags.video = content
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return tags
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract Twitter Card tags
|
||||
*/
|
||||
private extractTwitterTags(doc: Document): Record<string, string | undefined> {
|
||||
const tags: Record<string, string | undefined> = {}
|
||||
|
||||
const twitterMetas = doc.querySelectorAll('meta[name^="twitter:"]')
|
||||
twitterMetas.forEach(meta => {
|
||||
const name = meta.getAttribute('name')?.replace('twitter:', '')
|
||||
const content = meta.getAttribute('content')
|
||||
if (name && content) {
|
||||
switch (name) {
|
||||
case 'title':
|
||||
tags.title = content
|
||||
break
|
||||
case 'description':
|
||||
tags.description = content
|
||||
break
|
||||
case 'image':
|
||||
case 'image:src':
|
||||
tags.image = content
|
||||
break
|
||||
case 'site':
|
||||
tags.site = content
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return tags
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract standard meta tags
|
||||
*/
|
||||
private extractMetaTags(doc: Document): Record<string, string | undefined> {
|
||||
const tags: Record<string, string | undefined> = {}
|
||||
|
||||
// Description
|
||||
const descMeta = doc.querySelector('meta[name="description"]')
|
||||
if (descMeta) {
|
||||
tags.description = descMeta.getAttribute('content') || undefined
|
||||
}
|
||||
|
||||
// Title from meta
|
||||
const titleMeta = doc.querySelector('meta[name="title"]')
|
||||
if (titleMeta) {
|
||||
tags.title = titleMeta.getAttribute('content') || undefined
|
||||
}
|
||||
|
||||
return tags
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract page title
|
||||
*/
|
||||
private extractTitle(doc: Document): string | undefined {
|
||||
return doc.querySelector('title')?.textContent || undefined
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract favicon URL
|
||||
*/
|
||||
private extractFavicon(doc: Document, pageUrl: string): string | undefined {
|
||||
// Try various link rel types
|
||||
const selectors = [
|
||||
'link[rel="icon"]',
|
||||
'link[rel="shortcut icon"]',
|
||||
'link[rel="apple-touch-icon"]'
|
||||
]
|
||||
|
||||
for (const selector of selectors) {
|
||||
const link = doc.querySelector(selector)
|
||||
const href = link?.getAttribute('href')
|
||||
if (href) {
|
||||
return this.resolveUrl(href, pageUrl)
|
||||
}
|
||||
}
|
||||
|
||||
// Default favicon location
|
||||
return this.resolveUrl('/favicon.ico', pageUrl)
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Utilities
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Normalize URL
|
||||
*/
|
||||
private normalizeUrl(url: string): string {
|
||||
let normalized = url.trim()
|
||||
|
||||
// Add protocol if missing
|
||||
if (!normalized.startsWith('http://') && !normalized.startsWith('https://')) {
|
||||
normalized = 'https://' + normalized
|
||||
}
|
||||
|
||||
return normalized
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve relative URL to absolute
|
||||
*/
|
||||
private resolveUrl(href: string, base: string): string {
|
||||
try {
|
||||
return new URL(href, base).toString()
|
||||
} catch {
|
||||
return href
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Wait for an in-flight preview request
|
||||
*/
|
||||
private async waitForPreview(url: string): Promise<LinkPreview> {
|
||||
// Poll until loading is done
|
||||
while (this._loading.get(url)) {
|
||||
await new Promise(resolve => setTimeout(resolve, 100))
|
||||
}
|
||||
|
||||
// Return cached result or error
|
||||
const cached = this.getCachedPreview(url)
|
||||
if (cached) return cached
|
||||
|
||||
return {
|
||||
url,
|
||||
domain: extractDomain(url)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clean expired cache entries
|
||||
*/
|
||||
private cleanCache(): void {
|
||||
const now = Date.now()
|
||||
|
||||
for (const [url, entry] of this.cache) {
|
||||
if (now - entry.timestamp > this.CACHE_TTL) {
|
||||
this.cache.delete(url)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Validation
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Check if URL is valid
|
||||
*/
|
||||
isValidUrl(url: string): boolean {
|
||||
try {
|
||||
const parsed = new URL(this.normalizeUrl(url))
|
||||
return parsed.protocol === 'http:' || parsed.protocol === 'https:'
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if URL is likely to be media
|
||||
*/
|
||||
isMediaUrl(url: string): boolean {
|
||||
const mediaExtensions = [
|
||||
'.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg',
|
||||
'.mp4', '.webm', '.mov', '.avi',
|
||||
'.mp3', '.wav', '.ogg', '.flac'
|
||||
]
|
||||
|
||||
const lowerUrl = url.toLowerCase()
|
||||
return mediaExtensions.some(ext => lowerUrl.includes(ext))
|
||||
}
|
||||
|
||||
/**
|
||||
* Guess media type from URL
|
||||
*/
|
||||
guessMediaType(url: string): 'image' | 'video' | 'audio' | 'other' {
|
||||
const lowerUrl = url.toLowerCase()
|
||||
|
||||
if (/\.(jpg|jpeg|png|gif|webp|svg)/.test(lowerUrl)) return 'image'
|
||||
if (/\.(mp4|webm|mov|avi)/.test(lowerUrl)) return 'video'
|
||||
if (/\.(mp3|wav|ogg|flac)/.test(lowerUrl)) return 'audio'
|
||||
|
||||
return 'other'
|
||||
}
|
||||
}
|
||||
|
|
@ -427,6 +427,124 @@ export class ReactionService extends BaseService {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Send a dislike reaction to an event
|
||||
*/
|
||||
async dislikeEvent(eventId: string, eventPubkey: string, eventKind: number): Promise<void> {
|
||||
if (!this.authService?.isAuthenticated?.value) {
|
||||
throw new Error('Must be authenticated to react')
|
||||
}
|
||||
|
||||
if (!this.relayHub?.isConnected) {
|
||||
throw new Error('Not connected to relays')
|
||||
}
|
||||
|
||||
const userPubkey = this.authService.user.value?.pubkey
|
||||
const userPrivkey = this.authService.user.value?.prvkey
|
||||
|
||||
if (!userPubkey || !userPrivkey) {
|
||||
throw new Error('User keys not available')
|
||||
}
|
||||
|
||||
// Check if user already disliked this event
|
||||
const eventReactions = this.getEventReactions(eventId)
|
||||
if (eventReactions.userHasDisliked) {
|
||||
throw new Error('Already disliked this event')
|
||||
}
|
||||
|
||||
try {
|
||||
this._isLoading.value = true
|
||||
|
||||
// Create reaction event template according to NIP-25
|
||||
const eventTemplate: EventTemplate = {
|
||||
kind: 7, // Reaction
|
||||
content: '-', // Dislike reaction
|
||||
tags: [
|
||||
['e', eventId, '', eventPubkey], // Event being reacted to
|
||||
['p', eventPubkey], // Author of the event being reacted to
|
||||
['k', eventKind.toString()] // Kind of the event being reacted to
|
||||
],
|
||||
created_at: Math.floor(Date.now() / 1000)
|
||||
}
|
||||
|
||||
// Sign the event
|
||||
const privkeyBytes = this.hexToUint8Array(userPrivkey)
|
||||
const signedEvent = finalizeEvent(eventTemplate, privkeyBytes)
|
||||
|
||||
// Publish the reaction
|
||||
await this.relayHub.publishEvent(signedEvent)
|
||||
|
||||
// Optimistically update local state
|
||||
this.handleReactionEvent(signedEvent)
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to dislike event:', error)
|
||||
throw error
|
||||
} finally {
|
||||
this._isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove a dislike from an event using NIP-09 deletion events
|
||||
*/
|
||||
async undislikeEvent(eventId: string): Promise<void> {
|
||||
if (!this.authService?.isAuthenticated?.value) {
|
||||
throw new Error('Must be authenticated to remove reaction')
|
||||
}
|
||||
|
||||
if (!this.relayHub?.isConnected) {
|
||||
throw new Error('Not connected to relays')
|
||||
}
|
||||
|
||||
const userPubkey = this.authService.user.value?.pubkey
|
||||
const userPrivkey = this.authService.user.value?.prvkey
|
||||
|
||||
if (!userPubkey || !userPrivkey) {
|
||||
throw new Error('User keys not available')
|
||||
}
|
||||
|
||||
// Get the user's reaction ID to delete
|
||||
const eventReactions = this.getEventReactions(eventId)
|
||||
|
||||
if (!eventReactions.userHasDisliked || !eventReactions.userReactionId) {
|
||||
throw new Error('No dislike reaction to remove')
|
||||
}
|
||||
|
||||
try {
|
||||
this._isLoading.value = true
|
||||
|
||||
// Create deletion event according to NIP-09
|
||||
const eventTemplate: EventTemplate = {
|
||||
kind: 5, // Deletion request
|
||||
content: '', // Empty content or reason
|
||||
tags: [
|
||||
['e', eventReactions.userReactionId], // The reaction event to delete
|
||||
['k', '7'] // Kind of event being deleted (reaction)
|
||||
],
|
||||
created_at: Math.floor(Date.now() / 1000)
|
||||
}
|
||||
|
||||
// Sign the event
|
||||
const privkeyBytes = this.hexToUint8Array(userPrivkey)
|
||||
const signedEvent = finalizeEvent(eventTemplate, privkeyBytes)
|
||||
|
||||
// Publish the deletion
|
||||
const result = await this.relayHub.publishEvent(signedEvent)
|
||||
|
||||
console.log(`ReactionService: Dislike deletion published to ${result.success}/${result.total} relays`)
|
||||
|
||||
// Optimistically update local state
|
||||
this.handleDeletionEvent(signedEvent)
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to remove dislike:', error)
|
||||
throw error
|
||||
} finally {
|
||||
this._isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper function to convert hex string to Uint8Array
|
||||
*/
|
||||
|
|
|
|||
1362
src/modules/nostr-feed/services/SubmissionService.ts
Normal file
1362
src/modules/nostr-feed/services/SubmissionService.ts
Normal file
File diff suppressed because it is too large
Load diff
5
src/modules/nostr-feed/types/index.ts
Normal file
5
src/modules/nostr-feed/types/index.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
/**
|
||||
* Types index - re-export all types from the module
|
||||
*/
|
||||
|
||||
export * from './submission'
|
||||
528
src/modules/nostr-feed/types/submission.ts
Normal file
528
src/modules/nostr-feed/types/submission.ts
Normal file
|
|
@ -0,0 +1,528 @@
|
|||
/**
|
||||
* Link Aggregator Types
|
||||
*
|
||||
* Implements Reddit-style submissions using NIP-72 (Communities) and NIP-22 (Comments).
|
||||
* Submissions are kind 1111 events scoped to a community with structured metadata.
|
||||
*/
|
||||
|
||||
|
||||
// ============================================================================
|
||||
// Constants
|
||||
// ============================================================================
|
||||
|
||||
/** Nostr event kinds used by the link aggregator */
|
||||
export const SUBMISSION_KINDS = {
|
||||
/** Community definition (NIP-72) */
|
||||
COMMUNITY: 34550,
|
||||
/** Submission/comment (NIP-22) */
|
||||
SUBMISSION: 1111,
|
||||
/** Moderator approval (NIP-72) */
|
||||
APPROVAL: 4550,
|
||||
/** Reaction/vote (NIP-25) */
|
||||
REACTION: 7,
|
||||
/** Deletion (NIP-09) */
|
||||
DELETION: 5,
|
||||
/** File metadata (NIP-94) - for media references */
|
||||
FILE_METADATA: 1063
|
||||
} as const
|
||||
|
||||
/** Submission post types */
|
||||
export type SubmissionType = 'link' | 'media' | 'self'
|
||||
|
||||
/** Vote types for reactions */
|
||||
export type VoteType = 'upvote' | 'downvote' | null
|
||||
|
||||
/** Feed sort options */
|
||||
export type SortType = 'hot' | 'new' | 'top' | 'controversial'
|
||||
|
||||
/** Time range for "top" sorting */
|
||||
export type TimeRange = 'hour' | 'day' | 'week' | 'month' | 'year' | 'all'
|
||||
|
||||
// ============================================================================
|
||||
// Link Preview Types
|
||||
// ============================================================================
|
||||
|
||||
/** Open Graph metadata extracted from a URL */
|
||||
export interface LinkPreview {
|
||||
/** The original URL */
|
||||
url: string
|
||||
/** og:title or page title */
|
||||
title?: string
|
||||
/** og:description or meta description */
|
||||
description?: string
|
||||
/** og:image URL */
|
||||
image?: string
|
||||
/** og:site_name */
|
||||
siteName?: string
|
||||
/** og:type (article, video, etc.) */
|
||||
type?: string
|
||||
/** og:video for video embeds */
|
||||
videoUrl?: string
|
||||
/** Favicon URL */
|
||||
favicon?: string
|
||||
/** Domain extracted from URL */
|
||||
domain: string
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Media Types (NIP-92 / NIP-94)
|
||||
// ============================================================================
|
||||
|
||||
/** Media attachment metadata from imeta tag */
|
||||
export interface MediaAttachment {
|
||||
/** Media URL */
|
||||
url: string
|
||||
/** MIME type (e.g., "image/jpeg", "video/mp4") */
|
||||
mimeType?: string
|
||||
/** Dimensions in "WxH" format */
|
||||
dimensions?: string
|
||||
/** Width in pixels */
|
||||
width?: number
|
||||
/** Height in pixels */
|
||||
height?: number
|
||||
/** Blurhash for placeholder */
|
||||
blurhash?: string
|
||||
/** Alt text for accessibility */
|
||||
alt?: string
|
||||
/** SHA-256 hash of the file */
|
||||
hash?: string
|
||||
/** File size in bytes */
|
||||
size?: number
|
||||
/** Thumbnail URL */
|
||||
thumbnail?: string
|
||||
/** Fallback URLs */
|
||||
fallbacks?: string[]
|
||||
}
|
||||
|
||||
/** Media type classification */
|
||||
export type MediaType = 'image' | 'video' | 'audio' | 'other'
|
||||
|
||||
// ============================================================================
|
||||
// Submission Types
|
||||
// ============================================================================
|
||||
|
||||
/** Base submission data shared by all post types */
|
||||
export interface SubmissionBase {
|
||||
/** Nostr event ID */
|
||||
id: string
|
||||
/** Author public key */
|
||||
pubkey: string
|
||||
/** Unix timestamp (seconds) */
|
||||
created_at: number
|
||||
/** Event kind (1111) */
|
||||
kind: typeof SUBMISSION_KINDS.SUBMISSION
|
||||
/** Raw event tags */
|
||||
tags: string[][]
|
||||
/** Submission title (required) */
|
||||
title: string
|
||||
/** Post type discriminator */
|
||||
postType: SubmissionType
|
||||
/** Community reference (a-tag format) */
|
||||
communityRef?: string
|
||||
/** Hashtags/topics */
|
||||
hashtags: string[]
|
||||
/** Whether marked NSFW */
|
||||
nsfw: boolean
|
||||
/** Flair/label for the post */
|
||||
flair?: string
|
||||
}
|
||||
|
||||
/** Link submission with URL and preview */
|
||||
export interface LinkSubmission extends SubmissionBase {
|
||||
postType: 'link'
|
||||
/** External URL */
|
||||
url: string
|
||||
/** Link preview metadata */
|
||||
preview?: LinkPreview
|
||||
/** Optional body/description */
|
||||
body?: string
|
||||
}
|
||||
|
||||
/** Media submission with attachments */
|
||||
export interface MediaSubmission extends SubmissionBase {
|
||||
postType: 'media'
|
||||
/** Primary media attachment */
|
||||
media: MediaAttachment
|
||||
/** Additional media attachments (gallery) */
|
||||
gallery?: MediaAttachment[]
|
||||
/** Caption/description */
|
||||
body?: string
|
||||
}
|
||||
|
||||
/** Self/text submission */
|
||||
export interface SelfSubmission extends SubmissionBase {
|
||||
postType: 'self'
|
||||
/** Markdown body content */
|
||||
body: string
|
||||
}
|
||||
|
||||
/** Union type for all submission types */
|
||||
export type Submission = LinkSubmission | MediaSubmission | SelfSubmission
|
||||
|
||||
// ============================================================================
|
||||
// Voting & Scoring
|
||||
// ============================================================================
|
||||
|
||||
/** Vote counts and user state for a submission */
|
||||
export interface SubmissionVotes {
|
||||
/** Total upvotes */
|
||||
upvotes: number
|
||||
/** Total downvotes */
|
||||
downvotes: number
|
||||
/** Net score (upvotes - downvotes) */
|
||||
score: number
|
||||
/** Current user's vote */
|
||||
userVote: VoteType
|
||||
/** User's vote event ID (for deletion) */
|
||||
userVoteId?: string
|
||||
}
|
||||
|
||||
/** Ranking scores for sorting */
|
||||
export interface SubmissionRanking {
|
||||
/** Hot rank score (activity + recency) */
|
||||
hotRank: number
|
||||
/** Controversy rank (balanced voting) */
|
||||
controversyRank: number
|
||||
/** Scaled rank (amplifies smaller communities) */
|
||||
scaledRank: number
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Full Submission with Metadata
|
||||
// ============================================================================
|
||||
|
||||
/** Complete submission with all associated data */
|
||||
export type SubmissionWithMeta = Submission & {
|
||||
/** Vote counts and user state */
|
||||
votes: SubmissionVotes
|
||||
/** Ranking scores */
|
||||
ranking: SubmissionRanking
|
||||
/** Total comment count */
|
||||
commentCount: number
|
||||
/** Whether the submission is saved by current user */
|
||||
isSaved: boolean
|
||||
/** Whether hidden by current user */
|
||||
isHidden: boolean
|
||||
/** Approval status in moderated community */
|
||||
approvalStatus: 'pending' | 'approved' | 'rejected' | null
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Comments
|
||||
// ============================================================================
|
||||
|
||||
/** Comment on a submission (also kind 1111) */
|
||||
export interface SubmissionComment {
|
||||
/** Nostr event ID */
|
||||
id: string
|
||||
/** Author public key */
|
||||
pubkey: string
|
||||
/** Unix timestamp */
|
||||
created_at: number
|
||||
/** Comment text content */
|
||||
content: string
|
||||
/** Root submission ID */
|
||||
rootId: string
|
||||
/** Direct parent ID (submission or comment) */
|
||||
parentId: string
|
||||
/** Depth in comment tree (0 = top-level) */
|
||||
depth: number
|
||||
/** Child comments */
|
||||
replies: SubmissionComment[]
|
||||
/** Vote data */
|
||||
votes: SubmissionVotes
|
||||
/** Whether collapsed in UI */
|
||||
isCollapsed?: boolean
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Community Types (NIP-72)
|
||||
// ============================================================================
|
||||
|
||||
/** Community moderator */
|
||||
export interface CommunityModerator {
|
||||
pubkey: string
|
||||
relay?: string
|
||||
role: 'moderator' | 'admin'
|
||||
}
|
||||
|
||||
/** Community definition (kind 34550) */
|
||||
export interface Community {
|
||||
/** Unique identifier (d-tag) */
|
||||
id: string
|
||||
/** Creator public key */
|
||||
pubkey: string
|
||||
/** Display name */
|
||||
name: string
|
||||
/** Description/about */
|
||||
description?: string
|
||||
/** Banner/header image URL */
|
||||
image?: string
|
||||
/** Icon/avatar URL */
|
||||
icon?: string
|
||||
/** List of moderators */
|
||||
moderators: CommunityModerator[]
|
||||
/** Rules (markdown) */
|
||||
rules?: string
|
||||
/** Preferred relays */
|
||||
relays: {
|
||||
author?: string
|
||||
requests?: string
|
||||
approvals?: string
|
||||
}
|
||||
/** Tags/topics */
|
||||
tags: string[]
|
||||
/** Whether posts require approval */
|
||||
requiresApproval: boolean
|
||||
/** Creation timestamp */
|
||||
created_at: number
|
||||
}
|
||||
|
||||
/** Community reference (a-tag format) */
|
||||
export interface CommunityRef {
|
||||
/** "34550" */
|
||||
kind: string
|
||||
/** Community creator pubkey */
|
||||
pubkey: string
|
||||
/** Community d-tag identifier */
|
||||
identifier: string
|
||||
/** Relay hint */
|
||||
relay?: string
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Form Types (for creating/editing)
|
||||
// ============================================================================
|
||||
|
||||
/** Form data for creating a link submission */
|
||||
export interface LinkSubmissionForm {
|
||||
postType: 'link'
|
||||
title: string
|
||||
url: string
|
||||
body?: string
|
||||
communityRef?: string
|
||||
nsfw?: boolean
|
||||
flair?: string
|
||||
}
|
||||
|
||||
/** Form data for creating a media submission */
|
||||
export interface MediaSubmissionForm {
|
||||
postType: 'media'
|
||||
title: string
|
||||
/** File to upload, or URL if already uploaded */
|
||||
media: File | string
|
||||
body?: string
|
||||
alt?: string
|
||||
communityRef?: string
|
||||
nsfw?: boolean
|
||||
flair?: string
|
||||
}
|
||||
|
||||
/** Form data for creating a self/text submission */
|
||||
export interface SelfSubmissionForm {
|
||||
postType: 'self'
|
||||
title: string
|
||||
body: string
|
||||
communityRef?: string
|
||||
nsfw?: boolean
|
||||
flair?: string
|
||||
}
|
||||
|
||||
/** Union type for submission forms */
|
||||
export type SubmissionForm = LinkSubmissionForm | MediaSubmissionForm | SelfSubmissionForm
|
||||
|
||||
// ============================================================================
|
||||
// Feed Configuration
|
||||
// ============================================================================
|
||||
|
||||
/** Configuration for fetching submissions */
|
||||
export interface SubmissionFeedConfig {
|
||||
/** Community to filter by (optional, null = all) */
|
||||
community?: CommunityRef | null
|
||||
/** Sort order */
|
||||
sort: SortType
|
||||
/** Time range for "top" sort */
|
||||
timeRange?: TimeRange
|
||||
/** Filter by post type */
|
||||
postTypes?: SubmissionType[]
|
||||
/** Include NSFW content */
|
||||
includeNsfw: boolean
|
||||
/** Maximum submissions to fetch */
|
||||
limit: number
|
||||
/** Author filter */
|
||||
authors?: string[]
|
||||
/** Hashtag filter */
|
||||
hashtags?: string[]
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Helper Functions
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Parse an 'a' tag into a CommunityRef
|
||||
* Format: "34550:<pubkey>:<identifier>"
|
||||
*/
|
||||
export function parseCommunityRef(aTag: string, relay?: string): CommunityRef | null {
|
||||
const parts = aTag.split(':')
|
||||
if (parts.length < 3 || parts[0] !== '34550') {
|
||||
return null
|
||||
}
|
||||
return {
|
||||
kind: parts[0],
|
||||
pubkey: parts[1],
|
||||
identifier: parts.slice(2).join(':'), // identifier may contain colons
|
||||
relay
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Format a CommunityRef back to 'a' tag format
|
||||
*/
|
||||
export function formatCommunityRef(ref: CommunityRef): string {
|
||||
return `${ref.kind}:${ref.pubkey}:${ref.identifier}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract domain from URL
|
||||
*/
|
||||
export function extractDomain(url: string): string {
|
||||
try {
|
||||
const parsed = new URL(url)
|
||||
return parsed.hostname.replace(/^www\./, '')
|
||||
} catch {
|
||||
return url
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Classify media type from MIME type
|
||||
*/
|
||||
export function classifyMediaType(mimeType?: string): MediaType {
|
||||
if (!mimeType) return 'other'
|
||||
if (mimeType.startsWith('image/')) return 'image'
|
||||
if (mimeType.startsWith('video/')) return 'video'
|
||||
if (mimeType.startsWith('audio/')) return 'audio'
|
||||
return 'other'
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse imeta tag into MediaAttachment
|
||||
* Format: ["imeta", "url <url>", "m <mime>", "dim <WxH>", ...]
|
||||
*/
|
||||
export function parseImetaTag(tag: string[]): MediaAttachment | null {
|
||||
if (tag[0] !== 'imeta') return null
|
||||
|
||||
const attachment: MediaAttachment = { url: '' }
|
||||
|
||||
for (let i = 1; i < tag.length; i++) {
|
||||
const [key, ...valueParts] = tag[i].split(' ')
|
||||
const value = valueParts.join(' ')
|
||||
|
||||
switch (key) {
|
||||
case 'url':
|
||||
attachment.url = value
|
||||
break
|
||||
case 'm':
|
||||
attachment.mimeType = value
|
||||
break
|
||||
case 'dim':
|
||||
attachment.dimensions = value
|
||||
const [w, h] = value.split('x').map(Number)
|
||||
if (!isNaN(w)) attachment.width = w
|
||||
if (!isNaN(h)) attachment.height = h
|
||||
break
|
||||
case 'blurhash':
|
||||
attachment.blurhash = value
|
||||
break
|
||||
case 'alt':
|
||||
attachment.alt = value
|
||||
break
|
||||
case 'x':
|
||||
attachment.hash = value
|
||||
break
|
||||
case 'size':
|
||||
attachment.size = parseInt(value, 10)
|
||||
break
|
||||
case 'thumb':
|
||||
attachment.thumbnail = value
|
||||
break
|
||||
case 'fallback':
|
||||
attachment.fallbacks = attachment.fallbacks || []
|
||||
attachment.fallbacks.push(value)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
return attachment.url ? attachment : null
|
||||
}
|
||||
|
||||
/**
|
||||
* Build imeta tag from MediaAttachment
|
||||
*/
|
||||
export function buildImetaTag(media: MediaAttachment): string[] {
|
||||
const tag = ['imeta']
|
||||
|
||||
tag.push(`url ${media.url}`)
|
||||
if (media.mimeType) tag.push(`m ${media.mimeType}`)
|
||||
if (media.dimensions) tag.push(`dim ${media.dimensions}`)
|
||||
else if (media.width && media.height) tag.push(`dim ${media.width}x${media.height}`)
|
||||
if (media.blurhash) tag.push(`blurhash ${media.blurhash}`)
|
||||
if (media.alt) tag.push(`alt ${media.alt}`)
|
||||
if (media.hash) tag.push(`x ${media.hash}`)
|
||||
if (media.size) tag.push(`size ${media.size}`)
|
||||
if (media.thumbnail) tag.push(`thumb ${media.thumbnail}`)
|
||||
media.fallbacks?.forEach(fb => tag.push(`fallback ${fb}`))
|
||||
|
||||
return tag
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Ranking Algorithms
|
||||
// ============================================================================
|
||||
|
||||
/** Epoch for hot rank calculation (Unix timestamp) */
|
||||
const HOT_RANK_EPOCH = 1134028003 // Dec 8, 2005 (Reddit's epoch)
|
||||
|
||||
/**
|
||||
* Calculate hot rank score (Reddit/Lemmy style)
|
||||
* Higher scores for posts with more upvotes that are newer
|
||||
*/
|
||||
export function calculateHotRank(score: number, createdAt: number): number {
|
||||
const order = Math.log10(Math.max(Math.abs(score), 1))
|
||||
const sign = score > 0 ? 1 : score < 0 ? -1 : 0
|
||||
const seconds = createdAt - HOT_RANK_EPOCH
|
||||
return sign * order + seconds / 45000
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate controversy rank
|
||||
* Higher scores for posts with balanced up/down votes
|
||||
*/
|
||||
export function calculateControversyRank(upvotes: number, downvotes: number): number {
|
||||
const total = upvotes + downvotes
|
||||
if (total === 0) return 0
|
||||
|
||||
const magnitude = Math.pow(total, 0.8)
|
||||
const balance = Math.min(upvotes, downvotes) / Math.max(upvotes, downvotes, 1)
|
||||
|
||||
return magnitude * balance
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate confidence score (Wilson score interval lower bound)
|
||||
* Used for "best" comment sorting
|
||||
*/
|
||||
export function calculateConfidence(upvotes: number, downvotes: number): number {
|
||||
const n = upvotes + downvotes
|
||||
if (n === 0) return 0
|
||||
|
||||
const z = 1.96 // 95% confidence
|
||||
const p = upvotes / n
|
||||
|
||||
const left = p + (z * z) / (2 * n)
|
||||
const right = z * Math.sqrt((p * (1 - p) + (z * z) / (4 * n)) / n)
|
||||
const under = 1 + (z * z) / n
|
||||
|
||||
return (left - right) / under
|
||||
}
|
||||
18
src/modules/nostr-feed/views/SubmissionDetailPage.vue
Normal file
18
src/modules/nostr-feed/views/SubmissionDetailPage.vue
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* SubmissionDetailPage - Page wrapper for submission detail view
|
||||
* Extracts route params and passes to SubmissionDetail component
|
||||
*/
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import SubmissionDetail from '../components/SubmissionDetail.vue'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const submissionId = computed(() => route.params.id as string)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SubmissionDetail :submission-id="submissionId" />
|
||||
</template>
|
||||
35
src/modules/nostr-feed/views/SubmitPage.vue
Normal file
35
src/modules/nostr-feed/views/SubmitPage.vue
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* SubmitPage - Page wrapper for submission composer
|
||||
* Handles route query params for community pre-selection
|
||||
*/
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import SubmitComposer from '../components/SubmitComposer.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
// Get community from query param if provided (e.g., /submit?community=...)
|
||||
const community = computed(() => route.query.community as string | undefined)
|
||||
|
||||
// Handle submission completion
|
||||
function onSubmitted(submissionId: string) {
|
||||
// Navigation is handled by SubmitComposer
|
||||
console.log('Submission created:', submissionId)
|
||||
}
|
||||
|
||||
// Handle cancel - go back
|
||||
function onCancel() {
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SubmitComposer
|
||||
:community="community"
|
||||
@submitted="onSubmitted"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -1,268 +1,56 @@
|
|||
<template>
|
||||
<div class="flex flex-col h-screen bg-background">
|
||||
<PWAInstallPrompt auto-show />
|
||||
<!-- TODO: Implement push notifications properly - currently commenting out admin notifications dialog -->
|
||||
<!-- <NotificationPermission auto-show /> -->
|
||||
|
||||
<!-- Compact Header with Filters Toggle (Mobile) -->
|
||||
<!-- Header -->
|
||||
<div class="sticky top-0 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
|
||||
<div class="flex items-center justify-between px-4 py-2 sm:px-6">
|
||||
<div class="max-w-4xl mx-auto flex items-center justify-between px-4 py-2 sm:px-6">
|
||||
<h1 class="text-lg font-semibold">Feed</h1>
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Active Filter Indicator -->
|
||||
<div class="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<span v-if="activeFilterCount > 0">{{ activeFilterCount }} filters</span>
|
||||
<span v-else>All content</span>
|
||||
</div>
|
||||
<!-- Filter Toggle Button -->
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@click="showFilters = !showFilters"
|
||||
class="h-8 w-8 p-0"
|
||||
>
|
||||
<Filter class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collapsible Filter Panel -->
|
||||
<div v-if="showFilters" class="border-t bg-background/95 backdrop-blur">
|
||||
<div class="px-4 py-3 sm:px-6">
|
||||
<FeedFilters v-model="selectedFilters" :admin-pubkeys="adminPubkeys" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Feed Area - Takes remaining height with scrolling -->
|
||||
<!-- Main Feed Area -->
|
||||
<div class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
|
||||
<!-- Collapsible Composer -->
|
||||
<div v-if="showComposer || replyTo" class="border-b bg-background sticky top-0 z-10">
|
||||
<div class="max-h-[70vh] overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
|
||||
<div class="px-4 py-3 sm:px-6">
|
||||
<!-- Regular Note Composer -->
|
||||
<NoteComposer
|
||||
v-if="composerType === 'note' || replyTo"
|
||||
:reply-to="replyTo"
|
||||
@note-published="onNotePublished"
|
||||
@clear-reply="onClearReply"
|
||||
@close="onCloseComposer"
|
||||
/>
|
||||
|
||||
<!-- Rideshare Composer -->
|
||||
<RideshareComposer
|
||||
v-else-if="composerType === 'rideshare'"
|
||||
@rideshare-published="onRidesharePublished"
|
||||
@close="onCloseComposer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feed Content - Natural flow with padding for sticky elements -->
|
||||
<div>
|
||||
<NostrFeed
|
||||
:feed-type="feedType"
|
||||
:content-filters="selectedFilters"
|
||||
:admin-pubkeys="adminPubkeys"
|
||||
:key="feedKey"
|
||||
:compact-mode="true"
|
||||
@reply-to-note="onReplyToNote"
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6">
|
||||
<SubmissionList
|
||||
:show-ranks="false"
|
||||
:show-time-range="true"
|
||||
initial-sort="hot"
|
||||
@submission-click="onSubmissionClick"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Action Buttons for Compose -->
|
||||
<div v-if="!showComposer && !replyTo" class="fixed bottom-6 right-6 z-50">
|
||||
<!-- Main compose button -->
|
||||
<div class="flex flex-col items-end gap-3">
|
||||
<!-- Secondary buttons (when expanded) -->
|
||||
<div v-if="showComposerOptions" class="flex flex-col gap-2">
|
||||
<!-- Floating Action Button for Create Post -->
|
||||
<div class="fixed bottom-6 right-6 z-50">
|
||||
<Button
|
||||
@click="openComposer('note')"
|
||||
size="lg"
|
||||
class="h-12 px-4 rounded-full shadow-lg hover:shadow-xl transition-all gap-2 bg-card border-2 border-border hover:bg-accent text-card-foreground"
|
||||
>
|
||||
<MessageSquare class="h-4 w-4" />
|
||||
<span class="text-sm font-medium">Note</span>
|
||||
</Button>
|
||||
<Button
|
||||
@click="openComposer('rideshare')"
|
||||
size="lg"
|
||||
class="h-12 px-4 rounded-full shadow-lg hover:shadow-xl transition-all gap-2 bg-card border-2 border-border hover:bg-accent text-card-foreground"
|
||||
>
|
||||
<Car class="h-4 w-4" />
|
||||
<span class="text-sm font-medium">Rideshare</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Main FAB -->
|
||||
<Button
|
||||
@click="toggleComposerOptions"
|
||||
@click="navigateToSubmit"
|
||||
size="lg"
|
||||
class="h-14 w-14 rounded-full shadow-lg hover:shadow-xl transition-all bg-primary hover:bg-primary/90 border-2 border-primary-foreground/20 flex items-center justify-center p-0"
|
||||
>
|
||||
<Plus
|
||||
class="h-6 w-6 stroke-[2.5] transition-transform duration-200"
|
||||
:class="{ 'rotate-45': showComposerOptions }"
|
||||
/>
|
||||
<Plus class="h-6 w-6 stroke-[2.5]" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Filters Bar (Mobile) -->
|
||||
<div class="md:hidden sticky bottom-0 z-30 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-t">
|
||||
<div class="flex overflow-x-auto px-4 py-2 gap-2 scrollbar-hide">
|
||||
<Button
|
||||
v-for="(preset, key) in quickFilterPresets"
|
||||
:key="key"
|
||||
:variant="isPresetActive(key) ? 'default' : 'outline'"
|
||||
size="sm"
|
||||
@click="setQuickFilter(key)"
|
||||
class="whitespace-nowrap"
|
||||
>
|
||||
{{ preset.label }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// NostrFeed is now registered globally by the nostr-feed module
|
||||
// No need to import it directly - use the modular version
|
||||
// TODO: Re-enable when push notifications are properly implemented
|
||||
// import NotificationPermission from '@/components/notifications/NotificationPermission.vue'
|
||||
import { ref, computed, watch } from 'vue'
|
||||
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Filter, Plus, MessageSquare, Car } from 'lucide-vue-next'
|
||||
import { Plus } from 'lucide-vue-next'
|
||||
import PWAInstallPrompt from '@/components/pwa/PWAInstallPrompt.vue'
|
||||
import FeedFilters from '@/modules/nostr-feed/components/FeedFilters.vue'
|
||||
import NoteComposer from '@/modules/nostr-feed/components/NoteComposer.vue'
|
||||
import RideshareComposer from '@/modules/nostr-feed/components/RideshareComposer.vue'
|
||||
import NostrFeed from '@/modules/nostr-feed/components/NostrFeed.vue'
|
||||
import { FILTER_PRESETS } from '@/modules/nostr-feed/config/content-filters'
|
||||
import appConfig from '@/app.config'
|
||||
import type { ContentFilter } from '@/modules/nostr-feed/services/FeedService'
|
||||
import type { ReplyToNote } from '@/modules/nostr-feed/components/NoteComposer.vue'
|
||||
import SubmissionList from '@/modules/nostr-feed/components/SubmissionList.vue'
|
||||
import type { SubmissionWithMeta } from '@/modules/nostr-feed/types/submission'
|
||||
|
||||
// Get admin pubkeys from app config
|
||||
const adminPubkeys = appConfig.modules['nostr-feed']?.config?.adminPubkeys || []
|
||||
const router = useRouter()
|
||||
|
||||
// UI state
|
||||
const showFilters = ref(false)
|
||||
const showComposer = ref(false)
|
||||
const showComposerOptions = ref(false)
|
||||
const composerType = ref<'note' | 'rideshare'>('note')
|
||||
|
||||
// Feed configuration
|
||||
const selectedFilters = ref<ContentFilter[]>(FILTER_PRESETS.all)
|
||||
const feedKey = ref(0) // Force feed component to re-render when filters change
|
||||
|
||||
// Note composer state
|
||||
const replyTo = ref<ReplyToNote | undefined>()
|
||||
|
||||
// Quick filter presets for mobile bottom bar
|
||||
const quickFilterPresets = {
|
||||
all: { label: 'All', filters: FILTER_PRESETS.all },
|
||||
announcements: { label: 'Announcements', filters: FILTER_PRESETS.announcements },
|
||||
rideshare: { label: 'Rideshare', filters: FILTER_PRESETS.rideshare }
|
||||
// Handle submission click - navigate to detail page
|
||||
function onSubmissionClick(submission: SubmissionWithMeta) {
|
||||
router.push({ name: 'submission-detail', params: { id: submission.id } })
|
||||
}
|
||||
|
||||
// Computed properties
|
||||
const activeFilterCount = computed(() => selectedFilters.value.length)
|
||||
|
||||
const isPresetActive = (presetKey: string) => {
|
||||
const preset = quickFilterPresets[presetKey as keyof typeof quickFilterPresets]
|
||||
if (!preset) return false
|
||||
|
||||
return preset.filters.length === selectedFilters.value.length &&
|
||||
preset.filters.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))
|
||||
}
|
||||
|
||||
// Determine feed type based on selected filters
|
||||
const feedType = computed(() => {
|
||||
if (selectedFilters.value.length === 0) return 'all'
|
||||
|
||||
// Check if it matches the 'all' preset
|
||||
if (selectedFilters.value.length === FILTER_PRESETS.all.length &&
|
||||
FILTER_PRESETS.all.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))) {
|
||||
return 'all'
|
||||
}
|
||||
|
||||
// Check if it matches the announcements preset
|
||||
if (selectedFilters.value.length === FILTER_PRESETS.announcements.length &&
|
||||
FILTER_PRESETS.announcements.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))) {
|
||||
return 'announcements'
|
||||
}
|
||||
|
||||
// Check if it matches the rideshare preset
|
||||
if (selectedFilters.value.length === FILTER_PRESETS.rideshare.length &&
|
||||
FILTER_PRESETS.rideshare.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))) {
|
||||
return 'rideshare'
|
||||
}
|
||||
|
||||
// For all other cases, use custom
|
||||
return 'custom'
|
||||
})
|
||||
|
||||
// Force feed to reload when filters change
|
||||
watch(selectedFilters, () => {
|
||||
feedKey.value++
|
||||
}, { deep: true })
|
||||
|
||||
// Handle note composer events
|
||||
// Methods
|
||||
const setQuickFilter = (presetKey: string) => {
|
||||
const preset = quickFilterPresets[presetKey as keyof typeof quickFilterPresets]
|
||||
if (preset) {
|
||||
selectedFilters.value = preset.filters
|
||||
}
|
||||
}
|
||||
|
||||
const onNotePublished = (noteId: string) => {
|
||||
console.log('Note published:', noteId)
|
||||
// Refresh the feed to show the new note
|
||||
feedKey.value++
|
||||
// Clear reply state and hide composer
|
||||
replyTo.value = undefined
|
||||
showComposer.value = false
|
||||
}
|
||||
|
||||
const onClearReply = () => {
|
||||
replyTo.value = undefined
|
||||
showComposer.value = false
|
||||
}
|
||||
|
||||
const onReplyToNote = (note: ReplyToNote) => {
|
||||
replyTo.value = note
|
||||
showComposer.value = true
|
||||
}
|
||||
|
||||
const onCloseComposer = () => {
|
||||
showComposer.value = false
|
||||
showComposerOptions.value = false
|
||||
replyTo.value = undefined
|
||||
}
|
||||
|
||||
// New composer methods
|
||||
const toggleComposerOptions = () => {
|
||||
showComposerOptions.value = !showComposerOptions.value
|
||||
}
|
||||
|
||||
const openComposer = (type: 'note' | 'rideshare') => {
|
||||
composerType.value = type
|
||||
showComposer.value = true
|
||||
showComposerOptions.value = false
|
||||
}
|
||||
|
||||
const onRidesharePublished = (noteId: string) => {
|
||||
console.log('Rideshare post published:', noteId)
|
||||
// Refresh the feed to show the new rideshare post
|
||||
feedKey.value++
|
||||
// Hide composer
|
||||
showComposer.value = false
|
||||
showComposerOptions.value = false
|
||||
// Navigate to submit page
|
||||
function navigateToSubmit() {
|
||||
router.push({ name: 'submit-post' })
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue