Add iModel recents and favorites functionality

common/changes/@itwin/imodel-browser-react/omar-imodel-recent_2025-10-16-20-04.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/imodel-browser-react",
+      "comment": "Feat: Add iModel recents and favorites functionality",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@itwin/imodel-browser-react"
+}

packages/apps/storybook/src/imodel-browser/IModelTile.stories.tsx

@@ -3,6 +3,8 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { IModelTile as C, IModelTileProps } from "@itwin/imodel-browser-react";
+import { SvgImodel, SvgPlaceholder } from "@itwin/itwinui-icons-react";
+import { Badge, Button } from "@itwin/itwinui-react";
 import { Meta, Story } from "@storybook/react/types-6-0";
 import React from "react";
 
@@ -20,5 +22,26 @@ export const Primary = Template.bind({});
 Primary.args = {
   iModel: {
     id: "1",
+    displayName: "iModel Name",
+    description: "iModel Description",
+  },
+  iModelOptions: [
+    { key: "option-1", children: "Option 1" },
+    { key: "option-2", children: "Option 2" },
+  ],
+  tileProps: {
+    status: "positive",
+    isDisabled: false,
+    isLoading: false,
+    isSelected: false,
+    isNew: false,
+    badge: <Badge>Badge</Badge>,
+    leftIcon: <SvgPlaceholder />,
+    rightIcon: <SvgPlaceholder />,
+    buttons: [
+      <Button key="button-1">Button 1</Button>,
+      <Button key="button-2">Button 2</Button>,
+    ],
+    thumbnail: <SvgImodel />,
   },
 };

packages/apps/storybook/src/imodel-browser/ITwinTile.stories.tsx

@@ -20,5 +20,6 @@ export const Primary = Template.bind({});
 Primary.args = {
   iTwin: {
     id: "1",
+    displayName: "iTwin Name",
   },
 };

packages/modules/imodel-browser/src/components/tileFavoriteIcon/TileFavoriteIcon.module.scss

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.favoriteIconButton {
+  padding-inline: var(--iui-button-padding-block);
+  background-color: rgb(from var(--iui-color-background-hover) r g b / 0.7);
+
+  &:hover {
+    background-color: var(--iui-color-background-hover);
+  }
+
+  &:active {
+    background-color: var(--iui-color-background);
+  }
+}

packages/modules/imodel-browser/src/components/tileFavoriteIcon/TileFavoriteIcon.tsx

@@ -0,0 +1,55 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { SvgStar, SvgStarHollow } from "@itwin/itwinui-icons-react";
+import { IconButton } from "@itwin/itwinui-react";
+import React from "react";
+
+import styles from "./TileFavoriteIcon.module.scss";
+
+export interface TileFavoriteIconProps {
+  /** Whether the item is currently favorited */
+  isFavorite: boolean;
+  /** Callback to add the item to favorites */
+  onAddToFavorites: () => Promise<void>;
+  /** Callback to remove the item from favorites */
+  onRemoveFromFavorites: () => Promise<void>;
+  /** Accessible label for adding to favorites */
+  addLabel: string;
+  /** Accessible label for removing from favorites */
+  removeLabel: string;
+  /** Whether to hide the icon (will not hide if the item is favorited) */
+  hide?: boolean;
+}
+
+/**
+ * Reusable favorite icon button for Tile components
+ * Shows a star icon that can be clicked to add/remove from favorites
+ */
+export const TileFavoriteIcon = ({
+  isFavorite,
+  onAddToFavorites,
+  onRemoveFromFavorites,
+  addLabel,
+  removeLabel,
+  hide,
+}: TileFavoriteIconProps) => {
+  // Don't render if hide is true and not favorited
+  if (hide && !isFavorite) {
+    return null;
+  }
+
+  return (
+    <IconButton
+      aria-label={isFavorite ? removeLabel : addLabel}
+      onClick={async () => {
+        isFavorite ? await onRemoveFromFavorites() : await onAddToFavorites();
+      }}
+      className={styles.favoriteIconButton}
+      styleType="borderless"
+    >
+      {isFavorite ? <SvgStar /> : <SvgStarHollow />}
+    </IconButton>
+  );
+};

packages/modules/imodel-browser/src/containers/ITwinGrid/ITwinGrid.tsx

