feat: add documentation links for global custom instructions in UI (#7114)

* feat: add documentation links for global custom instructions in UI

- Updated translation strings to include links to global rules documentation
- Added VSCodeLink components in ModesView to render clickable documentation links
- Helps users discover global custom instructions feature as suggested in GitHub discussion #7111

* fix: address PR feedback - update all language files and improve documentation links

- Added <0> placeholders to all 17 non-English translation files for global rules links
- Updated documentation anchors to use #global-rules-directory and #setting-up-global-rules
- Added aria-label attributes to all VSCodeLink components for better accessibility
- Improved UTM campaign parameter naming for clearer tracking

---------

Co-authored-by: Roo Code <[email protected]>

Author: roomote[bot]

webview-ui/src/components/modes/ModesView.tsx

@@ -601,10 +601,12 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 						<Trans i18nKey="prompts:modes.createModeHelpText">
 							<VSCodeLink
 								href={buildDocLink("basic-usage/using-modes", "prompts_view_modes")}
-								style={{ display: "inline" }}></VSCodeLink>
+								style={{ display: "inline" }}
+								aria-label="Learn about using modes"></VSCodeLink>
 							<VSCodeLink
 								href={buildDocLink("features/custom-modes", "prompts_view_modes")}
-								style={{ display: "inline" }}></VSCodeLink>
+								style={{ display: "inline" }}
+								aria-label="Learn about customizing modes"></VSCodeLink>
 						</Trans>
 					</div>
 
@@ -1166,6 +1168,16 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 											}}
 										/>
 									),
+									"0": (
+										<VSCodeLink
+											href={buildDocLink(
+												"features/custom-instructions#global-rules-directory",
+												"prompts_mode_specific_global_rules",
+											)}
+											style={{ display: "inline" }}
+											aria-label="Learn about global custom instructions for modes"
+										/>
+									),
 								}}
 							/>
 						</div>
@@ -1291,7 +1303,8 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 															"features/footgun-prompting",
 															"prompts_advanced_system_prompt",
 														)}
-														style={{ display: "inline" }}></VSCodeLink>
+														style={{ display: "inline" }}
+														aria-label="Read important information about overriding system prompts"></VSCodeLink>
 												),
 												"2": <strong />,
 											}}
@@ -1310,10 +1323,11 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 						<Trans i18nKey="prompts:globalCustomInstructions.description">
 							<VSCodeLink
 								href={buildDocLink(
-									"features/custom-instructions#global-custom-instructions",
+									"features/custom-instructions#setting-up-global-rules",
 									"prompts_global_custom_instructions",
 								)}
-								style={{ display: "inline" }}></VSCodeLink>
+								style={{ display: "inline" }}
+								aria-label="Learn more about global custom instructions"></VSCodeLink>
 						</Trans>
 					</div>
 					<VSCodeTextArea
@@ -1352,6 +1366,16 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 										}
 									/>
 								),
+								"0": (
+									<VSCodeLink
+										href={buildDocLink(
+											"features/custom-instructions#setting-up-global-rules",
+											"prompts_global_rules",
+										)}
+										style={{ display: "inline" }}
+										aria-label="Learn about setting up global custom instructions"
+									/>
+								),
 							}}
 						/>
 					</div>

webview-ui/src/i18n/locales/ca/prompts.json

@@ -50,7 +50,7 @@
 		"title": "Mode-specific Custom Instructions (optional)",
 		"resetToDefault": "Reset to default",
 		"description": "Add behavioral guidelines specific to {{modeName}} mode.",
-		"loadFromFile": "Custom instructions specific to {{mode}} mode can also be loaded from the <span>.roo/rules-{{slug}}/</span> folder in your workspace (.roorules-{{slug}} and .clinerules-{{slug}} are deprecated and will stop working soon)."
+		"loadFromFile": "Custom instructions specific to {{mode}} mode can also be loaded from the <span>.roo/rules-{{slug}}/</span> folder in your workspace or from the global <0>.roo/rules-{{slug}}/</0> (.roorules-{{slug}} and .clinerules-{{slug}} are deprecated and will stop working soon)."
 	},
 	"exportMode": {
 		"title": "Export Mode",
@@ -76,7 +76,7 @@
 	"globalCustomInstructions": {
 		"title": "Custom Instructions for All Modes",
 		"description": "These instructions apply to all modes. They provide a base set of behaviors that can be enhanced by mode-specific instructions below. <0>Learn more</0>",
-		"loadFromFile": "Instructions can also be loaded from the <span>.roo/rules/</span> folder in your workspace (.roorules and .clinerules are deprecated and will stop working soon)."
+		"loadFromFile": "Instructions can also be loaded from the <span>.roo/rules/</span> folder in your workspace or from the global <0>.roo/rules/</0> (.roorules and .clinerules are deprecated and will stop working soon)."
 	},
 	"systemPrompt": {
 		"preview": "Preview System Prompt",