franpcode/Reflecto
1
0
Fork 0
mirror of https://github.com/FranP-code/Reflecto.git synced 2025-10-13 00:43:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance SpacesGrid to display snapshot data and improve space rendering

Browse Source
This commit is contained in:
Francisco Pessano
2025-09-04 14:00:20 -03:00
parent 83a2992c0d
commit e0068776a4
3 changed files with 77 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
apps/web/src/components/spaces-grid.tsx
View File

@@ -147,79 +147,80 @@ export function SpacesGrid() {
{/* Spaces Grid */} {/* Spaces Grid */}
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3"> <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
{filteredSpaces.map((space) => ( {filteredSpaces.map((space) => {
<Card const snapshot = space.snapshotText
className="group cursor-pointer border-border/50 transition-all duration-200 hover:border-border hover:shadow-lg" ? JSON.parse(space.snapshotText).document
key={space.id} : undefined;
onClick={() => { return (
window.location.href = `/space?id=${space.id}`; <Card
}} className="group cursor-pointer border-border/50 transition-all duration-200 hover:border-border hover:shadow-lg"
> key={space.id}
<CardHeader className="pb-3"> onClick={() => {
<div className="flex items-center justify-between"> window.location.href = `/space?id=${space.id}`;
<div className="flex items-center gap-2"> }}
<div >
className="h-3 w-3 rounded-full" <CardHeader className="pb-3">
style={{ backgroundColor: space.color }} <div className="flex items-center justify-between">
/> <div className="flex items-center gap-2">
<h3 className="font-semibold text-foreground transition-colors group-hover:text-primary"> <div
{space.name} className="h-3 w-3 rounded-full"
</h3> style={{ backgroundColor: space.color }}
/>
<h3 className="font-semibold text-foreground transition-colors group-hover:text-primary">
{space.name}
</h3>
</div>
<Button
className="h-8 w-8 p-0 opacity-0 transition-opacity group-hover:opacity-100"
size="sm"
variant="ghost"
>
<MoreHorizontal className="h-4 w-4" />
</Button>
</div> </div>
<Button </CardHeader>
className="h-8 w-8 p-0 opacity-0 transition-opacity group-hover:opacity-100"
size="sm"
variant="ghost"
>
<MoreHorizontal className="h-4 w-4" />
</Button>
</div>
</CardHeader>
<CardContent className="pb-3"> <CardContent className="pb-3">
<div className="relative inset-0 min-h-52 min-w-64 overflow-hidden rounded-lg border border-border/30 bg-muted/30"> <div className="relative inset-0 min-h-52 min-w-64 overflow-hidden rounded-lg border border-border/30 bg-muted/30">
<Tldraw <Tldraw
cameraOptions={{ cameraOptions={{
constraints: { constraints: {
initialZoom: "fit-min", initialZoom: "fit-min",
bounds: { bounds: {
x: 0, x: 0,
y: 0, y: 0,
w: 9000, w: 9000,
h: 9000, h: 9000,
},
baseZoom: "fit-min",
behavior: "fixed",
origin: {
x: 0,
y: 0,
},
padding: {
x: 0.1,
y: 0.1,
},
}, },
baseZoom: "fit-min", }}
behavior: "fixed", className="min-h-52"
origin: { hideUi
x: 0, onMount={(editor) => {
y: 0, editor.updateInstanceState({ isReadonly: true });
}, }}
padding: { snapshot={snapshot}
x: 0.1, />
y: 0.1, </div>
}, </CardContent>
},
}}
className="min-h-52"
hideUi
onMount={(editor) => {
editor.updateInstanceState({ isReadonly: true });
}}
snapshot={
space.snapshotText
? JSON.parse(space.snapshotText).document
: undefined
}
/>
</div>
</CardContent>
<CardFooter className="flex items-center justify-between pt-0 text-muted-foreground text-sm"> <CardFooter className="flex items-center justify-between pt-0 text-muted-foreground text-sm">
<span>{space.itemCount} items</span> <span>{snapshot?.itemCount} items</span>
<span>Edited {space.lastEdited}</span> <span>Edited {space.lastEdited}</span>
</CardFooter> </CardFooter>
</Card> </Card>
))} );
})}
</div> </div>
{/* Empty State (when no spaces exist) */} {/* Empty State (when no spaces exist) */}

2
apps/web/src/lib/appwrite-db.ts
View File

@@ -100,6 +100,8 @@ export async function upsertSpaceSnapshot(
spaceId, spaceId,
userId: uid, userId: uid,
snapshot: JSON.stringify(payload), snapshot: JSON.stringify(payload),
title: existing?.title,
color: existing?.color,
} as const; } as const;
if (existing) { if (existing) {

5
apps/web/src/routes/space.tsx
View File

@@ -9,6 +9,7 @@ import {
} from "tldraw"; } from "tldraw";
import { z } from "zod"; import { z } from "zod";
import "tldraw/tldraw.css"; import "tldraw/tldraw.css";
import Loader from "@/components/loader";
import { import {
getLatestSpaceSnapshot, getLatestSpaceSnapshot,
type RemoteSnapshot, type RemoteSnapshot,
@@ -78,6 +79,10 @@ function SpaceRoute() {
}; };
}, [id, session, store]); }, [id, session, store]);
if (!(id && session)) {
return <Loader />;
}
return ( return (
<div className="mx-4 mt-4" style={{ position: "relative", inset: 0 }}> <div className="mx-4 mt-4" style={{ position: "relative", inset: 0 }}>
<Tldraw <Tldraw