update

2026-03-20 21:17:26 +01:00
parent 1a62fcb81d
commit 29c3ff8572
229 changed files with 13147 additions and 2577 deletions
--- a/resources/js/components/community/ActivityArtworkPreview.jsx
+++ b/resources/js/components/community/ActivityArtworkPreview.jsx
@@ -1,24 +1,46 @@
 import React from 'react'

-export default function ActivityArtworkPreview({ artwork }) {
-  if (!artwork?.url || !artwork?.thumb) return null
+export default function ActivityArtworkPreview({ artwork, story }) {
+  if (artwork?.url && artwork?.thumb) {
+    return (
+      <a
+        href={artwork.url}
+        className="group block w-full shrink-0 overflow-hidden rounded-2xl border border-white/[0.08] bg-white/[0.03] sm:w-[120px]"
+      >
+        <div className="aspect-[6/5] overflow-hidden bg-black/20">
+          <img
+            src={artwork.thumb}
+            alt={artwork.title || 'Artwork'}
+            className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.04]"
+            loading="lazy"
+            decoding="async"
+          />
+        </div>
+        <div className="border-t border-white/[0.06] px-3 py-2">
+          <p className="truncate text-[11px] font-medium text-white/65">{artwork.title || 'Artwork'}</p>
+        </div>
+      </a>
+    )
+  }
+
+  if (!story?.url || !story?.cover_url) return null

  return (
    <a
-      href={artwork.url}
+      href={story.url}
      className="group block w-full shrink-0 overflow-hidden rounded-2xl border border-white/[0.08] bg-white/[0.03] sm:w-[120px]"
    >
      <div className="aspect-[6/5] overflow-hidden bg-black/20">
        <img
-          src={artwork.thumb}
-          alt={artwork.title || 'Artwork'}
+          src={story.cover_url}
+          alt={story.title || 'Story'}
          className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.04]"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div className="border-t border-white/[0.06] px-3 py-2">
-        <p className="truncate text-[11px] font-medium text-white/65">{artwork.title || 'Artwork'}</p>
+        <p className="truncate text-[11px] font-medium text-white/65">{story.title || 'Story'}</p>
      </div>
    </a>
  )
