feat: add project visibility settings for scans and floorplans (#106)

- Add show_scans_public and show_guides_public columns to projects table - Add visibility toggles to editor sidebar settings panel (auto-save) - Add visibility toggles to project settings dialog (auto-save) - Propagate settings to community viewer (hide scans/guides for non-owners) - Add updateProjectVisibility server action - Fix username onboarding dialog stuck after DB reset (validate update affected rows) - Add error handling to UsernameGate for stale sessions Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-02-19 16:59:23 -05:00
parent 659c01052e
commit f4f9f8a220
12 changed files with 1253 additions and 68 deletions
@@ -1,16 +1,15 @@
 'use client'

-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import {
  Dialog,
  DialogContent,
  DialogDescription,
-  DialogFooter,
  DialogHeader,
  DialogTitle,
 } from '@/components/ui/primitives/dialog'
 import { Switch } from '@/components/ui/primitives/switch'
-import { updateProjectName, updateProjectPrivacy, deleteProject } from '../lib/projects/actions'
+import { updateProjectName, updateProjectVisibility, deleteProject } from '../lib/projects/actions'
 import type { Project } from '../lib/projects/types'

 interface ProjectSettingsDialogProps {
@@ -28,42 +27,35 @@ export function ProjectSettingsDialog({
  onUpdate,
  onDelete,
 }: ProjectSettingsDialogProps) {
-  const [loading, setLoading] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)
  const [name, setName] = useState(project.name || '')
  const [isPrivate, setIsPrivate] = useState(project.is_private)
+  const [showScansPublic, setShowScansPublic] = useState(project.show_scans_public ?? true)
+  const [showGuidesPublic, setShowGuidesPublic] = useState(project.show_guides_public ?? true)
+  const nameTimerRef = useRef<ReturnType<typeof setTimeout>>(null)

-  const handleSave = async () => {
-    setLoading(true)
-    try {
-      // Update name if changed
-      const trimmedName = name.trim()
-      if (trimmedName && trimmedName !== (project.name || '')) {
-        const nameResult = await updateProjectName(project.id, trimmedName)
-        if (!nameResult.success) {
-          alert(`Failed to update name: ${nameResult.error}`)
-          setLoading(false)
-          return
-        }
+  const handleNameChange = (value: string) => {
+    setName(value)
+    if (nameTimerRef.current) clearTimeout(nameTimerRef.current)
+    nameTimerRef.current = setTimeout(async () => {
+      const trimmed = value.trim()
+      if (trimmed && trimmed !== (project.name || '')) {
+        await updateProjectName(project.id, trimmed)
+        onUpdate?.()
      }
+    }, 500)
+  }

-      // Update privacy if changed
-      if (isPrivate !== project.is_private) {
-        const privacyResult = await updateProjectPrivacy(project.id, isPrivate)
-        if (!privacyResult.success) {
-          alert(`Failed to update privacy: ${privacyResult.error}`)
-          setLoading(false)
-          return
-        }
-      }
+  const handleVisibilityChange = async (
+    field: 'isPrivate' | 'showScansPublic' | 'showGuidesPublic',
+    value: boolean,
+  ) => {
+    if (field === 'isPrivate') setIsPrivate(value)
+    if (field === 'showScansPublic') setShowScansPublic(value)
+    if (field === 'showGuidesPublic') setShowGuidesPublic(value)

-      onUpdate?.()
-      onOpenChange(false)
-    } catch (error) {
-      alert('Failed to save settings')
-    } finally {
-      setLoading(false)
-    }
+    await updateProjectVisibility(project.id, { [field]: value })
+    onUpdate?.()
  }

  const handleDelete = async () => {
@@ -92,7 +84,7 @@ export function ProjectSettingsDialog({
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle>Project Settings</DialogTitle>
-          <DialogDescription>Update project name and privacy settings</DialogDescription>
+          <DialogDescription>Changes are saved automatically</DialogDescription>
        </DialogHeader>

        <div className="space-y-6 py-4">
@@ -105,10 +97,9 @@ export function ProjectSettingsDialog({
              id="project-name"
              type="text"
              value={name}
-              onChange={(e) => setName(e.target.value)}
+              onChange={(e) => handleNameChange(e.target.value)}
              placeholder="My Project"
              className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
-              disabled={loading}
            />
          </div>

@@ -122,10 +113,31 @@ export function ProjectSettingsDialog({
            </div>
            <div className="flex items-center gap-2">
              <span className="text-sm text-muted-foreground">Public</span>
-              <Switch checked={!isPrivate} onCheckedChange={(checked) => setIsPrivate(!checked)} />
+              <Switch checked={!isPrivate} onCheckedChange={(checked) => handleVisibilityChange('isPrivate', !checked)} />
            </div>
          </div>

+          {/* Public Visibility Toggles */}
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="font-medium">Show 3D Scans</div>
+              <div className="text-sm text-muted-foreground">
+                Visible to public viewers
+              </div>
+            </div>
+            <Switch checked={showScansPublic} onCheckedChange={(checked) => handleVisibilityChange('showScansPublic', checked)} />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="font-medium">Show Floorplans</div>
+              <div className="text-sm text-muted-foreground">
+                Visible to public viewers
+              </div>
+            </div>
+            <Switch checked={showGuidesPublic} onCheckedChange={(checked) => handleVisibilityChange('showGuidesPublic', checked)} />
+          </div>
+
          {/* Danger Zone */}
          <div className="border-t border-border pt-6">
            <h3 className="font-medium text-destructive mb-2">Danger Zone</h3>
@@ -136,31 +148,12 @@ export function ProjectSettingsDialog({
              type="button"
              onClick={handleDelete}
              className="rounded-md border border-destructive bg-destructive/10 px-4 py-2 text-sm text-destructive hover:bg-destructive/20"
-              disabled={isDeleting || loading}
+              disabled={isDeleting}
            >
              {isDeleting ? 'Deleting...' : 'Delete Project'}
            </button>
          </div>
        </div>
-
-        <DialogFooter>
-          <button
-            type="button"
-            onClick={() => onOpenChange(false)}
-            className="rounded-md border border-border px-4 py-2 text-sm hover:bg-accent"
-            disabled={loading || isDeleting}
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            onClick={handleSave}
-            className="rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90"
-            disabled={loading || isDeleting}
-          >
-            {loading ? 'Saving...' : 'Save Changes'}
-          </button>
-        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
@@ -17,10 +17,15 @@ export function UsernameGate({ children }: { children: React.ReactNode }) {
      setNeedsUsername(false)
      return
    }
-    getUsername().then((username) => {
-      setNeedsUsername(!username)
-      setChecking(false)
-    })
+    getUsername()
+      .then((username) => {
+        setNeedsUsername(!username)
+        setChecking(false)
+      })
+      .catch(() => {
+        setNeedsUsername(false)
+        setChecking(false)
+      })
  }, [isAuthenticated, isLoading])

  return (
@@ -64,10 +64,15 @@ export async function updateUsername(
    return { success: false, error: 'Username is already taken' }
  }

-  await db
+  const updated = await db
    .update(schema.users)
    .set({ username: trimmed })
    .where(eq(schema.users.id, session.user.id))
+    .returning({ id: schema.users.id })
+
+  if (updated.length === 0) {
+    return { success: false, error: 'User not found. Please sign out and sign in again.' }
+  }

  revalidatePath('/')
  revalidatePath('/settings')
@@ -461,7 +461,7 @@ export async function getPublicProjectsByUserId(userId: string): Promise<ActionR
 * Allows viewing if: project is public OR user owns the project
 */
 export async function getProjectModelPublic(projectId: string): Promise<
-  ActionResult<{ project: Project; model: any | null }>
+  ActionResult<{ project: Project; model: any | null; isOwner: boolean }>
 > {
  try {
    const session = await getSession()
@@ -515,6 +515,7 @@ export async function getProjectModelPublic(projectId: string): Promise<
      data: {
        project: projectData as Project,
        model: model || null,
+        isOwner: !!isOwner,
      },
    }
  } catch (error) {
@@ -607,6 +608,64 @@ export async function updateProjectPrivacy(
  }
 }

+/**
+ * Update project visibility settings (privacy + public scan/guide visibility)
+ */
+export async function updateProjectVisibility(
+  projectId: string,
+  settings: {
+    isPrivate?: boolean
+    showScansPublic?: boolean
+    showGuidesPublic?: boolean
+  },
+): Promise<ActionResult> {
+  try {
+    const session = await getSession()
+
+    if (!session?.user) {
+      return { success: false, error: 'Not authenticated' }
+    }
+
+    const supabase = await createServerSupabaseClient()
+
+    // Verify ownership
+    const { data: project } = await supabase
+      .from('projects')
+      .select('owner_id')
+      .eq('id', projectId)
+      .single()
+
+    if ((project as any)?.owner_id !== session.user.id) {
+      return { success: false, error: 'Unauthorized' }
+    }
+
+    const updateData: Record<string, boolean> = {}
+    if (settings.isPrivate !== undefined) updateData.is_private = settings.isPrivate
+    if (settings.showScansPublic !== undefined) updateData.show_scans_public = settings.showScansPublic
+    if (settings.showGuidesPublic !== undefined) updateData.show_guides_public = settings.showGuidesPublic
+
+    if (Object.keys(updateData).length === 0) {
+      return { success: true, message: 'No changes' }
+    }
+
+    const { error } = await (supabase
+      .from('projects') as any)
+      .update(updateData)
+      .eq('id', projectId)
+
+    if (error) {
+      return { success: false, error: error.message }
+    }
+
+    return { success: true, message: 'Visibility settings updated' }
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Failed to update visibility settings',
+    }
+  }
+}
+
 /**
 * Update project name
 */
@@ -13,6 +13,8 @@ export type DbProject = {
  created_at: string
  updated_at: string
  is_private: boolean
+  show_scans_public: boolean
+  show_guides_public: boolean
  views: number
  likes: number
  thumbnail_url: string | null
@@ -55,7 +57,7 @@ export type Database = {
    Tables: {
      projects: {
        Row: DbProject
-        Insert: Omit<DbProject, 'created_at' | 'updated_at' | 'views' | 'likes'>
+        Insert: Omit<DbProject, 'created_at' | 'updated_at' | 'views' | 'likes' | 'show_scans_public' | 'show_guides_public'> & { show_scans_public?: boolean; show_guides_public?: boolean }
        Update: Partial<Omit<DbProject, 'id' | 'created_at' | 'updated_at'>>
      }
      projects_addresses: {
@@ -104,6 +106,8 @@ export type Project = {
  updated_at: string
  // Community features
  is_private: boolean
+  show_scans_public: boolean
+  show_guides_public: boolean
  views: number
  likes: number
  thumbnail_url: string | null