valknar/sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: UX and styling improvements across frontend

Browse Source 
- Fix login spinner (isLoading never set to true before await)
- Extract PageHero component, replace copy-pasted hero sections on videos/models/tags pages
- Replace inline plasma blobs with SexyBackground on videos/models/tags pages
- Make video/model/tag cards fully clickable (wrap in <a>), remove redundant Watch/View Profile buttons
- Convert inner overlay anchors to divs to avoid nested <a> elements
- Fix home page model avatar preset: mini → thumbnail (correct size for 96px display)
- Reduce home hero height: min-h-screen → min-h-[70vh]
- Remove dead hideName prop from Logo, simplify component
- Add brand name to mobile flyout panel header with gradient styling
- Remove dead _relatedVideos array, isBookmarked state, _handleBookmark from video detail page
- Clean up commented-out code blocks in video detail and models pages
- Note: tag card inner tag links converted to spans to avoid nested anchors

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-03-07 18:33:32 +01:00
parent 56b57486dc
commit 1a2fab3e37
9 changed files with 111 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
packages/frontend/src/routes/videos/+page.svelte
View File

@@ -9,6 +9,8 @@
import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
import { getAssetUrl } from "$lib/api";
import Meta from "$lib/components/meta/meta.svelte";
import SexyBackground from "$lib/components/background/background.svelte";
import PageHero from "$lib/components/page-hero/page-hero.svelte";
import TimeAgo from "javascript-time-ago";
import { formatVideoDuration } from "$lib/utils";
@@ -52,38 +54,10 @@
<div
class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
>
<!-- Global Plasma Background -->
<div class="absolute inset-0 pointer-events-none">
<div
class="absolute top-40 left-1/4 w-80 h-80 bg-gradient-to-r from-primary/16 via-accent/20 to-primary/12 rounded-full blur-3xl animate-blob-slow"
></div>
<div
class="absolute bottom-40 right-1/4 w-96 h-96 bg-gradient-to-r from-accent/16 via-primary/20 to-accent/12 rounded-full blur-3xl animate-blob-slow animation-delay-5000"
></div>
<div
class="absolute top-1/3 right-1/3 w-64 h-64 bg-gradient-to-r from-primary/14 via-accent/18 to-primary/10 rounded-full blur-2xl animate-blob-reverse animation-delay-2500"
></div>
</div>
<SexyBackground />
<section class="relative py-20 overflow-hidden">
<div
class="absolute inset-0 bg-gradient-to-br from-primary/10 via-accent/5 to-background"
></div>
<div class="relative container mx-auto px-4 text-center">
<div class="max-w-5xl mx-auto">
<h1
class="text-5xl md:text-7xl font-bold mb-8 bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
>
{$_("videos.title")}
</h1>
<p
class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto"
>
{$_("videos.description")}
</p>
<!-- Filters -->
<div class="flex flex-col lg:flex-row gap-4 max-w-6xl mx-auto">
<PageHero title={$_("videos.title")} description={$_("videos.description")}>
<div class="flex flex-col lg:flex-row gap-4 max-w-6xl mx-auto">
<!-- Search -->
<div class="relative flex-1">
<span
@@ -146,16 +120,15 @@
<SelectItem value="name">{$_("videos.sort.name")}</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</div>
</section>
</PageHero>
<!-- Videos Grid -->
<div class="container mx-auto px-4 py-12">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{#each data.items as video (video.slug)}
<a href={`/videos/${video.slug}`} class="block group">
<Card
class="p-0 group hover:shadow-2xl hover:shadow-primary/25 transition-all duration-500 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
class="p-0 h-full hover:shadow-2xl hover:shadow-primary/25 transition-all duration-500 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
>
<div class="relative">
<img
@@ -196,17 +169,16 @@
{/if}
<!-- Play Overlay -->
<a
<div
class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
href={`/videos/${video.slug}`}
aria-label={$_("videos.watch")}
aria-hidden="true"
>
<div
class="w-16 h-16 bg-primary/90 rounded-full flex flex-col items-center justify-center shadow-2xl"
>
<span class="icon-[ri--play-large-fill] w-8 h-8 text-white"></span>
</div>
</a>
</div>
<!-- Model Info -->
<!-- <div class="absolute bottom-3 right-3 text-white text-sm">
@@ -250,27 +222,9 @@
</span> -->
</div>
<!-- Action Buttons -->
<div class="flex gap-2">
<Button
variant="outline"
size="sm"
class="flex-1 border-primary/20 hover:bg-primary/10"
href={`/videos/${video.slug}`}
>
<span class="icon-[ri--play-large-fill] w-4 h-4 mr-2"></span>
{$_("videos.watch")}
</Button>
<!-- <Button
variant="ghost"
size="sm"
class="px-3 hover:bg-primary/10"
>
<HeartIcon class="w-4 h-4" />
</Button> -->
</div>
</CardContent>
</Card>
</a>
{/each}
</div>

57
packages/frontend/src/routes/videos/[slug]/+page.svelte
View File

@@ -31,7 +31,6 @@
let isLiked = $state(data.likeStatus.liked);
let likesCount = $state(data.video.likes_count || 0);
let isLikeLoading = $state(false);
let isBookmarked = $state(false);
let newComment = $state("");
let showComments = $state(true);
let isCommentLoading = $state(false);
@@ -40,41 +39,6 @@
let currentPlayId = $state<string | null>(null);
let lastTrackedTime = $state(0);
const _relatedVideos = [
{
id: 2,
title: "Sunset Dreams",
thumbnail: "/placeholder.svg?size=wide",
duration: "8:45",
views: "1.8M",
model: "Luna Belle",
},
{
id: 3,
title: "Intimate Moments",
thumbnail: "/placeholder.svg?size=wide",
duration: "15:22",
views: "3.2M",
model: "Aria Divine",
},
{
id: 4,
title: "Morning Light",
thumbnail: "/placeholder.svg?size=wide",
duration: "10:15",
views: "956K",
model: "Maya Starlight",
},
{
id: 5,
title: "Passionate Dance",
thumbnail: "/placeholder.svg?size=wide",
duration: "7:33",
views: "1.4M",
model: "Zara Moon",
},
];
async function handleLike() {
if (!data.authStatus.authenticated) {
toast.error("Please sign in to like videos");
@@ -101,10 +65,6 @@
}
}
function _handleBookmark() {
isBookmarked = !isBookmarked;
}
async function handleDeleteComment(id: number) {
try {
await deleteComment(id);
@@ -289,16 +249,6 @@
type: "video" as const,
}}
/>
<!-- <Button
variant={isBookmarked ? "default" : "outline"}
onclick={_handleBookmark}
class="flex items-center gap-2 {isBookmarked
? 'bg-gradient-to-r from-primary to-accent'
: 'border-primary/20 hover:bg-primary/10'}"
>
<span class="icon-[ri--bookmark-{isBookmarked ? 'fill' : 'line'}] w-4 h-4"></span>
Save
</Button> -->
</div>
<!-- Model Info -->
@@ -329,15 +279,8 @@
</svg>
</div>
</a>
<!-- <p class="text-sm text-muted-foreground">
{data.video.model.subscribers} subscribers
</p> -->
</div>
</div>
<!-- <Button
class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
>Subscribe</Button
> -->
</div>
{/each}
</div>