aimond/sapiens-web3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add profile image enlargement and refine article display

Browse Source 
Implement image enlargement for profile pictures, add relative time display for articles using "X min ago", and ensure articles are sorted by publication date.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0fb68265-c270-4198-9584-3d9be9bddb41
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/0fb68265-c270-4198-9584-3d9be9bddb41/rOJiPGe
This commit is contained in:
kimjaehyeon0101
2025-09-30 04:33:42 +00:00
parent 329c58f70f
commit 8e4d12d99e
9 changed files with 1836 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/pages/MediaOutlet.tsx
View File

@ -24,6 +24,7 @@ export default function MediaOutlet() {
const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
const [isEditDescModalOpen, setIsEditDescModalOpen] = useState(false);
const [enlargedImage, setEnlargedImage] = useState<string | null>(null);
const [newDescription, setNewDescription] = useState("");
const [alternativeDescription, setAlternativeDescription] = useState("Partner at Type3 Capital and Non-Executive Director at TrueFi DAO with a strong background in fund management, venture capital, and digital assets");
const { user, isAuthenticated } = useAuth();
@ -346,7 +347,9 @@ export default function MediaOutlet() {
<img
src={outlet.imageUrl}
alt={outlet.name}
className="w-16 h-16 rounded-full object-cover"
className="w-16 h-16 rounded-full object-cover cursor-pointer hover:ring-2 hover:ring-blue-400 transition-all"
onClick={() => setEnlargedImage(outlet.imageUrl!)}
data-testid="image-outlet-profile"
/>
) : (
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center">
@ -528,6 +531,20 @@ export default function MediaOutlet() {
onClose={() => setIsSearchModalOpen(false)}
/>
{/* Image Enlargement Dialog */}
<Dialog open={!!enlargedImage} onOpenChange={() => setEnlargedImage(null)}>
<DialogContent className="max-w-3xl p-0 bg-transparent border-none">
{enlargedImage && (
<img
src={enlargedImage}
alt="Enlarged profile"
className="w-full h-auto rounded-lg"
data-testid="dialog-enlarged-outlet-image"
/>
)}
</DialogContent>
</Dialog>
{/* Edit Description Modal */}
<Dialog open={isEditDescModalOpen} onOpenChange={setIsEditDescModalOpen}>
<DialogContent data-testid="modal-edit-description">