[dev docs] Add recently viewed docs

dev_docs/nav-kibana-dev.docnav.json

@@ -278,6 +278,10 @@
         {
           "id": "kibDevReactKibanaContext",
           "label": "Kibana React Contexts"
+        },
+        {
+          "id": "kibDevDocsChromeRecentlyAccessed",
+          "label": "Recently Viewed"
         }
       ]
     },

dev_docs/shared_ux/chrome_recently_accessed/chrome_recently_accessed.mdx

@@ -0,0 +1,62 @@
+---
+id: kibDevDocsChromeRecentlyAccessed
+slug: /kibana-dev-docs/chrome/recently-accessed
+title: Chrome Recently Viewed
+description: How to use chrome's recently accessed service to add your links to the recently viewed list in the side navigation.
+date: 2024-10-04
+tags: ['kibana', 'dev', 'contributor', 'chrome', 'navigation', 'shared-ux']
+---
+
+## Introduction
+
+The `ChromeRecentlyAccessed` service allows applications to register recently visited objects. These items are displayed in the "Recently Viewed" section of a side navigation menu, providing users with quick access to their previously visited resources. This service includes methods for adding, retrieving, and subscribing to the recently accessed history.
+
+![Recently viewed section in the sidenav](./chrome_recently_accessed.png)
+
+## Guidelines
+
+The `ChromeRecentlyAccessed` service should be used thoughtfully to provide users with easy access to key resources they've interacted with. Unlike browser history, this feature is for important items that users may want to revisit.
+
+DOs:
+
+- Register important resources that users may want to revisit. Like a dashboard, a saved search, or another specific object.
+- Update the link when the state of the current resource changes. For example, if a user changes the time range while on a dashboard, update the recently viewed link to reflect the latest viewed state where possible. See below for instructions on how to update the link when state changes.
+
+DON'Ts:
+
+- Don't register every page view.
+- Don't register temporary or transient states as individual items.
+- Prevent overloading. Keep the list focused on high-value resources.
+
+## Usage
+
+To register an item with the `ChromeRecentlyAccessed` service, provide a unique `id`, a `label`, and a `link`. The `id` is used to identify and deduplicate the item, the `label` is displayed in the "Recently Viewed" list and the `link` is used to navigate to the item when selected.
+
+```ts
+const link = '/app/map/1234';
+const label = 'Map 1234';
+const id = 'map-1234';
+
+coreStart.chrome.recentlyAccessed.add(link, label, id);
+```
+
+To update the link when state changes, add another item with the same `id`. This will replace the existing item in the "Recently Viewed" list.
+
+```ts
+const link = '/app/map/1234';
+const label = 'Map 1234';
+
+coreStart.chrome.recentlyAccessed.add(`/app/map/1234`, label, id);
+
+// User changes the time range and we want to update the link in the "Recently Viewed" list
+coreStart.chrome.recentlyAccessed.add(
+  `/app/map/1234?timeRangeFrom=now-30m&timeRangeTo=now`,
+  label,
+  id
+);
+```
+
+## Implementation details
+
+The `ChromeRecentlyAccessed` services is based on <DocLink id="kibKbnRecentlyAccessedPluginApi" text="@kbn/recently-accessed"/> package. This package provides a `RecentlyAccessedService` that uses browser local storage to manage records of recently accessed objects. Internally it implements the queue with a maximum length of 20 items. When the queue is full, the oldest item is removed.
+Applications can create their own instance of `RecentlyAccessedService` to manage their own list of recently accessed items scoped to their application.

dev_docs/shared_ux/shared_ux_landing.mdx

@@ -66,5 +66,10 @@ layout: landing
       title: 'Kibana React Contexts',
       description: 'Learn how to use common React contexts in Kibana',
     },
+    {
+      pageId: 'kibDevDocsChromeRecentlyAccessed',
+      title: 'Chrome Recently Viewed',
+      description: 'Learn how to add recently viewed items to the side navigation',
+    },
   ]}
 />