Skip to content

Cleanup obsolete document flow#24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Matia-R merged 9 commits into from
Feb 17, 2026
Merged

Cleanup obsolete document flow #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3cd7a04
remove references to document-updates
Matia-R Feb 16, 2026
a218be6
remove references to content column in documents table
Matia-R Feb 16, 2026
26f915c
remove old save document procedure and db function
Matia-R Feb 16, 2026
c0acfb3
refactor to pull reused document existence and permissions checks int…
Matia-R Feb 16, 2026
1411497
fix missing error handlign in doc permissions check
Matia-R Feb 16, 2026
94c871a
fix error handling
Matia-R Feb 16, 2026
a2c625c
resuable loading and error logic
Matia-R Feb 16, 2026
a7ae10f
fix alert styling
Matia-R Feb 17, 2026
d1e01ab
improve error messages
Matia-R Feb 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 87 additions & 0 deletions src/app/_components/alert.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
import * as React from "react";
import { AlertCircleIcon } from "lucide-react";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "~/lib/utils";

const alertVariants = cva(
"relative w-full rounded-lg border px-4 py-3 text-sm [&_svg]:text-foreground",
{
variants: {
variant: {
default: "bg-background text-foreground",
destructive: "bg-sidebar text-destructive [&_svg]:text-destructive",
},
},
defaultVariants: {
variant: "default",
},
},
);

const AlertContext =
React.createContext<VariantProps<typeof alertVariants>["variant"]>("default");

const Alert = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant = "default", children, ...props }, ref) => (
<AlertContext.Provider value={variant}>
<div
ref={ref}
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
>
{children}
</div>
</AlertContext.Provider>
));
Alert.displayName = "Alert";

const AlertTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
Comment on lines +42 to +44

@coderabbitaicoderabbitaiBotFeb 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Ref type mismatch: HTMLParagraphElement but the element is <h5>.

AlertTitle forwards a ref typed as HTMLParagraphElement, but it renders an <h5> (which is HTMLHeadingElement). A consumer assigning the ref and calling heading-specific DOM methods (or relying on TypeScript narrowing) will get incorrect types.

