feat: forum rich-text editor, emoji picker, mentions, discover nav, feed, uploads, profile
Forum: - TipTap WYSIWYG editor with full toolbar - @emoji-mart/react emoji picker (consistent with tweets) - @mention autocomplete with user search API - Fix PHP 8.4 parse errors in Blade templates - Fix thread data display (paginator items) - Align forum page widths to max-w-5xl Discover: - Extract shared _nav.blade.php partial - Add missing nav links to for-you page - Add Following link for authenticated users Feed/Posts: - Post model, controllers, policies, migrations - Feed page components (PostComposer, FeedCard, etc) - Post reactions, comments, saves, reports, sharing - Scheduled publishing support - Link preview controller Profile: - Profile page components (ProfileHero, ProfileTabs) - Profile API controller Uploads: - Upload wizard enhancements - Scheduled publish picker - Studio status bar and readiness checklist
This commit is contained in:
54
resources/js/components/Feed/EmbeddedArtworkCard.jsx
Normal file
54
resources/js/components/Feed/EmbeddedArtworkCard.jsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import React from 'react'
|
||||
|
||||
/**
|
||||
* Compact artwork card for embedding inside a PostCard.
|
||||
* Shows thumbnail, title and original author with attribution.
|
||||
*/
|
||||
export default function EmbeddedArtworkCard({ artwork }) {
|
||||
if (!artwork) return null
|
||||
|
||||
const artUrl = `/art/${artwork.id}/${slugify(artwork.title)}`
|
||||
const authorUrl = `/@${artwork.author.username}`
|
||||
|
||||
return (
|
||||
<a
|
||||
href={artUrl}
|
||||
className="group flex gap-3 rounded-xl border border-white/[0.08] bg-black/30 p-3 hover:border-sky-500/30 transition-colors"
|
||||
title={artwork.title}
|
||||
>
|
||||
{/* Thumbnail */}
|
||||
<div className="w-20 h-16 rounded-lg overflow-hidden shrink-0 bg-white/5">
|
||||
{artwork.thumb_url ? (
|
||||
<img
|
||||
src={artwork.thumb_url}
|
||||
alt={artwork.title}
|
||||
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center text-slate-600">
|
||||
<i className="fa-solid fa-image" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Meta */}
|
||||
<div className="flex flex-col justify-center min-w-0">
|
||||
<p className="text-sm font-medium text-white/90 truncate">{artwork.title}</p>
|
||||
<a
|
||||
href={authorUrl}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="text-xs text-slate-400 hover:text-sky-400 transition-colors mt-0.5 truncate"
|
||||
>
|
||||
<i className="fa-solid fa-user-circle fa-fw mr-1 opacity-60" />
|
||||
by {artwork.author.name || `@${artwork.author.username}`}
|
||||
</a>
|
||||
<span className="text-[10px] text-slate-600 mt-1 uppercase tracking-wider">Artwork</span>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
function slugify(str) {
|
||||
return (str || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
|
||||
}
|
||||
396
resources/js/components/Feed/FeedSidebar.jsx
Normal file
396
resources/js/components/Feed/FeedSidebar.jsx
Normal file
@@ -0,0 +1,396 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import axios from 'axios'
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Helpers
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
function fmt(n) {
|
||||
if (n === null || n === undefined) return '0'
|
||||
if (n >= 1_000_000) return (n / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'M'
|
||||
if (n >= 1_000) return (n / 1_000).toFixed(1).replace(/\.0$/, '') + 'k'
|
||||
return String(n)
|
||||
}
|
||||
|
||||
const SOCIAL_META = {
|
||||
twitter: { icon: 'fa-brands fa-x-twitter', label: 'Twitter / X', prefix: 'https://x.com/' },
|
||||
instagram: { icon: 'fa-brands fa-instagram', label: 'Instagram', prefix: 'https://instagram.com/' },
|
||||
deviantart: { icon: 'fa-brands fa-deviantart', label: 'DeviantArt', prefix: 'https://deviantart.com/' },
|
||||
artstation: { icon: 'fa-brands fa-artstation', label: 'ArtStation', prefix: 'https://artstation.com/' },
|
||||
behance: { icon: 'fa-brands fa-behance', label: 'Behance', prefix: 'https://behance.net/' },
|
||||
website: { icon: 'fa-solid fa-globe', label: 'Website', prefix: '' },
|
||||
youtube: { icon: 'fa-brands fa-youtube', label: 'YouTube', prefix: '' },
|
||||
twitch: { icon: 'fa-brands fa-twitch', label: 'Twitch', prefix: '' },
|
||||
}
|
||||
|
||||
function SideCard({ title, icon, children, className = '' }) {
|
||||
return (
|
||||
<div className={`rounded-2xl border border-white/[0.07] bg-white/[0.03] overflow-hidden ${className}`}>
|
||||
{title && (
|
||||
<div className="flex items-center gap-2 px-4 py-3 border-b border-white/[0.05]">
|
||||
{icon && <i className={`${icon} text-slate-500 fa-fw text-[13px]`} />}
|
||||
<span className="text-[11px] font-semibold uppercase tracking-widest text-slate-500">{title}</span>
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Stats card
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
function StatsCard({ stats, followerCount, user, onTabChange }) {
|
||||
const items = [
|
||||
{
|
||||
label: 'Artworks',
|
||||
value: fmt(stats?.uploads_count ?? 0),
|
||||
icon: 'fa-solid fa-image',
|
||||
color: 'text-sky-400',
|
||||
tab: 'artworks',
|
||||
},
|
||||
{
|
||||
label: 'Followers',
|
||||
value: fmt(followerCount ?? stats?.followers_count ?? 0),
|
||||
icon: 'fa-solid fa-user-group',
|
||||
color: 'text-violet-400',
|
||||
tab: null,
|
||||
},
|
||||
{
|
||||
label: 'Following',
|
||||
value: fmt(stats?.following_count ?? 0),
|
||||
icon: 'fa-solid fa-user-plus',
|
||||
color: 'text-emerald-400',
|
||||
tab: null,
|
||||
},
|
||||
{
|
||||
label: 'Awards',
|
||||
value: fmt(stats?.awards_received_count ?? 0),
|
||||
icon: 'fa-solid fa-trophy',
|
||||
color: 'text-amber-400',
|
||||
tab: 'stats',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<SideCard title="Stats" icon="fa-solid fa-chart-simple">
|
||||
<div className="grid grid-cols-2 divide-x divide-y divide-white/[0.05]">
|
||||
{items.map((item) => (
|
||||
<button
|
||||
key={item.label}
|
||||
type="button"
|
||||
onClick={() => item.tab && onTabChange?.(item.tab)}
|
||||
className={`flex flex-col items-center gap-1 py-4 px-3 transition-colors group ${
|
||||
item.tab ? 'hover:bg-white/[0.04] cursor-pointer' : 'cursor-default'
|
||||
}`}
|
||||
>
|
||||
<i className={`${item.icon} ${item.color} text-sm fa-fw mb-0.5 group-hover:scale-110 transition-transform`} />
|
||||
<span className="text-xl font-bold text-white/90 tabular-nums leading-none">{item.value}</span>
|
||||
<span className="text-[10px] text-slate-500 uppercase tracking-wide">{item.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</SideCard>
|
||||
)
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// About card
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
function AboutCard({ user, profile, socialLinks, countryName }) {
|
||||
const bio = profile?.bio || profile?.about || profile?.description
|
||||
const website = profile?.website || user?.website
|
||||
|
||||
const hasSocials = socialLinks && Object.keys(socialLinks).length > 0
|
||||
const hasContent = bio || countryName || website || hasSocials
|
||||
|
||||
if (!hasContent) return null
|
||||
|
||||
return (
|
||||
<SideCard title="About" icon="fa-solid fa-circle-info">
|
||||
<div className="px-4 py-3 space-y-3">
|
||||
{bio && (
|
||||
<p className="text-sm text-slate-300 leading-relaxed line-clamp-4">{bio}</p>
|
||||
)}
|
||||
|
||||
<div className="space-y-1.5">
|
||||
{countryName && (
|
||||
<div className="flex items-center gap-2 text-[13px] text-slate-400">
|
||||
<i className="fa-solid fa-location-dot fa-fw text-slate-600 text-xs" />
|
||||
<span>{countryName}</span>
|
||||
</div>
|
||||
)}
|
||||
{website && (
|
||||
<div className="flex items-center gap-2 text-[13px]">
|
||||
<i className="fa-solid fa-link fa-fw text-slate-600 text-xs" />
|
||||
<a
|
||||
href={website.startsWith('http') ? website : `https://${website}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
className="text-sky-400/80 hover:text-sky-400 transition-colors truncate max-w-[200px]"
|
||||
>
|
||||
{website.replace(/^https?:\/\//, '')}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{hasSocials && (
|
||||
<div className="flex flex-wrap gap-1.5 pt-1">
|
||||
{Object.entries(socialLinks).map(([platform, link]) => {
|
||||
const meta = SOCIAL_META[platform] ?? SOCIAL_META.website
|
||||
const url = link.url || (meta.prefix ? meta.prefix + link.handle : null)
|
||||
if (!url) return null
|
||||
return (
|
||||
<a
|
||||
key={platform}
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
title={meta.label}
|
||||
className="flex items-center justify-center w-8 h-8 rounded-lg bg-white/5 hover:bg-sky-500/15 text-slate-400 hover:text-sky-400 transition-all border border-white/[0.06] hover:border-sky-500/30"
|
||||
>
|
||||
<i className={`${meta.icon} text-sm`} />
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</SideCard>
|
||||
)
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Recent followers card
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
function RecentFollowersCard({ recentFollowers, followerCount, onTabChange }) {
|
||||
const followers = recentFollowers ?? []
|
||||
if (followers.length === 0) return null
|
||||
|
||||
return (
|
||||
<SideCard title="Recent Followers" icon="fa-solid fa-user-group">
|
||||
<div className="px-4 py-3 space-y-2.5">
|
||||
{followers.slice(0, 6).map((f) => (
|
||||
<a
|
||||
key={f.id}
|
||||
href={f.profile_url ?? `/@${f.username}`}
|
||||
className="flex items-center gap-2.5 group"
|
||||
>
|
||||
<img
|
||||
src={f.avatar_url ?? '/images/avatar_default.webp'}
|
||||
alt={f.username}
|
||||
className="w-8 h-8 rounded-full object-cover ring-1 ring-white/10 group-hover:ring-sky-500/40 transition-all shrink-0"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-[13px] font-medium text-slate-300 group-hover:text-white transition-colors truncate leading-tight">
|
||||
{f.name || f.uname || f.username}
|
||||
</p>
|
||||
<p className="text-[11px] text-slate-600 truncate">@{f.username}</p>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
|
||||
{followerCount > 6 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onTabChange?.('artworks')}
|
||||
className="w-full text-center text-[12px] text-slate-500 hover:text-sky-400 transition-colors pt-1"
|
||||
>
|
||||
View all {fmt(followerCount)} followers →
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</SideCard>
|
||||
)
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Trending hashtags card
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
function TrendingHashtagsCard() {
|
||||
const [tags, setTags] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
axios.get('/api/feed/hashtags/trending', { params: { limit: 8 } })
|
||||
.then(({ data }) => setTags(Array.isArray(data.hashtags) ? data.hashtags : []))
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false))
|
||||
}, [])
|
||||
|
||||
if (!loading && tags.length === 0) return null
|
||||
|
||||
return (
|
||||
<SideCard title="Trending Tags" icon="fa-solid fa-hashtag">
|
||||
<div className="px-4 py-3 space-y-1">
|
||||
{loading
|
||||
? [1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="animate-pulse flex items-center justify-between py-1.5">
|
||||
<div className="h-2.5 bg-white/10 rounded w-20" />
|
||||
<div className="h-2 bg-white/6 rounded w-10" />
|
||||
</div>
|
||||
))
|
||||
: tags.map((h) => (
|
||||
<a
|
||||
key={h.tag}
|
||||
href={`/tags/${h.tag}`}
|
||||
className="flex items-center justify-between group py-1.5 px-1 rounded-lg hover:bg-white/[0.04] transition-colors"
|
||||
>
|
||||
<span className="text-sm text-slate-300 group-hover:text-sky-400 transition-colors font-medium">
|
||||
#{h.tag}
|
||||
</span>
|
||||
<span className="text-[11px] text-slate-600 tabular-nums">{h.post_count} posts</span>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
<div className="flex items-center justify-between pt-1">
|
||||
<a
|
||||
href="/feed/trending"
|
||||
className="text-[12px] text-sky-500/70 hover:text-sky-400 transition-colors"
|
||||
>
|
||||
See trending →
|
||||
</a>
|
||||
<a
|
||||
href="/feed/search"
|
||||
className="text-[12px] text-slate-500 hover:text-slate-300 transition-colors"
|
||||
>
|
||||
<i className="fa-solid fa-magnifying-glass mr-1 text-[10px]" />
|
||||
Search
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</SideCard>
|
||||
)
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Suggested to follow card
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
function SuggestionsCard({ excludeUsername, isLoggedIn }) {
|
||||
const [users, setUsers] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoggedIn) { setLoading(false); return }
|
||||
axios.get('/api/search/users', { params: { q: '', per_page: 5 } })
|
||||
.then(({ data }) => {
|
||||
const list = (data.data ?? []).filter((u) => u.username !== excludeUsername).slice(0, 4)
|
||||
setUsers(list)
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false))
|
||||
}, [excludeUsername, isLoggedIn])
|
||||
|
||||
if (!isLoggedIn) return null
|
||||
if (!loading && users.length === 0) return null
|
||||
|
||||
return (
|
||||
<SideCard title="Discover Creators" icon="fa-solid fa-compass">
|
||||
<div className="px-4 py-3 space-y-2.5">
|
||||
{loading ? (
|
||||
[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="flex items-center gap-2.5 animate-pulse">
|
||||
<div className="w-8 h-8 rounded-full bg-white/10 shrink-0" />
|
||||
<div className="flex-1 space-y-1">
|
||||
<div className="h-2.5 bg-white/10 rounded w-24" />
|
||||
<div className="h-2 bg-white/6 rounded w-16" />
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
users.map((u) => (
|
||||
<a
|
||||
key={u.id}
|
||||
href={u.profile_url ?? `/@${u.username}`}
|
||||
className="flex items-center gap-2.5 group"
|
||||
>
|
||||
<img
|
||||
src={u.avatar_url ?? '/images/avatar_default.webp'}
|
||||
alt={u.username}
|
||||
className="w-8 h-8 rounded-full object-cover ring-1 ring-white/10 group-hover:ring-sky-500/40 transition-all shrink-0"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-[13px] font-medium text-slate-300 group-hover:text-white transition-colors truncate leading-tight">
|
||||
{u.name || u.username}
|
||||
</p>
|
||||
<p className="text-[11px] text-slate-600 truncate">@{u.username}</p>
|
||||
</div>
|
||||
<span className="shrink-0 text-[11px] text-sky-500/80 group-hover:text-sky-400 transition-colors font-medium">
|
||||
View
|
||||
</span>
|
||||
</a>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</SideCard>
|
||||
)
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// Main export
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* FeedSidebar
|
||||
*
|
||||
* Props:
|
||||
* user object { id, username, name, uploads_count, ...}
|
||||
* profile object { bio, about, country, website, ... }
|
||||
* stats object from user_statistics
|
||||
* followerCount number
|
||||
* recentFollowers array [{ id, username, name, avatar_url, profile_url }]
|
||||
* socialLinks object keyed by platform
|
||||
* countryName string|null
|
||||
* isLoggedIn boolean
|
||||
* onTabChange function(tab)
|
||||
*/
|
||||
export default function FeedSidebar({
|
||||
user,
|
||||
profile,
|
||||
stats,
|
||||
followerCount,
|
||||
recentFollowers,
|
||||
socialLinks,
|
||||
countryName,
|
||||
isLoggedIn,
|
||||
onTabChange,
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<StatsCard
|
||||
stats={stats}
|
||||
followerCount={followerCount}
|
||||
user={user}
|
||||
onTabChange={onTabChange}
|
||||
/>
|
||||
|
||||
<AboutCard
|
||||
user={user}
|
||||
profile={profile}
|
||||
socialLinks={socialLinks}
|
||||
countryName={countryName}
|
||||
/>
|
||||
|
||||
<RecentFollowersCard
|
||||
recentFollowers={recentFollowers}
|
||||
followerCount={followerCount}
|
||||
onTabChange={onTabChange}
|
||||
/>
|
||||
|
||||
<SuggestionsCard
|
||||
excludeUsername={user?.username}
|
||||
isLoggedIn={isLoggedIn}
|
||||
/>
|
||||
|
||||
<TrendingHashtagsCard />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
96
resources/js/components/Feed/LinkPreviewCard.jsx
Normal file
96
resources/js/components/Feed/LinkPreviewCard.jsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import React from 'react'
|
||||
|
||||
/**
|
||||
* LinkPreviewCard
|
||||
* Renders an OG/OpenGraph link preview card.
|
||||
*
|
||||
* Props:
|
||||
* preview { url, title, description, image, site_name }
|
||||
* onDismiss function|null — if provided, shows a dismiss ✕ button
|
||||
* loading boolean — shows skeleton while fetching
|
||||
*/
|
||||
export default function LinkPreviewCard({ preview, onDismiss, loading = false }) {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="rounded-xl border border-white/[0.08] bg-white/[0.03] overflow-hidden flex gap-3 p-3 animate-pulse">
|
||||
<div className="w-20 h-20 rounded-lg bg-white/10 shrink-0" />
|
||||
<div className="flex-1 min-w-0 flex flex-col gap-2 justify-center">
|
||||
<div className="h-3 bg-white/10 rounded w-2/3" />
|
||||
<div className="h-2.5 bg-white/10 rounded w-full" />
|
||||
<div className="h-2.5 bg-white/10 rounded w-4/5" />
|
||||
<div className="h-2 bg-white/[0.06] rounded w-1/3 mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!preview?.url) return null
|
||||
|
||||
const domain = (() => {
|
||||
try { return new URL(preview.url).hostname.replace(/^www\./, '') }
|
||||
catch { return preview.site_name ?? '' }
|
||||
})()
|
||||
|
||||
return (
|
||||
<div className="relative rounded-xl border border-white/[0.08] bg-white/[0.03] overflow-hidden hover:border-white/[0.14] transition-colors group">
|
||||
<a
|
||||
href={preview.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
className="flex gap-0 items-stretch"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Image */}
|
||||
{preview.image ? (
|
||||
<div className="w-24 shrink-0 bg-white/5">
|
||||
<img
|
||||
src={preview.image}
|
||||
alt=""
|
||||
className="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
onError={(e) => { e.currentTarget.parentElement.style.display = 'none' }}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-24 shrink-0 bg-white/[0.04] flex items-center justify-center text-slate-600">
|
||||
<i className="fa-solid fa-link text-xl" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Text */}
|
||||
<div className="flex-1 min-w-0 px-3 py-2.5 flex flex-col justify-center gap-0.5">
|
||||
{preview.site_name && (
|
||||
<p className="text-[10px] uppercase tracking-wide text-sky-500/80 font-medium truncate">
|
||||
{preview.site_name}
|
||||
</p>
|
||||
)}
|
||||
{preview.title && (
|
||||
<p className="text-sm font-semibold text-white/90 line-clamp-2 leading-snug">
|
||||
{preview.title}
|
||||
</p>
|
||||
)}
|
||||
{preview.description && (
|
||||
<p className="text-xs text-slate-500 line-clamp-2 leading-relaxed mt-0.5">
|
||||
{preview.description}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-[10px] text-slate-600 mt-1 truncate">
|
||||
{domain}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{/* Dismiss button */}
|
||||
{onDismiss && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => { e.stopPropagation(); onDismiss() }}
|
||||
className="absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-black/60 hover:bg-black/80 text-slate-400 hover:text-white flex items-center justify-center transition-colors text-[10px]"
|
||||
aria-label="Remove link preview"
|
||||
>
|
||||
<i className="fa-solid fa-xmark" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
139
resources/js/components/Feed/PostActions.jsx
Normal file
139
resources/js/components/Feed/PostActions.jsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import React, { useState } from 'react'
|
||||
import axios from 'axios'
|
||||
|
||||
/**
|
||||
* PostActions: Like toggle, Comment toggle, Share menu, Report
|
||||
*/
|
||||
export default function PostActions({
|
||||
post,
|
||||
isLoggedIn,
|
||||
onCommentToggle,
|
||||
onReactionChange,
|
||||
}) {
|
||||
const [liked, setLiked] = useState(post.viewer_liked ?? false)
|
||||
const [likeCount, setLikeCount] = useState(post.reactions_count ?? 0)
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [menuOpen, setMenuOpen] = useState(false)
|
||||
const [shareMsg, setShareMsg] = useState(null)
|
||||
|
||||
const handleLike = async () => {
|
||||
if (!isLoggedIn) {
|
||||
window.location.href = '/login'
|
||||
return
|
||||
}
|
||||
if (busy) return
|
||||
setBusy(true)
|
||||
try {
|
||||
if (liked) {
|
||||
await axios.delete(`/api/posts/${post.id}/reactions/like`)
|
||||
setLiked(false)
|
||||
setLikeCount((c) => Math.max(0, c - 1))
|
||||
onReactionChange?.({ liked: false, count: Math.max(0, likeCount - 1) })
|
||||
} else {
|
||||
await axios.post(`/api/posts/${post.id}/reactions`, { reaction: 'like' })
|
||||
setLiked(true)
|
||||
setLikeCount((c) => c + 1)
|
||||
onReactionChange?.({ liked: true, count: likeCount + 1 })
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCopyLink = () => {
|
||||
const url = `${window.location.origin}/@${post.author.username}?tab=posts&post=${post.id}`
|
||||
navigator.clipboard?.writeText(url)
|
||||
setShareMsg('Link copied!')
|
||||
setTimeout(() => setShareMsg(null), 2000)
|
||||
setMenuOpen(false)
|
||||
}
|
||||
|
||||
const handleReport = async () => {
|
||||
setMenuOpen(false)
|
||||
const reason = window.prompt('Why are you reporting this post? (required)')
|
||||
if (!reason?.trim()) return
|
||||
try {
|
||||
await axios.post(`/api/posts/${post.id}/report`, { reason: reason.trim() })
|
||||
alert('Report submitted. Thank you!')
|
||||
} catch (err) {
|
||||
if (err.response?.data?.message) {
|
||||
alert(err.response.data.message)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1 text-slate-400 relative">
|
||||
{/* Like */}
|
||||
<button
|
||||
onClick={handleLike}
|
||||
disabled={busy}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors ${
|
||||
liked
|
||||
? 'text-sky-400 bg-sky-500/10 hover:bg-sky-500/20'
|
||||
: 'hover:bg-white/5 hover:text-slate-200'
|
||||
}`}
|
||||
title={liked ? 'Unlike' : 'Like'}
|
||||
aria-label={liked ? 'Unlike this post' : 'Like this post'}
|
||||
>
|
||||
<i className={`fa-${liked ? 'solid' : 'regular'} fa-heart fa-fw text-xs`} />
|
||||
<span className="tabular-nums">{likeCount > 0 && likeCount}</span>
|
||||
</button>
|
||||
|
||||
{/* Comment toggle */}
|
||||
<button
|
||||
onClick={onCommentToggle}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm hover:bg-white/5 hover:text-slate-200 transition-colors"
|
||||
title="Comment"
|
||||
aria-label="Show comments"
|
||||
>
|
||||
<i className="fa-regular fa-comment fa-fw text-xs" />
|
||||
<span className="tabular-nums">{post.comments_count > 0 && post.comments_count}</span>
|
||||
</button>
|
||||
|
||||
{/* Share / More menu */}
|
||||
<div className="relative ml-auto">
|
||||
<button
|
||||
onClick={() => setMenuOpen((v) => !v)}
|
||||
className="flex items-center gap-1 px-3 py-1.5 rounded-lg text-sm hover:bg-white/5 hover:text-slate-200 transition-colors"
|
||||
aria-label="More options"
|
||||
>
|
||||
<i className="fa-solid fa-ellipsis-h fa-fw text-xs" />
|
||||
</button>
|
||||
|
||||
{menuOpen && (
|
||||
<div
|
||||
className="absolute right-0 bottom-full mb-1 w-44 rounded-xl border border-white/10 bg-[#10192e] shadow-2xl z-50 overflow-hidden"
|
||||
onBlur={() => setMenuOpen(false)}
|
||||
>
|
||||
<button
|
||||
onClick={handleCopyLink}
|
||||
className="w-full text-left px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 flex items-center gap-2"
|
||||
>
|
||||
<i className="fa-solid fa-link fa-fw opacity-60" />
|
||||
Copy link
|
||||
</button>
|
||||
{isLoggedIn && (
|
||||
<button
|
||||
onClick={handleReport}
|
||||
className="w-full text-left px-4 py-2.5 text-sm text-rose-400 hover:bg-white/5 flex items-center gap-2"
|
||||
>
|
||||
<i className="fa-solid fa-flag fa-fw opacity-60" />
|
||||
Report post
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Share feedback toast */}
|
||||
{shareMsg && (
|
||||
<span className="absolute -top-8 right-0 text-xs bg-slate-800 text-white px-2 py-1 rounded shadow">
|
||||
{shareMsg}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
404
resources/js/components/Feed/PostCard.jsx
Normal file
404
resources/js/components/Feed/PostCard.jsx
Normal file
@@ -0,0 +1,404 @@
|
||||
import React, { useState } from 'react'
|
||||
import PostActions from './PostActions'
|
||||
import PostComments from './PostComments'
|
||||
import EmbeddedArtworkCard from './EmbeddedArtworkCard'
|
||||
import VisibilityPill from './VisibilityPill'
|
||||
import LinkPreviewCard from './LinkPreviewCard'
|
||||
|
||||
function formatRelative(isoString) {
|
||||
const diff = Date.now() - new Date(isoString).getTime()
|
||||
const s = Math.floor(diff / 1000)
|
||||
if (s < 60) return 'just now'
|
||||
const m = Math.floor(s / 60)
|
||||
if (m < 60) return `${m}m ago`
|
||||
const h = Math.floor(m / 60)
|
||||
if (h < 24) return `${h}h ago`
|
||||
const d = Math.floor(h / 24)
|
||||
return `${d}d ago`
|
||||
}
|
||||
|
||||
function formatScheduledDate(isoString) {
|
||||
const d = new Date(isoString)
|
||||
return d.toLocaleString(undefined, {
|
||||
month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',
|
||||
})
|
||||
}
|
||||
|
||||
/** Render plain text body with #hashtag links */
|
||||
function BodyWithHashtags({ html }) {
|
||||
// The body may already be sanitised HTML from the server. We replace
|
||||
// #tag patterns in text nodes (not inside existing anchor elements) with
|
||||
// anchor links pointing to /tags/{tag}.
|
||||
const processed = html.replace(
|
||||
/(?<!["\w])#([A-Za-z][A-Za-z0-9_]{1,63})/g,
|
||||
(_, tag) => `<a href="/tags/${tag.toLowerCase()}" class="text-sky-400 hover:underline">#${tag}</a>`,
|
||||
)
|
||||
return (
|
||||
<div
|
||||
className="text-sm text-slate-300 leading-relaxed [&_a]:text-sky-400 [&_a]:hover:underline [&_strong]:text-white/90 [&_em]:text-slate-200"
|
||||
dangerouslySetInnerHTML={{ __html: processed }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* PostCard
|
||||
* Renders a single post in the feed. Supports text + artwork_share types.
|
||||
*
|
||||
* Props:
|
||||
* post object (formatted by PostFeedService::formatPost)
|
||||
* isLoggedIn boolean
|
||||
* viewerUsername string|null
|
||||
* onDelete function(postId)
|
||||
* onUnsaved function(postId) — called when viewer unsaves this post
|
||||
*/
|
||||
export default function PostCard({ post, isLoggedIn = false, viewerUsername = null, onDelete, onUnsaved }) {
|
||||
const [showComments, setShowComments] = useState(false)
|
||||
const [postData, setPostData] = useState(post)
|
||||
const [editMode, setEditMode] = useState(false)
|
||||
const [editBody, setEditBody] = useState(post.body ?? '')
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [menuOpen, setMenuOpen] = useState(false)
|
||||
const [saveLoading, setSaveLoading] = useState(false)
|
||||
const [analyticsOpen, setAnalyticsOpen] = useState(false)
|
||||
const [analytics, setAnalytics] = useState(null)
|
||||
|
||||
const isOwn = viewerUsername && post.author.username === viewerUsername
|
||||
|
||||
const handleSaveEdit = async () => {
|
||||
setSaving(true)
|
||||
try {
|
||||
const { default: axios } = await import('axios')
|
||||
const { data } = await axios.patch(`/api/posts/${post.id}`, { body: editBody })
|
||||
setPostData(data.post)
|
||||
setEditMode(false)
|
||||
} catch {
|
||||
//
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!window.confirm('Delete this post?')) return
|
||||
try {
|
||||
const { default: axios } = await import('axios')
|
||||
await axios.delete(`/api/posts/${post.id}`)
|
||||
onDelete?.(post.id)
|
||||
} catch {
|
||||
//
|
||||
}
|
||||
}
|
||||
|
||||
const handlePin = async () => {
|
||||
const { default: axios } = await import('axios')
|
||||
try {
|
||||
if (postData.is_pinned) {
|
||||
await axios.delete(`/api/posts/${post.id}/pin`)
|
||||
setPostData((p) => ({ ...p, is_pinned: false, pinned_order: null }))
|
||||
} else {
|
||||
const { data } = await axios.post(`/api/posts/${post.id}/pin`)
|
||||
setPostData((p) => ({ ...p, is_pinned: true, pinned_order: data.pinned_order ?? 1 }))
|
||||
}
|
||||
} catch {
|
||||
//
|
||||
}
|
||||
setMenuOpen(false)
|
||||
}
|
||||
|
||||
const handleSaveToggle = async () => {
|
||||
if (!isLoggedIn || saveLoading) return
|
||||
setSaveLoading(true)
|
||||
const { default: axios } = await import('axios')
|
||||
try {
|
||||
if (postData.viewer_saved) {
|
||||
await axios.delete(`/api/posts/${post.id}/save`)
|
||||
setPostData((p) => ({ ...p, viewer_saved: false, saves_count: Math.max(0, (p.saves_count ?? 1) - 1) }))
|
||||
onUnsaved?.(post.id)
|
||||
} else {
|
||||
await axios.post(`/api/posts/${post.id}/save`)
|
||||
setPostData((p) => ({ ...p, viewer_saved: true, saves_count: (p.saves_count ?? 0) + 1 }))
|
||||
}
|
||||
} catch {
|
||||
//
|
||||
} finally {
|
||||
setSaveLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleOpenAnalytics = async () => {
|
||||
if (!isOwn) return
|
||||
setAnalyticsOpen(true)
|
||||
if (!analytics) {
|
||||
const { default: axios } = await import('axios')
|
||||
try {
|
||||
const { data } = await axios.get(`/api/posts/${post.id}/analytics`)
|
||||
setAnalytics(data)
|
||||
} catch {
|
||||
setAnalytics(null)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<article className="rounded-2xl border border-white/[0.06] bg-white/[0.025] hover:border-white/10 transition-colors">
|
||||
{/* ── Pinned banner ──────────────────────────────────────────────── */}
|
||||
{postData.is_pinned && (
|
||||
<div className="flex items-center gap-1.5 px-5 pt-3 pb-0 text-[11px] text-slate-500">
|
||||
<i className="fa-solid fa-thumbtack fa-fw text-sky-500/60" />
|
||||
<span>Pinned post</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Scheduled banner (owner only) ─────────────────────────────── */}
|
||||
{isOwn && postData.status === 'scheduled' && postData.publish_at && (
|
||||
<div className="flex items-center gap-1.5 px-5 pt-3 pb-0 text-[11px] text-amber-500/80">
|
||||
<i className="fa-regular fa-clock fa-fw" />
|
||||
<span>Scheduled for {formatScheduledDate(postData.publish_at)}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Achievement badge ──────────────────────────────────────────── */}
|
||||
{postData.type === 'achievement' && (
|
||||
<div className="flex items-center gap-1.5 px-5 pt-3 pb-0 text-[11px] text-amber-400/90">
|
||||
<i className="fa-solid fa-trophy fa-fw text-amber-400" />
|
||||
<span className="font-medium tracking-wide uppercase">Achievement unlocked</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Header ─────────────────────────────────────────────────────── */}
|
||||
<div className="flex items-center gap-3 px-5 pt-4 pb-3">
|
||||
<a href={`/@${post.author.username}`} className="shrink-0">
|
||||
<img
|
||||
src={post.author.avatar ?? '/images/avatar_default.webp'}
|
||||
alt={post.author.name}
|
||||
className="w-9 h-9 rounded-full object-cover ring-1 ring-white/10 hover:ring-sky-500/40 transition-all"
|
||||
loading="lazy"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<a
|
||||
href={`/@${post.author.username}`}
|
||||
className="text-sm font-semibold text-white/90 hover:text-sky-400 transition-colors"
|
||||
>
|
||||
{post.author.name || `@${post.author.username}`}
|
||||
</a>
|
||||
<span className="text-slate-600 text-xs">@{post.author.username}</span>
|
||||
{post.meta?.tagged_users?.length > 0 && (
|
||||
<span className="text-slate-600 text-xs flex items-center gap-1 flex-wrap">
|
||||
<span className="text-slate-700">with</span>
|
||||
{post.meta.tagged_users.map((u, i) => (
|
||||
<React.Fragment key={u.id}>
|
||||
{i > 0 && <span className="text-slate-700">,</span>}
|
||||
<a href={`/@${u.username}`} className="text-sky-500/80 hover:text-sky-400 transition-colors">
|
||||
@{u.username}
|
||||
</a>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 text-[11px] text-slate-500 mt-0.5">
|
||||
<span>{formatRelative(post.created_at)}</span>
|
||||
<span aria-hidden>·</span>
|
||||
<VisibilityPill visibility={post.visibility} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right-side actions: save + owner menu */}
|
||||
<div className="flex items-center gap-1">
|
||||
{/* Save / bookmark button */}
|
||||
{isLoggedIn && !isOwn && (
|
||||
<button
|
||||
onClick={handleSaveToggle}
|
||||
disabled={saveLoading}
|
||||
title={postData.viewer_saved ? 'Remove bookmark' : 'Save post'}
|
||||
className={`flex items-center justify-center w-8 h-8 rounded-lg transition-colors ${
|
||||
postData.viewer_saved
|
||||
? 'text-amber-400 hover:bg-amber-500/10'
|
||||
: 'text-slate-600 hover:text-slate-300 hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
<i className={`${postData.viewer_saved ? 'fa-solid' : 'fa-regular'} fa-bookmark fa-fw text-sm`} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Analytics for owner */}
|
||||
{isOwn && (
|
||||
<button
|
||||
onClick={handleOpenAnalytics}
|
||||
title="Post analytics"
|
||||
className="flex items-center justify-center w-8 h-8 rounded-lg text-slate-600 hover:text-sky-400 hover:bg-sky-500/10 transition-colors"
|
||||
>
|
||||
<i className="fa-solid fa-chart-simple fa-fw text-sm" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Owner menu */}
|
||||
{isOwn && (
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setMenuOpen((v) => !v)}
|
||||
className="text-slate-500 hover:text-slate-300 px-2 py-1 rounded-lg hover:bg-white/5 transition-colors"
|
||||
aria-label="Post options"
|
||||
>
|
||||
<i className="fa-solid fa-ellipsis-v fa-fw text-xs" />
|
||||
</button>
|
||||
{menuOpen && (
|
||||
<div className="absolute right-0 top-full mt-1 w-40 rounded-xl border border-white/10 bg-[#10192e] shadow-2xl z-50 overflow-hidden">
|
||||
<button
|
||||
onClick={() => { setEditMode(true); setMenuOpen(false) }}
|
||||
className="w-full text-left px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 flex items-center gap-2"
|
||||
>
|
||||
<i className="fa-solid fa-pen fa-fw opacity-60" />
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={handlePin}
|
||||
className="w-full text-left px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 flex items-center gap-2"
|
||||
>
|
||||
<i className={`fa-solid fa-thumbtack fa-fw opacity-60 ${postData.is_pinned ? 'text-sky-400' : ''}`} />
|
||||
{postData.is_pinned ? 'Unpin post' : 'Pin post'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { handleDelete(); setMenuOpen(false) }}
|
||||
className="w-full text-left px-4 py-2.5 text-sm text-rose-400 hover:bg-white/5 flex items-center gap-2"
|
||||
>
|
||||
<i className="fa-solid fa-trash-can fa-fw opacity-60" />
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Body ─────────────────────────────────────────────────────────── */}
|
||||
<div className="px-5 pb-3 space-y-3">
|
||||
{editMode ? (
|
||||
<div className="space-y-2">
|
||||
<textarea
|
||||
value={editBody}
|
||||
onChange={(e) => setEditBody(e.target.value)}
|
||||
maxLength={2000}
|
||||
rows={4}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-sm text-white resize-none focus:outline-none focus:border-sky-500/50 transition-colors"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleSaveEdit}
|
||||
disabled={saving}
|
||||
className="px-4 py-1.5 rounded-lg bg-sky-600 hover:bg-sky-500 text-white text-xs transition-colors disabled:opacity-40"
|
||||
>
|
||||
{saving ? 'Saving…' : 'Save'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setEditMode(false)}
|
||||
className="px-4 py-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 text-xs transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
postData.body && <BodyWithHashtags html={postData.body} />
|
||||
)}
|
||||
|
||||
{/* Hashtag pills */}
|
||||
{!editMode && postData.hashtags && postData.hashtags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 pt-0.5">
|
||||
{postData.hashtags.map((tag) => (
|
||||
<a
|
||||
key={tag}
|
||||
href={`/tags/${tag}`}
|
||||
className="text-[11px] text-sky-500/80 hover:text-sky-400 hover:bg-sky-500/10 px-2 py-0.5 rounded-full border border-sky-500/20 hover:border-sky-500/40 transition-all"
|
||||
>
|
||||
#{tag}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Link preview (stored OG data) */}
|
||||
{!editMode && postData.meta?.link_preview?.url && (
|
||||
<LinkPreviewCard preview={postData.meta.link_preview} />
|
||||
)}
|
||||
|
||||
{/* Artwork share embed */}
|
||||
{postData.type === 'artwork_share' && postData.artwork && (
|
||||
<EmbeddedArtworkCard artwork={postData.artwork} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Actions ─────────────────────────────────────────────────────── */}
|
||||
<div className="border-t border-white/[0.04] px-5 py-2">
|
||||
<PostActions
|
||||
post={postData}
|
||||
isLoggedIn={isLoggedIn}
|
||||
onCommentToggle={() => setShowComments((v) => !v)}
|
||||
onReactionChange={({ liked, count }) =>
|
||||
setPostData((p) => ({ ...p, viewer_liked: liked, reactions_count: count }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* ── Comments ────────────────────────────────────────────────────── */}
|
||||
{showComments && (
|
||||
<div className="border-t border-white/[0.04] px-5 py-4">
|
||||
<PostComments
|
||||
postId={post.id}
|
||||
isLoggedIn={isLoggedIn}
|
||||
isOwn={isOwn}
|
||||
initialCount={postData.comments_count}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Analytics modal ─────────────────────────────────────────────── */}
|
||||
{analyticsOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-4"
|
||||
onClick={(e) => { if (e.target === e.currentTarget) setAnalyticsOpen(false) }}
|
||||
>
|
||||
<div className="w-full max-w-sm rounded-2xl border border-white/10 bg-[#0d1628] p-6 shadow-2xl">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-semibold text-white">Post Analytics</h3>
|
||||
<button
|
||||
onClick={() => setAnalyticsOpen(false)}
|
||||
className="text-slate-500 hover:text-white w-7 h-7 flex items-center justify-center rounded-lg hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<i className="fa-solid fa-xmark" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{!analytics ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<i className="fa-solid fa-spinner fa-spin text-slate-500 text-xl" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{[
|
||||
{ label: 'Impressions', value: analytics.impressions?.toLocaleString() ?? '—', icon: 'fa-eye', color: 'text-sky-400' },
|
||||
{ label: 'Saves', value: analytics.saves?.toLocaleString() ?? '—', icon: 'fa-bookmark', color: 'text-amber-400' },
|
||||
{ label: 'Reactions', value: analytics.reactions?.toLocaleString() ?? '—', icon: 'fa-heart', color: 'text-rose-400' },
|
||||
{ label: 'Engagement', value: analytics.engagement_rate ? `${analytics.engagement_rate}%` : '—', icon: 'fa-chart-simple', color: 'text-emerald-400' },
|
||||
].map((item) => (
|
||||
<div key={item.label} className="rounded-xl bg-white/[0.04] border border-white/[0.06] px-4 py-3">
|
||||
<div className={`${item.color} text-sm mb-1`}>
|
||||
<i className={`fa-solid ${item.icon} fa-fw`} />
|
||||
</div>
|
||||
<p className="text-xl font-bold text-white/90 tabular-nums leading-tight">{item.value}</p>
|
||||
<p className="text-[11px] text-slate-500 mt-0.5">{item.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
)
|
||||
}
|
||||
30
resources/js/components/Feed/PostCardSkeleton.jsx
Normal file
30
resources/js/components/Feed/PostCardSkeleton.jsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function PostCardSkeleton() {
|
||||
return (
|
||||
<div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-5 animate-pulse space-y-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-9 h-9 rounded-full bg-white/10 shrink-0" />
|
||||
<div className="space-y-1.5 flex-1">
|
||||
<div className="h-3 bg-white/10 rounded w-28" />
|
||||
<div className="h-2 bg-white/6 rounded w-20" />
|
||||
</div>
|
||||
</div>
|
||||
{/* Body */}
|
||||
<div className="space-y-2">
|
||||
<div className="h-3 bg-white/10 rounded w-full" />
|
||||
<div className="h-3 bg-white/8 rounded w-4/5" />
|
||||
<div className="h-3 bg-white/6 rounded w-2/3" />
|
||||
</div>
|
||||
{/* Artwork embed placeholder */}
|
||||
<div className="rounded-xl bg-white/5 aspect-[16/9]" />
|
||||
{/* Actions */}
|
||||
<div className="flex gap-4 pt-1">
|
||||
<div className="h-3 bg-white/8 rounded w-12" />
|
||||
<div className="h-3 bg-white/6 rounded w-16" />
|
||||
<div className="h-3 bg-white/6 rounded w-10" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
222
resources/js/components/Feed/PostComments.jsx
Normal file
222
resources/js/components/Feed/PostComments.jsx
Normal file
@@ -0,0 +1,222 @@
|
||||
import React, { useState, useEffect, useRef } from 'react'
|
||||
import axios from 'axios'
|
||||
|
||||
function formatRelative(isoString) {
|
||||
const diff = Date.now() - new Date(isoString).getTime()
|
||||
const s = Math.floor(diff / 1000)
|
||||
if (s < 60) return 'just now'
|
||||
const m = Math.floor(s / 60)
|
||||
if (m < 60) return `${m}m ago`
|
||||
const h = Math.floor(m / 60)
|
||||
if (h < 24) return `${h}h ago`
|
||||
const d = Math.floor(h / 24)
|
||||
return `${d}d ago`
|
||||
}
|
||||
|
||||
export default function PostComments({ postId, isLoggedIn, isOwn = false, initialCount = 0 }) {
|
||||
const [comments, setComments] = useState([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [body, setBody] = useState('')
|
||||
const [error, setError] = useState(null)
|
||||
const [page, setPage] = useState(1)
|
||||
const [hasMore, setHasMore] = useState(false)
|
||||
const [loaded, setLoaded] = useState(false)
|
||||
const textareaRef = useRef(null)
|
||||
|
||||
const fetchComments = async (p = 1) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const { data } = await axios.get(`/api/posts/${postId}/comments`, { params: { page: p } })
|
||||
setComments((prev) => p === 1 ? data.data : [...prev, ...data.data])
|
||||
setHasMore(data.meta.current_page < data.meta.last_page)
|
||||
setPage(p)
|
||||
} catch {
|
||||
//
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setLoaded(true)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchComments(1)
|
||||
}, [postId])
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault()
|
||||
if (!body.trim()) return
|
||||
setSubmitting(true)
|
||||
setError(null)
|
||||
try {
|
||||
const { data } = await axios.post(`/api/posts/${postId}/comments`, { body })
|
||||
setComments((prev) => [...prev, data.comment])
|
||||
setBody('')
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message ?? 'Failed to post comment.')
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (commentId) => {
|
||||
if (!window.confirm('Delete this comment?')) return
|
||||
try {
|
||||
await axios.delete(`/api/posts/${postId}/comments/${commentId}`)
|
||||
setComments((prev) => prev.filter((c) => c.id !== commentId))
|
||||
} catch {
|
||||
//
|
||||
}
|
||||
}
|
||||
|
||||
const handleHighlight = async (comment) => {
|
||||
try {
|
||||
if (comment.is_highlighted) {
|
||||
await axios.delete(`/api/posts/${postId}/comments/${comment.id}/highlight`)
|
||||
setComments((prev) =>
|
||||
prev.map((c) => c.id === comment.id ? { ...c, is_highlighted: false } : c),
|
||||
)
|
||||
} else {
|
||||
await axios.post(`/api/posts/${postId}/comments/${comment.id}/highlight`)
|
||||
// Only one can be highlighted — clear others and set this one
|
||||
setComments((prev) =>
|
||||
prev.map((c) => ({ ...c, is_highlighted: c.id === comment.id })),
|
||||
)
|
||||
}
|
||||
} catch {
|
||||
//
|
||||
}
|
||||
}
|
||||
|
||||
// Highlighted comment always first (server also orders this way, but keep client in sync)
|
||||
const sorted = [...comments].sort((a, b) =>
|
||||
(b.is_highlighted ? 1 : 0) - (a.is_highlighted ? 1 : 0),
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* Comment list */}
|
||||
{!loaded && loading && (
|
||||
<div className="space-y-2">
|
||||
{[1, 2].map((i) => (
|
||||
<div key={i} className="flex gap-2 animate-pulse">
|
||||
<div className="w-7 h-7 rounded-full bg-white/10 shrink-0" />
|
||||
<div className="flex-1 space-y-1">
|
||||
<div className="h-2.5 bg-white/10 rounded w-24" />
|
||||
<div className="h-2 bg-white/6 rounded w-3/4" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loaded && sorted.map((c) => (
|
||||
<div
|
||||
key={c.id}
|
||||
className={`flex gap-2 group ${c.is_highlighted ? 'rounded-xl bg-sky-500/5 border border-sky-500/15 px-3 py-2 -mx-3' : ''}`}
|
||||
>
|
||||
{/* Avatar */}
|
||||
<a href={`/@${c.author.username}`} className="shrink-0">
|
||||
<img
|
||||
src={c.author.avatar ?? '/images/avatar_default.webp'}
|
||||
alt={c.author.name}
|
||||
className="w-7 h-7 rounded-full object-cover ring-1 ring-white/10"
|
||||
loading="lazy"
|
||||
/>
|
||||
</a>
|
||||
{/* Body */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-baseline gap-2 flex-wrap">
|
||||
<a
|
||||
href={`/@${c.author.username}`}
|
||||
className="text-xs font-semibold text-white/80 hover:text-sky-400 transition-colors"
|
||||
>
|
||||
{c.author.name || `@${c.author.username}`}
|
||||
</a>
|
||||
<span className="text-[10px] text-slate-600">{formatRelative(c.created_at)}</span>
|
||||
{c.is_highlighted && (
|
||||
<span className="text-[10px] text-sky-400 font-medium flex items-center gap-1">
|
||||
<i className="fa-solid fa-star fa-xs" />
|
||||
Highlighted by author
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="text-sm text-slate-300 mt-0.5 [&_a]:text-sky-400 [&_a]:hover:underline"
|
||||
dangerouslySetInnerHTML={{ __html: c.body }}
|
||||
/>
|
||||
</div>
|
||||
{/* Actions: highlight (owner) + delete */}
|
||||
<div className="flex items-start gap-1 opacity-0 group-hover:opacity-100 transition-all ml-1">
|
||||
{isOwn && (
|
||||
<button
|
||||
onClick={() => handleHighlight(c)}
|
||||
title={c.is_highlighted ? 'Remove highlight' : 'Highlight comment'}
|
||||
className={`text-xs transition-colors px-1 py-0.5 rounded ${
|
||||
c.is_highlighted
|
||||
? 'text-sky-400 hover:text-slate-400'
|
||||
: 'text-slate-600 hover:text-sky-400'
|
||||
}`}
|
||||
>
|
||||
<i className={`${c.is_highlighted ? 'fa-solid' : 'fa-regular'} fa-star`} />
|
||||
</button>
|
||||
)}
|
||||
{isLoggedIn && (
|
||||
<button
|
||||
onClick={() => handleDelete(c.id)}
|
||||
className="text-slate-600 hover:text-rose-400 transition-all text-xs"
|
||||
title="Delete comment"
|
||||
>
|
||||
<i className="fa-solid fa-trash-can" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{loaded && hasMore && (
|
||||
<button
|
||||
onClick={() => fetchComments(page + 1)}
|
||||
disabled={loading}
|
||||
className="text-xs text-sky-400 hover:text-sky-300 transition-colors"
|
||||
>
|
||||
{loading ? 'Loading…' : 'Load more comments'}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Composer */}
|
||||
{isLoggedIn ? (
|
||||
<form onSubmit={handleSubmit} className="flex gap-2 mt-2">
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={body}
|
||||
onChange={(e) => setBody(e.target.value)}
|
||||
placeholder="Write a comment…"
|
||||
maxLength={1000}
|
||||
rows={1}
|
||||
className="flex-1 bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-sm text-white resize-none placeholder-slate-600 focus:outline-none focus:border-sky-500/50 transition-colors"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
handleSubmit(e)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting || !body.trim()}
|
||||
className="px-3 py-2 rounded-xl bg-sky-600 hover:bg-sky-500 disabled:opacity-40 disabled:cursor-not-allowed text-white text-sm transition-colors"
|
||||
>
|
||||
{submitting ? <i className="fa-solid fa-spinner fa-spin" /> : <i className="fa-solid fa-paper-plane" />}
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<p className="text-xs text-slate-500 mt-2">
|
||||
<a href="/login" className="text-sky-400 hover:underline">Sign in</a> to comment.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{error && <p className="text-xs text-rose-400">{error}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
456
resources/js/components/Feed/PostComposer.jsx
Normal file
456
resources/js/components/Feed/PostComposer.jsx
Normal file
@@ -0,0 +1,456 @@
|
||||
import React, { useState, useRef, useCallback, useEffect, lazy, Suspense } from 'react'
|
||||
import axios from 'axios'
|
||||
import ShareArtworkModal from './ShareArtworkModal'
|
||||
import LinkPreviewCard from './LinkPreviewCard'
|
||||
import TagPeopleModal from './TagPeopleModal'
|
||||
|
||||
// Lazy-load the heavy emoji picker only when first opened
|
||||
// @emoji-mart/react only has a default export (the Picker); m.Picker is undefined
|
||||
const EmojiPicker = lazy(() => import('@emoji-mart/react'))
|
||||
|
||||
const VISIBILITY_OPTIONS = [
|
||||
{ value: 'public', icon: 'fa-globe', label: 'Public' },
|
||||
{ value: 'followers', icon: 'fa-user-friends', label: 'Followers' },
|
||||
{ value: 'private', icon: 'fa-lock', label: 'Private' },
|
||||
]
|
||||
|
||||
const URL_RE = /https?:\/\/[^\s\])"'>]{4,}/gi
|
||||
|
||||
function extractFirstUrl(text) {
|
||||
const m = text.match(URL_RE)
|
||||
return m ? m[0].replace(/[.,;:!?)]+$/, '') : null
|
||||
}
|
||||
|
||||
/**
|
||||
* PostComposer
|
||||
*
|
||||
* Props:
|
||||
* user object { id, username, name, avatar }
|
||||
* onPosted function(newPost)
|
||||
*/
|
||||
export default function PostComposer({ user, onPosted }) {
|
||||
const [expanded, setExpanded] = useState(false)
|
||||
const [body, setBody] = useState('')
|
||||
const [visibility, setVisibility] = useState('public')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [error, setError] = useState(null)
|
||||
const [shareModal, setShareModal] = useState(false)
|
||||
const [linkPreview, setLinkPreview] = useState(null)
|
||||
const [previewLoading, setPreviewLoading] = useState(false)
|
||||
const [previewDismissed, setPreviewDismissed] = useState(false)
|
||||
const [lastPreviewUrl, setLastPreviewUrl] = useState(null)
|
||||
const [emojiOpen, setEmojiOpen] = useState(false)
|
||||
const [emojiData, setEmojiData] = useState(null) // loaded lazily
|
||||
const [tagModal, setTagModal] = useState(false)
|
||||
const [taggedUsers, setTaggedUsers] = useState([]) // [{ id, username, name, avatar_url }]
|
||||
const [scheduleOpen, setScheduleOpen] = useState(false)
|
||||
const [scheduledAt, setScheduledAt] = useState('') // ISO datetime-local string
|
||||
|
||||
const textareaRef = useRef(null)
|
||||
const debounceTimer = useRef(null)
|
||||
const emojiWrapRef = useRef(null) // wraps button + popover for outside-click
|
||||
|
||||
// Load emoji-mart data lazily the first time the picker opens
|
||||
const openEmojiPicker = useCallback(async () => {
|
||||
if (!emojiData) {
|
||||
const { default: data } = await import('@emoji-mart/data')
|
||||
setEmojiData(data)
|
||||
}
|
||||
setEmojiOpen((v) => !v)
|
||||
}, [emojiData])
|
||||
|
||||
// Close picker on outside click
|
||||
useEffect(() => {
|
||||
if (!emojiOpen) return
|
||||
const handler = (e) => {
|
||||
if (emojiWrapRef.current && !emojiWrapRef.current.contains(e.target)) {
|
||||
setEmojiOpen(false)
|
||||
}
|
||||
}
|
||||
document.addEventListener('mousedown', handler)
|
||||
return () => document.removeEventListener('mousedown', handler)
|
||||
}, [emojiOpen])
|
||||
|
||||
// Insert emoji at current cursor position
|
||||
const insertEmoji = useCallback((emoji) => {
|
||||
const native = emoji.native ?? emoji.shortcodes ?? ''
|
||||
const ta = textareaRef.current
|
||||
if (!ta) {
|
||||
setBody((b) => b + native)
|
||||
return
|
||||
}
|
||||
const start = ta.selectionStart ?? body.length
|
||||
const end = ta.selectionEnd ?? body.length
|
||||
const next = body.slice(0, start) + native + body.slice(end)
|
||||
setBody(next)
|
||||
// Restore cursor after the inserted emoji
|
||||
requestAnimationFrame(() => {
|
||||
ta.focus()
|
||||
const pos = start + native.length
|
||||
ta.setSelectionRange(pos, pos)
|
||||
})
|
||||
setEmojiOpen(false)
|
||||
}, [body])
|
||||
|
||||
const handleFocus = () => {
|
||||
setExpanded(true)
|
||||
setTimeout(() => textareaRef.current?.focus(), 50)
|
||||
}
|
||||
|
||||
const fetchLinkPreview = useCallback(async (url) => {
|
||||
setPreviewLoading(true)
|
||||
try {
|
||||
const { data } = await axios.get('/api/link-preview', { params: { url } })
|
||||
if (data?.url) {
|
||||
setLinkPreview(data)
|
||||
}
|
||||
} catch {
|
||||
// silently ignore – preview is optional
|
||||
} finally {
|
||||
setPreviewLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleBodyChange = (e) => {
|
||||
const val = e.target.value
|
||||
setBody(val)
|
||||
|
||||
// Detect URLs and auto-fetch preview (debounced)
|
||||
clearTimeout(debounceTimer.current)
|
||||
debounceTimer.current = setTimeout(() => {
|
||||
const url = extractFirstUrl(val)
|
||||
if (!url || previewDismissed) return
|
||||
if (url === lastPreviewUrl) return
|
||||
setLastPreviewUrl(url)
|
||||
setLinkPreview(null)
|
||||
fetchLinkPreview(url)
|
||||
}, 700)
|
||||
}
|
||||
|
||||
const handleDismissPreview = () => {
|
||||
setLinkPreview(null)
|
||||
setPreviewDismissed(true)
|
||||
}
|
||||
|
||||
const resetComposer = () => {
|
||||
setBody('')
|
||||
setExpanded(false)
|
||||
setLinkPreview(null)
|
||||
setPreviewLoading(false)
|
||||
setPreviewDismissed(false)
|
||||
setLastPreviewUrl(null)
|
||||
setEmojiOpen(false)
|
||||
setTaggedUsers([])
|
||||
setTagModal(false)
|
||||
setScheduleOpen(false)
|
||||
setScheduledAt('')
|
||||
}
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e?.preventDefault()
|
||||
if (!body.trim()) return
|
||||
setSubmitting(true)
|
||||
setError(null)
|
||||
try {
|
||||
const { data } = await axios.post('/api/posts', {
|
||||
type: 'text',
|
||||
visibility,
|
||||
body,
|
||||
link_preview: linkPreview ?? undefined,
|
||||
tagged_users: taggedUsers.length > 0 ? taggedUsers.map(({ id, username, name }) => ({ id, username, name })) : undefined,
|
||||
publish_at: scheduledAt || undefined,
|
||||
})
|
||||
onPosted?.(data.post)
|
||||
resetComposer()
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message ?? 'Failed to post.')
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleShared = (newPost) => {
|
||||
onPosted?.(newPost)
|
||||
setShareModal(false)
|
||||
}
|
||||
|
||||
const showPreview = (linkPreview || previewLoading) && !previewDismissed
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="rounded-2xl border border-white/[0.08] bg-white/[0.025] px-5 py-4">
|
||||
{/* Collapsed: click-to-expand placeholder */}
|
||||
{!expanded ? (
|
||||
<div
|
||||
onClick={handleFocus}
|
||||
className="flex items-center gap-3 cursor-text"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleFocus()}
|
||||
aria-label="Create a post"
|
||||
>
|
||||
<img
|
||||
src={user.avatar ?? '/images/avatar_default.webp'}
|
||||
alt={user.name}
|
||||
className="w-9 h-9 rounded-full object-cover ring-1 ring-white/10 shrink-0"
|
||||
loading="lazy"
|
||||
/>
|
||||
<span className="text-sm text-slate-500 flex-1 bg-white/[0.04] rounded-xl px-4 py-2.5 hover:bg-white/[0.07] transition-colors">
|
||||
What's on your mind, {user.name?.split(' ')[0] ?? user.username}?
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-3">
|
||||
{/* Textarea */}
|
||||
<div className="flex gap-3">
|
||||
<a href={`/@${user.username}`} className="shrink-0" tabIndex={-1}>
|
||||
<img
|
||||
src={user.avatar ?? '/images/avatar_default.webp'}
|
||||
alt={user.name}
|
||||
className="w-9 h-9 rounded-full object-cover ring-1 ring-white/10 hover:ring-sky-500/40 transition-all mt-0.5"
|
||||
loading="lazy"
|
||||
/>
|
||||
</a>
|
||||
<div className="flex-1 min-w-0 flex flex-col gap-1.5">
|
||||
{/* User identity byline */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<a
|
||||
href={`/@${user.username}`}
|
||||
className="text-sm font-semibold text-white/90 hover:text-sky-400 transition-colors leading-tight"
|
||||
tabIndex={-1}
|
||||
>
|
||||
{user.name || `@${user.username}`}
|
||||
</a>
|
||||
<span className="text-xs text-slate-500 leading-tight">@{user.username}</span>
|
||||
</div>
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={body}
|
||||
onChange={handleBodyChange}
|
||||
maxLength={2000}
|
||||
rows={3}
|
||||
placeholder="What's on your mind?"
|
||||
autoFocus
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-3 py-2.5 text-sm text-white resize-none placeholder-slate-600 focus:outline-none focus:border-sky-500/50 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tagged people pills */}
|
||||
{taggedUsers.length > 0 && (
|
||||
<div className="pl-12 flex flex-wrap gap-1.5 items-center">
|
||||
<span className="text-xs text-slate-500">With:</span>
|
||||
{taggedUsers.map((u) => (
|
||||
<span key={u.id} className="flex items-center gap-1 px-2 py-0.5 bg-sky-500/10 border border-sky-500/20 rounded-full text-xs text-sky-400">
|
||||
<img src={u.avatar_url ?? '/images/avatar_default.webp'} alt="" className="w-3.5 h-3.5 rounded-full object-cover" />
|
||||
@{u.username}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setTaggedUsers((prev) => prev.filter((x) => x.id !== u.id))}
|
||||
className="opacity-60 hover:opacity-100 ml-0.5"
|
||||
>
|
||||
<i className="fa-solid fa-xmark fa-xs" />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Link preview */}
|
||||
{showPreview && (
|
||||
<div className="pl-12">
|
||||
<LinkPreviewCard
|
||||
preview={linkPreview}
|
||||
loading={previewLoading && !linkPreview}
|
||||
onDismiss={handleDismissPreview}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Schedule date picker */}
|
||||
{scheduleOpen && (
|
||||
<div className="pl-12">
|
||||
<div className="flex items-center gap-2.5 p-3 rounded-xl bg-violet-500/10 border border-violet-500/20">
|
||||
<i className="fa-regular fa-calendar-plus text-violet-400 text-sm fa-fw shrink-0" />
|
||||
<div className="flex-1">
|
||||
<label className="block text-[11px] text-slate-400 mb-1">Publish on</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={scheduledAt}
|
||||
onChange={(e) => setScheduledAt(e.target.value)}
|
||||
min={new Date(Date.now() + 60_000).toISOString().slice(0, 16)}
|
||||
className="bg-transparent text-sm text-white border-none outline-none w-full [color-scheme:dark]"
|
||||
/>
|
||||
<p className="text-[10px] text-slate-500 mt-1">
|
||||
{Intl.DateTimeFormat().resolvedOptions().timeZone}
|
||||
</p>
|
||||
</div>
|
||||
{scheduledAt && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setScheduledAt('')}
|
||||
className="text-slate-500 hover:text-slate-300 transition-colors"
|
||||
title="Clear"
|
||||
>
|
||||
<i className="fa-solid fa-xmark fa-sm" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer row */}
|
||||
<div className="flex items-center gap-2 pl-12">
|
||||
{/* Visibility selector */}
|
||||
<div className="flex gap-1">
|
||||
{VISIBILITY_OPTIONS.map((v) => (
|
||||
<button
|
||||
key={v.value}
|
||||
type="button"
|
||||
onClick={() => setVisibility(v.value)}
|
||||
title={v.label}
|
||||
className={`flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs transition-all ${
|
||||
visibility === v.value
|
||||
? 'bg-sky-500/15 text-sky-400 border border-sky-500/30'
|
||||
: 'text-slate-500 hover:text-white hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
<i className={`fa-solid ${v.icon} fa-fw`} />
|
||||
{visibility === v.value && <span>{v.label}</span>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Emoji picker trigger */}
|
||||
<div ref={emojiWrapRef} className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={openEmojiPicker}
|
||||
title="Add emoji"
|
||||
className={`flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs transition-all ${
|
||||
emojiOpen
|
||||
? 'bg-amber-500/15 text-amber-400 border border-amber-500/30'
|
||||
: 'text-slate-500 hover:text-white hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
<i className="fa-regular fa-face-smile fa-fw" />
|
||||
</button>
|
||||
|
||||
{emojiOpen && (
|
||||
<div className="absolute bottom-full mb-2 left-0 z-50 shadow-2xl">
|
||||
<Suspense fallback={
|
||||
<div className="w-[352px] h-[400px] rounded-2xl bg-[#10192e] border border-white/10 flex items-center justify-center text-slate-600">
|
||||
<i className="fa-solid fa-spinner fa-spin text-xl" />
|
||||
</div>
|
||||
}>
|
||||
{emojiData && (
|
||||
<EmojiPicker
|
||||
data={emojiData}
|
||||
onEmojiSelect={insertEmoji}
|
||||
theme="dark"
|
||||
set="native"
|
||||
previewPosition="none"
|
||||
skinTonePosition="search"
|
||||
navPosition="bottom"
|
||||
perLine={9}
|
||||
maxFrequentRows={2}
|
||||
/>
|
||||
)}
|
||||
</Suspense>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tag people button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setTagModal(true)}
|
||||
title="Tag people"
|
||||
className={`flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs transition-all ${
|
||||
taggedUsers.length > 0
|
||||
? 'bg-sky-500/15 text-sky-400 border border-sky-500/30'
|
||||
: 'text-slate-500 hover:text-white hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
<i className="fa-solid fa-user-tag fa-fw" />
|
||||
{taggedUsers.length > 0 && <span>{taggedUsers.length}</span>}
|
||||
</button>
|
||||
|
||||
{/* Schedule button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setScheduleOpen((v) => !v)}
|
||||
title="Schedule post"
|
||||
className={`flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs transition-all ${
|
||||
scheduleOpen || scheduledAt
|
||||
? 'bg-violet-500/15 text-violet-400 border border-violet-500/30'
|
||||
: 'text-slate-500 hover:text-white hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
<i className="fa-regular fa-clock fa-fw" />
|
||||
{scheduledAt && <span className="max-w-[80px] truncate">{new Date(scheduledAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}</span>}
|
||||
</button>
|
||||
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
{/* Share artwork button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShareModal(true)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs text-slate-400 hover:text-sky-400 hover:bg-sky-500/10 transition-colors"
|
||||
title="Share an artwork"
|
||||
>
|
||||
<i className="fa-solid fa-share-nodes fa-fw" />
|
||||
Share artwork
|
||||
</button>
|
||||
|
||||
{/* Cancel */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={resetComposer}
|
||||
className="px-3 py-1.5 rounded-lg text-xs text-slate-400 hover:text-white hover:bg-white/5 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
{/* Post */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting || !body.trim()}
|
||||
className={`px-4 py-1.5 rounded-xl disabled:opacity-40 disabled:cursor-not-allowed text-white text-xs font-medium transition-colors ${
|
||||
scheduledAt ? 'bg-violet-600 hover:bg-violet-500' : 'bg-sky-600 hover:bg-sky-500'
|
||||
}`}
|
||||
>
|
||||
{submitting ? 'Posting…' : scheduledAt ? 'Schedule' : 'Post'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Char count */}
|
||||
{body.length > 1800 && (
|
||||
<p className="text-right text-[10px] text-amber-400/70 pr-1">{body.length}/2000</p>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<p className="text-xs text-rose-400">{error}</p>
|
||||
)}
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Share artwork modal */}
|
||||
<ShareArtworkModal
|
||||
isOpen={shareModal}
|
||||
onClose={() => setShareModal(false)}
|
||||
onShared={handleShared}
|
||||
/>
|
||||
|
||||
{/* Tag people modal */}
|
||||
<TagPeopleModal
|
||||
isOpen={tagModal}
|
||||
onClose={() => setTagModal(false)}
|
||||
selected={taggedUsers}
|
||||
onConfirm={(users) => { setTaggedUsers(users); setTagModal(false) }}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
284
resources/js/components/Feed/ShareArtworkModal.jsx
Normal file
284
resources/js/components/Feed/ShareArtworkModal.jsx
Normal file
@@ -0,0 +1,284 @@
|
||||
import React, { useState, useEffect, useRef } from 'react'
|
||||
import axios from 'axios'
|
||||
|
||||
const VISIBILITY_OPTIONS = [
|
||||
{ value: 'public', icon: 'fa-globe', label: 'Public' },
|
||||
{ value: 'followers', icon: 'fa-user-friends', label: 'Followers' },
|
||||
{ value: 'private', icon: 'fa-lock', label: 'Private' },
|
||||
]
|
||||
|
||||
function ArtworkResult({ artwork, onSelect }) {
|
||||
return (
|
||||
<button
|
||||
onClick={() => onSelect(artwork)}
|
||||
className="w-full flex gap-3 p-3 rounded-xl hover:bg-white/5 transition-colors text-left group"
|
||||
>
|
||||
<div className="w-14 h-12 rounded-lg overflow-hidden shrink-0 bg-white/5">
|
||||
{artwork.thumb_url ? (
|
||||
<img
|
||||
src={artwork.thumb_url}
|
||||
alt={artwork.title}
|
||||
className="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center text-slate-600">
|
||||
<i className="fa-solid fa-image" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-white/90 truncate group-hover:text-sky-400 transition-colors">
|
||||
{artwork.title}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 mt-0.5 truncate">
|
||||
by {artwork.user?.name ?? artwork.author_name ?? 'Unknown'}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* ShareArtworkModal
|
||||
*
|
||||
* Props:
|
||||
* isOpen boolean
|
||||
* onClose function
|
||||
* onShared function(newPost)
|
||||
* preselectedArtwork object|null (share from artwork page)
|
||||
*/
|
||||
export default function ShareArtworkModal({ isOpen, onClose, onShared, preselectedArtwork = null }) {
|
||||
const [query, setQuery] = useState('')
|
||||
const [results, setResults] = useState([])
|
||||
const [searching, setSearching] = useState(false)
|
||||
const [selected, setSelected] = useState(preselectedArtwork)
|
||||
const [body, setBody] = useState('')
|
||||
const [visibility, setVisibility] = useState('public')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [error, setError] = useState(null)
|
||||
const searchTimer = useRef(null)
|
||||
const inputRef = useRef(null)
|
||||
|
||||
// Focus search on open
|
||||
useEffect(() => {
|
||||
if (isOpen && !preselectedArtwork) {
|
||||
setTimeout(() => inputRef.current?.focus(), 100)
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
useEffect(() => {
|
||||
setSelected(preselectedArtwork)
|
||||
}, [preselectedArtwork])
|
||||
|
||||
const handleSearch = (q) => {
|
||||
setQuery(q)
|
||||
clearTimeout(searchTimer.current)
|
||||
if (!q.trim()) { setResults([]); return }
|
||||
searchTimer.current = setTimeout(async () => {
|
||||
setSearching(true)
|
||||
try {
|
||||
const { data } = await axios.get('/api/search/artworks', {
|
||||
params: { q, shareable: 1, per_page: 12 },
|
||||
})
|
||||
setResults(data.data ?? data.hits ?? [])
|
||||
} catch {
|
||||
setResults([])
|
||||
} finally {
|
||||
setSearching(false)
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!selected) return
|
||||
setSubmitting(true)
|
||||
setError(null)
|
||||
try {
|
||||
const { data } = await axios.post(`/api/posts/share/artwork/${selected.id}`, {
|
||||
body: body.trim() || null,
|
||||
visibility,
|
||||
})
|
||||
onShared?.(data.post)
|
||||
handleClose()
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.errors?.artwork_id?.[0] ?? err.response?.data?.message ?? 'Failed to share.')
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
setQuery('')
|
||||
setResults([])
|
||||
setSelected(preselectedArtwork)
|
||||
setBody('')
|
||||
setVisibility('public')
|
||||
setError(null)
|
||||
onClose?.()
|
||||
}
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Share artwork"
|
||||
>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
||||
onClick={handleClose}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
{/* Panel */}
|
||||
<div className="relative w-full max-w-lg bg-[#0d1829] border border-white/10 rounded-2xl shadow-2xl max-h-[90vh] flex flex-col overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-white/[0.06]">
|
||||
<h2 className="text-sm font-semibold text-white/90">
|
||||
<i className="fa-solid fa-share-nodes mr-2 text-sky-400 opacity-80" />
|
||||
Share Artwork to Profile
|
||||
</h2>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="text-slate-500 hover:text-white transition-colors"
|
||||
aria-label="Close"
|
||||
>
|
||||
<i className="fa-solid fa-xmark" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-5 space-y-4">
|
||||
{/* Artwork search / selected */}
|
||||
{!selected ? (
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-400 mb-1.5">
|
||||
Search for an artwork
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
placeholder="Type artwork name…"
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl pl-9 pr-4 py-2.5 text-sm text-white placeholder-slate-600 focus:outline-none focus:border-sky-500/50 transition-colors"
|
||||
/>
|
||||
<i className="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-xs" />
|
||||
{searching && (
|
||||
<i className="fa-solid fa-spinner fa-spin absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 text-xs" />
|
||||
)}
|
||||
</div>
|
||||
{results.length > 0 && (
|
||||
<div className="mt-2 rounded-xl border border-white/[0.06] bg-black/20 max-h-56 overflow-y-auto">
|
||||
{results.map((a) => (
|
||||
<ArtworkResult key={a.id} artwork={a} onSelect={(art) => { setSelected(art); setQuery(''); setResults([]) }} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{query && !searching && results.length === 0 && (
|
||||
<p className="text-xs text-slate-500 mt-2 text-center py-4">No artworks found.</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-400 mb-1.5">Selected Artwork</label>
|
||||
<div className="flex gap-3 rounded-xl border border-white/[0.08] bg-black/20 p-3">
|
||||
<div className="w-16 h-14 rounded-lg overflow-hidden shrink-0 bg-white/5">
|
||||
<img
|
||||
src={selected.thumb_url ?? selected.thumb ?? ''}
|
||||
alt={selected.title}
|
||||
className="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-white/90 truncate">{selected.title}</p>
|
||||
<p className="text-xs text-slate-400 mt-0.5">
|
||||
by {selected.user?.name ?? selected.author?.name ?? selected.author_name ?? 'Unknown'}
|
||||
</p>
|
||||
</div>
|
||||
{!preselectedArtwork && (
|
||||
<button
|
||||
onClick={() => setSelected(null)}
|
||||
className="text-slate-500 hover:text-white transition-colors self-start"
|
||||
title="Change artwork"
|
||||
>
|
||||
<i className="fa-solid fa-xmark text-xs" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Commentary */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-400 mb-1.5">
|
||||
Commentary <span className="text-slate-600">(optional)</span>
|
||||
</label>
|
||||
<textarea
|
||||
value={body}
|
||||
onChange={(e) => setBody(e.target.value)}
|
||||
maxLength={2000}
|
||||
rows={3}
|
||||
placeholder="Say something about this artwork…"
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-3 py-2.5 text-sm text-white resize-none placeholder-slate-600 focus:outline-none focus:border-sky-500/50 transition-colors"
|
||||
/>
|
||||
<p className="text-right text-[10px] text-slate-600 mt-0.5">{body.length}/2000</p>
|
||||
</div>
|
||||
|
||||
{/* Visibility */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-400 mb-1.5">Visibility</label>
|
||||
<div className="flex gap-2">
|
||||
{VISIBILITY_OPTIONS.map((v) => (
|
||||
<button
|
||||
key={v.value}
|
||||
onClick={() => setVisibility(v.value)}
|
||||
className={`flex-1 flex items-center justify-center gap-1.5 px-3 py-2 rounded-xl text-xs font-medium transition-all border ${
|
||||
visibility === v.value
|
||||
? 'border-sky-500/50 bg-sky-500/10 text-sky-300'
|
||||
: 'border-white/10 bg-white/[0.03] text-slate-400 hover:border-white/20 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<i className={`fa-solid ${v.icon} fa-fw`} />
|
||||
{v.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="text-xs text-rose-400 bg-rose-500/10 border border-rose-500/20 rounded-xl px-3 py-2">
|
||||
<i className="fa-solid fa-circle-exclamation mr-1.5" />
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex gap-2 px-5 py-4 border-t border-white/[0.06]">
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="flex-1 px-4 py-2.5 rounded-xl text-sm text-slate-400 hover:text-white hover:bg-white/5 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={submitting || !selected}
|
||||
className="flex-1 px-4 py-2.5 rounded-xl bg-sky-600 hover:bg-sky-500 disabled:opacity-40 disabled:cursor-not-allowed text-white text-sm font-medium transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
{submitting
|
||||
? <><i className="fa-solid fa-spinner fa-spin" /> Sharing…</>
|
||||
: <><i className="fa-solid fa-share-nodes" /> Share</>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
204
resources/js/components/Feed/TagPeopleModal.jsx
Normal file
204
resources/js/components/Feed/TagPeopleModal.jsx
Normal file
@@ -0,0 +1,204 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from 'react'
|
||||
import axios from 'axios'
|
||||
|
||||
/**
|
||||
* TagPeopleModal
|
||||
*
|
||||
* Props:
|
||||
* isOpen boolean
|
||||
* onClose function()
|
||||
* selected array [{ id, username, name, avatar_url }]
|
||||
* onConfirm function(selectedArray)
|
||||
*/
|
||||
export default function TagPeopleModal({ isOpen, onClose, selected = [], onConfirm }) {
|
||||
const [query, setQuery] = useState('')
|
||||
const [results, setResults] = useState([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [staged, setStaged] = useState(selected)
|
||||
const inputRef = useRef(null)
|
||||
const debounce = useRef(null)
|
||||
|
||||
// Re-sync staged list when modal opens
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setStaged(selected)
|
||||
setQuery('')
|
||||
setResults([])
|
||||
setTimeout(() => inputRef.current?.focus(), 80)
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
const search = useCallback(async (q) => {
|
||||
if (q.length < 2) { setResults([]); return }
|
||||
setLoading(true)
|
||||
try {
|
||||
const { data } = await axios.get('/api/search/users', { params: { q, per_page: 8 } })
|
||||
setResults(data.data ?? [])
|
||||
} catch {
|
||||
setResults([])
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleQueryChange = (e) => {
|
||||
const val = e.target.value
|
||||
setQuery(val)
|
||||
clearTimeout(debounce.current)
|
||||
debounce.current = setTimeout(() => search(val.replace(/^@/, '')), 300)
|
||||
}
|
||||
|
||||
const isSelected = (user) => staged.some((u) => u.id === user.id)
|
||||
|
||||
const toggle = (user) => {
|
||||
setStaged((prev) =>
|
||||
isSelected(user)
|
||||
? prev.filter((u) => u.id !== user.id)
|
||||
: prev.length < 10 ? [...prev, user] : prev
|
||||
)
|
||||
}
|
||||
|
||||
const handleConfirm = () => {
|
||||
onConfirm(staged)
|
||||
onClose()
|
||||
}
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
{/* Backdrop */}
|
||||
<div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />
|
||||
|
||||
{/* Modal */}
|
||||
<div className="relative w-full max-w-md rounded-2xl border border-white/10 bg-[#0c1525] shadow-2xl overflow-hidden flex flex-col max-h-[80vh]">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 px-5 py-4 border-b border-white/[0.07]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="w-8 h-8 rounded-full hover:bg-white/10 flex items-center justify-center text-slate-400 hover:text-white transition-colors"
|
||||
aria-label="Back"
|
||||
>
|
||||
<i className="fa-solid fa-arrow-left fa-sm" />
|
||||
</button>
|
||||
<h2 className="flex-1 text-center text-base font-semibold text-white/90 -ml-8">
|
||||
Tag people
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleConfirm}
|
||||
className="text-sm font-medium text-sky-400 hover:text-sky-300 transition-colors"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search bar */}
|
||||
<div className="px-4 py-3 border-b border-white/[0.05]">
|
||||
<div className="flex items-center gap-2 bg-white/[0.06] border border-white/[0.08] rounded-xl px-3 py-2">
|
||||
<i className="fa-solid fa-magnifying-glass text-slate-500 text-xs fa-fw" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={handleQueryChange}
|
||||
placeholder="Search users…"
|
||||
className="flex-1 bg-transparent text-sm text-white placeholder-slate-600 focus:outline-none"
|
||||
/>
|
||||
{loading && <i className="fa-solid fa-spinner fa-spin text-slate-500 text-xs" />}
|
||||
{query && !loading && (
|
||||
<button type="button" onClick={() => { setQuery(''); setResults([]) }} className="text-slate-500 hover:text-white">
|
||||
<i className="fa-solid fa-xmark text-xs" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Selected chips */}
|
||||
{staged.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 px-4 py-3 border-b border-white/[0.05]">
|
||||
{staged.map((u) => (
|
||||
<span
|
||||
key={u.id}
|
||||
className="flex items-center gap-1.5 px-2.5 py-1 bg-sky-500/15 border border-sky-500/30 rounded-full text-xs text-sky-400"
|
||||
>
|
||||
<img
|
||||
src={u.avatar_url ?? '/images/avatar_default.webp'}
|
||||
alt=""
|
||||
className="w-4 h-4 rounded-full object-cover"
|
||||
/>
|
||||
@{u.username}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggle(u)}
|
||||
className="ml-0.5 opacity-60 hover:opacity-100 transition-opacity"
|
||||
aria-label={`Remove @${u.username}`}
|
||||
>
|
||||
<i className="fa-solid fa-xmark fa-xs" />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results list */}
|
||||
<div className="overflow-y-auto flex-1">
|
||||
{results.length === 0 && query.length >= 2 && !loading && (
|
||||
<p className="px-5 py-8 text-center text-sm text-slate-600">No users found for "{query}"</p>
|
||||
)}
|
||||
{results.length === 0 && query.length < 2 && (
|
||||
<p className="px-5 py-8 text-center text-sm text-slate-600">Type a name or @username to search</p>
|
||||
)}
|
||||
{results.map((u) => {
|
||||
const checked = isSelected(u)
|
||||
return (
|
||||
<button
|
||||
key={u.id}
|
||||
type="button"
|
||||
onClick={() => toggle(u)}
|
||||
className={`w-full flex items-center gap-3 px-5 py-3 text-left transition-colors ${
|
||||
checked ? 'bg-sky-500/10' : 'hover:bg-white/[0.04]'
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
src={u.avatar_url ?? '/images/avatar_default.webp'}
|
||||
alt={u.username}
|
||||
className="w-10 h-10 rounded-full object-cover ring-1 ring-white/10 shrink-0"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-white/90 truncate">
|
||||
{u.name || `@${u.username}`}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 truncate">@{u.username}</p>
|
||||
</div>
|
||||
<div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors ${
|
||||
checked
|
||||
? 'bg-sky-500 border-sky-500 text-white'
|
||||
: 'border-white/20'
|
||||
}`}>
|
||||
{checked && <i className="fa-solid fa-check fa-xs" />}
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Footer confirm */}
|
||||
<div className="px-5 py-3 border-t border-white/[0.07]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleConfirm}
|
||||
className="w-full py-2.5 rounded-xl bg-sky-600 hover:bg-sky-500 text-white text-sm font-medium transition-colors disabled:opacity-40"
|
||||
>
|
||||
{staged.length === 0
|
||||
? 'Continue without tagging'
|
||||
: `Tag ${staged.length} ${staged.length === 1 ? 'person' : 'people'}`}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
22
resources/js/components/Feed/VisibilityPill.jsx
Normal file
22
resources/js/components/Feed/VisibilityPill.jsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import React from 'react'
|
||||
|
||||
const ICONS = {
|
||||
public: { icon: 'fa-globe', label: 'Public', cls: 'text-slate-500' },
|
||||
followers: { icon: 'fa-user-friends', label: 'Followers', cls: 'text-sky-500/70' },
|
||||
private: { icon: 'fa-lock', label: 'Private', cls: 'text-amber-500/70' },
|
||||
}
|
||||
|
||||
export default function VisibilityPill({ visibility, showLabel = false }) {
|
||||
const v = ICONS[visibility] ?? ICONS.public
|
||||
|
||||
return (
|
||||
<span
|
||||
className={`inline-flex items-center gap-1 text-xs ${v.cls}`}
|
||||
title={v.label}
|
||||
aria-label={`Visibility: ${v.label}`}
|
||||
>
|
||||
<i className={`fa-solid ${v.icon} fa-fw`} />
|
||||
{showLabel && <span>{v.label}</span>}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -196,6 +196,7 @@ export default function ArtworkActionBar({ artwork, stats, canonicalUrl, onStats
|
||||
const [reporting, setReporting] = useState(false)
|
||||
const [reported, setReported] = useState(false)
|
||||
const [reportOpen, setReportOpen] = useState(false)
|
||||
const isLoggedIn = artwork?.viewer != null
|
||||
useEffect(() => {
|
||||
setFavorited(Boolean(artwork?.viewer?.is_favorited))
|
||||
}, [artwork?.id, artwork?.viewer?.is_favorited])
|
||||
@@ -311,7 +312,7 @@ export default function ArtworkActionBar({ artwork, stats, canonicalUrl, onStats
|
||||
</div>
|
||||
|
||||
{/* Share pill */}
|
||||
<ArtworkShareButton artwork={artwork} shareUrl={shareUrl} size="default" />
|
||||
<ArtworkShareButton artwork={artwork} shareUrl={shareUrl} size="default" isLoggedIn={isLoggedIn} />
|
||||
|
||||
{/* Report pill */}
|
||||
<button
|
||||
@@ -362,7 +363,7 @@ export default function ArtworkActionBar({ artwork, stats, canonicalUrl, onStats
|
||||
</button>
|
||||
|
||||
{/* Share */}
|
||||
<ArtworkShareButton artwork={artwork} shareUrl={shareUrl} size="small" />
|
||||
<ArtworkShareButton artwork={artwork} shareUrl={shareUrl} size="small" isLoggedIn={isLoggedIn} />
|
||||
|
||||
{/* Report */}
|
||||
<button
|
||||
|
||||
@@ -20,7 +20,7 @@ function ShareIcon() {
|
||||
* shareUrl – canonical URL to share
|
||||
* size – 'default' | 'small' (for mobile bar)
|
||||
*/
|
||||
export default function ArtworkShareButton({ artwork, shareUrl, size = 'default' }) {
|
||||
export default function ArtworkShareButton({ artwork, shareUrl, size = 'default', isLoggedIn = false }) {
|
||||
const [modalOpen, setModalOpen] = useState(false)
|
||||
|
||||
const openModal = useCallback(
|
||||
@@ -69,6 +69,7 @@ export default function ArtworkShareButton({ artwork, shareUrl, size = 'default'
|
||||
onClose={closeModal}
|
||||
artwork={artwork}
|
||||
shareUrl={shareUrl}
|
||||
isLoggedIn={isLoggedIn}
|
||||
/>
|
||||
</Suspense>
|
||||
)}
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import React, { lazy, Suspense, useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import ShareToast from '../ui/ShareToast'
|
||||
|
||||
// Lazy-load the Feed share modal so artwork pages don't bundle the feed layer unless needed
|
||||
const FeedShareArtworkModal = lazy(() => import('../Feed/ShareArtworkModal'))
|
||||
|
||||
/* ── Platform share URLs ─────────────────────────────────────────────────── */
|
||||
function facebookUrl(url) {
|
||||
return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`
|
||||
@@ -107,13 +110,14 @@ function trackShare(artworkId, platform) {
|
||||
* artwork – artwork object (id, title, description, thumbs, canonical_url, …)
|
||||
* shareUrl – canonical share URL
|
||||
*/
|
||||
export default function ArtworkShareModal({ open, onClose, artwork, shareUrl }) {
|
||||
export default function ArtworkShareModal({ open, onClose, artwork, shareUrl, isLoggedIn = false }) {
|
||||
const backdropRef = useRef(null)
|
||||
const [linkCopied, setLinkCopied] = useState(false)
|
||||
const [embedCopied, setEmbedCopied] = useState(false)
|
||||
const [showEmbed, setShowEmbed] = useState(false)
|
||||
const [toastVisible, setToastVisible] = useState(false)
|
||||
const [toastMessage, setToastMessage] = useState('')
|
||||
const [profileShareOpen, setProfileShareOpen] = useState(false)
|
||||
|
||||
const url = shareUrl || artwork?.canonical_url || (typeof window !== 'undefined' ? window.location.href : '#')
|
||||
const title = artwork?.title || 'Artwork'
|
||||
@@ -213,6 +217,12 @@ export default function ArtworkShareModal({ open, onClose, artwork, shareUrl })
|
||||
onClick: () => { window.location.href = emailUrl(url, title); trackShare(artwork?.id, 'email') },
|
||||
className: 'border-white/[0.08] bg-white/[0.04] text-white/70 hover:border-white/[0.15] hover:bg-white/[0.07] hover:text-white',
|
||||
},
|
||||
...(isLoggedIn ? [{
|
||||
label: 'My Profile',
|
||||
icon: <i className="fa-solid fa-share-nodes h-5 w-5 text-[1.1rem]" />,
|
||||
onClick: () => setProfileShareOpen(true),
|
||||
className: 'border-sky-500/30 bg-sky-500/10 text-sky-400 hover:border-sky-400/50 hover:bg-sky-500/20',
|
||||
}] : []),
|
||||
]
|
||||
|
||||
return createPortal(
|
||||
@@ -330,6 +340,26 @@ export default function ArtworkShareModal({ open, onClose, artwork, shareUrl })
|
||||
visible={toastVisible}
|
||||
onHide={() => setToastVisible(false)}
|
||||
/>
|
||||
|
||||
{/* Share to Profile (Feed) modal — lazy loaded */}
|
||||
{profileShareOpen && (
|
||||
<Suspense fallback={null}>
|
||||
<FeedShareArtworkModal
|
||||
isOpen={profileShareOpen}
|
||||
onClose={() => setProfileShareOpen(false)}
|
||||
preselectedArtwork={artwork?.id ? {
|
||||
id: artwork.id,
|
||||
title: artwork.title,
|
||||
thumb_url: artwork.thumbs?.md?.url ?? artwork.thumbs?.lg?.url ?? null,
|
||||
user: artwork.user ?? null,
|
||||
} : null}
|
||||
onShared={() => {
|
||||
setProfileShareOpen(false)
|
||||
showToast('Shared to your profile!')
|
||||
}}
|
||||
/>
|
||||
</Suspense>
|
||||
)}
|
||||
</>,
|
||||
document.body,
|
||||
)
|
||||
|
||||
41
resources/js/components/forum/AuthorBadge.jsx
Normal file
41
resources/js/components/forum/AuthorBadge.jsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import React from 'react'
|
||||
|
||||
const ROLE_STYLES = {
|
||||
admin: 'bg-red-500/15 text-red-300',
|
||||
moderator: 'bg-amber-500/15 text-amber-300',
|
||||
member: 'bg-sky-500/15 text-sky-300',
|
||||
}
|
||||
|
||||
const ROLE_LABELS = {
|
||||
admin: 'Admin',
|
||||
moderator: 'Moderator',
|
||||
member: 'Member',
|
||||
}
|
||||
|
||||
export default function AuthorBadge({ user, size = 'md' }) {
|
||||
const name = user?.name ?? 'Anonymous'
|
||||
const avatar = user?.avatar_url ?? '/default/avatar_default.webp'
|
||||
const role = (user?.role ?? 'member').toLowerCase()
|
||||
const cls = ROLE_STYLES[role] ?? ROLE_STYLES.member
|
||||
const label = ROLE_LABELS[role] ?? 'Member'
|
||||
|
||||
const imgSize = size === 'sm' ? 'h-8 w-8' : 'h-10 w-10'
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
<img
|
||||
src={avatar}
|
||||
alt={`${name} avatar`}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
className={`${imgSize} rounded-full border border-white/10 object-cover`}
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-sm font-semibold text-zinc-100">{name}</div>
|
||||
<span className={`inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium ${cls}`}>
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
30
resources/js/components/forum/Breadcrumbs.jsx
Normal file
30
resources/js/components/forum/Breadcrumbs.jsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function Breadcrumbs({ items = [] }) {
|
||||
return (
|
||||
<nav className="text-sm text-zinc-400" aria-label="Breadcrumb">
|
||||
<ol className="flex flex-wrap items-center gap-1.5">
|
||||
{items.map((item, i) => (
|
||||
<React.Fragment key={i}>
|
||||
{i > 0 && (
|
||||
<li aria-hidden="true" className="text-zinc-600">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="inline-block">
|
||||
<path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</li>
|
||||
)}
|
||||
<li>
|
||||
{item.href ? (
|
||||
<a href={item.href} className="hover:text-zinc-200 transition-colors">
|
||||
{item.label}
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-zinc-200">{item.label}</span>
|
||||
)}
|
||||
</li>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</ol>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
85
resources/js/components/forum/CategoryCard.jsx
Normal file
85
resources/js/components/forum/CategoryCard.jsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function CategoryCard({ category }) {
|
||||
const name = category?.name ?? 'Untitled'
|
||||
const slug = category?.slug
|
||||
const threads = category?.thread_count ?? 0
|
||||
const posts = category?.post_count ?? 0
|
||||
const lastActivity = category?.last_activity_at
|
||||
const preview = category?.preview_image ?? '/images/forum-default.jpg'
|
||||
const href = slug ? `/forum/${slug}` : '#'
|
||||
|
||||
const timeAgo = lastActivity ? formatTimeAgo(lastActivity) : null
|
||||
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
className="group relative block overflow-hidden rounded-2xl border border-white/[0.06] bg-nova-800/50 shadow-xl backdrop-blur transition-all duration-300 hover:border-cyan-400/20 hover:shadow-cyan-500/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400"
|
||||
>
|
||||
{/* Image */}
|
||||
<div className="relative aspect-[16/9]">
|
||||
<img
|
||||
src={preview}
|
||||
alt={`${name} preview`}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
className="h-full w-full object-cover object-center transition-transform duration-500 group-hover:scale-[1.03]"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent" />
|
||||
|
||||
{/* Overlay content */}
|
||||
<div className="absolute inset-x-0 bottom-0 p-5">
|
||||
<div className="mb-2 inline-flex h-8 w-8 items-center justify-center rounded-lg bg-cyan-400/15 text-cyan-300">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-bold text-white leading-snug">{name}</h3>
|
||||
|
||||
{timeAgo && (
|
||||
<p className="mt-1 text-xs text-white/50">
|
||||
Last activity: <span className="text-white/70">{timeAgo}</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="mt-3 flex items-center gap-4 text-sm">
|
||||
<span className="flex items-center gap-1.5 text-cyan-300">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
|
||||
</svg>
|
||||
{number(posts)} posts
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5 text-cyan-300/70">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
|
||||
<polyline points="14 2 14 8 20 8" />
|
||||
</svg>
|
||||
{number(threads)} topics
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
function number(n) {
|
||||
return (n ?? 0).toLocaleString()
|
||||
}
|
||||
|
||||
function formatTimeAgo(dateStr) {
|
||||
try {
|
||||
const date = new Date(dateStr)
|
||||
const now = new Date()
|
||||
const diff = Math.floor((now - date) / 1000)
|
||||
|
||||
if (diff < 60) return 'just now'
|
||||
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
|
||||
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
|
||||
if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`
|
||||
return date.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' })
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
111
resources/js/components/forum/EmojiPicker.jsx
Normal file
111
resources/js/components/forum/EmojiPicker.jsx
Normal file
@@ -0,0 +1,111 @@
|
||||
import React, { useState, useRef, useEffect, useCallback } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import data from '@emoji-mart/data'
|
||||
import Picker from '@emoji-mart/react'
|
||||
|
||||
/**
|
||||
* Emoji picker button for the forum rich-text editor.
|
||||
* Uses the same @emoji-mart/react picker as profile tweets / comments
|
||||
* so the UI is consistent across the whole site.
|
||||
*
|
||||
* The panel is rendered through a React portal so it escapes any
|
||||
* overflow-hidden containers (like the editor wrapper).
|
||||
*/
|
||||
export default function EmojiPicker({ onSelect, editor }) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [panelStyle, setPanelStyle] = useState({})
|
||||
const panelRef = useRef(null)
|
||||
const buttonRef = useRef(null)
|
||||
|
||||
// Position the portal panel relative to the trigger button
|
||||
useEffect(() => {
|
||||
if (!open || !buttonRef.current) return
|
||||
const rect = buttonRef.current.getBoundingClientRect()
|
||||
const panelWidth = 352 // emoji-mart default width
|
||||
const panelHeight = 435 // approximate picker height
|
||||
|
||||
const spaceAbove = rect.top
|
||||
const openAbove = spaceAbove > panelHeight + 8
|
||||
|
||||
setPanelStyle({
|
||||
position: 'fixed',
|
||||
zIndex: 9999,
|
||||
left: Math.max(8, Math.min(rect.right - panelWidth, window.innerWidth - panelWidth - 8)),
|
||||
...(openAbove
|
||||
? { bottom: window.innerHeight - rect.top + 6 }
|
||||
: { top: rect.bottom + 6 }),
|
||||
})
|
||||
}, [open])
|
||||
|
||||
// Close on outside click
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
const handler = (e) => {
|
||||
if (panelRef.current && !panelRef.current.contains(e.target) &&
|
||||
buttonRef.current && !buttonRef.current.contains(e.target)) {
|
||||
setOpen(false)
|
||||
}
|
||||
}
|
||||
document.addEventListener('mousedown', handler)
|
||||
return () => document.removeEventListener('mousedown', handler)
|
||||
}, [open])
|
||||
|
||||
// Close on Escape
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
const handler = (e) => { if (e.key === 'Escape') setOpen(false) }
|
||||
document.addEventListener('keydown', handler)
|
||||
return () => document.removeEventListener('keydown', handler)
|
||||
}, [open])
|
||||
|
||||
const handleSelect = useCallback((emoji) => {
|
||||
const native = emoji.native ?? ''
|
||||
onSelect?.(native)
|
||||
if (editor) {
|
||||
editor.chain().focus().insertContent(native).run()
|
||||
}
|
||||
setOpen(false)
|
||||
}, [onSelect, editor])
|
||||
|
||||
const panel = open ? createPortal(
|
||||
<div
|
||||
ref={panelRef}
|
||||
style={panelStyle}
|
||||
className="rounded-xl shadow-2xl overflow-hidden"
|
||||
>
|
||||
<Picker
|
||||
data={data}
|
||||
onEmojiSelect={handleSelect}
|
||||
theme="dark"
|
||||
previewPosition="none"
|
||||
skinTonePosition="search"
|
||||
maxFrequentRows={2}
|
||||
perLine={9}
|
||||
/>
|
||||
</div>,
|
||||
document.body,
|
||||
) : null
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
ref={buttonRef}
|
||||
type="button"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
title="Insert emoji"
|
||||
aria-label="Open emoji picker"
|
||||
aria-expanded={open}
|
||||
className={[
|
||||
'inline-flex h-8 w-8 items-center justify-center rounded-lg text-sm transition-colors',
|
||||
'focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400',
|
||||
open
|
||||
? 'bg-sky-600/25 text-sky-300'
|
||||
: 'text-zinc-400 hover:bg-white/[0.06] hover:text-zinc-200',
|
||||
].join(' ')}
|
||||
>
|
||||
<span className="text-[15px]">😊</span>
|
||||
</button>
|
||||
{panel}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
76
resources/js/components/forum/MentionList.jsx
Normal file
76
resources/js/components/forum/MentionList.jsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
|
||||
|
||||
/**
|
||||
* Dropdown list rendered by TipTap's mention suggestion.
|
||||
* Receives `items` (user objects) and keyboard nav commands via ref.
|
||||
*/
|
||||
const MentionList = forwardRef(function MentionList({ items, command }, ref) {
|
||||
const [selectedIndex, setSelectedIndex] = useState(0)
|
||||
|
||||
// Reset selection when items change
|
||||
useEffect(() => setSelectedIndex(0), [items])
|
||||
|
||||
// Expose keyboard handler to TipTap suggestion plugin
|
||||
useImperativeHandle(ref, () => ({
|
||||
onKeyDown: ({ event }) => {
|
||||
if (event.key === 'ArrowUp') {
|
||||
setSelectedIndex((i) => (i + items.length - 1) % items.length)
|
||||
return true
|
||||
}
|
||||
if (event.key === 'ArrowDown') {
|
||||
setSelectedIndex((i) => (i + 1) % items.length)
|
||||
return true
|
||||
}
|
||||
if (event.key === 'Enter') {
|
||||
selectItem(selectedIndex)
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
}))
|
||||
|
||||
const selectItem = (index) => {
|
||||
const item = items[index]
|
||||
if (item) {
|
||||
command({ id: item.username, label: item.username })
|
||||
}
|
||||
}
|
||||
|
||||
if (!items.length) {
|
||||
return (
|
||||
<div className="rounded-xl border border-white/[0.08] bg-nova-800 p-3 shadow-xl backdrop-blur">
|
||||
<p className="text-xs text-zinc-500">No users found</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-w-[200px] overflow-hidden rounded-xl border border-white/[0.08] bg-nova-800 shadow-xl backdrop-blur">
|
||||
{items.map((item, index) => (
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
onClick={() => selectItem(index)}
|
||||
className={[
|
||||
'flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm transition-colors',
|
||||
index === selectedIndex
|
||||
? 'bg-sky-600/20 text-white'
|
||||
: 'text-zinc-300 hover:bg-white/[0.04]',
|
||||
].join(' ')}
|
||||
>
|
||||
<img
|
||||
src={item.avatar_url}
|
||||
alt=""
|
||||
className="h-6 w-6 rounded-full border border-white/10 object-cover"
|
||||
/>
|
||||
<span className="truncate font-medium">@{item.username}</span>
|
||||
{item.name && item.name !== item.username && (
|
||||
<span className="truncate text-xs text-zinc-500">{item.name}</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
export default MentionList
|
||||
93
resources/js/components/forum/Pagination.jsx
Normal file
93
resources/js/components/forum/Pagination.jsx
Normal file
@@ -0,0 +1,93 @@
|
||||
import React from 'react'
|
||||
|
||||
/**
|
||||
* Pagination control that mirrors Laravel's paginator shape.
|
||||
* Expects: { current_page, last_page, per_page, total, path } or links array.
|
||||
*/
|
||||
export default function Pagination({ meta, onPageChange }) {
|
||||
const current = meta?.current_page ?? 1
|
||||
const lastPage = meta?.last_page ?? 1
|
||||
|
||||
if (lastPage <= 1) return null
|
||||
|
||||
const pages = buildPages(current, lastPage)
|
||||
|
||||
const go = (page) => {
|
||||
if (page < 1 || page > lastPage || page === current) return
|
||||
if (onPageChange) {
|
||||
onPageChange(page)
|
||||
} else {
|
||||
// Fallback: navigate via URL
|
||||
const url = new URL(window.location.href)
|
||||
url.searchParams.set('page', page)
|
||||
window.location.href = url.toString()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<nav aria-label="Pagination" className="flex items-center justify-center gap-1.5">
|
||||
{/* Prev */}
|
||||
<button
|
||||
onClick={() => go(current - 1)}
|
||||
disabled={current <= 1}
|
||||
className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-white/10 text-zinc-400 transition-colors hover:border-white/20 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
aria-label="Previous page"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M10 4L6 8l4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{pages.map((p, i) =>
|
||||
p === '...' ? (
|
||||
<span key={`dots-${i}`} className="px-1 text-xs text-zinc-600">…</span>
|
||||
) : (
|
||||
<button
|
||||
key={p}
|
||||
onClick={() => go(p)}
|
||||
aria-current={p === current ? 'page' : undefined}
|
||||
className={[
|
||||
'inline-flex h-9 min-w-[2.25rem] items-center justify-center rounded-xl text-sm font-medium transition-colors',
|
||||
p === current
|
||||
? 'bg-sky-600/20 text-sky-300 border border-sky-500/30'
|
||||
: 'border border-white/10 text-zinc-400 hover:border-white/20 hover:text-white',
|
||||
].join(' ')}
|
||||
>
|
||||
{p}
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
|
||||
{/* Next */}
|
||||
<button
|
||||
onClick={() => go(current + 1)}
|
||||
disabled={current >= lastPage}
|
||||
className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-white/10 text-zinc-400 transition-colors hover:border-white/20 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
aria-label="Next page"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
/** Build a compact page-number array with ellipsis. */
|
||||
function buildPages(current, last) {
|
||||
if (last <= 7) {
|
||||
return Array.from({ length: last }, (_, i) => i + 1)
|
||||
}
|
||||
|
||||
const pages = new Set([1, 2, current - 1, current, current + 1, last - 1, last])
|
||||
const sorted = [...pages].filter(p => p >= 1 && p <= last).sort((a, b) => a - b)
|
||||
|
||||
const result = []
|
||||
for (let i = 0; i < sorted.length; i++) {
|
||||
if (i > 0 && sorted[i] - sorted[i - 1] > 1) {
|
||||
result.push('...')
|
||||
}
|
||||
result.push(sorted[i])
|
||||
}
|
||||
return result
|
||||
}
|
||||
192
resources/js/components/forum/PostCard.jsx
Normal file
192
resources/js/components/forum/PostCard.jsx
Normal file
@@ -0,0 +1,192 @@
|
||||
import React, { useState } from 'react'
|
||||
import AuthorBadge from './AuthorBadge'
|
||||
|
||||
export default function PostCard({ post, thread, isOp = false, isAuthenticated = false, canModerate = false }) {
|
||||
const [reported, setReported] = useState(false)
|
||||
const [reporting, setReporting] = useState(false)
|
||||
|
||||
const author = post?.user
|
||||
const content = post?.rendered_content ?? post?.content ?? ''
|
||||
const postedAt = post?.created_at
|
||||
const editedAt = post?.edited_at
|
||||
const isEdited = post?.is_edited
|
||||
const postId = post?.id
|
||||
const threadId = thread?.id
|
||||
const threadSlug = thread?.slug
|
||||
|
||||
const handleReport = async () => {
|
||||
if (reporting || reported) return
|
||||
setReporting(true)
|
||||
try {
|
||||
const res = await fetch(`/forum/post/${postId}/report`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': getCsrf(),
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
credentials: 'same-origin',
|
||||
})
|
||||
if (res.ok) setReported(true)
|
||||
} catch { /* silent */ }
|
||||
setReporting(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<article
|
||||
id={`post-${postId}`}
|
||||
className="overflow-hidden rounded-2xl border border-white/[0.06] bg-nova-800/50 backdrop-blur transition-all hover:border-white/10"
|
||||
>
|
||||
{/* Header */}
|
||||
<header className="flex flex-col gap-3 border-b border-white/[0.06] px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<AuthorBadge user={author} />
|
||||
<div className="flex items-center gap-2 text-xs text-zinc-500">
|
||||
{postedAt && (
|
||||
<time dateTime={postedAt}>
|
||||
{formatDate(postedAt)}
|
||||
</time>
|
||||
)}
|
||||
{isOp && (
|
||||
<span className="rounded-full bg-cyan-500/15 px-2.5 py-0.5 text-[11px] font-medium text-cyan-300">
|
||||
OP
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Body */}
|
||||
<div className="px-5 py-5">
|
||||
<div
|
||||
className="prose prose-invert max-w-none text-sm leading-relaxed prose-pre:overflow-x-auto prose-a:text-sky-300 prose-a:hover:text-sky-200"
|
||||
dangerouslySetInnerHTML={{ __html: content }}
|
||||
/>
|
||||
|
||||
{isEdited && editedAt && (
|
||||
<p className="mt-3 text-xs text-zinc-600">
|
||||
Edited {formatTimeAgo(editedAt)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Attachments */}
|
||||
{post?.attachments?.length > 0 && (
|
||||
<div className="mt-5 space-y-3 border-t border-white/[0.06] pt-4">
|
||||
<h4 className="text-xs font-semibold uppercase tracking-widest text-white/30">Attachments</h4>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
{post.attachments.map((att) => (
|
||||
<AttachmentItem key={att.id} attachment={att} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="flex flex-wrap items-center gap-3 border-t border-white/[0.06] px-5 py-3 text-xs">
|
||||
{/* Quote */}
|
||||
{threadId && (
|
||||
<a
|
||||
href={`/forum/thread/${threadId}-${threadSlug ?? ''}?quote=${postId}#reply-content`}
|
||||
className="rounded-lg border border-white/10 px-2.5 py-1 text-zinc-400 transition-colors hover:border-white/20 hover:text-zinc-200"
|
||||
>
|
||||
Quote
|
||||
</a>
|
||||
)}
|
||||
|
||||
{/* Report */}
|
||||
{isAuthenticated && (post?.user_id !== post?.current_user_id) && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleReport}
|
||||
disabled={reported || reporting}
|
||||
className={[
|
||||
'rounded-lg border border-white/10 px-2.5 py-1 transition-colors',
|
||||
reported
|
||||
? 'text-emerald-400 border-emerald-500/20 cursor-default'
|
||||
: 'text-zinc-400 hover:border-white/20 hover:text-zinc-200',
|
||||
].join(' ')}
|
||||
>
|
||||
{reported ? 'Reported ✓' : reporting ? 'Reporting…' : 'Report'}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Edit */}
|
||||
{(post?.can_edit) && (
|
||||
<a
|
||||
href={`/forum/post/${postId}/edit`}
|
||||
className="rounded-lg border border-white/10 px-2.5 py-1 text-zinc-400 transition-colors hover:border-white/20 hover:text-zinc-200"
|
||||
>
|
||||
Edit
|
||||
</a>
|
||||
)}
|
||||
|
||||
{canModerate && (
|
||||
<span className="ml-auto text-[11px] text-amber-400/60">Mod</span>
|
||||
)}
|
||||
</footer>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
||||
function AttachmentItem({ attachment }) {
|
||||
const mime = attachment?.mime_type ?? ''
|
||||
const isImage = mime.startsWith('image/')
|
||||
const url = attachment?.url ?? '#'
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-xl border border-white/[0.06] bg-slate-900/60">
|
||||
{isImage ? (
|
||||
<a href={url} target="_blank" rel="noopener noreferrer" className="block">
|
||||
<img
|
||||
src={url}
|
||||
alt="Attachment"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
className="h-40 w-full object-cover transition-transform hover:scale-[1.02]"
|
||||
/>
|
||||
</a>
|
||||
) : (
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-3 p-3 text-sm text-sky-300 hover:text-sky-200"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
|
||||
<polyline points="14 2 14 8 20 8" />
|
||||
</svg>
|
||||
Download attachment
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function getCsrf() {
|
||||
return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? ''
|
||||
}
|
||||
|
||||
function formatDate(dateStr) {
|
||||
try {
|
||||
const d = new Date(dateStr)
|
||||
return d.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' })
|
||||
+ ' ' + d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
function formatTimeAgo(dateStr) {
|
||||
try {
|
||||
const now = new Date()
|
||||
const date = new Date(dateStr)
|
||||
const diff = Math.floor((now - date) / 1000)
|
||||
if (diff < 60) return 'just now'
|
||||
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
|
||||
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
|
||||
if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`
|
||||
return formatDate(dateStr)
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
82
resources/js/components/forum/ReplyForm.jsx
Normal file
82
resources/js/components/forum/ReplyForm.jsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import React, { useState, useRef, useCallback } from 'react'
|
||||
import Button from '../ui/Button'
|
||||
import RichTextEditor from './RichTextEditor'
|
||||
|
||||
export default function ReplyForm({ threadId, prefill = '', quotedAuthor = null, csrfToken }) {
|
||||
const [content, setContent] = useState(prefill)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [error, setError] = useState(null)
|
||||
const formRef = useRef(null)
|
||||
|
||||
const handleSubmit = useCallback(async (e) => {
|
||||
e.preventDefault()
|
||||
if (submitting || content.trim().length < 2) return
|
||||
|
||||
setSubmitting(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const res = await fetch(`/forum/thread/${threadId}/reply`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': csrfToken,
|
||||
'Accept': 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
},
|
||||
credentials: 'same-origin',
|
||||
body: JSON.stringify({ content: content.trim() }),
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
// Reload page to show new reply
|
||||
window.location.reload()
|
||||
} else if (res.status === 422) {
|
||||
const json = await res.json()
|
||||
setError(json.errors?.content?.[0] ?? 'Validation error.')
|
||||
} else {
|
||||
setError('Failed to post reply. Please try again.')
|
||||
}
|
||||
} catch {
|
||||
setError('Network error. Please try again.')
|
||||
}
|
||||
|
||||
setSubmitting(false)
|
||||
}, [content, threadId, csrfToken, submitting])
|
||||
|
||||
return (
|
||||
<form
|
||||
ref={formRef}
|
||||
onSubmit={handleSubmit}
|
||||
className="space-y-4 rounded-2xl border border-white/[0.06] bg-nova-800/50 p-5 backdrop-blur"
|
||||
>
|
||||
{quotedAuthor && (
|
||||
<p className="text-xs text-cyan-400/70">
|
||||
Replying with quote from <strong className="text-cyan-300">{quotedAuthor}</strong>
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Rich text editor */}
|
||||
<RichTextEditor
|
||||
content={content}
|
||||
onChange={setContent}
|
||||
placeholder="Write your reply…"
|
||||
error={error}
|
||||
minHeight={10}
|
||||
/>
|
||||
|
||||
{/* Submit */}
|
||||
<div className="flex items-center justify-end">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
size="md"
|
||||
loading={submitting}
|
||||
disabled={content.trim().length < 2}
|
||||
>
|
||||
Post reply
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
316
resources/js/components/forum/RichTextEditor.jsx
Normal file
316
resources/js/components/forum/RichTextEditor.jsx
Normal file
@@ -0,0 +1,316 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react'
|
||||
import { useEditor, EditorContent } from '@tiptap/react'
|
||||
import StarterKit from '@tiptap/starter-kit'
|
||||
import Link from '@tiptap/extension-link'
|
||||
import Image from '@tiptap/extension-image'
|
||||
import Placeholder from '@tiptap/extension-placeholder'
|
||||
import Underline from '@tiptap/extension-underline'
|
||||
import Mention from '@tiptap/extension-mention'
|
||||
import mentionSuggestion from './mentionSuggestion'
|
||||
import EmojiPicker from './EmojiPicker'
|
||||
|
||||
/* ─── Toolbar button ─── */
|
||||
function ToolbarBtn({ onClick, active, disabled, title, children }) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
title={title}
|
||||
className={[
|
||||
'inline-flex h-8 w-8 items-center justify-center rounded-lg text-sm transition-colors',
|
||||
'focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400',
|
||||
active
|
||||
? 'bg-sky-600/25 text-sky-300'
|
||||
: 'text-zinc-400 hover:bg-white/[0.06] hover:text-zinc-200',
|
||||
disabled && 'opacity-30 pointer-events-none',
|
||||
].filter(Boolean).join(' ')}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <div className="mx-1 h-5 w-px bg-white/10" />
|
||||
}
|
||||
|
||||
/* ─── Toolbar ─── */
|
||||
function Toolbar({ editor }) {
|
||||
if (!editor) return null
|
||||
|
||||
const addLink = useCallback(() => {
|
||||
const prev = editor.getAttributes('link').href
|
||||
const url = window.prompt('URL', prev ?? 'https://')
|
||||
if (url === null) return
|
||||
if (url === '') {
|
||||
editor.chain().focus().extendMarkRange('link').unsetLink().run()
|
||||
} else {
|
||||
editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
|
||||
}
|
||||
}, [editor])
|
||||
|
||||
const addImage = useCallback(() => {
|
||||
const url = window.prompt('Image URL', 'https://')
|
||||
if (url) {
|
||||
editor.chain().focus().setImage({ src: url }).run()
|
||||
}
|
||||
}, [editor])
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-0.5 border-b border-white/[0.06] px-2.5 py-2">
|
||||
{/* Text formatting */}
|
||||
<ToolbarBtn
|
||||
onClick={() => editor.chain().focus().toggleBold().run()}
|
||||
active={editor.isActive('bold')}
|
||||
title="Bold (Ctrl+B)"
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M6 4h8a4 4 0 014 4 4 4 0 01-4 4H6zm0 8h9a4 4 0 014 4 4 4 0 01-4 4H6z"/></svg>
|
||||
</ToolbarBtn>
|
||||
|
||||
<ToolbarBtn
|
||||
onClick={() => editor.chain().focus().toggleItalic().run()}
|
||||
active={editor.isActive('italic')}
|
||||
title="Italic (Ctrl+I)"
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg>
|
||||
</ToolbarBtn>
|
||||
|
||||
<ToolbarBtn
|
||||
onClick={() => editor.chain().focus().toggleUnderline().run()}
|
||||
active={editor.isActive('underline')}
|
||||
title="Underline (Ctrl+U)"
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 3v7a6 6 0 006 6 6 6 0 006-6V3"/><line x1="4" y1="21" x2="20" y2="21"/></svg>
|
||||
</ToolbarBtn>
|
||||
|
||||
<ToolbarBtn
|
||||
onClick={() => editor.chain().focus().toggleStrike().run()}
|
||||
active={editor.isActive('strike')}
|
||||
title="Strikethrough"
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="4" y1="12" x2="20" y2="12"/><path d="M17.5 7.5c0-2-1.5-3.5-5.5-3.5S6.5 5.5 6.5 7.5c0 4 11 4 11 8 0 2-1.5 3.5-5.5 3.5s-5.5-1.5-5.5-3.5"/></svg>
|
||||
</ToolbarBtn>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* Headings */}
|
||||
<ToolbarBtn
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
|
||||
active={editor.isActive('heading', { level: 2 })}
|
||||
title="Heading 2"
|
||||
>
|
||||
<span className="text-xs font-bold">H2</span>
|
||||
</ToolbarBtn>
|
||||
|
||||
<ToolbarBtn
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
|
||||
active={editor.isActive('heading', { level: 3 })}
|
||||
title="Heading 3"
|
||||
>
|
||||
<span className="text-xs font-bold">H3</span>
|
||||
</ToolbarBtn>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* Lists */}
|
||||
<ToolbarBtn
|
||||
onClick={() => editor.chain().focus().toggleBulletList().run()}
|
||||
active={editor.isActive('bulletList')}
|
||||
title="Bullet list"
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/><line x1="9" y1="18" x2="20" y2="18"/><circle cx="4.5" cy="6" r="1" fill="currentColor"/><circle cx="4.5" cy="12" r="1" fill="currentColor"/><circle cx="4.5" cy="18" r="1" fill="currentColor"/></svg>
|
||||
</ToolbarBtn>
|
||||
|
||||
<ToolbarBtn
|
||||
onClick={() => editor.chain().focus().toggleOrderedList().run()}
|
||||
active={editor.isActive('orderedList')}
|
||||
title="Numbered list"
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><text x="3" y="8" fontSize="7" fill="currentColor" stroke="none" fontFamily="sans-serif">1</text><text x="3" y="14" fontSize="7" fill="currentColor" stroke="none" fontFamily="sans-serif">2</text><text x="3" y="20" fontSize="7" fill="currentColor" stroke="none" fontFamily="sans-serif">3</text></svg>
|
||||
</ToolbarBtn>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* Block elements */}
|
||||
<ToolbarBtn
|
||||
onClick={() => editor.chain().focus().toggleBlockquote().run()}
|
||||
active={editor.isActive('blockquote')}
|
||||
title="Quote"
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311C9.591 11.68 11 13.24 11 15.14c0 .94-.36 1.84-1.001 2.503A3.34 3.34 0 017.559 18.6a3.77 3.77 0 01-2.976-.879zm10.4 0C13.953 16.227 13.4 15 13.4 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.986.169 3.395 1.729 3.395 3.629 0 .94-.36 1.84-1.001 2.503a3.34 3.34 0 01-2.44.957 3.77 3.77 0 01-2.976-.879z"/></svg>
|
||||
</ToolbarBtn>
|
||||
|
||||
<ToolbarBtn
|
||||
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
|
||||
active={editor.isActive('codeBlock')}
|
||||
title="Code block"
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
||||
</ToolbarBtn>
|
||||
|
||||
<ToolbarBtn
|
||||
onClick={() => editor.chain().focus().toggleCode().run()}
|
||||
active={editor.isActive('code')}
|
||||
title="Inline code"
|
||||
>
|
||||
<span className="font-mono text-[11px] font-bold">{'{}'}</span>
|
||||
</ToolbarBtn>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* Link & Image */}
|
||||
<ToolbarBtn
|
||||
onClick={addLink}
|
||||
active={editor.isActive('link')}
|
||||
title="Link"
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>
|
||||
</ToolbarBtn>
|
||||
|
||||
<ToolbarBtn onClick={addImage} title="Insert image">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
|
||||
</ToolbarBtn>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* Horizontal rule */}
|
||||
<ToolbarBtn
|
||||
onClick={() => editor.chain().focus().setHorizontalRule().run()}
|
||||
title="Horizontal rule"
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="3" y1="12" x2="21" y2="12"/></svg>
|
||||
</ToolbarBtn>
|
||||
|
||||
{/* Emoji picker */}
|
||||
<EmojiPicker editor={editor} />
|
||||
|
||||
{/* Mention hint */}
|
||||
<ToolbarBtn
|
||||
onClick={() => editor.chain().focus().insertContent('@').run()}
|
||||
title="Mention a user (type @username)"
|
||||
>
|
||||
<span className="text-xs font-bold">@</span>
|
||||
</ToolbarBtn>
|
||||
|
||||
{/* Undo / Redo */}
|
||||
<div className="ml-auto flex items-center gap-0.5">
|
||||
<ToolbarBtn
|
||||
onClick={() => editor.chain().focus().undo().run()}
|
||||
disabled={!editor.can().undo()}
|
||||
title="Undo (Ctrl+Z)"
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 102.13-9.36L1 10"/></svg>
|
||||
</ToolbarBtn>
|
||||
|
||||
<ToolbarBtn
|
||||
onClick={() => editor.chain().focus().redo().run()}
|
||||
disabled={!editor.can().redo()}
|
||||
title="Redo (Ctrl+Shift+Z)"
|
||||
>
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.13-9.36L23 10"/></svg>
|
||||
</ToolbarBtn>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/* ─── Main editor component ─── */
|
||||
|
||||
/**
|
||||
* Rich text editor for forum posts & replies.
|
||||
*
|
||||
* @prop {string} content – initial HTML content
|
||||
* @prop {function} onChange – called with HTML string on every change
|
||||
* @prop {string} placeholder – placeholder text
|
||||
* @prop {string} error – validation error message
|
||||
* @prop {number} minHeight – min height in rem (default 12)
|
||||
* @prop {boolean} autofocus – focus on mount
|
||||
*/
|
||||
export default function RichTextEditor({
|
||||
content = '',
|
||||
onChange,
|
||||
placeholder = 'Write something…',
|
||||
error,
|
||||
minHeight = 12,
|
||||
autofocus = false,
|
||||
}) {
|
||||
const editor = useEditor({
|
||||
extensions: [
|
||||
StarterKit.configure({
|
||||
heading: { levels: [2, 3] },
|
||||
codeBlock: {
|
||||
HTMLAttributes: { class: 'forum-code-block' },
|
||||
},
|
||||
}),
|
||||
Underline,
|
||||
Link.configure({
|
||||
openOnClick: false,
|
||||
HTMLAttributes: {
|
||||
class: 'text-sky-300 underline hover:text-sky-200',
|
||||
rel: 'noopener noreferrer nofollow',
|
||||
},
|
||||
}),
|
||||
Image.configure({
|
||||
HTMLAttributes: { class: 'rounded-lg max-w-full' },
|
||||
}),
|
||||
Placeholder.configure({ placeholder }),
|
||||
Mention.configure({
|
||||
HTMLAttributes: {
|
||||
class: 'mention',
|
||||
},
|
||||
suggestion: mentionSuggestion,
|
||||
}),
|
||||
],
|
||||
content,
|
||||
autofocus,
|
||||
editorProps: {
|
||||
attributes: {
|
||||
class: [
|
||||
'prose prose-invert prose-sm max-w-none',
|
||||
'focus:outline-none',
|
||||
'px-4 py-3',
|
||||
'prose-headings:text-white prose-headings:font-bold',
|
||||
'prose-p:text-zinc-200 prose-p:leading-relaxed',
|
||||
'prose-a:text-sky-300 prose-a:no-underline hover:prose-a:text-sky-200',
|
||||
'prose-blockquote:border-l-sky-500/50 prose-blockquote:text-zinc-400',
|
||||
'prose-code:text-amber-300 prose-code:bg-white/[0.06] prose-code:rounded prose-code:px-1.5 prose-code:py-0.5 prose-code:text-xs',
|
||||
'prose-pre:bg-white/[0.04] prose-pre:border prose-pre:border-white/[0.06] prose-pre:rounded-xl',
|
||||
'prose-img:rounded-xl',
|
||||
'prose-hr:border-white/10',
|
||||
].join(' '),
|
||||
style: `min-height: ${minHeight}rem`,
|
||||
},
|
||||
},
|
||||
onUpdate: ({ editor: e }) => {
|
||||
onChange?.(e.getHTML())
|
||||
},
|
||||
})
|
||||
|
||||
// Sync content from outside (e.g. prefill / quote)
|
||||
useEffect(() => {
|
||||
if (editor && content && !editor.getHTML().includes(content.slice(0, 30))) {
|
||||
editor.commands.setContent(content, false)
|
||||
}
|
||||
}, [content]) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div
|
||||
className={[
|
||||
'overflow-hidden rounded-xl border bg-white/[0.04] transition-colors',
|
||||
error
|
||||
? 'border-red-500/60 focus-within:border-red-500/70 focus-within:ring-2 focus-within:ring-red-500/30'
|
||||
: 'border-white/12 hover:border-white/20 focus-within:border-sky-500/50 focus-within:ring-2 focus-within:ring-sky-500/20',
|
||||
].join(' ')}
|
||||
>
|
||||
<Toolbar editor={editor} />
|
||||
<EditorContent editor={editor} />
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p role="alert" className="text-xs text-red-400">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
116
resources/js/components/forum/ThreadRow.jsx
Normal file
116
resources/js/components/forum/ThreadRow.jsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function ThreadRow({ thread, isFirst = false }) {
|
||||
const id = thread?.topic_id ?? thread?.id ?? 0
|
||||
const title = thread?.topic ?? thread?.title ?? 'Untitled'
|
||||
const slug = thread?.slug ?? slugify(title)
|
||||
const excerpt = thread?.discuss ?? ''
|
||||
const posts = thread?.num_posts ?? 0
|
||||
const author = thread?.uname ?? 'Unknown'
|
||||
const lastUpdate = thread?.last_update ?? thread?.post_date
|
||||
const isPinned = thread?.is_pinned ?? false
|
||||
|
||||
const href = `/forum/thread/${id}-${slug}`
|
||||
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
className={[
|
||||
'group flex items-start gap-4 px-5 py-4 transition-colors hover:bg-white/[0.03]',
|
||||
!isFirst && 'border-t border-white/[0.06]',
|
||||
].filter(Boolean).join(' ')}
|
||||
>
|
||||
{/* Icon */}
|
||||
<div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-sky-500/10 text-sky-400 group-hover:bg-sky-500/15 transition-colors">
|
||||
{isPinned ? (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="truncate text-sm font-semibold text-white group-hover:text-sky-300 transition-colors">
|
||||
{title}
|
||||
</h3>
|
||||
{isPinned && (
|
||||
<span className="shrink-0 rounded-full bg-amber-500/15 px-2 py-0.5 text-[10px] font-medium text-amber-300">
|
||||
Pinned
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{excerpt && (
|
||||
<p className="mt-0.5 truncate text-xs text-white/40">
|
||||
{stripHtml(excerpt).slice(0, 180)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="mt-1.5 flex flex-wrap items-center gap-3 text-xs text-white/35">
|
||||
<span className="flex items-center gap-1">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
{author}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
|
||||
</svg>
|
||||
{posts} {posts === 1 ? 'reply' : 'replies'}
|
||||
</span>
|
||||
{lastUpdate && (
|
||||
<span className="flex items-center gap-1">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<polyline points="12 6 12 12 16 14" />
|
||||
</svg>
|
||||
{formatDate(lastUpdate)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reply count badge */}
|
||||
<div className="mt-1 shrink-0">
|
||||
<span className="inline-flex min-w-[2rem] items-center justify-center rounded-full bg-white/[0.06] px-2.5 py-1 text-xs font-medium text-white/60">
|
||||
{posts}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
function slugify(text) {
|
||||
return (text ?? '')
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, '-')
|
||||
.replace(/(^-|-$)/g, '')
|
||||
.slice(0, 80)
|
||||
}
|
||||
|
||||
function stripHtml(html) {
|
||||
if (typeof document !== 'undefined') {
|
||||
const div = document.createElement('div')
|
||||
div.innerHTML = html
|
||||
return div.textContent || div.innerText || ''
|
||||
}
|
||||
return html.replace(/<[^>]*>/g, '')
|
||||
}
|
||||
|
||||
function formatDate(dateStr) {
|
||||
try {
|
||||
const d = new Date(dateStr)
|
||||
return d.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' })
|
||||
+ ' ' + d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })
|
||||
} catch {
|
||||
return '-'
|
||||
}
|
||||
}
|
||||
74
resources/js/components/forum/mentionSuggestion.js
Normal file
74
resources/js/components/forum/mentionSuggestion.js
Normal file
@@ -0,0 +1,74 @@
|
||||
import { ReactRenderer } from '@tiptap/react'
|
||||
import tippy from 'tippy.js'
|
||||
import MentionList from './MentionList'
|
||||
|
||||
/**
|
||||
* TipTap suggestion configuration for @mentions.
|
||||
* Fetches users from /api/search/users?q=... as the user types.
|
||||
*/
|
||||
export default {
|
||||
items: async ({ query }) => {
|
||||
if (!query || query.length < 2) return []
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/search/users?q=${encodeURIComponent(query)}&per_page=6`)
|
||||
if (!res.ok) return []
|
||||
const json = await res.json()
|
||||
return json.data ?? []
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
},
|
||||
|
||||
render: () => {
|
||||
let component
|
||||
let popup
|
||||
|
||||
return {
|
||||
onStart: (props) => {
|
||||
component = new ReactRenderer(MentionList, {
|
||||
props,
|
||||
editor: props.editor,
|
||||
})
|
||||
|
||||
if (!props.clientRect) return
|
||||
|
||||
popup = tippy('body', {
|
||||
getReferenceClientRect: props.clientRect,
|
||||
appendTo: () => document.body,
|
||||
content: component.element,
|
||||
showOnCreate: true,
|
||||
interactive: true,
|
||||
trigger: 'manual',
|
||||
placement: 'bottom-start',
|
||||
theme: 'mention',
|
||||
arrow: false,
|
||||
offset: [0, 8],
|
||||
})
|
||||
},
|
||||
|
||||
onUpdate: (props) => {
|
||||
component?.updateProps(props)
|
||||
|
||||
if (!props.clientRect) return
|
||||
|
||||
popup?.[0]?.setProps({
|
||||
getReferenceClientRect: props.clientRect,
|
||||
})
|
||||
},
|
||||
|
||||
onKeyDown: (props) => {
|
||||
if (props.event.key === 'Escape') {
|
||||
popup?.[0]?.hide()
|
||||
return true
|
||||
}
|
||||
return component?.ref?.onKeyDown(props) ?? false
|
||||
},
|
||||
|
||||
onExit: () => {
|
||||
popup?.[0]?.destroy()
|
||||
component?.destroy()
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
@@ -151,7 +151,7 @@ export default function MessageBubble({ message, isMine, showAvatar, onReact, on
|
||||
unwrapDisallowed
|
||||
components={{
|
||||
a: ({ href, children }) => (
|
||||
<a href={href} target="_blank" rel="noopener noreferrer"
|
||||
<a href={href} target="_blank" rel="noopener noreferrer nofollow"
|
||||
className={isMine ? 'text-blue-200 underline' : 'text-blue-600 dark:text-blue-400 underline'}>
|
||||
{children}
|
||||
</a>
|
||||
|
||||
197
resources/js/components/profile/ProfileHero.jsx
Normal file
197
resources/js/components/profile/ProfileHero.jsx
Normal file
@@ -0,0 +1,197 @@
|
||||
import React, { useState } from 'react'
|
||||
import { router } from '@inertiajs/react'
|
||||
|
||||
/**
|
||||
* ProfileHero
|
||||
* Cover banner + avatar + identity block + action buttons
|
||||
*/
|
||||
export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing, followerCount, heroBgUrl, countryName }) {
|
||||
const [following, setFollowing] = useState(viewerIsFollowing)
|
||||
const [count, setCount] = useState(followerCount)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [hovering, setHovering] = useState(false)
|
||||
|
||||
const uname = user.username || user.name || 'Unknown'
|
||||
const displayName = user.name || uname
|
||||
|
||||
const joinDate = user.created_at
|
||||
? new Date(user.created_at).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
|
||||
: null
|
||||
|
||||
const toggleFollow = async () => {
|
||||
if (loading) return
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await fetch(`/@${uname.toLowerCase()}/follow`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
})
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setFollowing(data.following)
|
||||
setCount(data.follower_count)
|
||||
}
|
||||
} catch (_) {}
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative overflow-hidden border-b border-white/10">
|
||||
{/* Cover / hero background */}
|
||||
<div
|
||||
className="w-full"
|
||||
style={{
|
||||
height: 'clamp(160px, 22vw, 260px)',
|
||||
background: heroBgUrl
|
||||
? `url('${heroBgUrl}') center/cover no-repeat`
|
||||
: 'linear-gradient(135deg, #0f1724 0%, #151e2e 50%, #090f1a 100%)',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{/* Overlay */}
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background: heroBgUrl
|
||||
? 'linear-gradient(to right, rgba(15,23,36,0.95) 0%, rgba(15,23,36,0.75) 50%, rgba(15,23,36,0.45) 100%)'
|
||||
: 'radial-gradient(ellipse at 20% 50%, rgba(77,163,255,.12) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(224,122,33,.08) 0%, transparent 50%)',
|
||||
}}
|
||||
/>
|
||||
{/* Nebula grain decoration */}
|
||||
<div className="absolute inset-0 opacity-[0.06] pointer-events-none" style={{ backgroundImage: 'url(/gfx/noise.png)', backgroundSize: '32px' }} />
|
||||
</div>
|
||||
|
||||
{/* Identity block – overlaps cover at bottom */}
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="relative -mt-16 pb-5 flex flex-col sm:flex-row sm:items-end gap-4">
|
||||
|
||||
{/* Avatar */}
|
||||
<div className="shrink-0 z-10">
|
||||
<img
|
||||
src={user.avatar_url || '/default/avatar_default.webp'}
|
||||
alt={`${uname}'s avatar`}
|
||||
className="w-24 h-24 sm:w-28 sm:h-28 rounded-2xl object-cover ring-4 ring-[#0f1724] shadow-xl shadow-black/60"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Name + meta */}
|
||||
<div className="flex-1 min-w-0 pb-1">
|
||||
<h1 className="text-2xl sm:text-3xl font-bold text-white leading-tight">
|
||||
{displayName}
|
||||
</h1>
|
||||
<p className="text-slate-400 text-sm mt-0.5 font-mono">@{uname}</p>
|
||||
<div className="flex flex-wrap items-center gap-3 mt-2 text-xs text-slate-500">
|
||||
{countryName && (
|
||||
<span className="flex items-center gap-1.5">
|
||||
{profile?.country_code && (
|
||||
<img
|
||||
src={`/gfx/flags/shiny/24/${encodeURIComponent(profile.country_code)}.png`}
|
||||
alt={countryName}
|
||||
className="w-4 h-auto rounded-sm"
|
||||
onError={(e) => { e.target.style.display = 'none' }}
|
||||
/>
|
||||
)}
|
||||
{countryName}
|
||||
</span>
|
||||
)}
|
||||
{joinDate && (
|
||||
<span className="flex items-center gap-1">
|
||||
<i className="fa-solid fa-calendar-days fa-fw opacity-60" />
|
||||
Joined {joinDate}
|
||||
</span>
|
||||
)}
|
||||
{profile?.website && (
|
||||
<a
|
||||
href={profile.website.startsWith('http') ? profile.website : `https://${profile.website}`}
|
||||
target="_blank"
|
||||
rel="nofollow noopener noreferrer"
|
||||
className="flex items-center gap-1 text-sky-400 hover:text-sky-300 transition-colors"
|
||||
>
|
||||
<i className="fa-solid fa-link fa-fw" />
|
||||
{(() => {
|
||||
try {
|
||||
const url = profile.website.startsWith('http') ? profile.website : `https://${profile.website}`
|
||||
return new URL(url).hostname
|
||||
} catch {
|
||||
return profile.website
|
||||
}
|
||||
})()}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action buttons */}
|
||||
<div className="shrink-0 flex items-center gap-2 pb-1">
|
||||
{isOwner ? (
|
||||
<>
|
||||
<a
|
||||
href="/dashboard/profile"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium border border-white/15 text-slate-300 hover:text-white hover:bg-white/5 transition-all"
|
||||
aria-label="Edit profile"
|
||||
>
|
||||
<i className="fa-solid fa-pen fa-fw" />
|
||||
<span className="hidden sm:inline">Edit Profile</span>
|
||||
</a>
|
||||
<a
|
||||
href="/studio"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium bg-sky-600 hover:bg-sky-500 text-white transition-all shadow-lg shadow-sky-900/30"
|
||||
aria-label="Open Studio"
|
||||
>
|
||||
<i className="fa-solid fa-wand-magic-sparkles fa-fw" />
|
||||
<span className="hidden sm:inline">Studio</span>
|
||||
</a>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Follow button */}
|
||||
<button
|
||||
onClick={toggleFollow}
|
||||
onMouseEnter={() => setHovering(true)}
|
||||
onMouseLeave={() => setHovering(false)}
|
||||
disabled={loading}
|
||||
aria-label={following ? 'Unfollow' : 'Follow'}
|
||||
className={`inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium border transition-all ${
|
||||
following
|
||||
? hovering
|
||||
? 'bg-red-500/10 border-red-400/40 text-red-400'
|
||||
: 'bg-green-500/10 border-green-400/40 text-green-400'
|
||||
: 'bg-sky-500/10 border-sky-400/40 text-sky-400 hover:bg-sky-500/20'
|
||||
}`}
|
||||
>
|
||||
<i className={`fa-solid fa-fw ${
|
||||
loading
|
||||
? 'fa-circle-notch fa-spin'
|
||||
: following
|
||||
? hovering ? 'fa-user-minus' : 'fa-user-check'
|
||||
: 'fa-user-plus'
|
||||
}`} />
|
||||
<span>{following ? (hovering ? 'Unfollow' : 'Following') : 'Follow'}</span>
|
||||
<span className="text-xs opacity-60">({count.toLocaleString()})</span>
|
||||
</button>
|
||||
{/* Share */}
|
||||
<button
|
||||
onClick={() => {
|
||||
if (navigator.share) {
|
||||
navigator.share({ title: `${displayName} on Skinbase`, url: window.location.href })
|
||||
} else {
|
||||
navigator.clipboard.writeText(window.location.href)
|
||||
}
|
||||
}}
|
||||
aria-label="Share profile"
|
||||
className="p-2.5 rounded-xl border border-white/10 text-slate-400 hover:text-white hover:bg-white/5 transition-all"
|
||||
>
|
||||
<i className="fa-solid fa-share-nodes fa-fw" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
57
resources/js/components/profile/ProfileStatsRow.jsx
Normal file
57
resources/js/components/profile/ProfileStatsRow.jsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import React from 'react'
|
||||
|
||||
const PILLS = [
|
||||
{ key: 'uploads_count', label: 'Artworks', icon: 'fa-images', tab: 'artworks' },
|
||||
{ key: 'downloads_received_count', label: 'Downloads', icon: 'fa-download', tab: null },
|
||||
{ key: 'follower_count', label: 'Followers', icon: 'fa-users', tab: 'about' },
|
||||
{ key: 'following_count', label: 'Following', icon: 'fa-user-check', tab: 'about' },
|
||||
{ key: 'artwork_views_received_count', label: 'Views', icon: 'fa-eye', tab: 'stats' },
|
||||
{ key: 'awards_received_count', label: 'Awards', icon: 'fa-trophy', tab: 'stats' },
|
||||
]
|
||||
|
||||
/**
|
||||
* ProfileStatsRow
|
||||
* Horizontal scrollable pill row of stat counts.
|
||||
* Clicking a pill navigates to the relevant tab.
|
||||
*/
|
||||
export default function ProfileStatsRow({ stats, followerCount, onTabChange }) {
|
||||
const values = {
|
||||
uploads_count: stats?.uploads_count ?? 0,
|
||||
downloads_received_count: stats?.downloads_received_count ?? 0,
|
||||
follower_count: followerCount ?? 0,
|
||||
following_count: stats?.following_count ?? 0,
|
||||
artwork_views_received_count: stats?.artwork_views_received_count ?? 0,
|
||||
awards_received_count: stats?.awards_received_count ?? 0,
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white/3 border-b border-white/10 overflow-x-auto" style={{ background: 'rgba(255,255,255,0.025)' }}>
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="flex gap-1 py-2 min-w-max sm:min-w-0 sm:flex-wrap">
|
||||
{PILLS.map((pill) => (
|
||||
<button
|
||||
key={pill.key}
|
||||
onClick={() => pill.tab && onTabChange(pill.tab)}
|
||||
title={pill.label}
|
||||
disabled={!pill.tab}
|
||||
className={`
|
||||
flex items-center gap-2 px-4 py-2 rounded-lg text-sm transition-all
|
||||
${pill.tab
|
||||
? 'cursor-pointer hover:bg-white/8 hover:text-white text-slate-300 group'
|
||||
: 'cursor-default text-slate-400'
|
||||
}
|
||||
`}
|
||||
style={{ background: 'transparent' }}
|
||||
>
|
||||
<i className={`fa-solid ${pill.icon} fa-fw text-xs opacity-60 group-hover:opacity-80`} />
|
||||
<span className="font-bold text-white tabular-nums">
|
||||
{Number(values[pill.key]).toLocaleString()}
|
||||
</span>
|
||||
<span className="text-slate-500 text-xs hidden sm:inline">{pill.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
74
resources/js/components/profile/ProfileTabs.jsx
Normal file
74
resources/js/components/profile/ProfileTabs.jsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import React, { useEffect, useRef } from 'react'
|
||||
|
||||
export const TABS = [
|
||||
{ id: 'artworks', label: 'Artworks', icon: 'fa-images' },
|
||||
{ id: 'posts', label: 'Posts', icon: 'fa-newspaper' },
|
||||
{ id: 'collections', label: 'Collections', icon: 'fa-layer-group' },
|
||||
{ id: 'about', label: 'About', icon: 'fa-id-card' },
|
||||
{ id: 'stats', label: 'Stats', icon: 'fa-chart-bar' },
|
||||
{ id: 'favourites', label: 'Favourites', icon: 'fa-heart' },
|
||||
{ id: 'activity', label: 'Activity', icon: 'fa-bolt' },
|
||||
]
|
||||
|
||||
/**
|
||||
* ProfileTabs
|
||||
* Sticky tab navigation that:
|
||||
* - Scrolls horizontally on mobile
|
||||
* - Shows active underline / glow
|
||||
* - Updates URL query param on tab change
|
||||
*/
|
||||
export default function ProfileTabs({ activeTab, onTabChange }) {
|
||||
const navRef = useRef(null)
|
||||
const activeRef = useRef(null)
|
||||
|
||||
// Scroll active tab into view on mount/change
|
||||
useEffect(() => {
|
||||
if (activeRef.current && navRef.current) {
|
||||
activeRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
|
||||
}
|
||||
}, [activeTab])
|
||||
|
||||
return (
|
||||
<nav
|
||||
ref={navRef}
|
||||
className="profile-tabs-sticky sticky z-30 bg-[#0c1525]/95 backdrop-blur-xl border-b border-white/10 overflow-x-auto scrollbar-hide"
|
||||
aria-label="Profile sections"
|
||||
role="tablist"
|
||||
>
|
||||
<div className="max-w-6xl mx-auto px-3 flex gap-0 min-w-max sm:min-w-0">
|
||||
{TABS.map((tab) => {
|
||||
const isActive = activeTab === tab.id
|
||||
return (
|
||||
<button
|
||||
key={tab.id}
|
||||
ref={isActive ? activeRef : null}
|
||||
onClick={() => onTabChange(tab.id)}
|
||||
role="tab"
|
||||
aria-selected={isActive}
|
||||
aria-controls={`tabpanel-${tab.id}`}
|
||||
className={`
|
||||
relative flex items-center gap-2 px-4 py-3.5 text-sm font-medium whitespace-nowrap
|
||||
transition-colors duration-150 outline-none
|
||||
focus-visible:ring-2 focus-visible:ring-sky-400/70 rounded-t
|
||||
${isActive
|
||||
? 'text-white'
|
||||
: 'text-slate-400 hover:text-slate-200'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<i className={`fa-solid ${tab.icon} fa-fw text-xs ${isActive ? 'text-sky-400' : ''}`} />
|
||||
{tab.label}
|
||||
{/* Active indicator bar */}
|
||||
{isActive && (
|
||||
<span
|
||||
className="absolute bottom-0 inset-x-0 h-0.5 rounded-full bg-sky-400 shadow-[0_0_8px_rgba(56,189,248,0.6)]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
165
resources/js/components/profile/tabs/TabAbout.jsx
Normal file
165
resources/js/components/profile/tabs/TabAbout.jsx
Normal file
@@ -0,0 +1,165 @@
|
||||
import React from 'react'
|
||||
|
||||
const SOCIAL_ICONS = {
|
||||
twitter: { icon: 'fa-brands fa-x-twitter', label: 'X / Twitter' },
|
||||
deviantart: { icon: 'fa-brands fa-deviantart', label: 'DeviantArt' },
|
||||
instagram: { icon: 'fa-brands fa-instagram', label: 'Instagram' },
|
||||
behance: { icon: 'fa-brands fa-behance', label: 'Behance' },
|
||||
artstation: { icon: 'fa-solid fa-palette', label: 'ArtStation' },
|
||||
youtube: { icon: 'fa-brands fa-youtube', label: 'YouTube' },
|
||||
website: { icon: 'fa-solid fa-link', label: 'Website' },
|
||||
}
|
||||
|
||||
function InfoRow({ icon, label, children }) {
|
||||
return (
|
||||
<div className="flex items-start gap-3 py-2.5 border-b border-white/5 last:border-0">
|
||||
<i className={`fa-solid ${icon} fa-fw text-slate-500 mt-0.5 w-4 text-center`} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="text-xs text-slate-500 block mb-0.5">{label}</span>
|
||||
<div className="text-sm text-slate-200">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* TabAbout
|
||||
* Bio, social links, metadata - replaces old sidebar profile card.
|
||||
*/
|
||||
export default function TabAbout({ user, profile, socialLinks, countryName, followerCount }) {
|
||||
const uname = user.username || user.name
|
||||
const displayName = user.name || uname
|
||||
const about = profile?.about
|
||||
const website = profile?.website
|
||||
|
||||
const joinDate = user.created_at
|
||||
? new Date(user.created_at).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })
|
||||
: null
|
||||
|
||||
const lastVisit = user.last_visit_at
|
||||
? (() => {
|
||||
try {
|
||||
const d = new Date(user.last_visit_at)
|
||||
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
|
||||
} catch { return null }
|
||||
})()
|
||||
: null
|
||||
|
||||
const genderMap = { M: 'Male', F: 'Female', X: 'Non-binary / N/A' }
|
||||
const genderLabel = genderMap[profile?.gender?.toUpperCase()] ?? null
|
||||
|
||||
const socialEntries = socialLinks
|
||||
? Object.entries(socialLinks).filter(([, link]) => link?.url)
|
||||
: []
|
||||
|
||||
return (
|
||||
<div
|
||||
id="tabpanel-about"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tab-about"
|
||||
className="pt-6 max-w-2xl"
|
||||
>
|
||||
{/* Bio */}
|
||||
{about ? (
|
||||
<div className="bg-white/4 ring-1 ring-white/10 rounded-2xl p-5 mb-5 shadow-xl shadow-black/20 backdrop-blur">
|
||||
<h2 className="text-xs font-semibold uppercase tracking-widest text-slate-500 mb-3 flex items-center gap-2">
|
||||
<i className="fa-solid fa-quote-left text-purple-400 fa-fw" />
|
||||
About
|
||||
</h2>
|
||||
<p className="text-sm text-slate-300 leading-relaxed whitespace-pre-line">{about}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white/4 ring-1 ring-white/10 rounded-2xl p-5 mb-5 text-center text-slate-500 text-sm">
|
||||
No bio yet.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Info card */}
|
||||
<div className="bg-white/4 ring-1 ring-white/10 rounded-2xl p-5 mb-5 shadow-xl shadow-black/20">
|
||||
<h2 className="text-xs font-semibold uppercase tracking-widest text-slate-500 mb-3 flex items-center gap-2">
|
||||
<i className="fa-solid fa-id-card text-sky-400 fa-fw" />
|
||||
Profile Info
|
||||
</h2>
|
||||
<div className="divide-y divide-white/5">
|
||||
{displayName && displayName !== uname && (
|
||||
<InfoRow icon="fa-user" label="Display name">{displayName}</InfoRow>
|
||||
)}
|
||||
<InfoRow icon="fa-at" label="Username">
|
||||
<span className="font-mono">@{uname}</span>
|
||||
</InfoRow>
|
||||
{genderLabel && (
|
||||
<InfoRow icon="fa-venus-mars" label="Gender">{genderLabel}</InfoRow>
|
||||
)}
|
||||
{countryName && (
|
||||
<InfoRow icon="fa-earth-americas" label="Country">
|
||||
<span className="flex items-center gap-2">
|
||||
{profile?.country_code && (
|
||||
<img
|
||||
src={`/gfx/flags/shiny/24/${encodeURIComponent(profile.country_code)}.png`}
|
||||
alt={countryName}
|
||||
className="w-4 h-auto rounded-sm"
|
||||
onError={(e) => { e.target.style.display = 'none' }}
|
||||
/>
|
||||
)}
|
||||
{countryName}
|
||||
</span>
|
||||
</InfoRow>
|
||||
)}
|
||||
{website && (
|
||||
<InfoRow icon="fa-link" label="Website">
|
||||
<a
|
||||
href={website.startsWith('http') ? website : `https://${website}`}
|
||||
target="_blank"
|
||||
rel="nofollow noopener noreferrer"
|
||||
className="text-sky-400 hover:text-sky-300 hover:underline transition-colors"
|
||||
>
|
||||
{(() => {
|
||||
try {
|
||||
const url = website.startsWith('http') ? website : `https://${website}`
|
||||
return new URL(url).hostname
|
||||
} catch { return website }
|
||||
})()}
|
||||
</a>
|
||||
</InfoRow>
|
||||
)}
|
||||
{joinDate && (
|
||||
<InfoRow icon="fa-calendar-days" label="Member since">{joinDate}</InfoRow>
|
||||
)}
|
||||
{lastVisit && (
|
||||
<InfoRow icon="fa-clock" label="Last seen">{lastVisit}</InfoRow>
|
||||
)}
|
||||
<InfoRow icon="fa-users" label="Followers">{Number(followerCount).toLocaleString()}</InfoRow>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social links */}
|
||||
{socialEntries.length > 0 && (
|
||||
<div className="bg-white/4 ring-1 ring-white/10 rounded-2xl p-5 shadow-xl shadow-black/20">
|
||||
<h2 className="text-xs font-semibold uppercase tracking-widest text-slate-500 mb-3 flex items-center gap-2">
|
||||
<i className="fa-solid fa-share-nodes text-sky-400 fa-fw" />
|
||||
Social Links
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{socialEntries.map(([platform, link]) => {
|
||||
const si = SOCIAL_ICONS[platform] ?? { icon: 'fa-solid fa-link', label: platform }
|
||||
const href = link.url.startsWith('http') ? link.url : `https://${link.url}`
|
||||
return (
|
||||
<a
|
||||
key={platform}
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="nofollow noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 px-3 py-2 rounded-xl text-sm border border-white/10 text-slate-300 hover:text-white hover:bg-white/8 hover:border-sky-400/30 transition-all"
|
||||
aria-label={si.label}
|
||||
>
|
||||
<i className={`${si.icon} fa-fw`} />
|
||||
<span>{si.label}</span>
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
153
resources/js/components/profile/tabs/TabActivity.jsx
Normal file
153
resources/js/components/profile/tabs/TabActivity.jsx
Normal file
@@ -0,0 +1,153 @@
|
||||
import React, { useRef, useState } from 'react'
|
||||
|
||||
const DEFAULT_AVATAR = 'https://files.skinbase.org/default/avatar_default.webp'
|
||||
|
||||
function CommentItem({ comment }) {
|
||||
return (
|
||||
<div className="flex gap-3 py-4 border-b border-white/5 last:border-0">
|
||||
<a href={comment.author_profile_url} className="shrink-0 mt-0.5">
|
||||
<img
|
||||
src={comment.author_avatar || DEFAULT_AVATAR}
|
||||
alt={comment.author_name}
|
||||
className="w-9 h-9 rounded-xl object-cover ring-1 ring-white/10"
|
||||
onError={(e) => { e.target.src = DEFAULT_AVATAR }}
|
||||
loading="lazy"
|
||||
/>
|
||||
</a>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<a
|
||||
href={comment.author_profile_url}
|
||||
className="text-sm font-semibold text-slate-200 hover:text-white transition-colors"
|
||||
>
|
||||
{comment.author_name}
|
||||
</a>
|
||||
<span className="text-slate-600 text-xs ml-auto whitespace-nowrap">
|
||||
{(() => {
|
||||
try {
|
||||
const d = new Date(comment.created_at)
|
||||
const diff = Date.now() - d.getTime()
|
||||
const mins = Math.floor(diff / 60000)
|
||||
if (mins < 1) return 'just now'
|
||||
if (mins < 60) return `${mins}m ago`
|
||||
const hrs = Math.floor(mins / 60)
|
||||
if (hrs < 24) return `${hrs}h ago`
|
||||
const days = Math.floor(hrs / 24)
|
||||
if (days < 30) return `${days}d ago`
|
||||
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
|
||||
} catch { return '' }
|
||||
})()}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-slate-400 leading-relaxed break-words whitespace-pre-line">
|
||||
{comment.body}
|
||||
</p>
|
||||
{comment.author_signature && (
|
||||
<p className="text-xs text-slate-600 mt-2 italic border-t border-white/5 pt-1 truncate">
|
||||
{comment.author_signature}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* TabActivity
|
||||
* Profile comments list + comment form for authenticated visitors.
|
||||
* Also acts as "Activity" tab.
|
||||
*/
|
||||
export default function TabActivity({ profileComments, user, isOwner, isLoggedIn }) {
|
||||
const uname = user.username || user.name
|
||||
const formRef = useRef(null)
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
|
||||
return (
|
||||
<div
|
||||
id="tabpanel-activity"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tab-activity"
|
||||
className="pt-6 max-w-2xl"
|
||||
>
|
||||
<h2 className="text-xs font-semibold uppercase tracking-widest text-slate-500 mb-4 flex items-center gap-2">
|
||||
<i className="fa-solid fa-comments text-orange-400 fa-fw" />
|
||||
Comments
|
||||
{profileComments?.length > 0 && (
|
||||
<span className="ml-1 px-1.5 py-0.5 rounded bg-white/5 text-slate-400 font-normal text-[11px]">
|
||||
{profileComments.length}
|
||||
</span>
|
||||
)}
|
||||
</h2>
|
||||
|
||||
{/* Comments list */}
|
||||
<div className="bg-white/4 ring-1 ring-white/10 rounded-2xl p-5 shadow-xl shadow-black/20 mb-5">
|
||||
{!profileComments?.length ? (
|
||||
<p className="text-slate-500 text-sm text-center py-8">
|
||||
No comments yet. Be the first to leave one!
|
||||
</p>
|
||||
) : (
|
||||
<div>
|
||||
{profileComments.map((comment) => (
|
||||
<CommentItem key={comment.id} comment={comment} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Comment form */}
|
||||
{!isOwner && (
|
||||
<div className="bg-white/4 ring-1 ring-white/10 rounded-2xl p-5 shadow-xl shadow-black/20">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-widest text-slate-500 mb-4 flex items-center gap-2">
|
||||
<i className="fa-solid fa-pen text-sky-400 fa-fw" />
|
||||
Write a Comment
|
||||
</h3>
|
||||
|
||||
{isLoggedIn ? (
|
||||
submitted ? (
|
||||
<div className="flex items-center gap-2 text-green-400 text-sm p-3 rounded-xl bg-green-500/10 ring-1 ring-green-500/20">
|
||||
<i className="fa-solid fa-check fa-fw" />
|
||||
Your comment has been posted!
|
||||
</div>
|
||||
) : (
|
||||
<form
|
||||
ref={formRef}
|
||||
method="POST"
|
||||
action={`/@${uname.toLowerCase()}/comment`}
|
||||
onSubmit={() => setSubmitted(false)}
|
||||
>
|
||||
<input type="hidden" name="_token" value={
|
||||
(() => document.querySelector('meta[name="csrf-token"]')?.content ?? '')()
|
||||
} />
|
||||
<textarea
|
||||
name="body"
|
||||
rows={4}
|
||||
required
|
||||
minLength={2}
|
||||
maxLength={2000}
|
||||
placeholder={`Write a comment for ${uname}…`}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-3 py-2.5 text-sm text-slate-200 placeholder:text-slate-600 resize-none focus:outline-none focus:ring-2 focus:ring-sky-400/40 focus:border-sky-400/30 transition-all"
|
||||
/>
|
||||
<div className="mt-3 flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-sky-600 hover:bg-sky-500 text-white text-sm font-semibold transition-all shadow-lg shadow-sky-900/30"
|
||||
>
|
||||
<i className="fa-solid fa-paper-plane fa-fw" />
|
||||
Post Comment
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
) : (
|
||||
<p className="text-sm text-slate-400 text-center py-4">
|
||||
<a href="/login" className="text-sky-400 hover:text-sky-300 hover:underline transition-colors">
|
||||
Log in
|
||||
</a>
|
||||
{' '}to leave a comment.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
195
resources/js/components/profile/tabs/TabArtworks.jsx
Normal file
195
resources/js/components/profile/tabs/TabArtworks.jsx
Normal file
@@ -0,0 +1,195 @@
|
||||
import React, { useState, useCallback } from 'react'
|
||||
import ArtworkCard from '../../gallery/ArtworkCard'
|
||||
|
||||
const SORT_OPTIONS = [
|
||||
{ value: 'latest', label: 'Latest' },
|
||||
{ value: 'trending', label: 'Trending' },
|
||||
{ value: 'rising', label: 'Rising' },
|
||||
{ value: 'views', label: 'Most Viewed' },
|
||||
{ value: 'favs', label: 'Most Favourited' },
|
||||
]
|
||||
|
||||
function ArtworkSkeleton() {
|
||||
return (
|
||||
<div className="rounded-2xl overflow-hidden bg-white/5 animate-pulse">
|
||||
<div className="aspect-[4/3] bg-white/8" />
|
||||
<div className="p-2 space-y-1.5">
|
||||
<div className="h-3 bg-white/8 rounded w-3/4" />
|
||||
<div className="h-2 bg-white/5 rounded w-1/2" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function EmptyState({ username }) {
|
||||
return (
|
||||
<div className="col-span-full flex flex-col items-center justify-center py-20 text-center">
|
||||
<div className="w-20 h-20 rounded-2xl bg-white/5 flex items-center justify-center mb-5 text-slate-500">
|
||||
<i className="fa-solid fa-image text-3xl" />
|
||||
</div>
|
||||
<p className="text-slate-400 font-medium">No artworks yet</p>
|
||||
<p className="text-slate-600 text-sm mt-1">@{username} hasn't uploaded anything yet.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Featured artworks horizontal scroll strip.
|
||||
*/
|
||||
function FeaturedStrip({ featuredArtworks }) {
|
||||
if (!featuredArtworks?.length) return null
|
||||
|
||||
return (
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xs font-semibold uppercase tracking-widest text-slate-500 mb-3 flex items-center gap-2">
|
||||
<i className="fa-solid fa-star text-yellow-400 fa-fw" />
|
||||
Featured
|
||||
</h2>
|
||||
<div className="flex gap-3 overflow-x-auto pb-2 scrollbar-hide snap-x snap-mandatory">
|
||||
{featuredArtworks.map((art) => (
|
||||
<a
|
||||
key={art.id}
|
||||
href={`/art/${art.id}/${slugify(art.name)}`}
|
||||
className="group shrink-0 snap-start w-40 sm:w-48"
|
||||
>
|
||||
<div className="overflow-hidden rounded-xl ring-1 ring-white/10 bg-black/30 aspect-[4/3] hover:ring-sky-400/40 transition-all">
|
||||
<img
|
||||
src={art.thumb}
|
||||
alt={art.name}
|
||||
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 mt-1.5 truncate group-hover:text-white transition-colors">
|
||||
{art.name}
|
||||
</p>
|
||||
{art.label && (
|
||||
<p className="text-[10px] text-slate-600 truncate">{art.label}</p>
|
||||
)}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function slugify(str) {
|
||||
return (str || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
|
||||
}
|
||||
|
||||
/**
|
||||
* TabArtworks
|
||||
* Features: sort selector, featured strip, masonry-style artwork grid,
|
||||
* skeleton loading, empty state, load-more pagination.
|
||||
*/
|
||||
export default function TabArtworks({ artworks, featuredArtworks, username, isActive }) {
|
||||
const [sort, setSort] = useState('latest')
|
||||
const [items, setItems] = useState(artworks?.data ?? artworks ?? [])
|
||||
const [nextCursor, setNextCursor] = useState(artworks?.next_cursor ?? null)
|
||||
const [loadingMore, setLoadingMore] = useState(false)
|
||||
const [isInitialLoad] = useState(false) // data SSR-loaded
|
||||
|
||||
const handleSort = async (newSort) => {
|
||||
setSort(newSort)
|
||||
setItems([])
|
||||
try {
|
||||
const res = await fetch(`/api/profile/${encodeURIComponent(username)}/artworks?sort=${newSort}`, {
|
||||
headers: { Accept: 'application/json' },
|
||||
})
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setItems(data.data ?? data)
|
||||
setNextCursor(data.next_cursor ?? null)
|
||||
}
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
const loadMore = async () => {
|
||||
if (!nextCursor || loadingMore) return
|
||||
setLoadingMore(true)
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/profile/${encodeURIComponent(username)}/artworks?sort=${sort}&cursor=${encodeURIComponent(nextCursor)}`,
|
||||
{ headers: { Accept: 'application/json' } }
|
||||
)
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setItems((prev) => [...prev, ...(data.data ?? data)])
|
||||
setNextCursor(data.next_cursor ?? null)
|
||||
}
|
||||
} catch (_) {}
|
||||
setLoadingMore(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
id="tabpanel-artworks"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tab-artworks"
|
||||
className="pt-6"
|
||||
>
|
||||
{/* Featured strip */}
|
||||
<FeaturedStrip featuredArtworks={featuredArtworks} />
|
||||
|
||||
{/* Sort bar */}
|
||||
<div className="flex items-center gap-3 mb-5 flex-wrap">
|
||||
<span className="text-xs text-slate-500 uppercase tracking-wider font-semibold">Sort</span>
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{SORT_OPTIONS.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
onClick={() => handleSort(opt.value)}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
|
||||
sort === opt.value
|
||||
? 'bg-sky-500/20 text-sky-300 ring-1 ring-sky-400/40'
|
||||
: 'text-slate-400 hover:text-white hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
{isInitialLoad ? (
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||
{Array.from({ length: 8 }).map((_, i) => <ArtworkSkeleton key={i} />)}
|
||||
</div>
|
||||
) : items.length === 0 ? (
|
||||
<div className="grid grid-cols-1">
|
||||
<EmptyState username={username} />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||
{items.map((art, i) => (
|
||||
<ArtworkCard
|
||||
key={art.id ?? i}
|
||||
art={art}
|
||||
loading={i < 8 ? 'eager' : 'lazy'}
|
||||
/>
|
||||
))}
|
||||
{loadingMore && Array.from({ length: 4 }).map((_, i) => <ArtworkSkeleton key={`sk-${i}`} />)}
|
||||
</div>
|
||||
|
||||
{/* Load more */}
|
||||
{nextCursor && (
|
||||
<div className="mt-8 text-center">
|
||||
<button
|
||||
onClick={loadMore}
|
||||
disabled={loadingMore}
|
||||
className="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 text-slate-300 text-sm font-medium border border-white/10 transition-all"
|
||||
>
|
||||
{loadingMore
|
||||
? <><i className="fa-solid fa-circle-notch fa-spin fa-fw" /> Loading…</>
|
||||
: <><i className="fa-solid fa-chevron-down fa-fw" /> Load more</>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
65
resources/js/components/profile/tabs/TabCollections.jsx
Normal file
65
resources/js/components/profile/tabs/TabCollections.jsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import React from 'react'
|
||||
|
||||
/**
|
||||
* TabCollections
|
||||
* Collections feature placeholder.
|
||||
*/
|
||||
export default function TabCollections({ collections }) {
|
||||
if (collections?.length > 0) {
|
||||
return (
|
||||
<div
|
||||
id="tabpanel-collections"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tab-collections"
|
||||
className="pt-6"
|
||||
>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{collections.map((col) => (
|
||||
<div
|
||||
key={col.id}
|
||||
className="bg-white/4 ring-1 ring-white/10 rounded-2xl overflow-hidden group hover:ring-sky-400/30 transition-all cursor-pointer shadow-xl shadow-black/20"
|
||||
>
|
||||
{col.cover_image ? (
|
||||
<div className="aspect-video overflow-hidden bg-black/30">
|
||||
<img
|
||||
src={col.cover_image}
|
||||
alt={col.title}
|
||||
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="aspect-video bg-white/5 flex items-center justify-center text-slate-600">
|
||||
<i className="fa-solid fa-layer-group text-3xl" />
|
||||
</div>
|
||||
)}
|
||||
<div className="p-4">
|
||||
<h3 className="font-semibold text-white truncate">{col.title}</h3>
|
||||
<p className="text-sm text-slate-500 mt-0.5">{col.items_count ?? 0} artworks</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
id="tabpanel-collections"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tab-collections"
|
||||
className="pt-6"
|
||||
>
|
||||
<div className="bg-white/4 ring-1 ring-white/10 rounded-2xl px-8 py-16 text-center shadow-xl shadow-black/20 backdrop-blur">
|
||||
<div className="w-20 h-20 rounded-2xl bg-white/5 flex items-center justify-center mx-auto mb-5 text-slate-500">
|
||||
<i className="fa-solid fa-layer-group text-3xl" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-2">Collections Coming Soon</h3>
|
||||
<p className="text-slate-500 text-sm max-w-sm mx-auto">
|
||||
Group artworks into curated collections. This feature is currently in development.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
89
resources/js/components/profile/tabs/TabFavourites.jsx
Normal file
89
resources/js/components/profile/tabs/TabFavourites.jsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import React, { useState } from 'react'
|
||||
import ArtworkCard from '../../gallery/ArtworkCard'
|
||||
|
||||
function FavSkeleton() {
|
||||
return (
|
||||
<div className="rounded-2xl overflow-hidden bg-white/5 animate-pulse">
|
||||
<div className="aspect-square bg-white/8" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* TabFavourites
|
||||
* Shows artworks the user has favourited.
|
||||
*/
|
||||
export default function TabFavourites({ favourites, isOwner, username }) {
|
||||
const [items, setItems] = useState(favourites ?? [])
|
||||
const [nextCursor, setNextCursor] = useState(null)
|
||||
const [loadingMore, setLoadingMore] = useState(false)
|
||||
|
||||
const loadMore = async () => {
|
||||
if (!nextCursor || loadingMore) return
|
||||
setLoadingMore(true)
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/profile/${encodeURIComponent(username)}/favourites?cursor=${encodeURIComponent(nextCursor)}`,
|
||||
{ headers: { Accept: 'application/json' } }
|
||||
)
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setItems((prev) => [...prev, ...(data.data ?? data)])
|
||||
setNextCursor(data.next_cursor ?? null)
|
||||
}
|
||||
} catch (_) {}
|
||||
setLoadingMore(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
id="tabpanel-favourites"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tab-favourites"
|
||||
className="pt-6"
|
||||
>
|
||||
<h2 className="text-xs font-semibold uppercase tracking-widest text-slate-500 mb-4 flex items-center gap-2">
|
||||
<i className="fa-solid fa-heart text-pink-400 fa-fw" />
|
||||
{isOwner ? 'Your Favourites' : 'Favourites'}
|
||||
</h2>
|
||||
|
||||
{items.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center">
|
||||
<div className="w-20 h-20 rounded-2xl bg-white/5 flex items-center justify-center mb-5 text-slate-500">
|
||||
<i className="fa-solid fa-heart text-3xl" />
|
||||
</div>
|
||||
<p className="text-slate-400 font-medium">No favourites yet</p>
|
||||
<p className="text-slate-600 text-sm mt-1">Artworks added to favourites will appear here.</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||
{items.map((art, i) => (
|
||||
<ArtworkCard
|
||||
key={art.id ?? i}
|
||||
art={art}
|
||||
loading={i < 8 ? 'eager' : 'lazy'}
|
||||
/>
|
||||
))}
|
||||
{loadingMore && Array.from({ length: 4 }).map((_, i) => <FavSkeleton key={`sk-${i}`} />)}
|
||||
</div>
|
||||
|
||||
{nextCursor && (
|
||||
<div className="mt-8 text-center">
|
||||
<button
|
||||
onClick={loadMore}
|
||||
disabled={loadingMore}
|
||||
className="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 text-slate-300 text-sm font-medium border border-white/10 transition-all"
|
||||
>
|
||||
{loadingMore
|
||||
? <><i className="fa-solid fa-circle-notch fa-spin fa-fw" /> Loading…</>
|
||||
: <><i className="fa-solid fa-chevron-down fa-fw" /> Load more</>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
158
resources/js/components/profile/tabs/TabPosts.jsx
Normal file
158
resources/js/components/profile/tabs/TabPosts.jsx
Normal file
@@ -0,0 +1,158 @@
|
||||
import React, { useState, useCallback } from 'react'
|
||||
import axios from 'axios'
|
||||
import PostCard from '../../Feed/PostCard'
|
||||
import PostComposer from '../../Feed/PostComposer'
|
||||
import PostCardSkeleton from '../../Feed/PostCardSkeleton'
|
||||
import FeedSidebar from '../../Feed/FeedSidebar'
|
||||
|
||||
function EmptyPostsState({ isOwner, username }) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center">
|
||||
<div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center mb-4 text-slate-600">
|
||||
<i className="fa-regular fa-newspaper text-2xl" />
|
||||
</div>
|
||||
<p className="text-slate-400 font-medium mb-1">No posts yet</p>
|
||||
{isOwner ? (
|
||||
<p className="text-slate-600 text-sm max-w-xs">
|
||||
Share your thoughts or showcase your artworks. Your first post is a tap away.
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-slate-600 text-sm">@{username} hasn't posted anything yet.</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* TabPosts
|
||||
* Profile Posts tab — shows the user's post feed with optional composer (for owner).
|
||||
*
|
||||
* Props:
|
||||
* username string
|
||||
* isOwner boolean
|
||||
* authUser object|null { id, username, name, avatar }
|
||||
* user object full user from ProfileController
|
||||
* profile object
|
||||
* stats object|null
|
||||
* followerCount number
|
||||
* recentFollowers array
|
||||
* socialLinks object
|
||||
* countryName string|null
|
||||
* onTabChange function(tab)
|
||||
*/
|
||||
export default function TabPosts({
|
||||
username,
|
||||
isOwner,
|
||||
authUser,
|
||||
user,
|
||||
profile,
|
||||
stats,
|
||||
followerCount,
|
||||
recentFollowers,
|
||||
socialLinks,
|
||||
countryName,
|
||||
onTabChange,
|
||||
}) {
|
||||
const [posts, setPosts] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [page, setPage] = useState(1)
|
||||
const [hasMore, setHasMore] = useState(false)
|
||||
const [loaded, setLoaded] = useState(false)
|
||||
|
||||
// Fetch on mount
|
||||
React.useEffect(() => {
|
||||
fetchFeed(1)
|
||||
}, [username])
|
||||
|
||||
const fetchFeed = async (p = 1) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const { data } = await axios.get(`/api/posts/profile/${username}`, { params: { page: p } })
|
||||
setPosts((prev) => p === 1 ? data.data : [...prev, ...data.data])
|
||||
setHasMore(data.meta.current_page < data.meta.last_page)
|
||||
setPage(p)
|
||||
} catch {
|
||||
//
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setLoaded(true)
|
||||
}
|
||||
}
|
||||
|
||||
const handlePosted = useCallback((newPost) => {
|
||||
setPosts((prev) => [newPost, ...prev])
|
||||
}, [])
|
||||
|
||||
const handleDeleted = useCallback((postId) => {
|
||||
setPosts((prev) => prev.filter((p) => p.id !== postId))
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="flex gap-6 py-4 items-start">
|
||||
{/* ── Main feed column ──────────────────────────────────────────────── */}
|
||||
<div className="flex-1 min-w-0 space-y-4">
|
||||
{/* Composer (owner only) */}
|
||||
{isOwner && authUser && (
|
||||
<PostComposer user={authUser} onPosted={handlePosted} />
|
||||
)}
|
||||
|
||||
{/* Skeletons while loading */}
|
||||
{!loaded && loading && (
|
||||
<div className="space-y-4">
|
||||
{[1, 2, 3].map((i) => <PostCardSkeleton key={i} />)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{loaded && !loading && posts.length === 0 && (
|
||||
<EmptyPostsState isOwner={isOwner} username={username} />
|
||||
)}
|
||||
|
||||
{/* Post list */}
|
||||
{posts.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
{posts.map((post) => (
|
||||
<PostCard
|
||||
key={post.id}
|
||||
post={post}
|
||||
isLoggedIn={!!authUser}
|
||||
viewerUsername={authUser?.username ?? null}
|
||||
onDelete={handleDeleted}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Load more */}
|
||||
{loaded && hasMore && (
|
||||
<div className="flex justify-center py-4">
|
||||
<button
|
||||
onClick={() => fetchFeed(page + 1)}
|
||||
disabled={loading}
|
||||
className="px-6 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 text-slate-300 text-sm transition-colors disabled:opacity-50"
|
||||
>
|
||||
{loading ? (
|
||||
<><i className="fa-solid fa-spinner fa-spin mr-2" />Loading…</>
|
||||
) : 'Load more posts'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Sidebar ───────────────────────────────────────────────────────── */}
|
||||
<aside className="w-72 xl:w-80 shrink-0 hidden lg:block sticky top-20 self-start">
|
||||
<FeedSidebar
|
||||
user={user}
|
||||
profile={profile}
|
||||
stats={stats}
|
||||
followerCount={followerCount}
|
||||
recentFollowers={recentFollowers}
|
||||
socialLinks={socialLinks}
|
||||
countryName={countryName}
|
||||
isLoggedIn={!!authUser}
|
||||
onTabChange={onTabChange}
|
||||
/>
|
||||
</aside>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
66
resources/js/components/profile/tabs/TabStats.jsx
Normal file
66
resources/js/components/profile/tabs/TabStats.jsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import React from 'react'
|
||||
|
||||
function KpiCard({ icon, label, value, color = 'text-sky-400' }) {
|
||||
return (
|
||||
<div className="bg-white/4 ring-1 ring-white/10 rounded-2xl p-5 shadow-xl shadow-black/20 backdrop-blur flex items-center gap-4">
|
||||
<div className={`w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center shrink-0 ${color}`}>
|
||||
<i className={`fa-solid ${icon} text-xl`} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-white tabular-nums">{Number(value ?? 0).toLocaleString()}</p>
|
||||
<p className="text-xs text-slate-500 mt-0.5 uppercase tracking-wider">{label}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* TabStats
|
||||
* KPI overview cards. Charts can be added here once chart infrastructure exists.
|
||||
*/
|
||||
export default function TabStats({ stats, followerCount }) {
|
||||
const kpis = [
|
||||
{ icon: 'fa-eye', label: 'Profile Views', value: stats?.profile_views_count, color: 'text-sky-400' },
|
||||
{ icon: 'fa-images', label: 'Uploads', value: stats?.uploads_count, color: 'text-violet-400' },
|
||||
{ icon: 'fa-download', label: 'Downloads', value: stats?.downloads_received_count, color: 'text-green-400' },
|
||||
{ icon: 'fa-eye', label: 'Artwork Views', value: stats?.artwork_views_received_count, color: 'text-blue-400' },
|
||||
{ icon: 'fa-heart', label: 'Favourites Received', value: stats?.favourites_received_count, color: 'text-pink-400' },
|
||||
{ icon: 'fa-users', label: 'Followers', value: followerCount, color: 'text-amber-400' },
|
||||
{ icon: 'fa-trophy', label: 'Awards Received', value: stats?.awards_received_count, color: 'text-yellow-400' },
|
||||
{ icon: 'fa-comment', label: 'Comments Received', value: stats?.comments_received_count, color: 'text-orange-400' },
|
||||
]
|
||||
|
||||
const hasStats = stats !== null && stats !== undefined
|
||||
|
||||
return (
|
||||
<div
|
||||
id="tabpanel-stats"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tab-stats"
|
||||
className="pt-6"
|
||||
>
|
||||
{!hasStats ? (
|
||||
<div className="bg-white/4 ring-1 ring-white/10 rounded-2xl p-10 text-center shadow-xl shadow-black/20">
|
||||
<i className="fa-solid fa-chart-bar text-3xl text-slate-600 mb-3 block" />
|
||||
<p className="text-slate-400 font-medium">No stats available yet</p>
|
||||
<p className="text-slate-600 text-sm mt-1">Stats will appear once there is activity on this profile.</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<h2 className="text-xs font-semibold uppercase tracking-widest text-slate-500 mb-4 flex items-center gap-2">
|
||||
<i className="fa-solid fa-chart-bar text-green-400 fa-fw" />
|
||||
Lifetime Statistics
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
|
||||
{kpis.map((kpi) => (
|
||||
<KpiCard key={kpi.label} {...kpi} />
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-slate-600 mt-6 text-center">
|
||||
More detailed analytics (charts, trends) coming soon.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -77,9 +77,13 @@ export default function NovaSelect({
|
||||
const dropH = Math.min(280, filtered.length * 38 + 52) // approx
|
||||
const openUp = spaceBelow < dropH + 8 && spaceAbove > spaceBelow
|
||||
|
||||
// Clamp horizontal position so the dropdown doesn't render off-screen or far away
|
||||
const padding = 8
|
||||
const leftClamped = Math.max(padding, Math.min(rect.left, window.innerWidth - rect.width - padding))
|
||||
|
||||
setDropPos({
|
||||
top: openUp ? rect.top - dropH - 4 : rect.bottom + 4,
|
||||
left: rect.left,
|
||||
left: leftClamped,
|
||||
width: rect.width,
|
||||
openUp,
|
||||
})
|
||||
|
||||
219
resources/js/components/upload/PublishPanel.jsx
Normal file
219
resources/js/components/upload/PublishPanel.jsx
Normal file
@@ -0,0 +1,219 @@
|
||||
import React, { useCallback } from 'react'
|
||||
import ReadinessChecklist from './ReadinessChecklist'
|
||||
import SchedulePublishPicker from './SchedulePublishPicker'
|
||||
import Checkbox from '../../Components/ui/Checkbox'
|
||||
|
||||
/**
|
||||
* PublishPanel
|
||||
*
|
||||
* Right-sidebar panel (or mobile bottom-sheet) that shows:
|
||||
* - Thumbnail preview + title
|
||||
* - Status pill
|
||||
* - ReadinessChecklist
|
||||
* - Visibility selector
|
||||
* - Publish now / Schedule controls
|
||||
* - Primary action button
|
||||
*
|
||||
* Props mirror what UploadWizard collects.
|
||||
*/
|
||||
|
||||
const STATUS_PILL = {
|
||||
idle: null,
|
||||
initializing: { label: 'Uploading', cls: 'bg-sky-500/20 text-sky-200 border-sky-300/30' },
|
||||
uploading: { label: 'Uploading', cls: 'bg-sky-500/25 text-sky-100 border-sky-300/40' },
|
||||
finishing: { label: 'Processing', cls: 'bg-amber-500/20 text-amber-200 border-amber-300/30' },
|
||||
processing: { label: 'Processing', cls: 'bg-amber-500/20 text-amber-200 border-amber-300/30' },
|
||||
ready_to_publish: { label: 'Ready', cls: 'bg-emerald-500/20 text-emerald-100 border-emerald-300/35' },
|
||||
publishing: { label: 'Publishing…', cls: 'bg-sky-500/25 text-sky-100 border-sky-300/40' },
|
||||
complete: { label: 'Published', cls: 'bg-emerald-500/25 text-emerald-100 border-emerald-300/50' },
|
||||
scheduled: { label: 'Scheduled', cls: 'bg-violet-500/20 text-violet-200 border-violet-300/30' },
|
||||
error: { label: 'Error', cls: 'bg-red-500/20 text-red-200 border-red-300/30' },
|
||||
cancelled: { label: 'Cancelled', cls: 'bg-white/8 text-white/40 border-white/10' },
|
||||
}
|
||||
|
||||
export default function PublishPanel({
|
||||
// Asset
|
||||
primaryPreviewUrl = null,
|
||||
isArchive = false,
|
||||
screenshots = [],
|
||||
// Metadata
|
||||
metadata = {},
|
||||
// Readiness
|
||||
machineState = 'idle',
|
||||
uploadReady = false,
|
||||
canPublish = false,
|
||||
isPublishing = false,
|
||||
isArchiveRequiresScreenshot = false,
|
||||
// Publish options
|
||||
publishMode = 'now', // 'now' | 'schedule'
|
||||
scheduledAt = null,
|
||||
timezone = Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
visibility = 'public', // 'public' | 'unlisted' | 'private'
|
||||
onPublishModeChange,
|
||||
onScheduleAt,
|
||||
onVisibilityChange,
|
||||
onToggleRights,
|
||||
// Actions
|
||||
onPublish,
|
||||
onCancel,
|
||||
// Navigation helpers (for checklist quick-links)
|
||||
onGoToStep,
|
||||
}) {
|
||||
const pill = STATUS_PILL[machineState] ?? null
|
||||
const hasPreview = Boolean(primaryPreviewUrl && !isArchive)
|
||||
const hasAnyPreview = hasPreview || (isArchive && screenshots.length > 0)
|
||||
const previewSrc = hasPreview ? primaryPreviewUrl : (screenshots[0]?.preview ?? screenshots[0] ?? null)
|
||||
|
||||
const title = String(metadata.title || '').trim()
|
||||
const hasTitle = Boolean(title)
|
||||
const hasCategory = Boolean(metadata.rootCategoryId)
|
||||
const hasTag = Array.isArray(metadata.tags) && metadata.tags.length > 0
|
||||
const hasRights = Boolean(metadata.rightsAccepted)
|
||||
const hasScreenshot = !isArchiveRequiresScreenshot || screenshots.length > 0
|
||||
|
||||
const checklist = [
|
||||
{ label: 'File uploaded & processed', ok: uploadReady },
|
||||
{ label: 'Title', ok: hasTitle, onClick: () => onGoToStep?.(2) },
|
||||
{ label: 'Category', ok: hasCategory, onClick: () => onGoToStep?.(2) },
|
||||
{ label: 'Rights confirmed', ok: hasRights, onClick: () => onGoToStep?.(2) },
|
||||
...( isArchiveRequiresScreenshot
|
||||
? [{ label: 'Screenshot (required for pack)', ok: hasScreenshot, onClick: () => onGoToStep?.(1) }]
|
||||
: [] ),
|
||||
{ label: 'At least 1 tag', ok: hasTag, onClick: () => onGoToStep?.(2) },
|
||||
]
|
||||
|
||||
const publishLabel = useCallback(() => {
|
||||
if (isPublishing) return 'Publishing…'
|
||||
if (publishMode === 'schedule') return 'Schedule publish'
|
||||
return 'Publish now'
|
||||
}, [isPublishing, publishMode])
|
||||
|
||||
const canSchedulePublish =
|
||||
publishMode === 'schedule' ? Boolean(scheduledAt) && canPublish : canPublish
|
||||
|
||||
const rightsError = uploadReady && !hasRights ? 'Rights confirmation is required.' : null
|
||||
|
||||
return (
|
||||
<div className="bg-panel/80 backdrop-blur rounded-2xl shadow-xl shadow-black/40 ring-1 ring-white/10 p-5 space-y-5 h-fit">
|
||||
{/* Preview + title */}
|
||||
<div className="flex items-start gap-3">
|
||||
{/* Thumbnail */}
|
||||
<div className="shrink-0 h-[72px] w-[72px] overflow-hidden rounded-xl ring-1 ring-white/10 bg-black/30 flex items-center justify-center">
|
||||
{previewSrc ? (
|
||||
<img
|
||||
src={previewSrc}
|
||||
alt="Artwork preview"
|
||||
className="max-h-full max-w-full object-contain"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
width={72}
|
||||
height={72}
|
||||
/>
|
||||
) : (
|
||||
<svg className="h-6 w-6 text-white/25" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Title + status */}
|
||||
<div className="min-w-0 flex-1 pt-0.5">
|
||||
<p className="truncate text-sm font-semibold text-white leading-snug">
|
||||
{hasTitle ? title : <span className="italic text-white/35">Untitled artwork</span>}
|
||||
</p>
|
||||
{pill && (
|
||||
<span className={`mt-1 inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] ${pill.cls}`}>
|
||||
{['uploading', 'initializing', 'finishing', 'processing', 'publishing'].includes(machineState) && (
|
||||
<span className="relative flex h-1.5 w-1.5 shrink-0" aria-hidden="true">
|
||||
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-60" />
|
||||
<span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-current" />
|
||||
</span>
|
||||
)}
|
||||
{pill.label}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-white/8" />
|
||||
|
||||
{/* Readiness checklist */}
|
||||
<ReadinessChecklist items={checklist} />
|
||||
|
||||
{/* Visibility */}
|
||||
<div>
|
||||
<label className="block text-[10px] uppercase tracking-wider text-white/40 mb-1.5" htmlFor="publish-visibility">
|
||||
Visibility
|
||||
</label>
|
||||
<select
|
||||
id="publish-visibility"
|
||||
value={visibility}
|
||||
onChange={(e) => onVisibilityChange?.(e.target.value)}
|
||||
disabled={!canPublish && machineState !== 'ready_to_publish'}
|
||||
className="w-full appearance-none rounded-lg border border-white/15 bg-white/8 px-3 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-sky-400/60 disabled:opacity-50"
|
||||
>
|
||||
<option value="public">Public</option>
|
||||
<option value="unlisted">Unlisted</option>
|
||||
<option value="private">Private (draft)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Schedule picker – only shows when upload is ready */}
|
||||
{uploadReady && machineState !== 'complete' && (
|
||||
<SchedulePublishPicker
|
||||
mode={publishMode}
|
||||
scheduledAt={scheduledAt}
|
||||
timezone={timezone}
|
||||
onModeChange={onPublishModeChange}
|
||||
onScheduleAt={onScheduleAt}
|
||||
disabled={!canPublish || isPublishing}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Rights confirmation (required before publish) */}
|
||||
<div>
|
||||
<Checkbox
|
||||
id="publish-rights-confirm"
|
||||
checked={Boolean(metadata.rightsAccepted)}
|
||||
onChange={(event) => onToggleRights?.(event.target.checked)}
|
||||
variant="emerald"
|
||||
size={18}
|
||||
label={<span className="text-xs text-white/85">I confirm I own the rights to this content.</span>}
|
||||
hint={<span className="text-[11px] text-white/50">Required before publishing.</span>}
|
||||
error={rightsError}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Primary action button */}
|
||||
<button
|
||||
type="button"
|
||||
disabled={!canSchedulePublish || isPublishing}
|
||||
onClick={() => onPublish?.()}
|
||||
title={!canPublish ? 'Complete all requirements first' : undefined}
|
||||
className={[
|
||||
'w-full rounded-xl py-2.5 text-sm font-semibold transition',
|
||||
canSchedulePublish && !isPublishing
|
||||
? publishMode === 'schedule'
|
||||
? 'bg-violet-500/80 text-white hover:bg-violet-500 shadow-[0_4px_16px_rgba(139,92,246,0.25)]'
|
||||
: 'btn-primary'
|
||||
: 'cursor-not-allowed bg-white/8 text-white/35 ring-1 ring-white/10',
|
||||
].join(' ')}
|
||||
>
|
||||
{publishLabel()}
|
||||
</button>
|
||||
|
||||
{/* Cancel link */}
|
||||
{onCancel && machineState !== 'idle' && machineState !== 'complete' && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="w-full text-center text-xs text-white/35 hover:text-white/70 transition"
|
||||
>
|
||||
Cancel upload
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
55
resources/js/components/upload/ReadinessChecklist.jsx
Normal file
55
resources/js/components/upload/ReadinessChecklist.jsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import React from 'react'
|
||||
|
||||
/**
|
||||
* ReadinessChecklist
|
||||
*
|
||||
* Shows upload readiness requirements with status icons.
|
||||
* Each item can have an optional `href` to jump to the section for a quick fix.
|
||||
*/
|
||||
export default function ReadinessChecklist({ items = [] }) {
|
||||
const allOk = items.every((item) => item.ok)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p className="mb-2 text-[10px] uppercase tracking-wider text-white/40">
|
||||
Readiness
|
||||
</p>
|
||||
<ul className="space-y-1" role="list">
|
||||
{items.map((item) => (
|
||||
<li key={item.label} className="flex items-center gap-2 text-xs">
|
||||
<span
|
||||
className={[
|
||||
'flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[9px] font-bold',
|
||||
item.ok
|
||||
? 'bg-emerald-500/25 text-emerald-300'
|
||||
: 'bg-white/8 text-white/30',
|
||||
].join(' ')}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{item.ok ? '✓' : '○'}
|
||||
</span>
|
||||
<span className={item.ok ? 'text-white/70' : 'text-white/40'}>
|
||||
{(item.onClick || item.href) && !item.ok ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={item.onClick}
|
||||
className="text-sky-400 hover:underline focus-visible:outline-none focus-visible:underline"
|
||||
>
|
||||
{item.label}
|
||||
</button>
|
||||
) : (
|
||||
item.label
|
||||
)}
|
||||
</span>
|
||||
{item.optional && !item.ok && (
|
||||
<span className="ml-auto text-[9px] text-white/25 italic">optional</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{allOk && (
|
||||
<p className="mt-2 text-[11px] text-emerald-300/80">All requirements met.</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
219
resources/js/components/upload/SchedulePublishPicker.jsx
Normal file
219
resources/js/components/upload/SchedulePublishPicker.jsx
Normal file
@@ -0,0 +1,219 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
|
||||
/**
|
||||
* SchedulePublishPicker
|
||||
*
|
||||
* Toggle between "Publish now" and "Schedule publish".
|
||||
* When scheduled, shows a date + time input with validation
|
||||
* (must be >= now + 5 minutes).
|
||||
*
|
||||
* Props:
|
||||
* mode 'now' | 'schedule'
|
||||
* scheduledAt ISO string | null – current scheduled datetime (UTC)
|
||||
* timezone string – IANA tz (e.g. 'Europe/Ljubljana')
|
||||
* onModeChange (mode) => void
|
||||
* onScheduleAt (iso | null) => void
|
||||
* disabled bool
|
||||
*/
|
||||
function toLocalDateTimeString(isoString, tz) {
|
||||
if (!isoString) return { date: '', time: '' }
|
||||
try {
|
||||
const d = new Date(isoString)
|
||||
const opts = { timeZone: tz, year: 'numeric', month: '2-digit', day: '2-digit' }
|
||||
const dateStr = new Intl.DateTimeFormat('en-CA', opts).format(d) // en-CA gives YYYY-MM-DD
|
||||
const timeStr = new Intl.DateTimeFormat('en-GB', {
|
||||
timeZone: tz,
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false,
|
||||
}).format(d)
|
||||
return { date: dateStr, time: timeStr }
|
||||
} catch {
|
||||
return { date: '', time: '' }
|
||||
}
|
||||
}
|
||||
|
||||
function formatPreviewLabel(isoString, tz) {
|
||||
if (!isoString) return null
|
||||
try {
|
||||
return new Intl.DateTimeFormat('en-GB', {
|
||||
timeZone: tz,
|
||||
weekday: 'short',
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false,
|
||||
timeZoneName: 'short',
|
||||
}).format(new Date(isoString))
|
||||
} catch {
|
||||
return isoString
|
||||
}
|
||||
}
|
||||
|
||||
function localToUtcIso(dateStr, timeStr, tz) {
|
||||
if (!dateStr || !timeStr) return null
|
||||
try {
|
||||
const dtStr = `${dateStr}T${timeStr}:00`
|
||||
const local = new Date(
|
||||
new Date(dtStr).toLocaleString('en-US', { timeZone: tz })
|
||||
)
|
||||
const utcOffset = new Date(dtStr) - local
|
||||
const utcDate = new Date(new Date(dtStr).getTime() + utcOffset)
|
||||
return utcDate.toISOString()
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
const MIN_FUTURE_MS = 5 * 60 * 1000 // 5 minutes
|
||||
|
||||
export default function SchedulePublishPicker({
|
||||
mode = 'now',
|
||||
scheduledAt = null,
|
||||
timezone = Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
onModeChange,
|
||||
onScheduleAt,
|
||||
disabled = false,
|
||||
}) {
|
||||
const initial = useMemo(
|
||||
() => toLocalDateTimeString(scheduledAt, timezone),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[]
|
||||
)
|
||||
const [dateStr, setDateStr] = useState(initial.date || '')
|
||||
const [timeStr, setTimeStr] = useState(initial.time || '')
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const validate = useCallback(
|
||||
(d, t) => {
|
||||
if (!d || !t) return 'Date and time are required.'
|
||||
const iso = localToUtcIso(d, t, timezone)
|
||||
if (!iso) return 'Invalid date or time.'
|
||||
const target = new Date(iso)
|
||||
if (Number.isNaN(target.getTime())) return 'Invalid date or time.'
|
||||
if (target.getTime() - Date.now() < MIN_FUTURE_MS) {
|
||||
return 'Scheduled time must be at least 5 minutes in the future.'
|
||||
}
|
||||
return ''
|
||||
},
|
||||
[timezone]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (mode !== 'schedule') {
|
||||
setError('')
|
||||
return
|
||||
}
|
||||
if (!dateStr && !timeStr) {
|
||||
setError('')
|
||||
onScheduleAt?.(null)
|
||||
return
|
||||
}
|
||||
const err = validate(dateStr, timeStr)
|
||||
setError(err)
|
||||
if (!err) {
|
||||
onScheduleAt?.(localToUtcIso(dateStr, timeStr, timezone))
|
||||
} else {
|
||||
onScheduleAt?.(null)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [dateStr, timeStr, mode])
|
||||
|
||||
const previewLabel = useMemo(() => {
|
||||
if (mode !== 'schedule' || error) return null
|
||||
const iso = localToUtcIso(dateStr, timeStr, timezone)
|
||||
return formatPreviewLabel(iso, timezone)
|
||||
}, [mode, error, dateStr, timeStr, timezone])
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex gap-2" role="group" aria-label="Publish mode">
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
onModeChange?.('now')
|
||||
setError('')
|
||||
}}
|
||||
className={[
|
||||
'flex-1 rounded-lg border py-2 text-sm transition',
|
||||
mode === 'now'
|
||||
? 'border-sky-300/60 bg-sky-500/25 text-white'
|
||||
: 'border-white/15 bg-white/6 text-white/60 hover:bg-white/10',
|
||||
disabled ? 'cursor-not-allowed opacity-50' : '',
|
||||
].join(' ')}
|
||||
aria-pressed={mode === 'now'}
|
||||
>
|
||||
Publish now
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => onModeChange?.('schedule')}
|
||||
className={[
|
||||
'flex-1 rounded-lg border py-2 text-sm transition',
|
||||
mode === 'schedule'
|
||||
? 'border-sky-300/60 bg-sky-500/25 text-white'
|
||||
: 'border-white/15 bg-white/6 text-white/60 hover:bg-white/10',
|
||||
disabled ? 'cursor-not-allowed opacity-50' : '',
|
||||
].join(' ')}
|
||||
aria-pressed={mode === 'schedule'}
|
||||
>
|
||||
Schedule
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{mode === 'schedule' && (
|
||||
<div className="space-y-2 rounded-xl border border-white/10 bg-white/[0.03] p-3">
|
||||
<div className="flex flex-col gap-2 sm:flex-row">
|
||||
<div className="flex-1">
|
||||
<label className="block text-[10px] uppercase tracking-wide text-white/40 mb-1" htmlFor="schedule-date">
|
||||
Date
|
||||
</label>
|
||||
<input
|
||||
id="schedule-date"
|
||||
type="date"
|
||||
disabled={disabled}
|
||||
value={dateStr}
|
||||
onChange={(e) => setDateStr(e.target.value)}
|
||||
min={new Date().toISOString().slice(0, 10)}
|
||||
className="w-full rounded-lg border border-white/15 bg-white/8 px-3 py-1.5 text-sm text-white placeholder-white/30 focus:outline-none focus:ring-1 focus:ring-sky-400/60 disabled:opacity-50"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-28 shrink-0">
|
||||
<label className="block text-[10px] uppercase tracking-wide text-white/40 mb-1" htmlFor="schedule-time">
|
||||
Time
|
||||
</label>
|
||||
<input
|
||||
id="schedule-time"
|
||||
type="time"
|
||||
disabled={disabled}
|
||||
value={timeStr}
|
||||
onChange={(e) => setTimeStr(e.target.value)}
|
||||
className="w-full rounded-lg border border-white/15 bg-white/8 px-3 py-1.5 text-sm text-white placeholder-white/30 focus:outline-none focus:ring-1 focus:ring-sky-400/60 disabled:opacity-50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-[10px] text-white/35">
|
||||
Timezone: <span className="text-white/55">{timezone}</span>
|
||||
</p>
|
||||
|
||||
{error && (
|
||||
<p className="text-xs text-red-400" role="alert">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{previewLabel && (
|
||||
<p className="text-xs text-emerald-300/80">
|
||||
Will publish on: <span className="font-medium">{previewLabel}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
141
resources/js/components/upload/StudioStatusBar.jsx
Normal file
141
resources/js/components/upload/StudioStatusBar.jsx
Normal file
@@ -0,0 +1,141 @@
|
||||
import React from 'react'
|
||||
import { motion, useReducedMotion } from 'framer-motion'
|
||||
|
||||
/**
|
||||
* StudioStatusBar
|
||||
*
|
||||
* Sticky header beneath the main nav that shows:
|
||||
* - Step pills (reuse UploadStepper visual style but condensed)
|
||||
* - Upload progress bar (visible while uploading/processing)
|
||||
* - Machine-state pill
|
||||
* - Back / Next primary actions
|
||||
*/
|
||||
const STATE_LABELS = {
|
||||
idle: null,
|
||||
initializing: 'Initializing…',
|
||||
uploading: 'Uploading',
|
||||
finishing: 'Finishing…',
|
||||
processing: 'Processing',
|
||||
ready_to_publish: 'Ready',
|
||||
publishing: 'Publishing…',
|
||||
complete: 'Published',
|
||||
error: 'Error',
|
||||
cancelled: 'Cancelled',
|
||||
}
|
||||
|
||||
const STATE_COLORS = {
|
||||
idle: '',
|
||||
initializing: 'bg-sky-500/20 text-sky-200 border-sky-300/30',
|
||||
uploading: 'bg-sky-500/25 text-sky-100 border-sky-300/40',
|
||||
finishing: 'bg-sky-400/20 text-sky-200 border-sky-300/30',
|
||||
processing: 'bg-amber-500/20 text-amber-100 border-amber-300/30',
|
||||
ready_to_publish: 'bg-emerald-500/20 text-emerald-100 border-emerald-300/35',
|
||||
publishing: 'bg-sky-500/25 text-sky-100 border-sky-300/40',
|
||||
complete: 'bg-emerald-500/25 text-emerald-100 border-emerald-300/50',
|
||||
error: 'bg-red-500/20 text-red-200 border-red-300/30',
|
||||
cancelled: 'bg-white/8 text-white/50 border-white/15',
|
||||
}
|
||||
|
||||
export default function StudioStatusBar({
|
||||
steps = [],
|
||||
activeStep = 1,
|
||||
highestUnlockedStep = 1,
|
||||
machineState = 'idle',
|
||||
progress = 0,
|
||||
showProgress = false,
|
||||
onStepClick,
|
||||
}) {
|
||||
const prefersReducedMotion = useReducedMotion()
|
||||
const transition = prefersReducedMotion ? { duration: 0 } : { duration: 0.3, ease: 'easeOut' }
|
||||
const stateLabel = STATE_LABELS[machineState] ?? machineState
|
||||
const stateColor = STATE_COLORS[machineState] ?? 'bg-white/8 text-white/50 border-white/15'
|
||||
|
||||
return (
|
||||
<div className="sticky top-0 z-20 -mx-4 px-4 pt-2 pb-0 sm:-mx-6 sm:px-6">
|
||||
{/* Blur backdrop */}
|
||||
<div className="absolute inset-0 bg-slate-950/80 backdrop-blur-md" aria-hidden="true" />
|
||||
|
||||
<div className="relative">
|
||||
{/* Step pills row */}
|
||||
<nav aria-label="Upload steps">
|
||||
<ol className="flex flex-nowrap items-center gap-2 overflow-x-auto py-3 pr-1 sm:gap-3">
|
||||
{steps.map((step, index) => {
|
||||
const number = index + 1
|
||||
const isActive = number === activeStep
|
||||
const isComplete = number < activeStep
|
||||
const isLocked = number > highestUnlockedStep
|
||||
const canNavigate = !isLocked && number < activeStep
|
||||
|
||||
const btnClass = [
|
||||
'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] sm:text-xs transition',
|
||||
isActive
|
||||
? 'border-sky-300/70 bg-sky-500/25 text-white'
|
||||
: isComplete
|
||||
? 'border-emerald-300/30 bg-emerald-500/15 text-emerald-100 hover:bg-emerald-500/25 cursor-pointer'
|
||||
: isLocked
|
||||
? 'cursor-default border-white/10 bg-white/5 text-white/35 pointer-events-none'
|
||||
: 'border-white/15 bg-white/6 text-white/70 hover:bg-white/12 cursor-pointer',
|
||||
].join(' ')
|
||||
|
||||
const circleClass = isComplete
|
||||
? 'border-emerald-300/50 bg-emerald-500/20 text-emerald-100'
|
||||
: isActive
|
||||
? 'border-sky-300/50 bg-sky-500/25 text-white'
|
||||
: 'border-white/20 bg-white/6 text-white/60'
|
||||
|
||||
return (
|
||||
<li key={step.key} className="flex shrink-0 items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => canNavigate && onStepClick?.(number)}
|
||||
disabled={isLocked}
|
||||
aria-disabled={isLocked}
|
||||
aria-current={isActive ? 'step' : undefined}
|
||||
className={btnClass}
|
||||
>
|
||||
<span className={`grid h-4 w-4 place-items-center rounded-full border text-[10px] shrink-0 ${circleClass}`}>
|
||||
{isComplete ? '✓' : number}
|
||||
</span>
|
||||
<span className="whitespace-nowrap">{step.label}</span>
|
||||
</button>
|
||||
{index < steps.length - 1 && (
|
||||
<span className="text-white/30 select-none text-xs" aria-hidden="true">›</span>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Spacer */}
|
||||
<li className="flex-1" aria-hidden="true" />
|
||||
|
||||
{/* State pill */}
|
||||
{stateLabel && (
|
||||
<li className="shrink-0">
|
||||
<span className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] ${stateColor}`}>
|
||||
{['uploading', 'initializing', 'finishing', 'processing', 'publishing'].includes(machineState) && (
|
||||
<span className="relative flex h-2 w-2 shrink-0" aria-hidden="true">
|
||||
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-300 opacity-60" />
|
||||
<span className="relative inline-flex h-2 w-2 rounded-full bg-sky-300" />
|
||||
</span>
|
||||
)}
|
||||
{stateLabel}
|
||||
</span>
|
||||
</li>
|
||||
)}
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
{/* Progress bar (shown during upload/processing) */}
|
||||
{showProgress && (
|
||||
<div className="h-0.5 w-full overflow-hidden rounded-full bg-white/8">
|
||||
<motion.div
|
||||
className="h-full rounded-full bg-gradient-to-r from-sky-400 via-cyan-300 to-emerald-300"
|
||||
animate={{ width: `${progress}%` }}
|
||||
transition={transition}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
217
resources/js/components/upload/UploadOverlay.jsx
Normal file
217
resources/js/components/upload/UploadOverlay.jsx
Normal file
@@ -0,0 +1,217 @@
|
||||
import React from 'react'
|
||||
import { AnimatePresence, motion, useReducedMotion } from 'framer-motion'
|
||||
|
||||
/**
|
||||
* UploadOverlay
|
||||
*
|
||||
* A frosted-glass floating panel that rises from the bottom of the step content
|
||||
* area while an upload or processing job is in flight.
|
||||
*
|
||||
* Shows:
|
||||
* - State icon + label + live percentage
|
||||
* - Thick animated progress bar with gradient
|
||||
* - Processing transparency label (what the backend is doing)
|
||||
* - Error strip with Retry / Reset when something goes wrong
|
||||
*/
|
||||
|
||||
const ACTIVE_STATES = new Set([
|
||||
'initializing',
|
||||
'uploading',
|
||||
'finishing',
|
||||
'processing',
|
||||
])
|
||||
|
||||
const STATE_META = {
|
||||
initializing: {
|
||||
label: 'Initializing',
|
||||
sublabel: 'Preparing your upload…',
|
||||
color: 'text-sky-300',
|
||||
barColor: 'from-sky-500 via-sky-400 to-cyan-300',
|
||||
icon: (
|
||||
<svg className="h-4 w-4 shrink-0 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<circle className="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" />
|
||||
<path className="opacity-80" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
uploading: {
|
||||
label: 'Uploading',
|
||||
sublabel: 'Sending your file to the server…',
|
||||
color: 'text-sky-300',
|
||||
barColor: 'from-sky-500 via-cyan-400 to-teal-300',
|
||||
icon: (
|
||||
<svg className="h-4 w-4 shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fillRule="evenodd" d="M10 3a1 1 0 011 1v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L9 11.586V4a1 1 0 011-1zM3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
finishing: {
|
||||
label: 'Finishing',
|
||||
sublabel: 'Wrapping up the transfer…',
|
||||
color: 'text-cyan-300',
|
||||
barColor: 'from-cyan-500 via-teal-400 to-emerald-300',
|
||||
icon: (
|
||||
<svg className="h-4 w-4 shrink-0 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<circle className="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" />
|
||||
<path className="opacity-80" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
processing: {
|
||||
label: 'Processing',
|
||||
sublabel: 'Analyzing your artwork…',
|
||||
color: 'text-amber-300',
|
||||
barColor: 'from-amber-500 via-yellow-400 to-lime-300',
|
||||
icon: (
|
||||
<svg className="h-4 w-4 shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fillRule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clipRule="evenodd" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
error: {
|
||||
label: 'Upload failed',
|
||||
sublabel: null,
|
||||
color: 'text-rose-300',
|
||||
barColor: 'from-rose-600 via-rose-500 to-rose-400',
|
||||
icon: (
|
||||
<svg className="h-4 w-4 shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
}
|
||||
|
||||
export default function UploadOverlay({
|
||||
machineState = 'idle',
|
||||
progress = 0,
|
||||
processingLabel = null,
|
||||
error = null,
|
||||
onRetry,
|
||||
onReset,
|
||||
}) {
|
||||
const prefersReducedMotion = useReducedMotion()
|
||||
|
||||
const isVisible = ACTIVE_STATES.has(machineState) || machineState === 'error'
|
||||
const meta = STATE_META[machineState] ?? STATE_META.uploading
|
||||
|
||||
const barTransition = prefersReducedMotion
|
||||
? { duration: 0 }
|
||||
: { duration: 0.4, ease: 'easeOut' }
|
||||
|
||||
const overlayTransition = prefersReducedMotion
|
||||
? { duration: 0 }
|
||||
: { duration: 0.25, ease: [0.32, 0.72, 0, 1] }
|
||||
|
||||
const displayLabel = processingLabel || meta.sublabel
|
||||
|
||||
return (
|
||||
<AnimatePresence initial={false}>
|
||||
{isVisible && (
|
||||
<motion.div
|
||||
key="upload-overlay"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
aria-label={`${meta.label}${progress > 0 ? ` — ${progress}%` : ''}`}
|
||||
initial={prefersReducedMotion ? false : { opacity: 0, y: 24, scale: 0.98 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={prefersReducedMotion ? {} : { opacity: 0, y: 16, scale: 0.98 }}
|
||||
transition={overlayTransition}
|
||||
className="absolute inset-x-0 bottom-0 z-30 pointer-events-none"
|
||||
>
|
||||
{/* Fade-out gradient so step content peeks through above */}
|
||||
<div
|
||||
className="absolute inset-x-0 -top-12 h-12 bg-gradient-to-t from-slate-950/70 to-transparent pointer-events-none rounded-b-2xl"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
<div className="pointer-events-auto mx-0 rounded-b-2xl rounded-t-xl border border-white/10 bg-slate-950/88 px-5 pb-5 pt-4 shadow-2xl shadow-black/70 ring-1 ring-inset ring-white/6 backdrop-blur-xl">
|
||||
{/* ── Header: icon + state label + percentage ── */}
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className={`flex items-center gap-2 ${meta.color}`}>
|
||||
{meta.icon}
|
||||
<span className="text-sm font-semibold tracking-wide">
|
||||
{meta.label}
|
||||
</span>
|
||||
{/* Pulsing dot for active states */}
|
||||
{machineState !== 'error' && (
|
||||
<span className="relative flex h-2 w-2 shrink-0" aria-hidden="true">
|
||||
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-50" />
|
||||
<span className="relative inline-flex h-2 w-2 rounded-full bg-current opacity-80" />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{machineState !== 'error' && (
|
||||
<span className={`tabular-nums text-sm font-bold ${meta.color}`}>
|
||||
{progress}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Progress bar ── */}
|
||||
<div className="mt-3 h-2 w-full overflow-hidden rounded-full bg-white/8">
|
||||
<motion.div
|
||||
className={`h-full rounded-full bg-gradient-to-r ${meta.barColor}`}
|
||||
animate={{ width: machineState === 'error' ? '100%' : `${progress}%` }}
|
||||
transition={barTransition}
|
||||
style={machineState === 'error' ? { opacity: 0.35 } : {}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* ── Sublabel / transparency message ── */}
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
{machineState !== 'error' && displayLabel && (
|
||||
<motion.p
|
||||
key={displayLabel}
|
||||
initial={prefersReducedMotion ? false : { opacity: 0, y: 4 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={prefersReducedMotion ? {} : { opacity: 0, y: -4 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="mt-2 text-xs text-white/50"
|
||||
>
|
||||
{displayLabel}
|
||||
</motion.p>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* ── Error details + actions ── */}
|
||||
<AnimatePresence initial={false}>
|
||||
{machineState === 'error' && (
|
||||
<motion.div
|
||||
key="error-block"
|
||||
initial={prefersReducedMotion ? false : { opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={prefersReducedMotion ? {} : { opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="mt-3 rounded-lg border border-rose-400/20 bg-rose-500/10 px-3 py-2.5">
|
||||
<p className="text-xs text-rose-200 leading-relaxed">
|
||||
{error || 'Something went wrong. You can retry safely.'}
|
||||
</p>
|
||||
<div className="mt-2.5 flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRetry}
|
||||
className="rounded-md border border-rose-300/30 bg-rose-400/15 px-3 py-1 text-xs font-medium text-rose-100 transition hover:bg-rose-400/25 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300/60"
|
||||
>
|
||||
Retry upload
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onReset}
|
||||
className="rounded-md border border-white/20 bg-white/8 px-3 py-1 text-xs font-medium text-white/60 transition hover:bg-white/14 hover:text-white/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40"
|
||||
>
|
||||
Start over
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
)
|
||||
}
|
||||
@@ -1,7 +1,187 @@
|
||||
import React from 'react'
|
||||
import React, { useCallback, useRef, useState } from 'react'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import TagPicker from '../tags/TagPicker'
|
||||
import Checkbox from '../../Components/ui/Checkbox'
|
||||
|
||||
function ToolbarButton({ title, onClick, children }) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
title={title}
|
||||
onMouseDown={(event) => {
|
||||
event.preventDefault()
|
||||
onClick()
|
||||
}}
|
||||
className="inline-flex h-7 min-w-7 items-center justify-center rounded-md px-1.5 text-xs font-semibold text-white/55 transition hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function MarkdownEditor({ id, value, onChange, placeholder, error }) {
|
||||
const [tab, setTab] = useState('write')
|
||||
const textareaRef = useRef(null)
|
||||
|
||||
const wrapSelection = useCallback((before, after) => {
|
||||
const textarea = textareaRef.current
|
||||
if (!textarea) return
|
||||
|
||||
const current = String(value || '')
|
||||
const start = textarea.selectionStart
|
||||
const end = textarea.selectionEnd
|
||||
const selected = current.slice(start, end)
|
||||
const replacement = before + (selected || 'text') + after
|
||||
const next = current.slice(0, start) + replacement + current.slice(end)
|
||||
onChange?.(next)
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
textarea.focus()
|
||||
textarea.selectionStart = selected ? start + replacement.length : start + before.length
|
||||
textarea.selectionEnd = selected ? start + replacement.length : start + before.length + 4
|
||||
})
|
||||
}, [onChange, value])
|
||||
|
||||
const prefixLines = useCallback((prefix) => {
|
||||
const textarea = textareaRef.current
|
||||
if (!textarea) return
|
||||
|
||||
const current = String(value || '')
|
||||
const start = textarea.selectionStart
|
||||
const end = textarea.selectionEnd
|
||||
const selected = current.slice(start, end)
|
||||
const lines = (selected || '').split('\n')
|
||||
const normalized = (lines.length ? lines : ['']).map((line) => `${prefix}${line}`).join('\n')
|
||||
const next = current.slice(0, start) + normalized + current.slice(end)
|
||||
onChange?.(next)
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
textarea.focus()
|
||||
textarea.selectionStart = start
|
||||
textarea.selectionEnd = start + normalized.length
|
||||
})
|
||||
}, [onChange, value])
|
||||
|
||||
const insertLink = useCallback(() => {
|
||||
const textarea = textareaRef.current
|
||||
if (!textarea) return
|
||||
|
||||
const current = String(value || '')
|
||||
const start = textarea.selectionStart
|
||||
const end = textarea.selectionEnd
|
||||
const selected = current.slice(start, end)
|
||||
const replacement = selected && /^https?:\/\//i.test(selected)
|
||||
? `[link](${selected})`
|
||||
: `[${selected || 'link'}](https://)`
|
||||
const next = current.slice(0, start) + replacement + current.slice(end)
|
||||
onChange?.(next)
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
textarea.focus()
|
||||
})
|
||||
}, [onChange, value])
|
||||
|
||||
const handleKeyDown = useCallback((event) => {
|
||||
const withModifier = event.ctrlKey || event.metaKey
|
||||
if (!withModifier) return
|
||||
|
||||
switch (event.key.toLowerCase()) {
|
||||
case 'b':
|
||||
event.preventDefault()
|
||||
wrapSelection('**', '**')
|
||||
break
|
||||
case 'i':
|
||||
event.preventDefault()
|
||||
wrapSelection('*', '*')
|
||||
break
|
||||
case 'k':
|
||||
event.preventDefault()
|
||||
insertLink()
|
||||
break
|
||||
case 'e':
|
||||
event.preventDefault()
|
||||
wrapSelection('`', '`')
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}, [insertLink, wrapSelection])
|
||||
|
||||
return (
|
||||
<div className={`mt-2 rounded-xl border bg-white/10 ${error ? 'border-red-300/60' : 'border-white/15'}`}>
|
||||
<div className="flex items-center justify-between border-b border-white/10 px-2 py-1.5">
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setTab('write')}
|
||||
className={`rounded-md px-2.5 py-1 text-xs font-medium transition ${tab === 'write' ? 'bg-white/12 text-white' : 'text-white/55 hover:text-white/80'}`}
|
||||
>
|
||||
Write
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setTab('preview')}
|
||||
className={`rounded-md px-2.5 py-1 text-xs font-medium transition ${tab === 'preview' ? 'bg-white/12 text-white' : 'text-white/55 hover:text-white/80'}`}
|
||||
>
|
||||
Preview
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{tab === 'write' && (
|
||||
<>
|
||||
<div className="flex items-center gap-1 border-b border-white/10 px-2 py-1">
|
||||
<ToolbarButton title="Bold (Ctrl+B)" onClick={() => wrapSelection('**', '**')}>B</ToolbarButton>
|
||||
<ToolbarButton title="Italic (Ctrl+I)" onClick={() => wrapSelection('*', '*')}>I</ToolbarButton>
|
||||
<ToolbarButton title="Inline code (Ctrl+E)" onClick={() => wrapSelection('`', '`')}>{'</>'}</ToolbarButton>
|
||||
<ToolbarButton title="Link (Ctrl+K)" onClick={insertLink}>Link</ToolbarButton>
|
||||
<span className="mx-1 h-4 w-px bg-white/10" aria-hidden="true" />
|
||||
<ToolbarButton title="Bulleted list" onClick={() => prefixLines('- ')}>• List</ToolbarButton>
|
||||
<ToolbarButton title="Quote" onClick={() => prefixLines('> ')}>❝</ToolbarButton>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
id={id}
|
||||
ref={textareaRef}
|
||||
value={value}
|
||||
onChange={(event) => onChange?.(event.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
rows={5}
|
||||
className="w-full resize-y bg-transparent px-3 py-2 text-sm text-white placeholder-white/45 focus:outline-none"
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
|
||||
<p className="px-3 pb-2 text-[11px] text-white/45">
|
||||
Markdown supported · Ctrl+B bold · Ctrl+I italic · Ctrl+K link
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === 'preview' && (
|
||||
<div className="min-h-[132px] px-3 py-2">
|
||||
{String(value || '').trim() ? (
|
||||
<div className="prose prose-invert prose-sm max-w-none text-white/85 [&_a]:text-sky-300 [&_a]:no-underline hover:[&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-white/20 [&_blockquote]:pl-3 [&_code]:rounded [&_code]:bg-white/10 [&_code]:px-1 [&_code]:py-0.5 [&_ul]:pl-4 [&_ol]:pl-4">
|
||||
<ReactMarkdown
|
||||
allowedElements={['p', 'strong', 'em', 'a', 'code', 'pre', 'ul', 'ol', 'li', 'blockquote', 'br']}
|
||||
unwrapDisallowed
|
||||
components={{
|
||||
a: ({ href, children }) => (
|
||||
<a href={href} target="_blank" rel="noopener noreferrer nofollow">{children}</a>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{String(value || '')}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm italic text-white/35">Nothing to preview</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function UploadSidebar({
|
||||
title = 'Artwork details',
|
||||
description = 'Complete metadata before publishing',
|
||||
@@ -44,15 +224,15 @@ export default function UploadSidebar({
|
||||
</label>
|
||||
|
||||
<label className="block">
|
||||
<span className="text-sm font-medium text-white/90">Description</span>
|
||||
<textarea
|
||||
<span className="text-sm font-medium text-white/90">Description <span className="text-red-300">*</span></span>
|
||||
<MarkdownEditor
|
||||
id="upload-sidebar-description"
|
||||
value={metadata.description}
|
||||
onChange={(event) => onChangeDescription?.(event.target.value)}
|
||||
rows={5}
|
||||
className="mt-2 w-full rounded-xl border border-white/15 bg-white/10 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-sky-300/70"
|
||||
onChange={onChangeDescription}
|
||||
placeholder="Describe your artwork (Markdown supported)."
|
||||
error={errors.description}
|
||||
/>
|
||||
{errors.description && <p className="mt-1 text-xs text-red-200">{errors.description}</p>}
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -15,8 +15,10 @@ import useUploadMachine, { machineStates } from '../../hooks/upload/useUploadMac
|
||||
import useFileValidation from '../../hooks/upload/useFileValidation'
|
||||
import useVisionTags from '../../hooks/upload/useVisionTags'
|
||||
|
||||
import UploadStepper from './UploadStepper'
|
||||
import StudioStatusBar from './StudioStatusBar'
|
||||
import UploadOverlay from './UploadOverlay'
|
||||
import UploadActions from './UploadActions'
|
||||
import PublishPanel from './PublishPanel'
|
||||
import Step1FileUpload from './steps/Step1FileUpload'
|
||||
import Step2Details from './steps/Step2Details'
|
||||
import Step3Publish from './steps/Step3Publish'
|
||||
@@ -24,6 +26,7 @@ import Step3Publish from './steps/Step3Publish'
|
||||
import {
|
||||
buildCategoryTree,
|
||||
getContentTypeValue,
|
||||
getProcessingTransparencyLabel,
|
||||
} from '../../lib/uploadUtils'
|
||||
|
||||
// ─── Wizard step config ───────────────────────────────────────────────────────
|
||||
@@ -59,6 +62,7 @@ export default function UploadWizard({
|
||||
contentTypes = [],
|
||||
suggestedTags = [],
|
||||
}) {
|
||||
const [notices, setNotices] = useState([])
|
||||
// ── UI state ──────────────────────────────────────────────────────────────
|
||||
const [activeStep, setActiveStep] = useState(1)
|
||||
const [showRestoredBanner, setShowRestoredBanner] = useState(Boolean(initialDraftId))
|
||||
@@ -68,6 +72,15 @@ export default function UploadWizard({
|
||||
return Number.isFinite(parsed) && parsed > 0 ? Math.floor(parsed) : null
|
||||
})
|
||||
|
||||
// ── Publish options (Studio) ──────────────────────────────────────────────
|
||||
const [publishMode, setPublishMode] = useState('now') // 'now' | 'schedule'
|
||||
const [scheduledAt, setScheduledAt] = useState(null) // UTC ISO or null
|
||||
const [visibility, setVisibility] = useState('public') // 'public'|'unlisted'|'private'
|
||||
const [showMobilePublishPanel, setShowMobilePublishPanel] = useState(false)
|
||||
const userTimezone = useMemo(() => {
|
||||
try { return Intl.DateTimeFormat().resolvedOptions().timeZone } catch { return 'UTC' }
|
||||
}, [])
|
||||
|
||||
// ── File + screenshot state ───────────────────────────────────────────────
|
||||
const [primaryFile, setPrimaryFile] = useState(null)
|
||||
const [screenshots, setScreenshots] = useState([])
|
||||
@@ -117,6 +130,17 @@ export default function UploadWizard({
|
||||
metadata,
|
||||
chunkSize,
|
||||
onArtworkCreated: (id) => setResolvedArtworkId(id),
|
||||
onNotice: (notice) => {
|
||||
if (!notice?.message) return
|
||||
const normalizedType = ['success', 'warning', 'error'].includes(String(notice.type || '').toLowerCase())
|
||||
? String(notice.type).toLowerCase()
|
||||
: 'error'
|
||||
const id = `${Date.now()}-${Math.random().toString(16).slice(2)}`
|
||||
setNotices((prev) => [...prev, { id, type: normalizedType, message: String(notice.message) }])
|
||||
window.setTimeout(() => {
|
||||
setNotices((prev) => prev.filter((item) => item.id !== id))
|
||||
}, 4500)
|
||||
},
|
||||
})
|
||||
|
||||
// ── Upload-ready flag (needed before vision hook) ─────────────────────────
|
||||
@@ -177,12 +201,14 @@ export default function UploadWizard({
|
||||
const metadataErrors = useMemo(() => {
|
||||
const errors = {}
|
||||
if (!String(metadata.title || '').trim()) errors.title = 'Title is required.'
|
||||
if (!String(metadata.description || '').trim()) errors.description = 'Description is required.'
|
||||
if (!metadata.contentType) errors.contentType = 'Content type is required.'
|
||||
if (!metadata.rootCategoryId) errors.category = 'Root category is required.'
|
||||
if (metadata.rootCategoryId && requiresSubCategory && !metadata.subCategoryId) {
|
||||
errors.category = 'Subcategory is required for the selected category.'
|
||||
}
|
||||
if (!metadata.rightsAccepted) errors.rights = 'Rights confirmation is required.'
|
||||
if (!Array.isArray(metadata.tags) || metadata.tags.length === 0) errors.tags = 'At least one tag is required.'
|
||||
return errors
|
||||
}, [metadata, requiresSubCategory])
|
||||
|
||||
@@ -212,6 +238,8 @@ export default function UploadWizard({
|
||||
// ── Derived flags ─────────────────────────────────────────────────────────
|
||||
const highestUnlockedStep = uploadReady ? (detailsValid ? 3 : 2) : 1
|
||||
const showProgress = ![machineStates.idle, machineStates.cancelled].includes(machine.state)
|
||||
const processingLabel = getProcessingTransparencyLabel(machine.processingStatus, machine.state)
|
||||
const showOverlay = ['initializing', 'uploading', 'finishing', 'processing', 'error'].includes(machine.state)
|
||||
|
||||
const canPublish = useMemo(() => (
|
||||
uploadReady &&
|
||||
@@ -219,11 +247,11 @@ export default function UploadWizard({
|
||||
machine.state !== machineStates.publishing
|
||||
), [uploadReady, metadata.rightsAccepted, machine.state])
|
||||
|
||||
const stepProgressPercent = useMemo(() => {
|
||||
if (activeStep === 1) return 33
|
||||
if (activeStep === 2) return 66
|
||||
return 100
|
||||
}, [activeStep])
|
||||
const canScheduleSubmit = useMemo(() => {
|
||||
if (!canPublish) return false
|
||||
if (publishMode === 'schedule') return Boolean(scheduledAt)
|
||||
return true
|
||||
}, [canPublish, publishMode, scheduledAt])
|
||||
|
||||
// ── Validation surface for parent ────────────────────────────────────────
|
||||
const validationErrors = useMemo(
|
||||
@@ -269,7 +297,13 @@ export default function UploadWizard({
|
||||
clearPolling()
|
||||
}
|
||||
}, [abortAllRequests, clearPolling])
|
||||
|
||||
// ── ESC key closes mobile drawer (spec §7) ─────────────────────────────
|
||||
useEffect(() => {
|
||||
if (!showMobilePublishPanel) return
|
||||
const handler = (e) => { if (e.key === 'Escape') setShowMobilePublishPanel(false) }
|
||||
document.addEventListener('keydown', handler)
|
||||
return () => document.removeEventListener('keydown', handler)
|
||||
}, [showMobilePublishPanel])
|
||||
// ── Metadata helpers ──────────────────────────────────────────────────────
|
||||
const setMeta = useCallback((patch) => setMetadata((prev) => ({ ...prev, ...patch })), [])
|
||||
|
||||
@@ -281,6 +315,10 @@ export default function UploadWizard({
|
||||
setMetadata(initialMetadata)
|
||||
setIsUploadLocked(false)
|
||||
hasAutoAdvancedRef.current = false
|
||||
setPublishMode('now')
|
||||
setScheduledAt(null)
|
||||
setVisibility('public')
|
||||
setShowMobilePublishPanel(false)
|
||||
setResolvedArtworkId(() => {
|
||||
const parsed = Number(initialDraftId)
|
||||
return Number.isFinite(parsed) && parsed > 0 ? Math.floor(parsed) : null
|
||||
@@ -296,36 +334,45 @@ export default function UploadWizard({
|
||||
const renderStepContent = () => {
|
||||
// Complete / success screen
|
||||
if (machine.state === machineStates.complete) {
|
||||
const wasScheduled = machine.lastAction === 'schedule'
|
||||
return (
|
||||
<motion.div
|
||||
initial={prefersReducedMotion ? false : { opacity: 0, scale: 0.98 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.28, ease: 'easeOut' }}
|
||||
className="rounded-2xl ring-1 ring-emerald-300/25 bg-emerald-500/8 p-8 text-center"
|
||||
className={`rounded-2xl p-8 text-center ${wasScheduled ? 'ring-1 ring-violet-300/25 bg-violet-500/8' : 'ring-1 ring-emerald-300/25 bg-emerald-500/8'}`}
|
||||
>
|
||||
<motion.div
|
||||
initial={prefersReducedMotion ? false : { scale: 0.7, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={prefersReducedMotion ? { duration: 0 } : { delay: 0.1, duration: 0.26, ease: 'backOut' }}
|
||||
className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full ring-2 ring-emerald-300/40 bg-emerald-500/20 text-emerald-200"
|
||||
className={`mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full text-2xl`}
|
||||
>
|
||||
<svg className="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
{wasScheduled ? '🕐' : '🎉'}
|
||||
</motion.div>
|
||||
|
||||
<h3 className="text-xl font-semibold text-white">Your artwork is live 🎉</h3>
|
||||
<p className="mt-2 text-sm text-emerald-100/75">
|
||||
It has been published and is now visible to the community.
|
||||
<h3 className="text-xl font-semibold text-white">
|
||||
{wasScheduled ? 'Artwork scheduled!' : 'Your artwork is live!'}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-white/65">
|
||||
{wasScheduled
|
||||
? scheduledAt
|
||||
? `Will publish on ${new Intl.DateTimeFormat('en-GB', { timeZone: userTimezone, weekday: 'short', day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false }).format(new Date(scheduledAt))}`
|
||||
: 'Your artwork is scheduled for future publishing.'
|
||||
: 'It has been published and is now visible to the community.'}
|
||||
</p>
|
||||
|
||||
<div className="mt-6 flex flex-wrap justify-center gap-3">
|
||||
<a
|
||||
href={resolvedArtworkId ? `/artwork/${resolvedArtworkId}` : '/'}
|
||||
className="rounded-lg ring-1 ring-emerald-300/45 bg-emerald-400/20 px-4 py-2 text-sm font-medium text-emerald-50 hover:bg-emerald-400/30 transition"
|
||||
>
|
||||
View artwork
|
||||
</a>
|
||||
<div className="mt-6 flex flex-wrap justify-center gap-3">
|
||||
{!wasScheduled && (
|
||||
<a
|
||||
href={resolvedArtworkId
|
||||
? `/art/${resolvedArtworkId}${machine.slug ? `/${machine.slug}` : ''}`
|
||||
: '/'}
|
||||
className="rounded-lg ring-1 ring-emerald-300/45 bg-emerald-400/20 px-4 py-2 text-sm font-medium text-emerald-50 hover:bg-emerald-400/30 transition"
|
||||
>
|
||||
View artwork
|
||||
</a>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleReset}
|
||||
@@ -355,9 +402,6 @@ export default function UploadWizard({
|
||||
screenshotPerFileErrors={screenshotPerFileErrors}
|
||||
onScreenshotsChange={setScreenshots}
|
||||
machine={machine}
|
||||
showProgress={showProgress}
|
||||
onRetry={() => handleRetry(canPublish)}
|
||||
onReset={handleReset}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -400,6 +444,12 @@ export default function UploadWizard({
|
||||
metadata={metadata}
|
||||
canPublish={canPublish}
|
||||
uploadReady={uploadReady}
|
||||
publishMode={publishMode}
|
||||
scheduledAt={scheduledAt}
|
||||
timezone={userTimezone}
|
||||
visibility={visibility}
|
||||
allRootCategoryOptions={allRootCategoryOptions}
|
||||
filteredCategoryTree={filteredCategoryTree}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -407,7 +457,7 @@ export default function UploadWizard({
|
||||
// ── Action bar helpers ────────────────────────────────────────────────────
|
||||
const disableReason = (() => {
|
||||
if (activeStep === 1) return validationErrors[0] || machine.error || 'Complete upload requirements first.'
|
||||
if (activeStep === 2) return metadataErrors.title || metadataErrors.contentType || metadataErrors.category || metadataErrors.rights || 'Complete required metadata.'
|
||||
if (activeStep === 2) return metadataErrors.title || metadataErrors.contentType || metadataErrors.category || metadataErrors.rights || metadataErrors.tags || 'Complete required metadata.'
|
||||
return machine.error || 'Publish is available when upload is ready and rights are confirmed.'
|
||||
})()
|
||||
|
||||
@@ -415,9 +465,31 @@ export default function UploadWizard({
|
||||
return (
|
||||
<section
|
||||
ref={stepContentRef}
|
||||
className="space-y-6 pb-24 text-white lg:pb-0"
|
||||
className="space-y-4 pb-32 text-white lg:pb-6"
|
||||
data-is-archive={isArchive ? 'true' : 'false'}
|
||||
>
|
||||
{notices.length > 0 && (
|
||||
<div className="fixed right-4 top-4 z-[70] w-[min(92vw,420px)] space-y-2">
|
||||
{notices.map((notice) => (
|
||||
<div
|
||||
key={notice.id}
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
className={[
|
||||
'rounded-xl border px-4 py-3 text-sm shadow-lg backdrop-blur',
|
||||
notice.type === 'success'
|
||||
? 'border-emerald-400/45 bg-emerald-500/12 text-emerald-100'
|
||||
: notice.type === 'warning'
|
||||
? 'border-amber-400/45 bg-amber-500/12 text-amber-100'
|
||||
: 'border-red-400/45 bg-red-500/12 text-red-100',
|
||||
].join(' ')}
|
||||
>
|
||||
{notice.message}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Restored draft banner */}
|
||||
{showRestoredBanner && (
|
||||
<div className="rounded-xl ring-1 ring-sky-300/25 bg-sky-500/10 px-4 py-2.5 text-sm text-sky-100">
|
||||
@@ -434,70 +506,192 @@ export default function UploadWizard({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step indicator */}
|
||||
<UploadStepper
|
||||
{/* ── Studio Status Bar (sticky step header + progress) ────────────── */}
|
||||
<StudioStatusBar
|
||||
steps={wizardSteps}
|
||||
activeStep={activeStep}
|
||||
highestUnlockedStep={highestUnlockedStep}
|
||||
machineState={machine.state}
|
||||
progress={machine.progress}
|
||||
showProgress={showProgress}
|
||||
onStepClick={goToStep}
|
||||
/>
|
||||
|
||||
{/* Thin progress bar */}
|
||||
<div className="-mt-3 rounded-full bg-white/8 p-0.5">
|
||||
<motion.div
|
||||
className="h-1.5 rounded-full bg-gradient-to-r from-sky-400/90 via-cyan-300/90 to-emerald-300/90"
|
||||
animate={{ width: `${stepProgressPercent}%` }}
|
||||
transition={quickTransition}
|
||||
/>
|
||||
{/* ── Main body: two-column on desktop ─────────────────────────────── */}
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:gap-6">
|
||||
{/* Left / main column: step content */}
|
||||
<div className="min-w-0 flex-1">
|
||||
{/* Step content + floating progress overlay */}
|
||||
<div className={`relative transition-[padding-bottom] duration-300 ${showOverlay ? 'pb-36' : ''}`}>
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
<motion.div
|
||||
key={`step-${activeStep}`}
|
||||
initial={prefersReducedMotion ? false : { opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={prefersReducedMotion ? {} : { opacity: 0, y: -8 }}
|
||||
transition={quickTransition}
|
||||
>
|
||||
{renderStepContent()}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
|
||||
<UploadOverlay
|
||||
machineState={machine.state}
|
||||
progress={machine.progress}
|
||||
processingLabel={processingLabel}
|
||||
error={machine.error}
|
||||
onRetry={() => handleRetry(canPublish, { mode: publishMode, publishAt: scheduledAt, timezone: userTimezone, visibility })}
|
||||
onReset={handleReset}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Wizard action bar (nav: back/next/start/retry) */}
|
||||
{machine.state !== machineStates.complete && (
|
||||
<div className="mt-4">
|
||||
<UploadActions
|
||||
step={activeStep}
|
||||
canStart={canStartUpload && [machineStates.idle, machineStates.error, machineStates.cancelled].includes(machine.state)}
|
||||
canContinue={detailsValid}
|
||||
canPublish={canScheduleSubmit}
|
||||
canGoBack={activeStep > 1 && machine.state !== machineStates.complete}
|
||||
canReset={Boolean(primaryFile || screenshots.length || metadata.title || metadata.description || metadata.tags.length)}
|
||||
canCancel={activeStep === 1 && [
|
||||
machineStates.initializing,
|
||||
machineStates.uploading,
|
||||
machineStates.finishing,
|
||||
machineStates.processing,
|
||||
].includes(machine.state)}
|
||||
canRetry={machine.state === machineStates.error}
|
||||
isUploading={[machineStates.uploading, machineStates.initializing].includes(machine.state)}
|
||||
isProcessing={[machineStates.processing, machineStates.finishing].includes(machine.state)}
|
||||
isPublishing={machine.state === machineStates.publishing}
|
||||
isCancelling={machine.isCancelling}
|
||||
disableReason={disableReason}
|
||||
onStart={runUploadFlow}
|
||||
onContinue={() => detailsValid && setActiveStep(3)}
|
||||
onPublish={() => handlePublish(canPublish, { mode: publishMode, publishAt: scheduledAt, timezone: userTimezone, visibility })}
|
||||
onBack={() => setActiveStep((s) => Math.max(1, s - 1))}
|
||||
onCancel={handleCancel}
|
||||
onReset={handleReset}
|
||||
onRetry={() => handleRetry(canPublish, { mode: publishMode, publishAt: scheduledAt, timezone: userTimezone, visibility })}
|
||||
onSaveDraft={() => {}}
|
||||
showSaveDraft={activeStep === 2}
|
||||
resetLabel={isUploadLocked ? 'Reset upload' : 'Reset'}
|
||||
mobileSticky
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right column: PublishPanel (sticky sidebar on lg+) */}
|
||||
{(primaryFile || resolvedArtworkId) && machine.state !== machineStates.complete && (
|
||||
<div className="hidden lg:block lg:w-72 xl:w-80 shrink-0 lg:sticky lg:top-20 lg:self-start">
|
||||
<PublishPanel
|
||||
primaryPreviewUrl={primaryPreviewUrl}
|
||||
isArchive={isArchive}
|
||||
screenshots={screenshots}
|
||||
metadata={metadata}
|
||||
machineState={machine.state}
|
||||
uploadReady={uploadReady}
|
||||
canPublish={canPublish}
|
||||
isPublishing={machine.state === machineStates.publishing}
|
||||
isArchiveRequiresScreenshot={isArchive}
|
||||
publishMode={publishMode}
|
||||
scheduledAt={scheduledAt}
|
||||
timezone={userTimezone}
|
||||
visibility={visibility}
|
||||
onPublishModeChange={setPublishMode}
|
||||
onScheduleAt={setScheduledAt}
|
||||
onVisibilityChange={setVisibility}
|
||||
onToggleRights={(checked) => setMeta({ rightsAccepted: Boolean(checked) })}
|
||||
onPublish={() => handlePublish(canPublish, { mode: publishMode, publishAt: scheduledAt, timezone: userTimezone, visibility })}
|
||||
onCancel={handleCancel}
|
||||
onGoToStep={goToStep}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Animated step content */}
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
<motion.div
|
||||
key={`step-${activeStep}`}
|
||||
initial={prefersReducedMotion ? false : { opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={prefersReducedMotion ? {} : { opacity: 0, y: -8 }}
|
||||
transition={quickTransition}
|
||||
>
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{renderStepContent()}
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
{/* ── Mobile: floating "Publish" button that opens bottom sheet ────── */}
|
||||
{(primaryFile || resolvedArtworkId) && machine.state !== machineStates.complete && (
|
||||
<div className="fixed bottom-4 right-4 z-30 lg:hidden">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowMobilePublishPanel((v) => !v)}
|
||||
className="flex items-center gap-2 rounded-full bg-sky-500 px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-sky-900/40 transition hover:bg-sky-400 active:scale-95"
|
||||
>
|
||||
<svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Publish
|
||||
{!canPublish && (
|
||||
<span className="ml-1 rounded-full bg-white/20 px-1.5 text-[10px]">
|
||||
{[...(!uploadReady ? [1] : []), ...(!metadata.title ? [1] : []), ...(!metadata.rightsAccepted ? [1] : [])].length}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sticky action bar */}
|
||||
<UploadActions
|
||||
step={activeStep}
|
||||
canStart={canStartUpload && [machineStates.idle, machineStates.error, machineStates.cancelled].includes(machine.state)}
|
||||
canContinue={detailsValid}
|
||||
canPublish={canPublish}
|
||||
canGoBack={activeStep > 1 && machine.state !== machineStates.complete}
|
||||
canReset={Boolean(primaryFile || screenshots.length || metadata.title || metadata.description || metadata.tags.length)}
|
||||
canCancel={activeStep === 1 && [
|
||||
machineStates.initializing,
|
||||
machineStates.uploading,
|
||||
machineStates.finishing,
|
||||
machineStates.processing,
|
||||
].includes(machine.state)}
|
||||
canRetry={machine.state === machineStates.error}
|
||||
isUploading={[machineStates.uploading, machineStates.initializing].includes(machine.state)}
|
||||
isProcessing={[machineStates.processing, machineStates.finishing].includes(machine.state)}
|
||||
isPublishing={machine.state === machineStates.publishing}
|
||||
isCancelling={machine.isCancelling}
|
||||
disableReason={disableReason}
|
||||
onStart={runUploadFlow}
|
||||
onContinue={() => detailsValid && setActiveStep(3)}
|
||||
onPublish={() => handlePublish(canPublish)}
|
||||
onBack={() => setActiveStep((s) => Math.max(1, s - 1))}
|
||||
onCancel={handleCancel}
|
||||
onReset={handleReset}
|
||||
onRetry={() => handleRetry(canPublish)}
|
||||
onSaveDraft={() => {}}
|
||||
showSaveDraft={activeStep === 2}
|
||||
resetLabel={isUploadLocked ? 'Reset upload' : 'Reset'}
|
||||
mobileSticky
|
||||
/>
|
||||
{/* ── Mobile Publish panel bottom-sheet overlay ────────────────────── */}
|
||||
<AnimatePresence>
|
||||
{showMobilePublishPanel && (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<motion.div
|
||||
key="mobile-panel-backdrop"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm lg:hidden"
|
||||
onClick={() => setShowMobilePublishPanel(false)}
|
||||
/>
|
||||
{/* Sheet */}
|
||||
<motion.div
|
||||
key="mobile-panel-sheet"
|
||||
initial={{ y: '100%' }}
|
||||
animate={{ y: 0 }}
|
||||
exit={{ y: '100%' }}
|
||||
transition={prefersReducedMotion ? { duration: 0 } : { type: 'spring', damping: 30, stiffness: 300 }}
|
||||
className="fixed bottom-0 left-0 right-0 z-50 max-h-[80vh] overflow-y-auto rounded-t-2xl bg-slate-900 ring-1 ring-white/10 p-5 pb-8 lg:hidden"
|
||||
>
|
||||
<div className="mx-auto mb-4 h-1 w-12 rounded-full bg-white/20" aria-hidden="true" />
|
||||
<PublishPanel
|
||||
primaryPreviewUrl={primaryPreviewUrl}
|
||||
isArchive={isArchive}
|
||||
screenshots={screenshots}
|
||||
metadata={metadata}
|
||||
machineState={machine.state}
|
||||
uploadReady={uploadReady}
|
||||
canPublish={canPublish}
|
||||
isPublishing={machine.state === machineStates.publishing}
|
||||
isArchiveRequiresScreenshot={isArchive}
|
||||
publishMode={publishMode}
|
||||
scheduledAt={scheduledAt}
|
||||
timezone={userTimezone}
|
||||
visibility={visibility}
|
||||
onPublishModeChange={setPublishMode}
|
||||
onScheduleAt={setScheduledAt}
|
||||
onVisibilityChange={setVisibility}
|
||||
onToggleRights={(checked) => setMeta({ rightsAccepted: Boolean(checked) })}
|
||||
onPublish={() => {
|
||||
setShowMobilePublishPanel(false)
|
||||
handlePublish(canPublish, { mode: publishMode, publishAt: scheduledAt, timezone: userTimezone, visibility })
|
||||
}}
|
||||
onCancel={() => {
|
||||
setShowMobilePublishPanel(false)
|
||||
handleCancel()
|
||||
}}
|
||||
onGoToStep={(s) => {
|
||||
setShowMobilePublishPanel(false)
|
||||
goToStep(s)
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ import { cleanup, render, screen, waitFor, within } from '@testing-library/react
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import UploadWizard from '../UploadWizard'
|
||||
|
||||
function installAxiosStubs({ statusValue = 'ready', initError = null, holdChunk = false } = {}) {
|
||||
function installAxiosStubs({ statusValue = 'ready', initError = null, holdChunk = false, finishError = null } = {}) {
|
||||
window.axios = {
|
||||
post: vi.fn((url, payload, config = {}) => {
|
||||
if (url === '/api/uploads/init') {
|
||||
@@ -44,6 +44,7 @@ function installAxiosStubs({ statusValue = 'ready', initError = null, holdChunk
|
||||
}
|
||||
|
||||
if (url === '/api/uploads/finish') {
|
||||
if (finishError) return Promise.reject(finishError)
|
||||
return Promise.resolve({ data: { processing_state: statusValue, status: statusValue } })
|
||||
}
|
||||
|
||||
@@ -281,6 +282,30 @@ describe('UploadWizard step flow', () => {
|
||||
expect((bar.className || '').includes('bottom-0')).toBe(true)
|
||||
})
|
||||
|
||||
it('shows mapped duplicate hash toast when finish returns duplicate_hash', async () => {
|
||||
installAxiosStubs({
|
||||
finishError: {
|
||||
response: {
|
||||
status: 409,
|
||||
data: {
|
||||
reason: 'duplicate_hash',
|
||||
message: 'Duplicate upload is not allowed. This file already exists.',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
await renderWizard({ initialDraftId: 310 })
|
||||
await uploadPrimary(new File(['img'], 'duplicate.png', { type: 'image/png' }))
|
||||
|
||||
await act(async () => {
|
||||
await userEvent.click(await screen.findByRole('button', { name: /start upload/i }))
|
||||
})
|
||||
|
||||
const toast = await screen.findByRole('alert')
|
||||
expect(toast.textContent).toMatch(/already exists in skinbase/i)
|
||||
})
|
||||
|
||||
it('locks step 1 file input after upload and unlocks after reset', async () => {
|
||||
installAxiosStubs({ statusValue: 'ready' })
|
||||
await renderWizard({ initialDraftId: 309 })
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
import React from 'react'
|
||||
import UploadDropzone from '../UploadDropzone'
|
||||
import ScreenshotUploader from '../ScreenshotUploader'
|
||||
import UploadProgress from '../UploadProgress'
|
||||
import { machineStates } from '../../../hooks/upload/useUploadMachine'
|
||||
import { getProcessingTransparencyLabel } from '../../../lib/uploadUtils'
|
||||
|
||||
/**
|
||||
* Step1FileUpload
|
||||
@@ -28,24 +25,9 @@ export default function Step1FileUpload({
|
||||
screenshotErrors,
|
||||
screenshotPerFileErrors,
|
||||
onScreenshotsChange,
|
||||
// Machine state
|
||||
// Machine state (passed for potential future use)
|
||||
machine,
|
||||
showProgress,
|
||||
onRetry,
|
||||
onReset,
|
||||
}) {
|
||||
const processingTransparencyLabel = getProcessingTransparencyLabel(
|
||||
machine.processingStatus,
|
||||
machine.state
|
||||
)
|
||||
|
||||
const progressStatus = (() => {
|
||||
if (machine.state === machineStates.ready_to_publish) return 'Ready'
|
||||
if (machine.state === machineStates.uploading) return 'Uploading'
|
||||
if (machine.state === machineStates.processing || machine.state === machineStates.finishing) return 'Processing'
|
||||
return 'Idle'
|
||||
})()
|
||||
|
||||
return (
|
||||
<div className="bg-panel/80 backdrop-blur rounded-2xl shadow-xl shadow-black/40 ring-1 ring-white/10 p-6 space-y-5">
|
||||
{/* Step header */}
|
||||
@@ -107,23 +89,6 @@ export default function Step1FileUpload({
|
||||
looksGoodText="Looks good"
|
||||
onFilesChange={onScreenshotsChange}
|
||||
/>
|
||||
|
||||
{/* Progress panel */}
|
||||
{showProgress && (
|
||||
<UploadProgress
|
||||
title="Upload progress"
|
||||
description="Upload and processing status"
|
||||
status={progressStatus}
|
||||
progress={machine.progress}
|
||||
state={machine.state}
|
||||
processingStatus={machine.processingStatus}
|
||||
isCancelling={machine.isCancelling}
|
||||
error={machine.error}
|
||||
processingLabel={processingTransparencyLabel}
|
||||
onRetry={onRetry}
|
||||
onReset={onReset}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -24,7 +24,11 @@ function PublishCheckBadge({ label, ok }) {
|
||||
* Step3Publish
|
||||
*
|
||||
* Step 3 of the upload wizard: review summary and publish action.
|
||||
* Shows a compact artwork preview, metadata summary, and readiness badges.
|
||||
* Shows a compact artwork preview, metadata summary, readiness badges,
|
||||
* and a summary of publish mode / schedule + visibility.
|
||||
*
|
||||
* Publish controls (mode/schedule picker) live in PublishPanel (sidebar).
|
||||
* This step serves as the final review before the user clicks Publish.
|
||||
*/
|
||||
export default function Step3Publish({
|
||||
headingRef,
|
||||
@@ -39,17 +43,36 @@ export default function Step3Publish({
|
||||
// Readiness
|
||||
canPublish,
|
||||
uploadReady,
|
||||
// Publish options (from wizard state, for summary display only)
|
||||
publishMode = 'now',
|
||||
scheduledAt = null,
|
||||
timezone = null,
|
||||
visibility = 'public',
|
||||
// Category tree (for label lookup)
|
||||
allRootCategoryOptions = [],
|
||||
filteredCategoryTree = [],
|
||||
}) {
|
||||
const prefersReducedMotion = useReducedMotion()
|
||||
const quickTransition = prefersReducedMotion ? { duration: 0 } : { duration: 0.2, ease: 'easeOut' }
|
||||
|
||||
const hasPreview = Boolean(primaryPreviewUrl && !isArchive)
|
||||
|
||||
// ── Category label lookup ────────────────────────────────────────────────
|
||||
const rootCategory = allRootCategoryOptions.find(
|
||||
(r) => String(r.id) === String(metadata.rootCategoryId)
|
||||
) ?? null
|
||||
const rootLabel = rootCategory?.name ?? null
|
||||
const subCategory = rootCategory?.children?.find(
|
||||
(c) => String(c.id) === String(metadata.subCategoryId)
|
||||
) ?? null
|
||||
const subLabel = subCategory?.name ?? null
|
||||
|
||||
const checks = [
|
||||
{ label: 'File uploaded', ok: uploadReady },
|
||||
{ label: 'Scan passed', ok: uploadReady },
|
||||
{ label: 'Preview ready', ok: hasPreview || (isArchive && screenshots.length > 0) },
|
||||
{ label: 'Rights confirmed', ok: Boolean(metadata.rightsAccepted) },
|
||||
{ label: 'Tags added', ok: Array.isArray(metadata.tags) && metadata.tags.length > 0 },
|
||||
]
|
||||
|
||||
return (
|
||||
@@ -104,11 +127,11 @@ export default function Step3Publish({
|
||||
{metadata.contentType && (
|
||||
<span className="capitalize">Type: <span className="text-white/75">{metadata.contentType}</span></span>
|
||||
)}
|
||||
{metadata.rootCategoryId && (
|
||||
<span>Category: <span className="text-white/75">{metadata.rootCategoryId}</span></span>
|
||||
{rootLabel && (
|
||||
<span>Category: <span className="text-white/75">{rootLabel}</span></span>
|
||||
)}
|
||||
{metadata.subCategoryId && (
|
||||
<span>Sub: <span className="text-white/75">{metadata.subCategoryId}</span></span>
|
||||
{subLabel && (
|
||||
<span>Sub: <span className="text-white/75">{subLabel}</span></span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -129,6 +152,32 @@ export default function Step3Publish({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Publish summary: visibility + schedule */}
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full border border-white/15 bg-white/6 px-2.5 py-1 text-xs text-white/60">
|
||||
👁 {visibility === 'public' ? 'Public' : visibility === 'unlisted' ? 'Unlisted' : 'Private'}
|
||||
</span>
|
||||
{publishMode === 'schedule' && scheduledAt ? (
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full border border-violet-300/30 bg-violet-500/15 px-2.5 py-1 text-xs text-violet-200">
|
||||
🕐 Scheduled
|
||||
{timezone && (
|
||||
<span className="text-violet-300/70">
|
||||
{' '}·{' '}
|
||||
{new Intl.DateTimeFormat('en-GB', {
|
||||
timeZone: timezone,
|
||||
weekday: 'short', day: 'numeric', month: 'short',
|
||||
hour: '2-digit', minute: '2-digit', hour12: false,
|
||||
}).format(new Date(scheduledAt))}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full border border-emerald-300/30 bg-emerald-500/12 px-2.5 py-1 text-xs text-emerald-200">
|
||||
⚡ Publish immediately
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Readiness badges */}
|
||||
<div>
|
||||
<p className="mb-2.5 text-xs uppercase tracking-wide text-white/40">Readiness checks</p>
|
||||
|
||||
@@ -606,7 +606,7 @@ export default function UploadWizard({
|
||||
<div className="grid grid-cols-1 gap-3 text-sm text-white/80 md:grid-cols-2">
|
||||
<div><span className="text-white/50">Upload ID:</span> {uploadId || '—'}</div>
|
||||
<div><span className="text-white/50">Title:</span> {details.title || '—'}</div>
|
||||
<div className="md:col-span-2"><span className="text-white/50">URL preview:</span> /artwork/{urlPreviewSlug}</div>
|
||||
<div className="md:col-span-2"><span className="text-white/50">URL preview:</span> /art/{urlPreviewSlug}</div>
|
||||
<div><span className="text-white/50">Category:</span> {details.category_id || '—'}</div>
|
||||
<div><span className="text-white/50">Tags:</span> {(details.tags || []).join(', ') || '—'}</div>
|
||||
<div className="md:col-span-2"><span className="text-white/50">Preview path:</span> {previewPath || 'Will be resolved by backend pipeline'}</div>
|
||||
|
||||
Reference in New Issue
Block a user