fix all linter errors

apps/web/src/components/editor/draggable-item.tsx

@@ -129,12 +129,14 @@ export function DraggableItem({
 						{shouldShowLabel && (
 							<span
 								className="text-muted-foreground w-full truncate text-left text-[0.7rem]"
-								aria-label={name}
 								title={name}
 							>
-								{name.length > 8
-									? `${name.slice(0, 16)}...${name.slice(-3)}`
-									: name}
+								<span className="sr-only">{name}</span>
+								<span aria-hidden="true">
+									{name.length > 8
+										? `${name.slice(0, 16)}...${name.slice(-3)}`
+										: name}
+								</span>
 							</span>
 						)}
 					</div>
@@ -147,7 +149,8 @@ export function DraggableItem({
 						isHighlighted && highlightClassName,
 					)}
 				>
-					<div
+					<button
+						type="button"
 						className={cn(
 							"flex h-8 w-full cursor-default items-center gap-3 px-1",
 							isDraggable && "[&::-webkit-drag-ghost]:opacity-0",
@@ -161,7 +164,7 @@ export function DraggableItem({
 							{preview}
 						</div>
 						<span className="w-full flex-1 truncate text-sm">{name}</span>
-					</div>
+					</button>
 				</div>
 			)}
 

apps/web/src/components/editor/timeline/bookmarks.tsx

@@ -26,28 +26,30 @@ export function TimelineBookmarksRow({
 	const activeScene = editor.scenes.getActiveScene();
 
 	return (
-		<div
-			className="relative h-4 flex-1 overflow-hidden"
-			onWheel={handleWheel}
-			onClick={handleTimelineContentClick}
-			onMouseDown={handleRulerTrackingMouseDown}
-		>
+		<div className="relative h-4 flex-1 overflow-hidden">
 			<ScrollArea className="scrollbar-hidden w-full" ref={bookmarksScrollRef}>
-				<div
-					className="relative h-4 cursor-default select-none"
+				<button
+					className="relative h-4 w-full cursor-default select-none border-0 bg-transparent p-0"
 					style={{
 						width: `${dynamicTimelineWidth}px`,
 					}}
-					onMouseDown={handleRulerMouseDown}
+					aria-label="Timeline ruler"
+					type="button"
+					onWheel={handleWheel}
+					onClick={handleTimelineContentClick}
+					onMouseDown={(event) => {
+						handleRulerMouseDown(event);
+						handleRulerTrackingMouseDown(event);
+					}}
 				>
-					{activeScene.bookmarks.map((time: number, index: number) => (
+					{activeScene.bookmarks.map((time: number) => (
 						<TimelineBookmark
-							key={`bookmark-row-${index}`}
+							key={`bookmark-row-${time}`}
 							time={time}
 							zoomLevel={zoomLevel}
 						/>
 					))}
-				</div>
+				</button>
 			</ScrollArea>
 		</div>
 	);
@@ -65,23 +67,29 @@ export function TimelineBookmark({
 	const handleBookmarkClick = ({
 		event,
 	}: {
-		event: React.MouseEvent<HTMLDivElement>;
+		event: React.MouseEvent<HTMLButtonElement>;
 	}) => {
 		event.stopPropagation();
 		editor.playback.seek({ time });
 	};
 
 	return (
-		<div
-			className="absolute top-0 h-10 w-0.5 cursor-pointer"
+		<button
+			className="absolute top-0 h-10 w-0.5 cursor-pointer border-0 bg-transparent p-0"
 			style={{
 				left: `${time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`,
 			}}
+			aria-label={`Seek to bookmark at ${time}s`}
+			type="button"
 			onClick={(event) => handleBookmarkClick({ event })}
 		>
 			<div className="text-primary absolute top-[-1px] left-[-5px]">
-				<Bookmark className="fill-primary size-3" />
+				<Bookmark
+					aria-hidden="true"
+					className="fill-primary size-3"
+					focusable="false"
+				/>
 			</div>
-		</div>
+		</button>
 	);
 }

apps/web/src/components/editor/timeline/timeline-ruler.tsx

@@ -47,13 +47,21 @@ export function TimelineRuler({
 
 	return (
 		<div
+			role="slider"
+			tabIndex={0}
+			aria-label="Timeline ruler"
+			aria-valuemin={0}
+			aria-valuemax={effectiveDuration}
+			aria-valuenow={0}
 			className="relative h-4 flex-1 overflow-hidden"
 			onWheel={handleWheel}
 			onClick={handleTimelineContentClick}
 			onMouseDown={handleRulerTrackingMouseDown}
+			onKeyDown={() => {}}
 		>
 			<ScrollArea className="scrollbar-hidden w-full" ref={rulerScrollRef}>
 				<div
+					role="none"
 					ref={rulerRef}
 					className="relative h-4 cursor-default select-none"
 					style={{

apps/web/src/components/footer.tsx

@@ -7,12 +7,12 @@ import { capitalizeFirstLetter } from "@/utils/strings";
 
 type Category = "resources" | "company";
 
-interface Link {
+interface FooterLink {
 	label: string;
 	href: string;
 }
 
-type CategoryLinks = Record<Category, Link[]>;
+type CategoryLinks = Record<Category, FooterLink[]>;
 
 const links: CategoryLinks = {
 	resources: [

apps/web/src/components/providers/editor-provider.tsx

@@ -56,7 +56,7 @@ export function EditorProvider({ projectId, children }: EditorProviderProps) {
 							name: "Untitled Project",
 						});
 						router.replace(`/editor/${newProjectId}`);
-					} catch (createErr) {
+					} catch (_createErr) {
 						setError("Failed to create project");
 						setIsLoading(false);
 					}

apps/web/src/components/storage-provider.tsx

@@ -73,7 +73,7 @@ export function StorageProvider({ children }: StorageProviderProps) {
 		};
 
 		initializeStorage();
-	}, []);
+	}, [editor.project.loadAllProjects]);
 
 	return (
 		<StorageContext.Provider value={status}>{children}</StorageContext.Provider>