feat(desktop): enhance browser bookmarks

apps/desktop/src/lib/trpc/routers/external/index.ts

@@ -1,3 +1,4 @@
+import { readFile, writeFile } from "node:fs/promises";
 import {
 	EXTERNAL_APPS,
 	NON_EDITOR_APPS,
@@ -6,7 +7,13 @@ import {
 } from "@superset/local-db";
 import { TRPCError } from "@trpc/server";
 import { eq } from "drizzle-orm";
-import { clipboard, shell } from "electron";
+import {
+	BrowserWindow,
+	clipboard,
+	dialog,
+	type OpenDialogOptions,
+	shell,
+} from "electron";
 import { localDb } from "main/lib/local-db";
 import { z } from "zod";
 import { publicProcedure, router } from "../..";
@@ -18,6 +25,10 @@ import {
 } from "./helpers";
 
 const ExternalAppSchema = z.enum(EXTERNAL_APPS);
+const FileFilterSchema = z.object({
+	name: z.string(),
+	extensions: z.array(z.string()),
+});
 
 const nonEditorSet = new Set<ExternalApp>(NON_EDITOR_APPS);
 
@@ -191,6 +202,91 @@ export const createExternalRouter = () => {
 			clipboard.writeText(input);
 		}),
 
+		openTextFile: publicProcedure
+			.input(
+				z.object({
+					title: z.string().optional(),
+					buttonLabel: z.string().optional(),
+					filters: z.array(FileFilterSchema).optional(),
+				}),
+			)
+			.mutation(async ({ input }) => {
+				const window = BrowserWindow.getFocusedWindow();
+				const options: OpenDialogOptions = {
+					title: input.title,
+					buttonLabel: input.buttonLabel,
+					filters: input.filters,
+					properties: ["openFile"],
+				};
+				const result = window
+					? await dialog.showOpenDialog(window, options)
+					: await dialog.showOpenDialog(options);
+
+				if (result.canceled || result.filePaths.length === 0) {
+					return null;
+				}
+
+				const filePath = result.filePaths[0];
+				if (!filePath) {
+					return null;
+				}
+
+				try {
+					const content = await readFile(filePath, "utf-8");
+					return {
+						path: filePath,
+						content,
+					};
+				} catch (error) {
+					throw new TRPCError({
+						code: "INTERNAL_SERVER_ERROR",
+						message: `Failed to read file: ${filePath}`,
+						cause: error,
+					});
+				}
+			}),
+
+		saveTextFile: publicProcedure
+			.input(
+				z.object({
+					title: z.string().optional(),
+					defaultPath: z.string().optional(),
+					buttonLabel: z.string().optional(),
+					filters: z.array(FileFilterSchema).optional(),
+					content: z.string(),
+				}),
+			)
+			.mutation(async ({ input }) => {
+				const window = BrowserWindow.getFocusedWindow();
+				const options = {
+					title: input.title,
+					defaultPath: input.defaultPath,
+					buttonLabel: input.buttonLabel,
+					filters: input.filters,
+				};
+				const result = window
+					? await dialog.showSaveDialog(window, options)
+					: await dialog.showSaveDialog(options);
+
+				if (result.canceled || !result.filePath) {
+					return null;
+				}
+
+				try {
+					await writeFile(result.filePath, input.content, "utf-8");
+				} catch (error) {
+					throw new TRPCError({
+						code: "INTERNAL_SERVER_ERROR",
+						message: `Failed to write file: ${result.filePath}`,
+						cause: error,
+					});
+				}
+
+				return {
+					path: result.filePath,
+				};
+			}),
+
 		resolvePath: publicProcedure
 			.input(
 				z.object({

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/BrowserPane/BrowserPane.tsx

@@ -1,12 +1,12 @@
 import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
 import { GlobeIcon } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { LuMinus, LuPlus } from "react-icons/lu";
 import { TbDeviceDesktop } from "react-icons/tb";
 import type { MosaicBranch } from "react-mosaic-component";
 import { electronTrpc } from "renderer/lib/electron-trpc";
 import {
-	normalizeBookmarkUrl,
+	findBookmarkByUrl,
 	useBrowserBookmarksStore,
 } from "renderer/stores/browser-bookmarks";
 import { useTabsStore } from "renderer/stores/tabs/store";
@@ -55,11 +55,10 @@ export function BrowserPane({
 	const isLoading = browserState?.isLoading ?? false;
 	const loadError = browserState?.error ?? null;
 	const isBlankPage = currentUrl === "about:blank";
-	const currentBookmark = useBrowserBookmarksStore((state) =>
-		state.bookmarks.find(
-			(bookmark) =>
-				normalizeBookmarkUrl(bookmark.url) === normalizeBookmarkUrl(currentUrl),
-		),
+	const bookmarks = useBrowserBookmarksStore((state) => state.bookmarks);
+	const currentBookmark = useMemo(
+		() => findBookmarkByUrl(bookmarks, currentUrl),
+		[bookmarks, currentUrl],
 	);
 	const toggleBookmark = useBrowserBookmarksStore(
 		(state) => state.toggleBookmark,

apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/BrowserPane/components/BookmarkBar/BookmarkBar.tsx

@@ -1,4 +1,5 @@
 import {
+	closestCenter,
 	DndContext,
 	type DragEndEvent,
 	MouseSensor,
@@ -10,12 +11,16 @@ import {
 	SortableContext,
 } from "@dnd-kit/sortable";
 import { cn } from "@superset/ui/utils";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import {
+	folderContainsBookmarkUrl,
+	isBrowserBookmark,
 	normalizeBookmarkUrl,
 	useBrowserBookmarksStore,
 } from "renderer/stores/browser-bookmarks";
+import { setPersistentWebviewInteractionLock } from "../../hooks/usePersistentWebview";
 import { BookmarkBarItem } from "./components/BookmarkBarItem";
+import { BookmarkFolderItem } from "./components/BookmarkFolderItem";
 
 interface BookmarkBarProps {
 	currentUrl: string;
@@ -24,11 +29,7 @@ interface BookmarkBarProps {
 
 export function BookmarkBar({ currentUrl, onNavigate }: BookmarkBarProps) {
 	const bookmarks = useBrowserBookmarksStore((state) => state.bookmarks);
-	const moveBookmark = useBrowserBookmarksStore((state) => state.moveBookmark);
-	const removeBookmark = useBrowserBookmarksStore(
-		(state) => state.removeBookmark,
-	);
-
+	const moveNode = useBrowserBookmarksStore((state) => state.moveNode);
 	const normalizedCurrentUrl = useMemo(
 		() => normalizeBookmarkUrl(currentUrl),
 		[currentUrl],
@@ -40,31 +41,66 @@ export function BookmarkBar({ currentUrl, onNavigate }: BookmarkBarProps) {
 		}),
 	);
 
+	useEffect(() => {
+		return () => {
+			setPersistentWebviewInteractionLock("bookmark-bar-dnd", false);
+		};
+	}, []);
+
 	const handleDragEnd = ({ active, over }: DragEndEvent) => {
+		setPersistentWebviewInteractionLock("bookmark-bar-dnd", false);
 		if (!over) return;
-		moveBookmark(String(active.id), String(over.id));
+		moveNode(String(active.id), String(over.id));
 	};
 
+	const rootIds = useMemo(
+		() => bookmarks.map((bookmark) => bookmark.id),
+		[bookmarks],
+	);
+
 	return (
 		<div className="flex h-9 shrink-0 items-center border-b border-border/70 bg-background/95 px-2">
 			{bookmarks.length > 0 ? (
-				<DndContext sensors={sensors} onDragEnd={handleDragEnd}>
+				<DndContext
+					sensors={sensors}
+					collisionDetection={closestCenter}
+					onDragStart={() => {
+						setPersistentWebviewInteractionLock("bookmark-bar-dnd", true);
+					}}
+					onDragCancel={() => {
+						setPersistentWebviewInteractionLock("bookmark-bar-dnd", false);
+					}}
+					onDragEnd={handleDragEnd}
+				>
 					<SortableContext
-						items={bookmarks.map((bookmark) => bookmark.id)}
+						items={rootIds}
 						strategy={horizontalListSortingStrategy}
 					>
-						<div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto pb-0.5">
-							{bookmarks.map((bookmark) => (
-								<BookmarkBarItem
-									key={bookmark.id}
-									bookmark={bookmark}
-									isActive={
-										normalizeBookmarkUrl(bookmark.url) === normalizedCurrentUrl
-									}
-									onNavigate={onNavigate}
-									onRemove={removeBookmark}
-								/>
-							))}
+						<div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden overscroll-y-none pb-0.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+							{bookmarks.map((bookmark) =>
+								isBrowserBookmark(bookmark) ? (
+									<BookmarkBarItem
+										key={bookmark.id}
+										bookmark={bookmark}
+										isActive={
+											normalizeBookmarkUrl(bookmark.url) ===
+											normalizedCurrentUrl
+										}
+										onNavigate={onNavigate}
+									/>
+								) : (
+									<BookmarkFolderItem
+										key={bookmark.id}
+										folder={bookmark}
+										currentUrl={currentUrl}
+										isActive={folderContainsBookmarkUrl(
+											bookmark,
+											normalizedCurrentUrl,
+										)}
+										onNavigate={onNavigate}
+									/>
+								),
+							)}
 						</div>
 					</SortableContext>
 				</DndContext>