doc: Add BuildContext.watchId documentation and examples.

website/src/content/docs/extensions/build_context_watch.mdx

@@ -21,6 +21,16 @@ import mainCode from '@/examples/build_context/lib/main.dart?raw';
 It not only retrieves the <HT>`T`</HT> dependency but also registers the current widget as a listener for any changes to the states set or otherwise any states of <HT>`T`</HT> dependency.
 Consequently, whenever changes, the widget using <HT>`BuildContext.watch`</HT> is automatically notified and rebuilt.
 
+:::tip
+You can optionally use <HT>`BuildContext.watch`</HT> with an `id`, but when you need to listen changes in a dependency's states using an `id`, it's better to use <HT>[`BuildContext.watchId`](/reactter/extensions/build_context_watch_id)</HT> for improved readability and clarity.
+
+```dart
+context.watch<MyDependency>(null, 'myId');
+// is equivalent to
+context.watchId<MyDependency>('myId');
+```
+:::
+
 ## Syntax
 
 ```dart showLineNumbers=false

website/src/content/docs/extensions/build_context_watch_id.mdx

@@ -5,6 +5,73 @@ sidebar:
   order: 3
 ---
 
-:::caution[TODO]
-This page is still in progress.
-:::
+import { HM, HT, HN } from '@/components/Highlight';
+import CodeTabs from '@/components/CodeTabs.astro';
+import { Tabs, TabItem } from "@/components/Tabs";
+import ZappButton from "@/components/ZappButton.astro";
+import { Code } from "@astrojs/starlight/components";
+import { marks } from '@/examples/marks.ts'
+
+import counterControllerCode from '@/examples/build_context/lib/counter_controller.dart?raw';
+import counterCode from '@/examples/build_context/lib/counter.dart?raw';
+import counterViewCode from '@/examples/build_context/lib/counter_view.dart?raw';
+import mainCode from '@/examples/build_context/lib/main.dart?raw';
+
+<HT><a href="https://pub.dev/documentation/flutter_reactter/latest/flutter_reactter/BuildContextExtension/watchId.html" target="_blank">`BuildContext.watchId`</a></HT> is a method similar to <HT>[`BuildContext.watch`](/reactter/extensions/build_context_watch)</HT>, but use `id` as first argument to locate the dependency.
+
+:::tip
+This approach is useful when you have multiple dependencies of the same type and you want to access a specific one.
+
+While you can use <HT>[`BuildContext.watch`](/reactter/extensions/build_context_watch)</HT> with `id`, <HT>`BuildContext.watchId`</HT> is more readable and clear when an `id` is required.
+
+```dart
+context.watch<MyDependency>(null, 'myId');
+// is equivalent to
+context.watchId<MyDependency>('myId');
+```
+:::
+
+## Syntax
+
+```dart showLineNumbers=false
+T context.watchId<T>(
+  String id,
+  [List<ReactterState> listenStates?(T instance)],
+);
+```
+
+## Explanation
+
+- <HT>`T`</HT>: The type of the dependency you want to access. These are some points to consider:
+  - If the type is nullable, the method will return <HN>`null`</HN> if the dependency is not found.
+  - If the type is not nullable, the method will throw an exception if the dependency is not found.
+- `id`: An identifier for the <HT>`T`</HT> dependency. The dependency will be located by its type(<HT>`T`</HT>) and the `id`.
+- <HM>`listenStates`</HM>: An optional list of <HT>`ReactterState`</HT> instances to listen for changes. If omitted, the method will listen to all states of <HT>`T`</HT> dependency.
+
+## Usage
+
+This following example demonstrates how to use <HT>`BuildContext.watchId`</HT>.
+
+<CodeTabs>
+  <ZappButton path="examples/build_context"/>
+
+  <Tabs>
+    <TabItem>
+      <HM single slot="label">counter.dart</HM>
+      <Code code={counterCode} lang="dart" mark={[...marks, {range: "28"}]} />
+    </TabItem>
+
+    <TabItem>
+      <HM single slot="label">counter_view.dart</HM>
+      <Code code={counterViewCode} lang="dart" mark={[...marks, {range: "17, 26"}]} />
+    </TabItem>
+
+    <TabItem label="counter_controller.dart">
+      <Code code={counterControllerCode} lang="dart" mark={marks} />
+    </TabItem>
+
+    <TabItem label="main.dart">
+      <Code code={mainCode} lang="dart" mark={marks} />
+    </TabItem>
+  </Tabs>
+</CodeTabs>