Suggested fix
-const AlertTitle = React.forwardRef<- HTMLParagraphElement,- React.HTMLAttributes<HTMLHeadingElement>->(({ className, ...props }, ref) => {+const AlertTitle = React.forwardRef<+ HTMLHeadingElement,+ React.HTMLAttributes<HTMLHeadingElement>+>(({ className, ...props }, ref) => {
📝 Committable suggestion

‼️IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
constAlertTitle=React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
constAlertTitle=React.forwardRef<
HTMLHeadingElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props},ref)=>{
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/_components/alert.tsx` around lines 42 - 44, AlertTitle is forwarding
a ref typed as HTMLParagraphElement while rendering an <h5>, causing a DOM type
mismatch; update the forwardRef generics and prop typing on AlertTitle to use
HTMLHeadingElement (and React.HTMLAttributes<HTMLHeadingElement>) so the ref and
props match the rendered <h5>, and ensure any other places that import/use
AlertTitle expect a heading ref type.

>(({ className, ...props }, ref) => {
const variant = React.useContext(AlertContext);
const title = (
<h5
ref={ref}
className={cn("mb-2 font-medium leading-none tracking-tight", className)}
{...props}
/>
);

if (variant === "destructive") {
return (
<div className="mb-2 flex items-center gap-2 [&>*:last-child]:mb-0">
<AlertCircleIcon className="h-4 w-4 shrink-0" aria-hidden />
{title}
</div>
);
}

return title;
});
AlertTitle.displayName = "AlertTitle";

const AlertDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
Comment on lines +68 to +70

@coderabbitaicoderabbitaiBotFeb 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Ref type mismatch: HTMLParagraphElement but the element is <div>.

Same issue as AlertTitle — AlertDescription forwards a ref typed as HTMLParagraphElement and the props extend HTMLParagraphElement attributes, but it renders a <div>.

Suggested fix
-const AlertDescription = React.forwardRef<- HTMLParagraphElement,- React.HTMLAttributes<HTMLParagraphElement>->(({ className, ...props }, ref) => {+const AlertDescription = React.forwardRef<+ HTMLDivElement,+ React.HTMLAttributes<HTMLDivElement>+>(({ className, ...props }, ref) => {
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/_components/alert.tsx` around lines 68 - 70, AlertDescription is
forwarding a ref typed as HTMLParagraphElement and using
React.HTMLAttributes<HTMLParagraphElement> but renders a <div>; change the
forwarded ref and props to use HTMLDivElement (i.e.,
React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>) so the
ref type and props match the rendered element, and do the same fix for the
related AlertTitle if it has the same mismatch; update any prop/usage sites if
TypeScript errors appear.

>(({ className, ...props }, ref) => {
const variant = React.useContext(AlertContext);
return (
<div
ref={ref}
className={cn(
"text-sm [&_p]:leading-relaxed",
variant === "destructive" && "pl-6",
className,
)}
{...props}
/>
);
});
AlertDescription.displayName = "AlertDescription";

export { Alert, AlertTitle, AlertDescription };
15 changes: 0 additions & 15 deletions src/app/_components/document-error.tsx
View file
Open in desktop

This file was deleted.

17 changes: 17 additions & 0 deletions src/app/_components/document-loading-skeleton.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
export function DocumentLoadingSkeleton() {
return (
<div className="animate-pulse space-y-4">
<div className="h-9 w-2/3 rounded-lg bg-muted" />
<div className="space-y-3">
<div className="h-4 rounded bg-muted" />
<div className="h-4 w-[95%] rounded bg-muted" />
<div className="h-4 w-[90%] rounded bg-muted" />
</div>
<div className="space-y-3 pt-4">
<div className="h-4 w-[85%] rounded bg-muted" />
<div className="h-4 w-[88%] rounded bg-muted" />
<div className="h-4 w-[92%] rounded bg-muted" />
</div>
</div>
);
}
116 changes: 61 additions & 55 deletions src/app/documents/[documentId]/page.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,21 +4,66 @@ import dynamic from "next/dynamic";
import { useParams } from "next/navigation";
import { useMemo } from "react";
import { TRPCClientError } from "@trpc/client";
import { DocumentError } from "~/app/_components/document-error";
import { Alert, AlertDescription, AlertTitle } from "~/app/_components/alert";
import { DocumentLoadingSkeleton } from "~/app/_components/document-loading-skeleton";
import { MotionFade } from "~/app/_components/motion-fade";
import { useCollaborativeDocCrdt } from "~/hooks/use-collaborative-doc-crdt";
import { useNewDocumentFlag } from "~/hooks/use-new-document-flag";
import { useUserProfile } from "~/hooks/use-user-profile";
import { getAvatarColorHex } from "~/lib/avatar-colors";

// Helper to extract error code from TRPC error
const DOCUMENT_ERROR = {
NOT_FOUND: {
title: "Doc not found",
message:
"This doc doesn’t exist. It may have been moved, deleted, or the link might be incorrect.",
},
BAD_REQUEST: {
title: "Bad URL",
message:
"The URL provided is incomplete or malformed. Please check the link and try again.",
},
FORBIDDEN: {
title: "Restricted access",
message: "Looks like you don't have access to this doc.",
},
UNAUTHORIZED: {
title: "Login required",
message: "Please sign in to your account to access this doc.",
},
INTERNAL_SERVER_ERROR: {
title: "Unable to load doc",
message:
"A technical issue occurred on our end. We’re working to resolve it.",
},
DEFAULT: {
title: "Something went wrong",
message: "An unexpected error occurred. Please try again in a moment.",
},
} as const;

function getErrorCode(error: unknown): string | undefined {
if (error instanceof TRPCClientError) {
return (error.data as { code?: string } | undefined)?.code;
}
if (error instanceof Error && error.cause instanceof TRPCClientError) {
return (error.cause.data as { code?: string } | undefined)?.code;
}
return undefined;
}

function getDocumentErrorContent(error: unknown): {
title: string;
message: string;
} {
const code = getErrorCode(error);
const key: keyof typeof DOCUMENT_ERROR =
code && code in DOCUMENT_ERROR
? (code as keyof typeof DOCUMENT_ERROR)
: "DEFAULT";
return DOCUMENT_ERROR[key];
}

export default function DocumentPage() {
const params = useParams();
const documentId = params.documentId as string;
Expand All@@ -45,75 +90,36 @@ export default function DocumentPage() {

// === RENDERING LOGIC ===

// 1. Handle errors
// 1. Handle errors — show alert and stop; don't proceed to loading or editor
if (error) {
const errorCode = getErrorCode(error);
const isForbidden =
errorCode === "FORBIDDEN" || errorCode === "UNAUTHORIZED";

// NOT_FOUND is valid for collaborative apps (room not saved yet)
if (errorCode === "NOT_FOUND") {
// Continue to render - WebRTC will sync from peers
} else {
const getErrorMessage = () => {
if (isForbidden) {
return "You don't have permission to view this document.";
}
if (errorCode === "INTERNAL_SERVER_ERROR") {
return "Something went wrong on our end. Please try again.";
}
return "Something unexpected happened. Please try refreshing.";
};

return (
<MotionFade>
<DocumentError
title={isForbidden ? "Access Denied" : "Unable to Load Document"}
message={getErrorMessage()}
/>
</MotionFade>
);
}
const { title, message } = getDocumentErrorContent(error);
return (
<MotionFade>
<Alert variant="destructive">
<AlertTitle>{title}</AlertTitle>
<AlertDescription>{message}</AlertDescription>
</Alert>
</MotionFade>
);
}

// 2. Show loading skeleton
// - Skip for optimistic creates (isNew = true)
// - Show while CRDT changes are loading or provider isn't ready
// 2. Show loading skeleton (CRDT loading or provider not ready)
if (
!isNew &&
(isLoading || !isReady || !ydoc || !provider || isProfileLoading)
) {
return (
<MotionFade>
<div className="animate-pulse space-y-4">
<div className="h-9 w-2/3 rounded-lg bg-muted" />
<div className="space-y-3">
<div className="h-4 rounded bg-muted" />
<div className="h-4 w-[95%] rounded bg-muted" />
<div className="h-4 w-[90%] rounded bg-muted" />
</div>
<div className="space-y-3 pt-4">
<div className="h-4 w-[85%] rounded bg-muted" />
<div className="h-4 w-[88%] rounded bg-muted" />
<div className="h-4 w-[92%] rounded bg-muted" />
</div>
</div>
<DocumentLoadingSkeleton />
</MotionFade>
);
}

// 3. Still waiting for ydoc/provider (optimistic case)
// 3. Still waiting for ydoc/provider (e.g. optimistic new-doc case)
if (!isReady || !ydoc || !provider || isProfileLoading) {
return (
<MotionFade>
<div className="animate-pulse space-y-4">
<div className="h-9 w-2/3 rounded-lg bg-muted" />
<div className="space-y-3">
<div className="h-4 rounded bg-muted" />
<div className="h-4 w-[95%] rounded bg-muted" />
<div className="h-4 w-[90%] rounded bg-muted" />
</div>
</div>
<DocumentLoadingSkeleton />
</MotionFade>
);
}
Expand Down
39 changes: 29 additions & 10 deletions src/hooks/use-collaborative-doc-crdt.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -104,32 +104,51 @@ export function useCollaborativeDocCrdt({
} = api.document.getDocumentChanges.useQuery(documentId, {
enabled: !!documentId && !isNew,
refetchOnWindowFocus: false,
staleTime: 0, // Always refetch when navigating
retry: false, // Don't retry on error; show error and stop
staleTime: 0,
});

// Track if we've initialized for a specific documentId + dataUpdatedAt combination
const initializedForRef = useRef<string | null>(null);
// Once we have an error for a document, don't run setup() until documentId changes (sticky error)
const errorDocumentIdRef = useRef<string | null>(null);

// Clear error when navigating to a different document so the new document gets a clean slate
const prevDocumentIdRef = useRef<string>(documentId);
useEffect(() => {
if (prevDocumentIdRef.current !== documentId) {
prevDocumentIdRef.current = documentId;
errorDocumentIdRef.current = null;
setError(null);
}
}, [documentId]);

// Main setup effect
useEffect(() => {
let cancelled = false;

// For new documents, initialize immediately
// For existing documents, wait for query to complete
if (!isNew && !changesSuccess) {
// For existing documents: if the query failed, set error and stop. Never run setup() for this document.
if (!isNew && changesError) {
const wrapped = new Error(changesError.message) as Error & { cause?: unknown };
wrapped.cause = changesError;
setError(wrapped);
errorDocumentIdRef.current = documentId;
return;
}

// Create a unique key for this documentId + data version
const initKey = isNew ? `new-${documentId}` : `${documentId}-${dataUpdatedAt}`;
// If we previously set an error for this documentId, don't run setup (e.g. after refetch)
if (errorDocumentIdRef.current === documentId) {
return;
}

// Skip if already initialized for this exact data
if (initializedForRef.current === initKey) {
// For new documents, initialize immediately. For existing, wait for query success.
if (!isNew && !changesSuccess) {
return;
}

if (changesError) {
setError(new Error(changesError.message));
const initKey = isNew ? `new-${documentId}` : `${documentId}-${dataUpdatedAt}`;

if (initializedForRef.current === initKey) {
return;
}

Expand Down
Loading