morgan/editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

presets community

Browse Source
This commit is contained in:
wass08
2026-03-04 13:38:51 +01:00
parent a86609aa5c
commit ba2dfa8caa
5 changed files with 174 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/editor/app/api/presets/[id]/route.ts
+14 -8
View File
@@ -4,6 +4,7 @@ import { auth } from '@/lib/auth'
import { supabaseAdmin } from '@/lib/supabase/server'
// PUT /api/presets/[id]
// Accepts any subset of: name, data, is_community
export async function PUT(
req: NextRequest,
{ params }: { params: Promise<{ id: string }> },
@@ -15,25 +16,30 @@ export async function PUT(
const { id } = await params
const body = await req.json()
const { name } = body
const { name, data, is_community } = body
if (!name) {
return NextResponse.json({ error: 'Missing name' }, { status: 400 })
if (name === undefined && data === undefined && is_community === undefined) {
return NextResponse.json({ error: 'Nothing to update' }, { status: 400 })
}
const { data: existing } = await supabaseAdmin
.from('presets')
.select('user_id, is_community')
.select('user_id')
.eq('id', id)
.single()
if (!existing || existing.user_id !== session.user.id || existing.is_community) {
if (!existing || existing.user_id !== session.user.id) {
return NextResponse.json({ error: 'Not found or forbidden' }, { status: 403 })
}
const updates: Record<string, unknown> = {}
if (name !== undefined) updates.name = name
if (data !== undefined) updates.data = data
if (is_community !== undefined) updates.is_community = is_community
const { data: preset, error } = await supabaseAdmin
.from('presets')
.update({ name })
.update(updates)
.eq('id', id)
.select()
.single()
@@ -56,11 +62,11 @@ export async function DELETE(
const { data: existing } = await supabaseAdmin
.from('presets')
.select('user_id, is_community, thumbnail_url')
.select('user_id, thumbnail_url')
.eq('id', id)
.single()
if (!existing || existing.user_id !== session.user.id || existing.is_community) {
if (!existing || existing.user_id !== session.user.id) {
return NextResponse.json({ error: 'Not found or forbidden' }, { status: 403 })
}
apps/editor/app/api/presets/route.ts
-1
View File
@@ -25,7 +25,6 @@ export async function GET(req: NextRequest) {
.select('*')
.eq('type', type)
.eq('user_id', session.user.id)
.eq('is_community', false)
.order('created_at', { ascending: false })
if (error) return NextResponse.json({ error: error.message }, { status: 500 })
apps/editor/components/ui/panels/door-panel.tsx
+20 -5
View File
@@ -117,9 +117,9 @@ export function DoorPanel() {
handleUpdate({ segments: updated })
}
const handleSavePreset = useCallback(async (name: string) => {
if (!node) return
const data = {
const getDoorPresetData = useCallback(() => {
if (!node) return null
return {
width: node.width,
height: node.height,
frameThickness: node.frameThickness,
@@ -137,12 +137,27 @@ export function DoorPanel() {
panicBarHeight: node.panicBarHeight,
segments: node.segments,
}
}, [node])
const handleSavePreset = useCallback(async (name: string) => {
const data = getDoorPresetData()
if (!data) return
await fetch('/api/presets', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ type: 'door', name, data }),
})
}, [node])
}, [getDoorPresetData])
const handleOverwritePreset = useCallback(async (id: string) => {
const data = getDoorPresetData()
if (!data) return
await fetch(`/api/presets/${id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ data }),
})
}, [getDoorPresetData])
const handleApplyPreset = useCallback((data: Record<string, unknown>) => {
handleUpdate(data as Partial<DoorNode>)
@@ -162,7 +177,7 @@ export function DoorPanel() {
>
{/* Presets strip */}
<div className="px-3 pt-2.5 pb-1.5 border-b border-border/30">
<PresetsPopover type="door" onApply={handleApplyPreset} onSave={handleSavePreset}>
<PresetsPopover type="door" onApply={handleApplyPreset} onSave={handleSavePreset} onOverwrite={handleOverwritePreset}>
<button className="flex w-full items-center gap-2 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-[#3e3e3e] transition-colors">
<BookMarked className="h-3.5 w-3.5 shrink-0" />
<span>Presets</span>
apps/editor/components/ui/panels/presets/presets-popover.tsx
+120 -37
View File
@@ -1,8 +1,9 @@
'use client'
import { useEffect, useState, useCallback } from 'react'
import { BookMarked, Pencil, Plus, Trash2, Users, Check, X } from 'lucide-react'
import { BookMarked, Check, Globe, GlobeLock, Pencil, Plus, Save, Trash2, Users, X } from 'lucide-react'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/primitives/popover'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/primitives/tooltip'
import { useAuth } from '@/features/community/lib/auth/hooks'
import { cn } from '@/lib/utils'
@@ -23,19 +24,23 @@ type Tab = 'community' | 'mine'
interface PresetsPopoverProps {
type: PresetType
/** Apply preset data to the current node */
onApply: (data: Record<string, unknown>) => void
/** Save current node state as a new preset with the given name */
onSave: (name: string) => Promise<void>
/** Overwrite an existing preset's data with the current node state */
onOverwrite: (id: string) => Promise<void>
children: React.ReactNode
}
export function PresetsPopover({ type, onApply, onSave, children }: PresetsPopoverProps) {
export function PresetsPopover({ type, onApply, onSave, onOverwrite, children }: PresetsPopoverProps) {
const { isAuthenticated } = useAuth()
const [open, setOpen] = useState(false)
const [tab, setTab] = useState<Tab>('community')
const [presets, setPresets] = useState<PresetData[]>([])
const [loading, setLoading] = useState(false)
// Save dialog state
// New preset save state
const [showSaveInput, setShowSaveInput] = useState(false)
const [saveName, setSaveName] = useState('')
const [saving, setSaving] = useState(false)
@@ -47,6 +52,9 @@ export function PresetsPopover({ type, onApply, onSave, children }: PresetsPopov
// Delete confirmation
const [deletingId, setDeletingId] = useState<string | null>(null)
// Overwrite feedback (shows check icon briefly after overwrite)
const [overwrittenId, setOverwrittenId] = useState<string | null>(null)
const fetchPresets = useCallback(async () => {
setLoading(true)
try {
@@ -64,12 +72,11 @@ export function PresetsPopover({ type, onApply, onSave, children }: PresetsPopov
if (open) fetchPresets()
}, [open, fetchPresets])
// Switch tab to community if user signs out while on mine tab
useEffect(() => {
if (!isAuthenticated && tab === 'mine') setTab('community')
}, [isAuthenticated, tab])
const handleSave = async () => {
const handleSaveNew = async () => {
if (!saveName.trim()) return
setSaving(true)
try {
@@ -104,6 +111,23 @@ export function PresetsPopover({ type, onApply, onSave, children }: PresetsPopov
}
}
const handleOverwrite = async (id: string) => {
await onOverwrite(id)
setOverwrittenId(id)
setTimeout(() => setOverwrittenId(null), 1500)
}
const handleToggleCommunity = async (id: string, current: boolean) => {
const res = await fetch(`/api/presets/${id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ is_community: !current }),
})
if (res.ok) {
setPresets((prev) => prev.map((p) => (p.id === id ? { ...p, is_community: !current } : p)))
}
}
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>{children}</PopoverTrigger>
@@ -123,19 +147,16 @@ export function PresetsPopover({ type, onApply, onSave, children }: PresetsPopov
</div>
{isAuthenticated && (
<button
onClick={() => {
setShowSaveInput((v) => !v)
setSaveName('')
}}
onClick={() => { setShowSaveInput((v) => !v); setSaveName('') }}
className="flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium text-muted-foreground hover:text-foreground hover:bg-white/10 transition-colors"
>
<Plus className="h-3 w-3" />
Save preset
Save new
</button>
)}
</div>
{/* Save input */}
{/* New preset name input */}
{showSaveInput && (
<div className="flex items-center gap-1.5 px-3 py-2 border-b border-border/50 bg-white/5">
<input
@@ -143,7 +164,7 @@ export function PresetsPopover({ type, onApply, onSave, children }: PresetsPopov
value={saveName}
onChange={(e) => setSaveName(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') handleSave()
if (e.key === 'Enter') handleSaveNew()
if (e.key === 'Escape') { setShowSaveInput(false); setSaveName('') }
}}
placeholder="Preset name…"
@@ -151,7 +172,7 @@ export function PresetsPopover({ type, onApply, onSave, children }: PresetsPopov
/>
<button
disabled={!saveName.trim() || saving}
onClick={handleSave}
onClick={handleSaveNew}
className="flex h-6 w-6 items-center justify-center rounded-md bg-primary/20 hover:bg-primary/30 text-primary disabled:opacity-40 transition-colors"
>
<Check className="h-3.5 w-3.5" />
@@ -173,10 +194,7 @@ export function PresetsPopover({ type, onApply, onSave, children }: PresetsPopov
</TabButton>
<TabButton
active={tab === 'mine'}
onClick={() => {
if (!isAuthenticated) return
setTab('mine')
}}
onClick={() => { if (isAuthenticated) setTab('mine') }}
disabled={!isAuthenticated}
>
<BookMarked className="h-3 w-3" />
@@ -202,7 +220,10 @@ export function PresetsPopover({ type, onApply, onSave, children }: PresetsPopov
renamingId={renamingId}
renameValue={renameValue}
deletingId={deletingId}
overwrittenId={overwrittenId}
onApply={() => { onApply(preset.data); setOpen(false) }}
onOverwrite={() => handleOverwrite(preset.id)}
onToggleCommunity={() => handleToggleCommunity(preset.id, preset.is_community)}
onStartRename={() => { setRenamingId(preset.id); setRenameValue(preset.name) }}
onRenameChange={setRenameValue}
onRenameConfirm={() => handleRename(preset.id)}
@@ -256,7 +277,7 @@ function EmptyState({ tab, isAuthenticated }: { tab: Tab; isAuthenticated: boole
{tab === 'community'
? 'No community presets yet.'
: isAuthenticated
? 'No presets saved yet. Use "Save preset" to save the current configuration.'
? 'No presets saved yet. Use "Save new" to save the current configuration.'
: 'Sign in to save and view your presets.'}
</p>
</div>
@@ -269,7 +290,10 @@ interface PresetRowProps {
renamingId: string | null
renameValue: string
deletingId: string | null
overwrittenId: string | null
onApply: () => void
onOverwrite: () => void
onToggleCommunity: () => void
onStartRename: () => void
onRenameChange: (v: string) => void
onRenameConfirm: () => void
@@ -285,7 +309,10 @@ function PresetRow({
renamingId,
renameValue,
deletingId,
overwrittenId,
onApply,
onOverwrite,
onToggleCommunity,
onStartRename,
onRenameChange,
onRenameConfirm,
@@ -296,6 +323,7 @@ function PresetRow({
}: PresetRowProps) {
const isRenaming = renamingId === preset.id
const isDeleting = deletingId === preset.id
const justOverwritten = overwrittenId === preset.id
if (isDeleting) {
return (
@@ -350,7 +378,7 @@ function PresetRow({
return (
<li className="group flex items-center gap-2 px-3 py-2.5 hover:bg-white/5 transition-colors">
{/* Thumbnail placeholder */}
{/* Thumbnail */}
<div className="h-8 w-12 shrink-0 rounded-md border border-border/40 bg-white/5 overflow-hidden">
{preset.thumbnail_url ? (
// eslint-disable-next-line @next/next/no-img-element
@@ -362,32 +390,87 @@ function PresetRow({
)}
</div>
<button
onClick={onApply}
className="flex-1 min-w-0 text-left"
>
<span className="block truncate text-xs font-medium text-foreground group-hover:text-foreground/90">
{preset.name}
{/* Name + date — clicking applies */}
<button onClick={onApply} className="flex-1 min-w-0 text-left">
<span className="flex items-center gap-1.5">
<span className="block truncate text-xs font-medium text-foreground group-hover:text-foreground/90">
{preset.name}
</span>
{preset.is_community && (
<Globe className="h-2.5 w-2.5 shrink-0 text-muted-foreground/50" />
)}
</span>
<span className="block text-[10px] text-muted-foreground/60">
{new Date(preset.created_at).toLocaleDateString()}
</span>
</button>
{/* Actions — only shown on hover for "My presets" */}
{isMine && (
<div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
<button
onClick={onStartRename}
className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-white/10 transition-colors"
>
<Pencil className="h-3 w-3" />
</button>
<button
onClick={onDeleteRequest}
className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-red-400 hover:bg-red-500/10 transition-colors"
>
<Trash2 className="h-3 w-3" />
</button>
{/* Save into (overwrite) */}
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={onOverwrite}
className={cn(
'flex h-6 w-6 items-center justify-center rounded-md transition-colors',
justOverwritten
? 'text-green-400 bg-green-500/10'
: 'text-muted-foreground hover:text-foreground hover:bg-white/10',
)}
>
{justOverwritten ? <Check className="h-3 w-3" /> : <Save className="h-3 w-3" />}
</button>
</TooltipTrigger>
<TooltipContent side="top">Save current config here</TooltipContent>
</Tooltip>
{/* Community toggle */}
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={onToggleCommunity}
className={cn(
'flex h-6 w-6 items-center justify-center rounded-md transition-colors',
preset.is_community
? 'text-blue-400 hover:text-blue-300 hover:bg-blue-500/10'
: 'text-muted-foreground hover:text-blue-400 hover:bg-blue-500/10',
)}
>
{preset.is_community ? <Globe className="h-3 w-3" /> : <GlobeLock className="h-3 w-3" />}
</button>
</TooltipTrigger>
<TooltipContent side="top">
{preset.is_community ? 'Remove from community' : 'Share with community'}
</TooltipContent>
</Tooltip>
{/* Rename */}
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={onStartRename}
className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-white/10 transition-colors"
>
<Pencil className="h-3 w-3" />
</button>
</TooltipTrigger>
<TooltipContent side="top">Rename</TooltipContent>
</Tooltip>
{/* Delete */}
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={onDeleteRequest}
className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-red-400 hover:bg-red-500/10 transition-colors"
>
<Trash2 className="h-3 w-3" />
</button>
</TooltipTrigger>
<TooltipContent side="top">Delete</TooltipContent>
</Tooltip>
</div>
)}
</li>
apps/editor/components/ui/panels/window-panel.tsx
+20 -5
View File
@@ -92,9 +92,9 @@ export function WindowPanel() {
setSelection({ selectedIds: [] })
}, [node, setMovingNode, setSelection])
const handleSavePreset = useCallback(async (name: string) => {
if (!node) return
const data = {
const getWindowPresetData = useCallback(() => {
if (!node) return null
return {
width: node.width,
height: node.height,
frameThickness: node.frameThickness,
@@ -107,12 +107,27 @@ export function WindowPanel() {
sillDepth: node.sillDepth,
sillThickness: node.sillThickness,
}
}, [node])
const handleSavePreset = useCallback(async (name: string) => {
const data = getWindowPresetData()
if (!data) return
await fetch('/api/presets', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ type: 'window', name, data }),
})
}, [node])
}, [getWindowPresetData])
const handleOverwritePreset = useCallback(async (id: string) => {
const data = getWindowPresetData()
if (!data) return
await fetch(`/api/presets/${id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ data }),
})
}, [getWindowPresetData])
const handleApplyPreset = useCallback((data: Record<string, unknown>) => {
handleUpdate(data as Partial<WindowNode>)
@@ -163,7 +178,7 @@ export function WindowPanel() {
>
{/* Presets strip */}
<div className="px-3 pt-2.5 pb-1.5 border-b border-border/30">
<PresetsPopover type="window" onApply={handleApplyPreset} onSave={handleSavePreset}>
<PresetsPopover type="window" onApply={handleApplyPreset} onSave={handleSavePreset} onOverwrite={handleOverwritePreset}>
<button className="flex w-full items-center gap-2 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-[#3e3e3e] transition-colors">
<BookMarked className="h-3.5 w-3.5 shrink-0" />
<span>Presets</span>