Skip to content

feat(ui): rediseño de cuadro de publicaciones #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AlejandroMontijo wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(ui): rediseño de cuadro de publicaciones #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b45d376
feat(ui): rediseño neumorfismo suave iOS 2026, cabecera unificada y t…
AlejandroMontijo Aug 6, 2026
5a32562
fix(build): resolve TS6133 unused bgTint parameter to fix Vercel depl…
AlejandroMontijo Aug 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/feed/FeedWidgetCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ interface FeedWidgetCardProps {

export function FeedWidgetCard({ bgTint, icon, title, ctaLabel, ctaTo, children }: FeedWidgetCardProps) {
return (
<div className={`${bgTint} overflow-hidden rounded-none md:rounded-xl border-y md:border border-border/30 my-0 md:my-2`}>
<div className={`${bgTint} overflow-hidden rounded-3xl bg-card/75 dark:bg-card/45 backdrop-blur-xl border border-border/60 dark:border-white/10 p-4.5 mb-4 shadow-sm shadow-black/5 mx-1 md:mx-0 transition-all duration-300`}>
<div className="px-4 py-3">
<div className="flex items-center justify-between mb-2.5">
<div className="flex items-center gap-2">
Expand Down
10 changes: 5 additions & 5 deletions src/components/feed/PublicationCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,10 +318,10 @@ function PublicationCardInner({
};

return (
<article ref={cardRef} className="max-md:border-b max-md:border-border/40 max-md:bg-background pt-4 pb-3 flex flex-col gap-2 md:liquid-glass md:liquid-glass-hover md:p-4 md:mb-5">
<article ref={cardRef} className="relative rounded-3xl bg-card/75 dark:bg-card/45 backdrop-blur-xl border border-border/60 dark:border-white/10 p-4.5 mb-4 shadow-sm shadow-black/5 hover:shadow-md transition-all duration-300 flex flex-col gap-3.5 mx-1 md:mx-0">
{/* Header */}
{hideAuthor ? (
<div className="flex items-center justify-between px-4 md:px-0">
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">
{timeAgo(publication.created_at)}
</span>
Expand All @@ -330,7 +330,7 @@ function PublicationCardInner({
</Button>
</div>
) : (
<div className="flex items-center justify-between px-4 md:px-0">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2.5">
<Link
to={`/profile/${author.id}`}
Expand Down Expand Up @@ -453,7 +453,7 @@ function PublicationCardInner({
)}

{/* Content */}
<div className="px-4 md:px-0">
<div className="w-full">
<p className="whitespace-pre-wrap text-[14px] leading-[1.5] text-foreground">
{localContent}
</p>
Expand All @@ -474,7 +474,7 @@ function PublicationCardInner({
</div>

{/* Actions + counts */}
<div className="px-4 md:px-0">
<div className="w-full">
<div className="flex items-center gap-0.5 -ml-2">
<button
ref={likeButtonRef}
Expand Down
132 changes: 65 additions & 67 deletions src/components/layout/RightPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,20 +25,12 @@ const NEWS = [
{ text: 'PotroNET v2 con nuevas funciones', date: 'Ene 2026' },
];


export function RightPanel() {
const { session, profile } = useAuth();
const [suggested, setSuggested] = useState<SuggestedUser[]>([]);

const suggestedRef = useRef<HTMLDivElement>(null);
const featuresRef = useRef<HTMLDivElement>(null);
const newsRef = useRef<HTMLDivElement>(null);

// El widget de sugeridos monta hasta que llegan datos — sin `enabled`
// el efecto correría una sola vez con el ref vacío y nunca tendría tilt.
use3DTilt(suggestedRef, { enabled: suggested.length > 0 });
use3DTilt(featuresRef);
use3DTilt(newsRef);
const panelRef = useRef<HTMLDivElement>(null);
use3DTilt(panelRef);

useEffect(() => {
const fetchSuggested = async () => {
Expand Down Expand Up @@ -66,79 +58,85 @@ export function RightPanel() {
}, [session?.access_token, profile?.id]);

return (
<div className="sticky top-20 space-y-4">
{/* Suggested people */}
{suggested.length > 0 && (
<div ref={suggestedRef} className="liquid-glass liquid-glass-hover p-5">
<div className="sticky top-20">
{/* Unified Neumorphic Right Panel Card (iOS 2026) */}
<div
ref={panelRef}
className="relative overflow-hidden rounded-3xl bg-card/75 dark:bg-card/45 backdrop-blur-xl border border-border/60 dark:border-white/10 p-5 shadow-sm shadow-black/5 space-y-5 transition-all duration-300"
>
{/* Suggested people */}
{suggested.length > 0 && (
<div>
<div className="mb-3 flex items-center gap-2">
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary/15">
<UsersIcon className="h-3.5 w-3.5 text-primary" />
</div>
<span className="text-sm font-semibold">Personas sugeridas</span>
</div>
<div className="space-y-2.5">
{suggested.map(u => (
<Link key={u.id} to={`/profile/${u.id}`}
className="flex items-center gap-3 rounded-2xl p-2 transition-all duration-200 hover:bg-primary/8 group">
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary ring-1 ring-transparent group-hover:ring-primary/30 transition-all">
{u.avatar_url
? <img src={u.avatar_url} alt={u.full_name} className="h-8 w-8 rounded-full object-cover" />
: <UserIcon className="h-4 w-4" />
}
</div>
<div className="min-w-0">
<p className="truncate text-xs font-medium">{u.full_name}</p>
{u.career && <p className="truncate text-xs text-muted-foreground">{u.career.name}</p>}
</div>
</Link>
))}
</div>
<Link to="/friends" className="mt-2.5 block text-center text-xs font-medium text-primary hover:text-primary/80 transition-colors">
Ver más →
</Link>
</div>
)}

{/* Features section */}
<div className={suggested.length > 0 ? "pt-4 border-t border-border/40" : ""}>
<div className="mb-3 flex items-center gap-2">
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary/15">
<UsersIcon className="h-3.5 w-3.5 text-primary" />
<ZapIcon className="h-3.5 w-3.5 text-primary" />
</div>
<span className="text-sm font-semibold">Personas sugeridas</span>
<span className="text-sm font-semibold">Funciones PotroNET</span>
</div>
<div className="space-y-3">
{suggested.map(u => (
<Link key={u.id} to={`/profile/${u.id}`}
className="flex items-center gap-3 rounded-xl p-2 transition-all duration-200 hover:bg-primary/8 group">
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary ring-1 ring-transparent group-hover:ring-primary/30 transition-all">
{u.avatar_url
? <img src={u.avatar_url} alt={u.full_name} className="h-8 w-8 rounded-full object-cover" />
: <UserIcon className="h-4 w-4" />
}
</div>
<div className="min-w-0">
<p className="truncate text-xs font-medium">{u.full_name}</p>
{u.career && <p className="truncate text-xs text-muted-foreground">{u.career.name}</p>}
<div className="space-y-2.5">
{FEATURES.map((f, i) => (
<div key={i} className="flex items-center gap-2.5 text-xs text-muted-foreground">
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-primary/10">
<f.icon className="h-3.5 w-3.5 text-primary" />
</div>
</Link>
<span>{f.text}</span>
</div>
))}
</div>
<Link to="/friends" className="mt-2 block text-center text-xs text-primary hover:text-primary/80 transition-colors">
Ver más →
</Link>
</div>
)}

{/* Features */}
<div ref={featuresRef} className="liquid-glass liquid-glass-hover p-5">
<div className="mb-3 flex items-center gap-2">
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary/15">
<ZapIcon className="h-3.5 w-3.5 text-primary" />
{/* News section */}
<div className="pt-4 border-t border-border/40">
<div className="mb-3 flex items-center gap-2">
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary/15">
<TrendingUpIcon className="h-3.5 w-3.5 text-primary" />
</div>
<span className="text-sm font-semibold">Novedades</span>
</div>
<span className="text-sm font-semibold">Funciones PotroNET</span>
</div>
<div className="space-y-2.5">
{FEATURES.map((f, i) => (
<div key={i} className="flex items-center gap-2.5 text-xs text-muted-foreground">
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-primary/10">
<f.icon className="h-3.5 w-3.5 text-primary" />
<div className="space-y-3">
{NEWS.map((n, i) => (
<div key={i} className="border-b border-border/30 pb-2 last:border-0 last:pb-0">
<p className="text-xs font-medium leading-tight">{n.text}</p>
<p className="mt-0.5 text-xs text-muted-foreground">{n.date}</p>
</div>
<span>{f.text}</span>
</div>
))}
</div>
</div>

{/* News */}
<div ref={newsRef} className="liquid-glass liquid-glass-hover p-5">
<div className="mb-3 flex items-center gap-2">
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary/15">
<TrendingUpIcon className="h-3.5 w-3.5 text-primary" />
))}
</div>
<span className="text-sm font-semibold">Novedades</span>
</div>
<div className="space-y-3">
{NEWS.map((n, i) => (
<div key={i} className="border-b border-border/30 pb-2 last:border-0 last:pb-0">
<p className="text-xs font-medium leading-tight">{n.text}</p>
<p className="mt-0.5 text-xs text-muted-foreground">{n.date}</p>
</div>
))}
</div>
</div>

{/* Footer */}
<p className="px-1 text-xs text-muted-foreground/50">
<p className="mt-3 text-center text-xs text-muted-foreground/50">
PotroNET © 2026 · ITSON
</p>
</div>
Expand Down
8 changes: 1 addition & 7 deletions src/components/layout/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,13 +64,7 @@ export function Sidebar({ isOpen, onClose, collapsed, onToggleCollapse }: Sideba

{/* Sidebar */}
<aside
className={`fixed left-4 top-[88px] z-40 h-[calc(100dvh-112px)] ${sidebarWidth} transform rounded-2xl border transition-all duration-300 ease-in-out md:translate-x-0 ${isOpen ? 'translate-x-0' : '-translate-x-full'} shadow-[0_8px_32px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.4)]`}
style={{
background: 'var(--glass-bg)',
backdropFilter: 'blur(24px) saturate(1.2)',
WebkitBackdropFilter: 'blur(24px) saturate(1.2)',
borderColor: 'var(--glass-border)',
}}
className={`fixed left-4 top-[88px] z-40 h-[calc(100dvh-112px)] ${sidebarWidth} transform rounded-3xl bg-card/75 dark:bg-card/45 backdrop-blur-xl border border-border/60 dark:border-white/10 shadow-sm shadow-black/5 transition-all duration-300 ease-in-out md:translate-x-0 ${isOpen ? 'translate-x-0' : '-translate-x-full'}`}
>
<div className="flex h-full flex-col p-2 overflow-hidden">
{/* Close button for mobile */}
Expand Down
14 changes: 6 additions & 8 deletions src/pages/FeedPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,9 +374,9 @@ export function FeedPage() {
{/* 3D Scrollytelling Hero Container */}
<div ref={heroRef} className="perspective-1000 w-full mb-6">
<div ref={card3DRef} className="preserve-3d space-y-4 will-change-transform">
{/* Welcome header */}
<div className="relative overflow-hidden px-4 pt-6 pb-5 md:liquid-glass md:px-6">
<div className="absolute -top-20 -right-20 h-40 w-40 rounded-full bg-primary/3 blur-xl" />
{/* Welcome & Create Post Unified Header Card */}
<div className="relative overflow-hidden p-5 rounded-3xl bg-card/75 dark:bg-card/45 backdrop-blur-xl border border-border/60 dark:border-white/10 shadow-sm shadow-black/5 mx-1 md:mx-0 md:p-6 space-y-4">
<div className="absolute -top-20 -right-20 h-40 w-40 rounded-full bg-primary/3 blur-xl pointer-events-none" />
<div className="relative">
<div className="flex items-center justify-between">
<h1 ref={titleRef} className="text-[22px] leading-tight" style={{ fontVariationSettings: '"wght" 400' }}>
Expand All @@ -394,7 +394,7 @@ export function FeedPage() {
{/* Mobile-only: tap to create post CTA — compact, glass-style */}
<button
onClick={() => setShowCreateModal(true)}
className="md:hidden mt-4 w-full flex items-center gap-3 rounded-2xl px-4 py-3 text-left neu-raised neu-pressable"
className="md:hidden w-full flex items-center gap-3 rounded-2xl px-4 py-3 text-left bg-muted/30 hover:bg-muted/50 border border-border/40 transition-all active:scale-[0.98]"
>
<div className="h-8 w-8 rounded-full overflow-hidden ring-1 ring-border/40 shrink-0">
{profile?.avatar_url ? (
Expand All @@ -408,11 +408,9 @@ export function FeedPage() {
<span className="flex-1 text-sm text-muted-foreground">¿Qué quieres compartir?</span>
<span className="shrink-0 rounded-full px-3 py-1 text-[11px] font-semibold text-primary-foreground" style={{ background: 'oklch(0.68 0.15 237)', boxShadow: '0 4px 12px oklch(0.68 0.15 237 / 0.35)' }}>Publicar</span>
</button>
</div>

{/* Desktop Create Post */}
<div className="hidden md:block">
<div className="w-full md:max-w-4xl md:mx-auto md:liquid-glass md:p-5">
{/* Desktop Create Post embedded seamlessly in the same hero card */}
<div className="hidden md:block pt-3 border-t border-border/40">
<CreatePost onPost={handleNewPost} />
</div>
</div>
Expand Down