chore: tighten .vscode IDE and typescript configuration (#24537)

This branch tightens import hygiene and editor guidance to reduce
accidental use of legacy or discouraged patterns.
It also updates consumers too, by propagating the new `lucide-react`
import convention across the existing UI surfaces that reference those
icons.

- Updated `.vscode/settings.json` to prefer non-relative imports and
improve TypeScript auto-import behavior.
- Re-enabled and expanded Biome restricted-import enforcement in
`biome.jsonc` for migration guardrails.
- Added/used `lucide-react` `-Icon` naming conventions for clarity and
consistency.
- Updated consumers too across components, modules, and pages so the new
import rules are applied end-to-end.

.vscode/settings.json

@@ -62,5 +62,21 @@
 	"[markdown]": {
 		"editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
 	},
-	"biome.lsp.bin": "site/node_modules/.bin/biome"
+	"biome.lsp.bin": "site/node_modules/.bin/biome",
+
+	// Prefer type only imports.
+	"typescript.preferences.preferTypeOnlyAutoImports": true,
+	// Prefer aliased/non-relative imports (e.g. "#/...") over "../../...".
+	"typescript.preferences.importModuleSpecifier": "non-relative",
+	"javascript.preferences.importModuleSpecifier": "non-relative",
+	// We discourage people from various older libraries that
+	// are no longer recommended/being migrated from.
+	"typescript.preferences.autoImportSpecifierExcludeRegexes": [
+		// discourage people from using MUI components
+		"^@mui(?:/.*)?$",
+		// discourage people from using Emotion CSS
+		"^@emotion(?:/.*)?$",
+		// we prefer people use `lodash/foo` over `lodash`
+		"^lodash$"
+	]
 }