@@ -11,6 +11,7 @@ import { InView } from "react-intersection-observer";
 import { GridStructure } from "../../components/gridStructure/GridStructure";
 import { NoResults } from "../../components/noResults/NoResults";
 import {
+  AccessTokenProvider,
   ApiOverrides,
   DataStatus,
   ITwinCellOverrides,
@@ -63,7 +64,7 @@ export interface ITwinGridStrings {
 
 export interface ITwinGridProps {
   /** Access token that requires the `itwins:read` scope. Provide a function that returns the token to prevent the token from expiring. Function must be memoized. */
-  accessToken?: string | (() => Promise<string>) | undefined;
+  accessToken?: AccessTokenProvider;
   /** Type of iTwin to request */
   requestType?: "favorites" | "recents" | "";
   /** Sub class of iTwin, defaults to Project */
@@ -149,7 +150,12 @@ export const ITwinGrid = ({
       tableLoadingData: "Loading...",
       trialBadge: "Trial",
       inactiveBadge: "Inactive",
-      noITwins: "No iTwin found.",
+      noITwins:
+        requestType === "recents"
+          ? "No recent iTwins."
+          : requestType === "favorites"
+          ? "No favorite iTwins."
+          : "No iTwin found.",
       noAuthentication: "No access token provided",
       error: "An error occurred",
       addToFavorites: "Add to favorites",

packages/modules/imodel-browser/src/containers/ITwinGrid/ITwinTile.tsx

@@ -2,10 +2,11 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { SvgItwin, SvgStar, SvgStarHollow } from "@itwin/itwinui-icons-react";
-import { Badge, IconButton, ThemeProvider, Tile } from "@itwin/itwinui-react";
+import { SvgItwin } from "@itwin/itwinui-icons-react";
+import { Badge, ThemeProvider, Tile } from "@itwin/itwinui-react";
 import React from "react";
 
+import { TileFavoriteIcon } from "../../components/tileFavoriteIcon/TileFavoriteIcon";
 import { ITwinFull } from "../../types";
 import { _mergeStrings } from "../../utils/_apiOverrides";
 import {
@@ -81,7 +82,7 @@ export const ITwinTile = ({
     onClick,
     ...rest
   } = tileProps ?? {};
-
+  const [isHovered, setIsHovered] = React.useState(false);
   const strings = _mergeStrings(
     {
       trialBadge: "Trial",
@@ -112,6 +113,8 @@ export const ITwinTile = ({
         status={status}
         isDisabled={isDisabled}
         style={fullWidth ? { width: "100%" } : undefined}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
         {...rest}
       >
         <Tile.Name>
@@ -130,21 +133,18 @@ export const ITwinTile = ({
           {leftIcon && <Tile.TypeIndicator>{leftIcon}</Tile.TypeIndicator>}
           <Tile.QuickAction>
             {rightIcon}
-            <IconButton
-              aria-label={
-                isFavorite
-                  ? strings.removeFromFavorites
-                  : strings.addToFavorites
-              }
-              onClick={async () => {
-                isFavorite
-                  ? await removeFromFavorites?.(iTwin.id)
-                  : await addToFavorites?.(iTwin.id);
-              }}
-              styleType="borderless"
-            >
-              {isFavorite ? <SvgStar /> : <SvgStarHollow />}
-            </IconButton>
+            {isFavorite !== undefined &&
+              addToFavorites &&
+              removeFromFavorites && (
+                <TileFavoriteIcon
+                  isFavorite={isFavorite}
+                  onAddToFavorites={() => addToFavorites(iTwin.id)}
+                  onRemoveFromFavorites={() => removeFromFavorites(iTwin.id)}
+                  addLabel={strings.addToFavorites}
+                  removeLabel={strings.removeFromFavorites}
+                  hide={!isHovered}
+                />
+              )}
           </Tile.QuickAction>
           <Tile.BadgeContainer>
             {badge ??

packages/modules/imodel-browser/src/containers/ITwinGrid/useITwinData.ts

@@ -5,6 +5,7 @@
 import React from "react";
 
 import {
+  AccessTokenProvider,
   ApiOverrides,
   DataStatus,
   ITwinFilterOptions,
@@ -17,7 +18,7 @@ import { useITwinFilter } from "./useITwinFilter";
 export interface ProjectDataHookOptions {
   requestType?: "favorites" | "recents" | "";
   iTwinSubClass?: ITwinSubClass;
-  accessToken?: string | (() => Promise<string>) | undefined;
+  accessToken?: AccessTokenProvider;
   apiOverrides?: ApiOverrides<ITwinFull[]>;
   filterOptions?: ITwinFilterOptions;
   orderbyOptions?: string;

packages/modules/imodel-browser/src/containers/ITwinGrid/useITwinFavorites.ts

@@ -5,14 +5,15 @@
 
 import { useCallback, useEffect, useState } from "react";
 
+import { AccessTokenProvider } from "../../types";
 import { _getAPIServer } from "../../utils/_apiOverrides";
 
 const HOOK_ABORT_ERROR =
   "The fetch request was aborted by the cleanup function.";
 
 /**
  * Custom hook to manage iTwin favorites.
- * @param {string | (() => Promise<string>) | undefined} accessToken - Access token that requires the `itwin-platform` scope. Provide a function that returns the token to prevent the token from expiring.
+ * @param {AccessTokenProvider} accessToken - Access token that requires the `itwin-platform` scope. Provide a function that returns the token to prevent the token from expiring.
  * @param {ApiOverrides<ITwinFull[]>} [apiOverrides] - Optional API overrides.
  * @returns {object} - An object containing:
  * - {Set<string>} iTwinFavorites - A set of iTwin IDs that are marked as favorites.
@@ -22,7 +23,7 @@ const HOOK_ABORT_ERROR =
  * - {function} resetShouldRefetchFavorites - A function to reset shouldRefetchFavorites back to false.
  */
 export const useITwinFavorites = (
-  accessToken: string | (() => Promise<string>) | undefined,
+  accessToken: AccessTokenProvider | undefined,
   serverEnvironmentPrefix?: "dev" | "qa" | ""
 ): {
   iTwinFavorites: Set<string>;