Merge pull request #3494 from opral/sherlock-v2-improvements

Sherlock v2 improvements

Author: felixhaeberle

.changeset/fair-fishes-pretend.md

@@ -0,0 +1,7 @@
+---
+"sherlock-editor-app": patch
+"@inlang/editor-component": patch
+"vs-code-extension": patch
+---
+
+Sherlock v2 bugfixes & improvements

.changeset/silly-moles-judge.md

@@ -0,0 +1,5 @@
+---
+"vs-code-extension": patch
+---
+
+bugfixes & small improvements

inlang/packages/sherlock/assets/styles.css

@@ -17,7 +17,7 @@ body {
 	background-color: var(--vscode-sideBar-background);
 	font-size: 13px;
 	cursor: pointer;
-	padding: 5px 10px;
+	padding: 5px 8px;
 	border: none;
 	text-align: left;
 	outline: none;
@@ -39,6 +39,14 @@ body {
 	width: 100%;
 }
 
+.collapsible .chevron {
+	transition: transform 0.2s ease;
+}
+
+.collapsible.active .chevron {
+	transform: rotate(90deg);
+}
+
 .collapsible .messageId span {
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -64,7 +72,7 @@ body {
 	gap: 5px;
 	width: 100%;
 	height: 18px;
-	padding: 5px 10px 4px 10px;
+	padding: 5px 8px 4px 8px;
 	border-bottom: 1px solid var(--vscode-sideBar-border);
 	font-size: 13px;
 	cursor: pointer;

inlang/packages/sherlock/package.json

@@ -106,11 +106,13 @@
 			},
 			{
 				"command": "sherlock.extractMessage",
-				"title": "Sherlock: Extract Message"
+				"title": "Sherlock: Extract Message",
+				"icon": "$(arrow-down)"
 			},
 			{
 				"command": "sherlock.createMessage",
-				"title": "Sherlock: Create Message"
+				"title": "Sherlock: Create Message",
+				"icon": "$(add)"
 			}
 		],
 		"menus": {
@@ -130,6 +132,18 @@
 					"command": "sherlock.copyError",
 					"group": "inline"
 				}
+			],
+			"view/title": [
+				{
+					"command": "sherlock.createMessage",
+					"when": "view == messageView",
+					"group": "navigation"
+				},
+				{
+					"command": "sherlock.extractMessage",
+					"when": "view == messageView",
+					"group": "navigation"
+				}
 			]
 		},
 		"configuration": {

inlang/packages/sherlock/src/commands/extractMessage.test.ts

@@ -242,7 +242,7 @@ describe("extractMessageCommand", () => {
 		// @ts-expect-error
 		await extractMessageCommand.callback(mockTextEditor)
 		expect(msg).toHaveBeenCalledWith(
-			"Please select a text to extract in your text editor.",
+			"Please select a text in your text editor to extract a message.",
 			"warn",
 			"notification"
 		)

inlang/packages/sherlock/src/commands/extractMessage.ts

@@ -56,7 +56,11 @@ export const extractMessageCommand = {
 		}
 
 		if (textEditor.selection.isEmpty) {
-			return msg("Please select a text to extract in your text editor.", "warn", "notification")
+			return msg(
+				"Please select a text in your text editor to extract a message.",
+				"warn",
+				"notification"
+			)
 		}
 
 		const autoHumanId = await getSetting("extract.autoHumanId.enabled").catch(() => true)

inlang/packages/sherlock/src/commands/reloadProject.ts

@@ -0,0 +1,50 @@
+import * as vscode from "vscode"
+import { handleError } from "../utilities/utils.js"
+import { state } from "../utilities/state.js"
+import { main } from "../main.js"
+import { createFileSystemMapper } from "../utilities/fs/createFileSystemMapper.js"
+import fs from "node:fs/promises"
+
+export const reloadProjectCommand = {
+	command: "sherlock.reloadProject",
+	title: "Sherlock: Reload project",
+	register: vscode.commands.registerCommand,
+	callback: async () => {
+		try {
+			console.log("Reloading project...")
+			
+			// Get current workspace
+			const workspaceFolder = vscode.workspace.workspaceFolders?.[0]
+			if (!workspaceFolder) {
+				console.warn("No workspace folder found.")
+				return
+			}
+
+			// Create file system mapper
+			const mappedFs = createFileSystemMapper(workspaceFolder.uri.fsPath, fs)
+			
+			// Get context from extension
+			const extension = vscode.extensions.getExtension("inlang.vs-code-extension")
+			if (!extension) {
+				throw new Error("Could not find Sherlock extension")
+			}
+			
+			// Get API from extension (returns context)
+			const api = await extension.activate()
+			if (!api?.context) {
+				throw new Error("Could not get extension context")
+			}
+
+			// Update project if we have a selected project
+			if (state().selectedProjectPath) {
+				await main({ context: api.context, workspaceFolder, fs: mappedFs })
+				console.log("Project reloaded successfully")
+			} else {
+				console.warn("No project selected, nothing to reload")
+			}
+		} catch (error) {
+			console.error("Failed to reload project:", error)
+			handleError(error)
+		}
+	}
+}

inlang/packages/sherlock/src/configuration.ts

@@ -14,6 +14,7 @@ import { machineTranslateMessageCommand } from "./commands/machineTranslate.js"
 import { openSettingsViewCommand } from "./commands/openSettingsView.js"
 import { toggleInlineAnnotationsCommand } from "./commands/toggleInlineAnnotation.js"
 import { openEditorViewCommand } from "./commands/openEditorView.js"
+import { reloadProjectCommand } from "./commands/reloadProject.js"
 
 export const CONFIGURATION = {
 	EVENTS: {
@@ -41,6 +42,7 @@ export const CONFIGURATION = {
 		COPY_ERROR: copyErrorCommand,
 		MACHINE_TRANSLATE_MESSAGE: machineTranslateMessageCommand,
 		TOGGLE_INLINE_ANNOTATIONS: toggleInlineAnnotationsCommand,
+		RELOAD_PROJECT: reloadProjectCommand,
 	},
 	FILES: {
 		// TODO: remove this hardcoded assumption for multi project support

inlang/packages/sherlock/src/main.ts

@@ -13,12 +13,13 @@ import { gettingStartedView } from "./utilities/getting-started/gettingStarted.j
 import { closestInlangProject } from "./utilities/project/closestInlangProject.js"
 import { recommendationBannerView } from "./utilities/recommendation/recommendation.js"
 import { capture } from "./services/telemetry/index.js"
-import packageJson from "../package.json" assert { type: "json" }
+import packageJson from "../package.json" with { type: "json" }
 import { statusBar } from "./utilities/settings/statusBar.js"
 import fg from "fast-glob"
 import { saveProjectToDirectory, type IdeExtensionConfig } from "@inlang/sdk"
 import path from "node:path"
 import { linterDiagnostics } from "./diagnostics/linterDiagnostics.js"
+import { setupDirectMessageWatcher } from "./utilities/fs/experimental/directMessageHandler.js"
 //import { initErrorMonitoring } from "./services/error-monitoring/implementation.js"
 
 // Entry Point
@@ -60,7 +61,7 @@ export async function activate(
 }
 
 // Main Function
-async function main(args: {
+export async function main(args: {
 	context: vscode.ExtensionContext
 	workspaceFolder: vscode.WorkspaceFolder
 	fs: FileSystem
@@ -95,37 +96,21 @@ async function main(args: {
 		await registerExtensionComponents(args)
 		await handleInlangErrors()
 
-		// TODO: Replace by reactive settings API?
-		setupFileSystemWatcher(args)
+		// Set up both file system watchers
+		// setupFileSystemWatcher(args)
+
+		// Set up direct message watcher as a fallback
+		setupDirectMessageWatcher({
+			context: args.context,
+			workspaceFolder: args.workspaceFolder,
+		})
 
 		return
 	} else {
 		await gettingStartedView(args)
 	}
 }
 
-function setupFileSystemWatcher(args: {
-	context: vscode.ExtensionContext
-	workspaceFolder: vscode.WorkspaceFolder
-	fs: FileSystem
-}) {
-	const watcher = vscode.workspace.createFileSystemWatcher(
-		new vscode.RelativePattern(
-			args.workspaceFolder,
-			state().selectedProjectPath || CONFIGURATION.FILES.PROJECT
-		)
-	)
-
-	watcher.onDidChange(async () => {
-		// reload project
-		await main({
-			context: args.context,
-			workspaceFolder: args.workspaceFolder,
-			fs: args.fs,
-		})
-	})
-}
-
 async function registerExtensionComponents(args: {
 	context: vscode.ExtensionContext
 	workspaceFolder: vscode.WorkspaceFolder

inlang/packages/sherlock/src/utilities/editor/editorView.ts

@@ -13,9 +13,7 @@ import { deleteBundleNested } from "./helper/deleteBundleNested.js"
 import { handleUpdateBundle } from "./helper/handleBundleUpdate.js"
 import { createMessage } from "./helper/createMessage.js"
 import { saveProject } from "../../main.js"
-import { createFileSystemMapper } from "../fs/createFileSystemMapper.js"
-import path from "path"
-import fs from "node:fs/promises"
+import { rpc } from "@inlang/rpc"
 
 // Same interface as before
 export interface UpdateBundleMessage {
@@ -148,6 +146,90 @@ export function editorView(args: { context: vscode.ExtensionContext; initialBund
 
 					updateView()
 					return
+				case "translate-bundle":
+					// Handle the translated bundle
+					try {
+						// Update the bundle in the database
+						await handleUpdateBundle({
+							db: state().project?.db,
+							message: {
+								command: "translate-bundle",
+								change: message.translatedBundle,
+							},
+						})
+						updateView()
+					} catch (error) {
+						console.error("Failed to update translated bundle", error)
+						vscode.window.showErrorMessage(`Failed to update translations: ${String(error)}`)
+					}
+					return
+				case "machine-translate-bundle":
+					// Handle machine translation directly in extension host
+					try {
+						const sourceBundle = message.bundle
+						const sourceLocale = message.sourceLocale
+						const targetLocale = message.targetLocale
+
+						// Show info message
+						msg("Translating...", "info", "statusBar", vscode.StatusBarAlignment.Right, 3000)
+
+						// Use the RPC translation service
+						const result = await rpc.machineTranslateBundle({
+							bundle: sourceBundle,
+							sourceLocale,
+							targetLocales: [targetLocale],
+						})
+
+						if (result.error) {
+							throw new Error(result.error)
+						}
+
+						// Check if result.data is undefined
+						if (!result.data) {
+							throw new Error("Translation result is empty")
+						}
+
+						// We need to ensure the result.data has the expected structure
+						// Create a properly formatted bundle with required fields to match expected type
+						const typedBundle = {
+							...result.data,
+							id: result.data.id || sourceBundle.id, // Ensure id is never undefined
+							declarations: result.data.declarations || [], // Ensure declarations is always an array
+							// Add any other required fields that might be missing
+						}
+
+						// Update the bundle in the database with the properly typed data
+						await handleUpdateBundle({
+							db: state().project?.db,
+							message: {
+								command: "translate-bundle",
+								change: {
+									entityId: sourceBundle.id,
+									entity: "bundle",
+									newData: typedBundle,
+								},
+							},
+						})
+
+						updateView()
+						msg("Translation complete", "info", "statusBar", vscode.StatusBarAlignment.Right, 3000)
+					} catch (error) {
+						console.error("Failed to translate bundle", error)
+						msg(
+							`Translation error: ${String(error)}`,
+							"error",
+							"statusBar",
+							vscode.StatusBarAlignment.Right,
+							3000
+						)
+					}
+					return
+				case "show-info-message":
+					msg(message.message, "info", "statusBar", vscode.StatusBarAlignment.Right, 3000)
+					return
+				case "show-error-message":
+					msg(message.message, "error", "statusBar", vscode.StatusBarAlignment.Right, 3000)
+					return
 
 				default:
 					console.error("Unknown command from webview:", command)
@@ -245,8 +327,8 @@ export function editorView(args: { context: vscode.ExtensionContext; initialBund
 			// Allow media from safe sources (if needed)
 			`media-src ${webview.cspSource} https://* data:;`,
 
-			// Allow connections to APIs, WebSockets, and data URIs
-			`connect-src https://* data: ${
+			// Allow connections to APIs, WebSockets, and data URIs - include http://localhost:3000 for RPC
+			`connect-src https://* http://localhost:3000 data: ${
 				isProd
 					? ``
 					: `ws://${localServerUrl} ws://0.0.0.0:${localPort} http://${localServerUrl} http://0.0.0.0:${localPort}`