recent-data

# Recent Data Usage Guide

Recent data (recentTopics, recentResources, recentPages) is stored in session store.

## Initialization

In app top-level (e.g., `RecentHydration.tsx`):

```tsx
import { useInitRecentTopic } from '@/hooks/useInitRecentTopic';
import { useInitRecentResource } from '@/hooks/useInitRecentResource';
import { useInitRecentPage } from '@/hooks/useInitRecentPage';

const App = () => {
  useInitRecentTopic();
  useInitRecentResource();
  useInitRecentPage();
  return <YourComponents />;
};
```

## Usage

### Method 1: Read from Store (Recommended)

```tsx
import { useSessionStore } from '@/store/session';
import { recentSelectors } from '@/store/session/selectors';

const Component = () => {
  const recentTopics = useSessionStore(recentSelectors.recentTopics);
  const isInit = useSessionStore(recentSelectors.isRecentTopicsInit);

  if (!isInit) return <div>Loading...</div>;

  return (
    <div>
      {recentTopics.map((topic) => (
        <div key={topic.id}>{topic.title}</div>
      ))}
    </div>
  );
};
```

### Method 2: Use Hook Return (Single component)

```tsx
const { data: recentTopics, isLoading } = useInitRecentTopic();
```

## Available Selectors

### Recent Topics

```tsx
const recentTopics = useSessionStore(recentSelectors.recentTopics);
// Type: RecentTopic[]

const isInit = useSessionStore(recentSelectors.isRecentTopicsInit);
// Type: boolean
```

**RecentTopic type:**
```typescript
interface RecentTopic {
  agent: { avatar: string | null; backgroundColor: string | null; id: string; title: string | null } | null;
  id: string;
  title: string | null;
  updatedAt: Date;
}
```

### Recent Resources

```tsx
const recentResources = useSessionStore(recentSelectors.recentResources);
// Type: FileListItem[]

const isInit = useSessionStore(recentSelectors.isRecentResourcesInit);
```

### Recent Pages

```tsx
const recentPages = useSessionStore(recentSelectors.recentPages);
const isInit = useSessionStore(recentSelectors.isRecentPagesInit);