[Feature Request]: "Recently Used" and "Recently Added" Sections in Model and Workflow Sidebars

## Background/Context

The ComfyUI frontend currently provides extensive model and workflow management through sidebar tabs, but lacks user-centric navigation aids that leverage usage patterns. Users working with large collections of models and workflows often need to repeatedly access the same items, but must navigate through folder structures or use search to locate them.

### Current State
- **Workflow Sidebar**: Organized into "Open", "Bookmarked", and "Browse" sections
- **Model Library Sidebar**: Organized by folder structure with search capability
- **Existing Usage Tracking**: The codebase has node frequency tracking but no user behavior tracking for models/workflows

### Architecture Foundation
The application already has infrastructure that can support this feature:
- **User data persistence**: `api.storeUserData()` and `api.getUserData()` methods
- **Settings management**: User preference persistence via `settingStore.ts`
- **Timestamp tracking**: User files already track `lastModified` timestamps via `UserDataFullInfo` API
- **Bookmark system**: Existing implementation shows how to persist user preferences

## Problem Statement

### Current Behavior
- Users must remember file/folder locations or use search to find frequently used items
- No indication of which models or workflows were accessed recently
- No way to quickly access newly added content
- Repeated navigation through deep folder structures

### Expected Behavior
- Quick access to recently used models and workflows at the top of respective sidebars
- Automatic tracking of new additions with easy discovery
- Persistent storage of usage data across sessions
- Configurable list length and behavior

### Impact
- **Improved UX**: Faster access to frequently used resources
- **Enhanced Workflow**: Reduced time spent navigating folder structures
- **Better Discovery**: Easy identification of newly added content
- **Scalability**: Better support for users with large model/workflow collections

## Proposed Solution

### **Optimal Implementation: Backend Integration Required**

The most robust implementation requires extending the backend `server.py` to return file system metadata for models and other content, similar to the existing `UserDataFullInfo` pattern used for workflows.

**Current Metadata Support:**
- ✅ **Workflows**: Already have full metadata via `/userdata?full_info=true` endpoint (`modified` timestamps)
- ❌ **Models**: Missing file timestamps from `/api/experiment/models/{folder}` endpoint
- ❌ **Templates**: Missing timestamps from workflow templates

**Required Backend Changes:**
```python
# In server.py - extend model endpoint response
@app.route('/api/experiment/models/')
def get_models_with_metadata(folder):
return [{
'name': model.name,
'pathIndex': model.pathIndex,
'modified': os.path.getmtime(model.path), # Add modification time
'created': os.path.getctime(model.path), # Add creation time
'size': os.path.getsize(model.path) # Add file size
}]
```

**Frontend Integration:**
```typescript
// Update ComfyModelDef class to include timestamps
export class ComfyModelDef {
readonly lastModified: number // From backend os.mtime
readonly dateCreated: number // From backend os.ctime
readonly fileSize: number // From backend os.path.getsize

// Usage tracking (calculated)
lastUsed?: number // Client-side tracking
usageCount?: number // Client-side tracking
}
```

**Why Backend Integration is Superior:**
1. **Accuracy**: File system timestamps are authoritative vs. client-side approximations
2. **Reliability**: Handles external file additions/modifications automatically
3. **Performance**: No need for complex client-side file monitoring
4. **Consistency**: Matches existing `UserDataFullInfo` pattern for workflows
5. **Cross-client sync**: File metadata is consistent across different client sessions

### **Frontend Implementation**

**1. Data Layer Enhancement**
Create `src/stores/recentItemsStore.ts`:
```typescript
export const useRecentItemsStore = defineStore('recentItems', () => {
const recentWorkflows = ref([])
const recentModels = ref([])

const trackWorkflowUsage = async (path: string) => { /* implementation */ }
const trackModelUsage = async (modelKey: string) => { /* implementation */ }

// Computed properties for "Recently Added" based on file timestamps
const recentlyAddedWorkflows = computed(() => { /* sort by dateCreated */ })
const recentlyAddedModels = computed(() => { /* sort by dateCreated */ })
})
```

**2. UI Integration**
- Add new collapsible sections at the top of both sidebars
- Use existing `TextDivider` component pattern
- Implement similar to bookmark sections

**3. Settings Integration**
Add user preferences:
```typescript
'Comfy.Sidebar.RecentItems.MaxCount': { type: 'number', defaultValue: 5 }
'Comfy.Sidebar.RecentItems.ShowRecentlyUsed': { type: 'boolean', defaultValue: true }
'Comfy.Sidebar.RecentItems.ShowRecentlyAdded': { type: 'boolean', defaultValue: true }
```

### **Alternative: Client-Only Approach**
If backend changes aren't feasible immediately, implement client-side tracking with the understanding that it only tracks usage within the specific client session and won't capture external file system changes.

## Implementation Checklist

### Phase 1: Backend Enhancement (Recommended)
- [ ] Extend `/api/experiment/models/{folder}` to include file timestamps
- [ ] Add file metadata to workflow template endpoints
- [ ] Update API schemas to include new timestamp fields
- [ ] Test cross-platform timestamp handling (Windows/macOS/Linux)

### Phase 2: Frontend Data Layer
- [ ] Update `ComfyModelDef` class with timestamp fields
- [ ] Create `useRecentItemsStore` with persistence logic
- [ ] Add settings for recent items configuration
- [ ] Implement usage tracking integration points

### Phase 3: UI Implementation
- [ ] Create `RecentWorkflowsSection` component
- [ ] Create `RecentModelsSection` component
- [ ] Integrate sections into existing sidebar templates
- [ ] Implement collapsible behavior

### Phase 4: Testing & Documentation
- [ ] Write unit tests for recent items store
- [ ] Write component tests for new sections
- [ ] Write browser tests for usage tracking
- [ ] Performance testing with large datasets

## Testing Considerations

### Functional Testing
1. **Timestamp Accuracy**: Verify file system timestamps match backend response
2. **Usage Tracking**: Test tracking on workflow open and model selection events
3. **Persistence**: Validate data persistence across sessions
4. **Cross-platform**: Test timestamp handling on different operating systems

### Edge Cases
- Handle deleted workflows/models in recent lists
- Behavior when items exceed max count setting
- Migration of existing user data
- External file modifications (models added outside ComfyUI)

## Supporting References

- **Related Issue**: #486 - "Internal node usage metrics to improve node search experience"
- **Architecture Reference**: `src/stores/README.md` - Store development guidelines
- **Similar Implementation**: `workflowBookmarkStore` in `workflowStore.ts`
- **API Pattern**: `UserDataFullInfo` structure in `src/schemas/apiSchema.ts`
- **File Paths**:
- `src/components/sidebar/tabs/WorkflowsSidebarTab.vue` (workflow sidebar)
- `src/components/sidebar/tabs/ModelLibrarySidebarTab.vue` (model sidebar)
- `src/stores/workflowStore.ts` (workflow data management)
- `src/stores/modelStore.ts` (model data management)

**Estimated Complexity:** Medium
- Backend changes required for optimal implementation
- Leverages existing patterns and infrastructure
- Well-defined scope with clear boundaries

**Priority:** Enhancement - Improves user experience without affecting core functionality