(
)}
+ {/* Watched Folders entry */}
+ {WATCHED_FOLDERS_ENABLED && (
+ e.key === "Enter" && openWatchedFolders()}
+ aria-label={t("watchedFolders.sidebarTitle", "Watched Folders")}
+ style={
+ isWatchedFoldersActive
+ ? { backgroundColor: "var(--active-bg)" }
+ : undefined
+ }
+ >
+
+ {!collapsed && (
+
+ {t("watchedFolders.sidebarTitle", "Watched Folders")}
+
+ )}
+
+ )}
+
{/* Files section - always visible when expanded */}
{!collapsed && (
@@ -716,6 +825,34 @@ const FileSidebar = forwardRef(
(id) => (id as string) === (stub.id as string),
);
const isInWorkbench = !!workbenchFileId;
+ // On Watched Folders, the tick means "this file is already in
+ // the open folder"; on the folder home (no folder open) a
+ // click is a no-op, so show no tick at all.
+ const isSelected = isWatchedFoldersActive
+ ? activeWatchedFolderId != null &&
+ (folderMembership
+ .get(stub.id as string)
+ ?.includes(activeWatchedFolderId) ??
+ false)
+ : isInWorkbench;
+ // Membership dots only on the Watched Folders home (the folder
+ // grid, no folder open). Inside a specific folder the tick
+ // already shows "in this folder"; in other views they'd just
+ // be noise.
+ const showFolderDots =
+ WATCHED_FOLDERS_ENABLED &&
+ isWatchedFoldersActive &&
+ activeWatchedFolderId === null;
+ const memberFolders = showFolderDots
+ ? (folderMembership.get(stub.id as string) ?? [])
+ .map((fid) => folderById.get(fid))
+ .filter((f): f is NonNullable => !!f)
+ .map((f) => ({
+ id: f.id,
+ name: f.name,
+ accentColor: f.accentColor,
+ }))
+ : [];
// Both active and viewed-in-viewer are ID-based - never index-based.
const isViewedInViewer = !!(
viewedWorkbenchId &&
@@ -739,12 +876,16 @@ const FileSidebar = forwardRef(
name={stub.name}
size={stub.size}
lastModified={stub.lastModified}
- isSelected={isInWorkbench}
+ isSelected={isSelected}
isActive={isActive}
isViewedInViewer={isViewedInViewer}
thumbnailUrl={thumbnailUrl}
onClick={handleFileClick}
onEyeClick={handleEyeClick}
+ draggable={isWatchedFoldersActive}
+ onDragStart={handleWatchedFolderDragStart}
+ folders={memberFolders}
+ onFolderClick={openWatchedFolder}
/>
);
})}
diff --git a/frontend/editor/src/core/components/shared/FileSidebarFileItem.css b/frontend/editor/src/core/components/shared/FileSidebarFileItem.css
index 0b6497823..3529f0165 100644
--- a/frontend/editor/src/core/components/shared/FileSidebarFileItem.css
+++ b/frontend/editor/src/core/components/shared/FileSidebarFileItem.css
@@ -118,11 +118,71 @@
color: #3b82f6;
}
+.file-sidebar-file-meta-row {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ margin-top: 2px;
+ min-width: 0;
+}
+
.file-sidebar-file-meta {
- display: block;
font-size: 11px;
color: var(--text-muted);
- margin-top: 2px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+/* ---- Folder membership tags ---- */
+.file-sidebar-folder-tags {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ margin-top: 3px;
+ min-width: 0;
+}
+
+.file-sidebar-folder-tag {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ max-width: 7.5rem;
+ padding: 1px 6px 1px 5px;
+ border: 1px solid transparent;
+ border-radius: 10px;
+ cursor: pointer;
+ transition: filter 0.1s ease;
+}
+
+.file-sidebar-folder-tag:hover {
+ filter: brightness(1.1);
+}
+
+.file-sidebar-folder-tag-dot {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ flex-shrink: 0;
+}
+
+.file-sidebar-folder-tag-label {
+ font-size: 10px;
+ font-weight: 600;
+ line-height: 1.2;
+ color: var(--text-secondary);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.file-sidebar-folder-tag-more {
+ font-size: 10px;
+ font-weight: 600;
+ line-height: 1;
+ color: var(--text-muted);
+ cursor: default;
+ flex-shrink: 0;
}
/* ---- Eye button (open in viewer) ---- */
diff --git a/frontend/editor/src/core/components/shared/FileSidebarFileItem.tsx b/frontend/editor/src/core/components/shared/FileSidebarFileItem.tsx
index e08188920..c03930864 100644
--- a/frontend/editor/src/core/components/shared/FileSidebarFileItem.tsx
+++ b/frontend/editor/src/core/components/shared/FileSidebarFileItem.tsx
@@ -1,5 +1,6 @@
import { useState, useCallback, useRef } from "react";
import { createPortal } from "react-dom";
+import { Tooltip } from "@mantine/core";
import { useTranslation } from "react-i18next";
import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
import VisibilityOffOutlinedIcon from "@mui/icons-material/VisibilityOffOutlined";
@@ -117,6 +118,13 @@ function getSidebarFileIcon(ext: string): React.ReactElement {
return ;
}
+/** A Watched Folder this file currently belongs to, used for the membership dots. */
+export interface FileItemFolderRef {
+ id: string;
+ name: string;
+ accentColor: string;
+}
+
export interface FileItemProps {
fileId: FileId;
name: string;
@@ -128,8 +136,17 @@ export interface FileItemProps {
thumbnailUrl?: string;
onClick: (fileId: FileId) => void;
onEyeClick: (fileId: FileId, e: React.MouseEvent) => void;
+ /** When true, the row can be dragged (e.g. onto a Watched Folder). */
+ draggable?: boolean;
+ onDragStart?: (e: React.DragEvent, fileId: FileId) => void;
+ /** Watched Folders this file is in — rendered as small accent dots. */
+ folders?: FileItemFolderRef[];
+ /** Clicking a membership dot opens that folder. */
+ onFolderClick?: (folderId: string) => void;
}
+const MAX_VISIBLE_FOLDER_TAGS = 2;
+
export function FileItem({
fileId,
name,
@@ -141,12 +158,19 @@ export function FileItem({
thumbnailUrl,
onClick,
onEyeClick,
+ draggable,
+ onDragStart,
+ folders = [],
+ onFolderClick,
}: FileItemProps) {
const { t } = useTranslation();
const ext = getFileExtension(name);
const dateLabel = lastModified ? formatFileDate(lastModified) : "";
const typeLabel = ext ? ext.toUpperCase() : "File";
+ const visibleFolders = folders.slice(0, MAX_VISIBLE_FOLDER_TAGS);
+ const overflowFolders = folders.slice(MAX_VISIBLE_FOLDER_TAGS);
+
// Only use raster thumbnails for PDFs and images — everything else uses scalable SVG icons
const useRasterThumb = ext === "pdf" || IMAGE_EXTENSIONS.has(ext);
const resolvedThumbnail = useLazyThumbnail(
@@ -179,6 +203,10 @@ export function FileItem({
ref={itemRef}
className={`file-sidebar-file-item${isSelected ? " selected" : ""}${isActive ? " active" : ""}${isViewedInViewer ? " viewed" : ""}`}
onClick={() => onClick(fileId)}
+ draggable={draggable}
+ onDragStart={
+ draggable && onDragStart ? (e) => onDragStart(e, fileId) : undefined
+ }
role="button"
tabIndex={0}
onKeyDown={(e) => e.key === "Enter" && onClick(fileId)}
@@ -203,11 +231,61 @@ export function FileItem({
>
{name}
-
- {dateLabel}
- {dateLabel && typeLabel ? " · " : ""}
- {typeLabel}
+
+
+ {dateLabel}
+ {dateLabel && typeLabel ? " · " : ""}
+ {typeLabel}
+
+ {folders.length > 0 && (
+
+ {visibleFolders.map((folder) => (
+
+ {
+ e.stopPropagation();
+ onFolderClick?.(folder.id);
+ }}
+ >
+
+
+ {folder.name}
+
+
+
+ ))}
+ {overflowFolders.length > 0 && (
+ f.name).join(", ")}
+ withArrow
+ position="top"
+ withinPortal
+ >
+
+ +{overflowFolders.length}
+
+
+ )}
+
+ )}
)}
- {hasFiles &&
+ {(hasFiles || isCustomView) &&
viewOptions.map((opt) => (