--- a/resources/js/components/community/ActivityCard.jsx
+++ b/resources/js/components/community/ActivityCard.jsx
@@ -6,11 +6,65 @@ import ActivityReactions from './ActivityReactions'
 function ActivityHeadline({ activity }) {
  const artworkLink = activity?.artwork?.url
  const artworkTitle = activity?.artwork?.title || 'an artwork'
+  const storyLink = activity?.story?.url
+  const storyTitle = activity?.story?.title || 'a story'
  const mentionedUser = activity?.mentioned_user
  const reaction = activity?.reaction
  const commentAuthor = activity?.comment?.author
+  const targetUser = activity?.target_user

  switch (activity?.type) {
+    case 'upload':
+      if (storyLink) {
+        return (
+          <p className="text-sm leading-6 text-white/70">
+            <span className="font-medium text-white">published </span>
+            {storyLink ? <a href={storyLink} className="text-sky-300 hover:text-sky-200">{storyTitle}</a> : <span className="text-white">{storyTitle}</span>}
+          </p>
+        )
+      }
+
+      return (
+        <p className="text-sm leading-6 text-white/70">
+          <span className="font-medium text-white">published </span>
+          {artworkLink ? <a href={artworkLink} className="text-sky-300 hover:text-sky-200">{artworkTitle}</a> : <span className="text-white">{artworkTitle}</span>}
+        </p>
+      )
+    case 'favorite':
+      return (
+        <p className="text-sm leading-6 text-white/70">
+          <span className="font-medium text-white">favorited </span>
+          {artworkLink ? <a href={artworkLink} className="text-sky-300 hover:text-sky-200">{artworkTitle}</a> : <span className="text-white">{artworkTitle}</span>}
+        </p>
+      )
+    case 'follow':
+      return (
+        <p className="text-sm leading-6 text-white/70">
+          <span className="font-medium text-white">followed </span>
+          {targetUser?.profile_url ? <a href={targetUser.profile_url} className="text-sky-300 hover:text-sky-200">@{targetUser.username || targetUser.name}</a> : <span className="text-white">another creator</span>}
+        </p>
+      )
+    case 'award':
+      return (
+        <p className="text-sm leading-6 text-white/70">
+          <span className="font-medium text-white">awarded </span>
+          {artworkLink ? <a href={artworkLink} className="text-sky-300 hover:text-sky-200">{artworkTitle}</a> : <span className="text-white">{artworkTitle}</span>}
+        </p>
+      )
+    case 'story_like':
+      return (
+        <p className="text-sm leading-6 text-white/70">
+          <span className="font-medium text-white">liked </span>
+          {storyLink ? <a href={storyLink} className="text-sky-300 hover:text-sky-200">{storyTitle}</a> : <span className="text-white">{storyTitle}</span>}
+        </p>
+      )
+    case 'story_comment':
+      return (
+        <p className="text-sm leading-6 text-white/70">
+          <span className="font-medium text-white">commented on </span>
+          {storyLink ? <a href={storyLink} className="text-sky-300 hover:text-sky-200">{storyTitle}</a> : <span className="text-white">{storyTitle}</span>}
+        </p>
+      )
    case 'comment':
      return (
        <p className="text-sm leading-6 text-white/70">
@@ -80,7 +134,7 @@ export default function ActivityCard({ activity, isLoggedIn = false }) {
        </div>

        <div className="sm:ml-auto">
-          <ActivityArtworkPreview artwork={activity.artwork} />
+          <ActivityArtworkPreview artwork={activity.artwork} story={activity.story} />
        </div>
      </div>
    </article>
--- a/resources/js/components/community/ActivityReactions.jsx
+++ b/resources/js/components/community/ActivityReactions.jsx
@@ -3,8 +3,13 @@ import ReactionBar from '../comments/ReactionBar'

 export default function ActivityReactions({ activity, isLoggedIn = false }) {
  const commentId = activity?.comment?.id || null
-  const commentUrl = activity?.comment?.url || activity?.artwork?.url || '#'
+  const commentUrl = activity?.comment?.url || null
  const artworkUrl = activity?.artwork?.url || null
+  const storyUrl = activity?.story?.url || null
+
+  if (!commentId && !artworkUrl && !storyUrl) {
+    return null
+  }

  return (
    <div className="flex flex-wrap items-center gap-3 pt-2">
@@ -17,13 +22,15 @@ export default function ActivityReactions({ activity, isLoggedIn = false }) {
        />
      ) : null}

-      <a
-        href={commentUrl}
-        className="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1.5 text-xs font-medium text-white/55 transition hover:border-sky-400/30 hover:bg-sky-500/10 hover:text-sky-200"
-      >
-        <i className="fa-regular fa-comment-dots" />
-        Reply
-      </a>
+      {commentUrl ? (
+        <a
+          href={commentUrl}
+          className="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1.5 text-xs font-medium text-white/55 transition hover:border-sky-400/30 hover:bg-sky-500/10 hover:text-sky-200"
+        >
+          <i className="fa-regular fa-comment-dots" />
+          Reply
+        </a>
+      ) : null}

      {artworkUrl ? (
        <a
@@ -34,6 +41,16 @@ export default function ActivityReactions({ activity, isLoggedIn = false }) {
          View artwork
        </a>
      ) : null}
+
+      {storyUrl ? (
+        <a
+          href={storyUrl}
+          className="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1.5 text-xs font-medium text-white/55 transition hover:border-white/15 hover:bg-white/[0.07] hover:text-white"
+        >
+          <i className="fa-regular fa-newspaper" />
+          Read story
+        </a>
+      ) : null}
    </div>
  )
 }