feat:big update to public finds
This commit is contained in:
@@ -1,11 +1,6 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
export const load: PageServerLoad = async ({ locals, url, fetch, request }) => {
|
||||
if (!locals.user) {
|
||||
return redirect(302, '/login');
|
||||
}
|
||||
|
||||
// Build API URL with query parameters
|
||||
const apiUrl = new URL('/api/finds', url.origin);
|
||||
|
||||
@@ -17,8 +12,13 @@ export const load: PageServerLoad = async ({ locals, url, fetch, request }) => {
|
||||
if (lat) apiUrl.searchParams.set('lat', lat);
|
||||
if (lng) apiUrl.searchParams.set('lng', lng);
|
||||
apiUrl.searchParams.set('radius', radius);
|
||||
apiUrl.searchParams.set('includePrivate', 'true'); // Include user's private finds
|
||||
apiUrl.searchParams.set('includeFriends', 'true'); // Include friends' finds
|
||||
|
||||
// Only include private and friends' finds if user is logged in
|
||||
if (locals.user) {
|
||||
apiUrl.searchParams.set('includePrivate', 'true'); // Include user's private finds
|
||||
apiUrl.searchParams.set('includeFriends', 'true'); // Include friends' finds
|
||||
}
|
||||
|
||||
apiUrl.searchParams.set('order', 'desc'); // Newest first
|
||||
|
||||
try {
|
||||
|
||||
@@ -258,14 +258,22 @@
|
||||
<!-- Left sidebar with finds list -->
|
||||
<div class="finds-sidebar" class:hidden={!isSidebarVisible}>
|
||||
<div class="finds-header">
|
||||
<FindsFilter {currentFilter} onFilterChange={handleFilterChange} />
|
||||
<Button onclick={openCreateModal} class="create-find-button">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" class="mr-2">
|
||||
<line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2" />
|
||||
</svg>
|
||||
Create Find
|
||||
</Button>
|
||||
{#if data.user}
|
||||
<FindsFilter {currentFilter} onFilterChange={handleFilterChange} />
|
||||
<Button onclick={openCreateModal} class="create-find-button">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" class="mr-2">
|
||||
<line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2" />
|
||||
</svg>
|
||||
Create Find
|
||||
</Button>
|
||||
{:else}
|
||||
<div class="login-prompt">
|
||||
<h3>Welcome to Serengo</h3>
|
||||
<p>Login to create finds and view your friends' discoveries</p>
|
||||
<a href="/login" class="login-button">Login</a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="finds-list-container">
|
||||
<FindsList {finds} onFindExplore={handleFindExplore} hideTitle={true} />
|
||||
@@ -393,6 +401,43 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.login-prompt {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.login-prompt h3 {
|
||||
font-family: 'Washington', serif;
|
||||
font-size: 1.25rem;
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.login-prompt p {
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: hsl(var(--primary));
|
||||
color: hsl(var(--primary-foreground));
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.login-button:hover {
|
||||
background: hsl(var(--primary) / 0.9);
|
||||
}
|
||||
|
||||
.finds-list-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
@@ -12,10 +12,6 @@ function generateFindId(): string {
|
||||
}
|
||||
|
||||
export const GET: RequestHandler = async ({ url, locals }) => {
|
||||
if (!locals.user) {
|
||||
throw error(401, 'Unauthorized');
|
||||
}
|
||||
|
||||
const lat = url.searchParams.get('lat');
|
||||
const lng = url.searchParams.get('lng');
|
||||
const radius = url.searchParams.get('radius') || '50';
|
||||
@@ -25,9 +21,9 @@ export const GET: RequestHandler = async ({ url, locals }) => {
|
||||
const includeFriends = url.searchParams.get('includeFriends') === 'true';
|
||||
|
||||
try {
|
||||
// Get user's friends if needed
|
||||
// Get user's friends if needed and user is logged in
|
||||
let friendIds: string[] = [];
|
||||
if (includeFriends || includePrivate) {
|
||||
if (locals.user && (includeFriends || includePrivate)) {
|
||||
const friendships = await db
|
||||
.select({
|
||||
userId: friendship.userId,
|
||||
@@ -37,7 +33,7 @@ export const GET: RequestHandler = async ({ url, locals }) => {
|
||||
.where(
|
||||
and(
|
||||
eq(friendship.status, 'accepted'),
|
||||
or(eq(friendship.userId, locals.user!.id), eq(friendship.friendId, locals.user!.id))
|
||||
or(eq(friendship.userId, locals.user.id), eq(friendship.friendId, locals.user.id))
|
||||
)
|
||||
);
|
||||
|
||||
@@ -47,12 +43,12 @@ export const GET: RequestHandler = async ({ url, locals }) => {
|
||||
// Build privacy conditions
|
||||
const conditions = [sql`${find.isPublic} = 1`]; // Always include public finds
|
||||
|
||||
if (includePrivate) {
|
||||
if (locals.user && includePrivate) {
|
||||
// Include user's own finds (both public and private)
|
||||
conditions.push(sql`${find.userId} = ${locals.user!.id}`);
|
||||
conditions.push(sql`${find.userId} = ${locals.user.id}`);
|
||||
}
|
||||
|
||||
if (includeFriends && friendIds.length > 0) {
|
||||
if (locals.user && includeFriends && friendIds.length > 0) {
|
||||
// Include friends' finds (both public and private)
|
||||
conditions.push(
|
||||
sql`${find.userId} IN (${sql.join(
|
||||
@@ -103,19 +99,23 @@ export const GET: RequestHandler = async ({ url, locals }) => {
|
||||
username: user.username,
|
||||
profilePictureUrl: user.profilePictureUrl,
|
||||
likeCount: sql<number>`COALESCE(COUNT(DISTINCT ${findLike.id}), 0)`,
|
||||
isLikedByUser: sql<boolean>`CASE WHEN EXISTS(
|
||||
SELECT 1 FROM ${findLike}
|
||||
WHERE ${findLike.findId} = ${find.id}
|
||||
AND ${findLike.userId} = ${locals.user.id}
|
||||
) THEN 1 ELSE 0 END`,
|
||||
isFromFriend: sql<boolean>`CASE WHEN ${
|
||||
friendIds.length > 0
|
||||
? sql`${find.userId} IN (${sql.join(
|
||||
friendIds.map((id) => sql`${id}`),
|
||||
sql`, `
|
||||
)})`
|
||||
: sql`FALSE`
|
||||
} THEN 1 ELSE 0 END`
|
||||
isLikedByUser: locals.user
|
||||
? sql<boolean>`CASE WHEN EXISTS(
|
||||
SELECT 1 FROM ${findLike}
|
||||
WHERE ${findLike.findId} = ${find.id}
|
||||
AND ${findLike.userId} = ${locals.user.id}
|
||||
) THEN 1 ELSE 0 END`
|
||||
: sql<boolean>`0`,
|
||||
isFromFriend: locals.user
|
||||
? sql<boolean>`CASE WHEN ${
|
||||
friendIds.length > 0
|
||||
? sql`${find.userId} IN (${sql.join(
|
||||
friendIds.map((id) => sql`${id}`),
|
||||
sql`, `
|
||||
)})`
|
||||
: sql`FALSE`
|
||||
} THEN 1 ELSE 0 END`
|
||||
: sql<boolean>`0`
|
||||
})
|
||||
.from(find)
|
||||
.innerJoin(user, eq(find.userId, user.id))
|
||||
|
||||
115
src/routes/api/finds/[findId]/+server.ts
Normal file
115
src/routes/api/finds/[findId]/+server.ts
Normal file
@@ -0,0 +1,115 @@
|
||||
import { json, error } from '@sveltejs/kit';
|
||||
import type { RequestHandler } from './$types';
|
||||
import { db } from '$lib/server/db';
|
||||
import { find, findMedia, user, findLike, findComment } from '$lib/server/db/schema';
|
||||
import { eq, sql } from 'drizzle-orm';
|
||||
import { getLocalR2Url } from '$lib/server/r2';
|
||||
|
||||
export const GET: RequestHandler = async ({ params, locals }) => {
|
||||
const findId = params.findId;
|
||||
|
||||
if (!findId) {
|
||||
throw error(400, 'Find ID is required');
|
||||
}
|
||||
|
||||
try {
|
||||
// Get the find with user info and like count
|
||||
const findResult = await db
|
||||
.select({
|
||||
id: find.id,
|
||||
title: find.title,
|
||||
description: find.description,
|
||||
latitude: find.latitude,
|
||||
longitude: find.longitude,
|
||||
locationName: find.locationName,
|
||||
category: find.category,
|
||||
isPublic: find.isPublic,
|
||||
createdAt: find.createdAt,
|
||||
userId: find.userId,
|
||||
username: user.username,
|
||||
profilePictureUrl: user.profilePictureUrl,
|
||||
likeCount: sql<number>`COALESCE(COUNT(DISTINCT ${findLike.id}), 0)`,
|
||||
commentCount: sql<number>`COALESCE((
|
||||
SELECT COUNT(*) FROM ${findComment}
|
||||
WHERE ${findComment.findId} = ${find.id}
|
||||
), 0)`,
|
||||
isLikedByUser: locals.user
|
||||
? sql<boolean>`CASE WHEN EXISTS(
|
||||
SELECT 1 FROM ${findLike}
|
||||
WHERE ${findLike.findId} = ${find.id}
|
||||
AND ${findLike.userId} = ${locals.user.id}
|
||||
) THEN 1 ELSE 0 END`
|
||||
: sql<boolean>`0`
|
||||
})
|
||||
.from(find)
|
||||
.innerJoin(user, eq(find.userId, user.id))
|
||||
.leftJoin(findLike, eq(find.id, findLike.findId))
|
||||
.where(eq(find.id, findId))
|
||||
.groupBy(find.id, user.username, user.profilePictureUrl)
|
||||
.limit(1);
|
||||
|
||||
if (findResult.length === 0) {
|
||||
throw error(404, 'Find not found');
|
||||
}
|
||||
|
||||
const findData = findResult[0];
|
||||
|
||||
// Check if the find is public or if user has access
|
||||
const isOwner = locals.user && findData.userId === locals.user.id;
|
||||
const isPublic = findData.isPublic === 1;
|
||||
|
||||
if (!isPublic && !isOwner) {
|
||||
throw error(403, 'This find is private');
|
||||
}
|
||||
|
||||
// Get media for the find
|
||||
const media = await db
|
||||
.select({
|
||||
id: findMedia.id,
|
||||
findId: findMedia.findId,
|
||||
type: findMedia.type,
|
||||
url: findMedia.url,
|
||||
thumbnailUrl: findMedia.thumbnailUrl,
|
||||
orderIndex: findMedia.orderIndex
|
||||
})
|
||||
.from(findMedia)
|
||||
.where(eq(findMedia.findId, findId))
|
||||
.orderBy(findMedia.orderIndex);
|
||||
|
||||
// Generate signed URLs for media
|
||||
const mediaWithSignedUrls = await Promise.all(
|
||||
media.map(async (mediaItem) => {
|
||||
const localUrl = getLocalR2Url(mediaItem.url);
|
||||
const localThumbnailUrl =
|
||||
mediaItem.thumbnailUrl && !mediaItem.thumbnailUrl.startsWith('/')
|
||||
? getLocalR2Url(mediaItem.thumbnailUrl)
|
||||
: mediaItem.thumbnailUrl;
|
||||
|
||||
return {
|
||||
...mediaItem,
|
||||
url: localUrl,
|
||||
thumbnailUrl: localThumbnailUrl
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
// Generate local proxy URL for user profile picture
|
||||
let userProfilePictureUrl = findData.profilePictureUrl;
|
||||
if (userProfilePictureUrl && !userProfilePictureUrl.startsWith('http')) {
|
||||
userProfilePictureUrl = getLocalR2Url(userProfilePictureUrl);
|
||||
}
|
||||
|
||||
return json({
|
||||
...findData,
|
||||
profilePictureUrl: userProfilePictureUrl,
|
||||
media: mediaWithSignedUrls,
|
||||
isLikedByUser: Boolean(findData.isLikedByUser)
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Error loading find:', err);
|
||||
if (err instanceof Error && 'status' in err) {
|
||||
throw err;
|
||||
}
|
||||
throw error(500, 'Failed to load find');
|
||||
}
|
||||
};
|
||||
43
src/routes/finds/[findId]/+page.server.ts
Normal file
43
src/routes/finds/[findId]/+page.server.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { error } from '@sveltejs/kit';
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
export const load: PageServerLoad = async ({ params, fetch, url, request }) => {
|
||||
const findId = params.findId;
|
||||
|
||||
if (!findId) {
|
||||
throw error(400, 'Find ID is required');
|
||||
}
|
||||
|
||||
try {
|
||||
// Build API URL
|
||||
const apiUrl = new URL(`/api/finds/${findId}`, url.origin);
|
||||
|
||||
// Fetch the find data - no auth required for public finds
|
||||
const response = await fetch(apiUrl.toString(), {
|
||||
headers: {
|
||||
Cookie: request.headers.get('Cookie') || ''
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 404) {
|
||||
throw error(404, 'Find not found');
|
||||
} else if (response.status === 403) {
|
||||
throw error(403, 'This find is private');
|
||||
}
|
||||
throw error(response.status, 'Failed to load find');
|
||||
}
|
||||
|
||||
const find = await response.json();
|
||||
|
||||
return {
|
||||
find
|
||||
};
|
||||
} catch (err) {
|
||||
console.error('Error loading find:', err);
|
||||
if (err instanceof Error && 'status' in err) {
|
||||
throw err;
|
||||
}
|
||||
throw error(500, 'Failed to load find');
|
||||
}
|
||||
};
|
||||
621
src/routes/finds/[findId]/+page.svelte
Normal file
621
src/routes/finds/[findId]/+page.svelte
Normal file
@@ -0,0 +1,621 @@
|
||||
<script lang="ts">
|
||||
import { Map } from '$lib';
|
||||
import LikeButton from '$lib/components/finds/LikeButton.svelte';
|
||||
import VideoPlayer from '$lib/components/media/VideoPlayer.svelte';
|
||||
import ProfilePicture from '$lib/components/profile/ProfilePicture.svelte';
|
||||
import CommentsList from '$lib/components/finds/CommentsList.svelte';
|
||||
import type { PageData } from './$types';
|
||||
|
||||
let { data }: { data: PageData } = $props();
|
||||
|
||||
let currentMediaIndex = $state(0);
|
||||
|
||||
function nextMedia() {
|
||||
if (!data.find?.media) return;
|
||||
currentMediaIndex = (currentMediaIndex + 1) % data.find.media.length;
|
||||
}
|
||||
|
||||
function prevMedia() {
|
||||
if (!data.find?.media) return;
|
||||
currentMediaIndex =
|
||||
currentMediaIndex === 0 ? data.find.media.length - 1 : currentMediaIndex - 1;
|
||||
}
|
||||
|
||||
function formatDate(dateString: string): string {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
function getDirections() {
|
||||
if (!data.find) return;
|
||||
|
||||
const lat = parseFloat(data.find.latitude);
|
||||
const lng = parseFloat(data.find.longitude);
|
||||
const url = `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`;
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
|
||||
function shareFindUrl() {
|
||||
if (!data.find) return;
|
||||
|
||||
const url = `${window.location.origin}/finds/${data.find.id}`;
|
||||
|
||||
if (navigator.share) {
|
||||
navigator.share({
|
||||
title: data.find.title,
|
||||
text: data.find.description || `Check out this find: ${data.find.title}`,
|
||||
url: url
|
||||
});
|
||||
} else {
|
||||
navigator.clipboard.writeText(url);
|
||||
alert('Find URL copied to clipboard!');
|
||||
}
|
||||
}
|
||||
|
||||
// Create the map find format
|
||||
let mapFinds = $derived(
|
||||
data.find
|
||||
? [
|
||||
{
|
||||
id: data.find.id,
|
||||
title: data.find.title,
|
||||
description: data.find.description,
|
||||
latitude: data.find.latitude,
|
||||
longitude: data.find.longitude,
|
||||
locationName: data.find.locationName,
|
||||
category: data.find.category,
|
||||
isPublic: data.find.isPublic,
|
||||
createdAt: new Date(data.find.createdAt),
|
||||
userId: data.find.userId,
|
||||
user: {
|
||||
id: data.find.userId,
|
||||
username: data.find.username,
|
||||
profilePictureUrl: data.find.profilePictureUrl
|
||||
},
|
||||
likeCount: data.find.likeCount,
|
||||
isLiked: data.find.isLikedByUser,
|
||||
media: data.find.media?.map(
|
||||
(m: { type: string; url: string; thumbnailUrl: string | null }) => ({
|
||||
type: m.type,
|
||||
url: m.url,
|
||||
thumbnailUrl: m.thumbnailUrl || m.url
|
||||
})
|
||||
)
|
||||
}
|
||||
]
|
||||
: []
|
||||
);
|
||||
|
||||
// Get first media for OG image
|
||||
let ogImage = $derived(data.find?.media?.[0]?.url || '');
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{data.find ? `${data.find.title} - Serengo` : 'Find - Serengo'}</title>
|
||||
<meta
|
||||
name="description"
|
||||
content={data.find?.description ||
|
||||
`Check out this find on Serengo: ${data.find?.title || 'Unknown'}`}
|
||||
/>
|
||||
<meta
|
||||
property="og:title"
|
||||
content={data.find ? `${data.find.title} - Serengo` : 'Find - Serengo'}
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content={data.find?.description ||
|
||||
`Check out this find on Serengo: ${data.find?.title || 'Unknown'}`}
|
||||
/>
|
||||
<meta property="og:type" content="article" />
|
||||
{#if ogImage}
|
||||
<meta property="og:image" content={ogImage} />
|
||||
{/if}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content={data.find ? `${data.find.title} - Serengo` : 'Find - Serengo'}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={data.find?.description ||
|
||||
`Check out this find on Serengo: ${data.find?.title || 'Unknown'}`}
|
||||
/>
|
||||
{#if ogImage}
|
||||
<meta name="twitter:image" content={ogImage} />
|
||||
{/if}
|
||||
</svelte:head>
|
||||
|
||||
<div class="public-find-page">
|
||||
<div class="map-section">
|
||||
<Map
|
||||
autoCenter={true}
|
||||
center={[parseFloat(data.find?.longitude || '0'), parseFloat(data.find?.latitude || '0')]}
|
||||
finds={mapFinds}
|
||||
onFindClick={() => {}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="find-details">
|
||||
{#if data.find}
|
||||
<div class="details-content">
|
||||
<div class="details-header">
|
||||
<div class="user-section">
|
||||
<ProfilePicture
|
||||
username={data.find.username}
|
||||
profilePictureUrl={data.find.profilePictureUrl}
|
||||
class="user-avatar"
|
||||
/>
|
||||
<div class="user-info">
|
||||
<h1 class="find-title">{data.find.title}</h1>
|
||||
<div class="find-meta">
|
||||
<span class="username">@{data.find.username}</span>
|
||||
<span class="separator">•</span>
|
||||
<span class="date">{formatDate(data.find.createdAt)}</span>
|
||||
{#if data.find.category}
|
||||
<span class="separator">•</span>
|
||||
<span class="category">{data.find.category}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="details-body">
|
||||
{#if data.find.media && data.find.media.length > 0}
|
||||
<div class="media-container">
|
||||
<div class="media-viewer">
|
||||
{#if data.find.media[currentMediaIndex].type === 'photo'}
|
||||
<img
|
||||
src={data.find.media[currentMediaIndex].url}
|
||||
alt={data.find.title}
|
||||
class="media-image"
|
||||
/>
|
||||
{:else}
|
||||
<VideoPlayer
|
||||
src={data.find.media[currentMediaIndex].url}
|
||||
poster={data.find.media[currentMediaIndex].thumbnailUrl}
|
||||
class="media-video"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if data.find.media.length > 1}
|
||||
<button class="media-nav prev" onclick={prevMedia} aria-label="Previous media">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||||
<path
|
||||
d="M15 18L9 12L15 6"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="media-nav next" onclick={nextMedia} aria-label="Next media">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||||
<path
|
||||
d="M9 18L15 12L9 6"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if data.find.media.length > 1}
|
||||
<div class="media-indicators">
|
||||
{#each data.find.media as _, index (index)}
|
||||
<button
|
||||
class="indicator"
|
||||
class:active={index === currentMediaIndex}
|
||||
onclick={() => (currentMediaIndex = index)}
|
||||
aria-label={`View media ${index + 1}`}
|
||||
></button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="content-section">
|
||||
{#if data.find.description}
|
||||
<p class="description">{data.find.description}</p>
|
||||
{/if}
|
||||
|
||||
{#if data.find.locationName}
|
||||
<div class="location-info">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path
|
||||
d="M21 10C21 17 12 23 12 23S3 17 3 10A9 9 0 0 1 12 1A9 9 0 0 1 21 10Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2" />
|
||||
</svg>
|
||||
<span>{data.find.locationName}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="actions">
|
||||
<LikeButton
|
||||
findId={data.find.id}
|
||||
isLiked={data.find.isLikedByUser || false}
|
||||
likeCount={data.find.likeCount || 0}
|
||||
size="default"
|
||||
class="like-action"
|
||||
/>
|
||||
|
||||
<button class="action-button primary" onclick={getDirections}>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path
|
||||
d="M3 11L22 2L13 21L11 13L3 11Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Directions
|
||||
</button>
|
||||
|
||||
<button class="action-button secondary" onclick={shareFindUrl}>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<path
|
||||
d="M4 12V20A2 2 0 0 0 6 22H18A2 2 0 0 0 20 20V12"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<polyline
|
||||
points="16,6 12,2 8,6"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Share
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comments-section">
|
||||
<CommentsList
|
||||
findId={data.find.id}
|
||||
currentUserId={data.user?.id}
|
||||
collapsed={false}
|
||||
isScrollable={true}
|
||||
showCommentForm={data.user ? true : false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="error-state">
|
||||
<h1>Find not found</h1>
|
||||
<p>This find does not exist or is private.</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.public-find-page {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-section {
|
||||
flex: 1;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-section :global(.map-container) {
|
||||
height: 100vh;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.find-details {
|
||||
width: 45%;
|
||||
max-width: 650px;
|
||||
min-width: 400px;
|
||||
height: 100vh;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.details-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.details-header {
|
||||
padding: 1.5rem 2rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
:global(.user-avatar) {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.find-title {
|
||||
font-family: 'Washington', serif;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: hsl(var(--foreground));
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.find-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: 500;
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: hsl(var(--muted-foreground));
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.category {
|
||||
background: hsl(var(--muted));
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.75rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.details-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.media-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.media-viewer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-height: 450px;
|
||||
background: hsl(var(--muted));
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.media-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
:global(.media-video) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.media-nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.media-nav:hover {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.media-nav.prev {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.media-nav.next {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.media-indicators {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: hsl(var(--muted-foreground));
|
||||
opacity: 0.3;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.indicator.active {
|
||||
background: hsl(var(--primary));
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.content-section {
|
||||
padding: 1.5rem 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
color: hsl(var(--foreground));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.location-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
:global(.like-action) {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.action-button.primary {
|
||||
background: hsl(var(--primary));
|
||||
color: hsl(var(--primary-foreground));
|
||||
}
|
||||
|
||||
.action-button.primary:hover {
|
||||
background: hsl(var(--primary) / 0.9);
|
||||
}
|
||||
|
||||
.action-button.secondary {
|
||||
background: hsl(var(--secondary));
|
||||
color: hsl(var(--secondary-foreground));
|
||||
}
|
||||
|
||||
.action-button.secondary:hover {
|
||||
background: hsl(var(--secondary) / 0.8);
|
||||
}
|
||||
|
||||
.comments-section {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.error-state {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error-state h1 {
|
||||
font-family: 'Washington', serif;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.public-find-page {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.map-section {
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.find-details {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
min-width: 0;
|
||||
height: 60vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.details-header,
|
||||
.content-section {
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.find-title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
:global(.user-avatar) {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user