mirror of
https://github.com/omnivore-app/omnivore.git
synced 2026-03-11 08:54:26 +00:00
feat(web): ARC-008 Labels System - frontend UI and integration
Complete label system with React frontend components and GraphQL integration: **Label Management:** - LabelsPage: Full-featured label CRUD interface - Create/edit/delete labels with color picker - Real-time updates with optimistic UI - Color-coded label chips - LabelPicker Component: - Inline label assignment for library items - Multi-select with visual feedback - Instant label attachment/detachment **Library Integration:** - LibraryPage updates: - Display labels on library items as colored chips - Filter by label dropdown - Async label updates with background refetch - Optimistic UI for instant feedback **GraphQL Client:** - Centralized graphqlRequest utility - Automatic auth token injection - Error handling and toast notifications **Type System:** - Complete TypeScript types for Label, LibraryItem - GraphQL query/mutation types - Filter and search input types **Styling:** - Label-specific styles with color system - Chip components with hover states - Responsive layout for label management Implements ARC-008 Labels System (frontend) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Timothy Atapagra
parent
7ec4938953
commit
a803d14630
10 changed files with 2666 additions and 76 deletions
286
packages/web-vite/LABEL_SYSTEM.md
Normal file
286
packages/web-vite/LABEL_SYSTEM.md
Normal file
|
|
@ -0,0 +1,286 @@
|
|||
# Label System Architecture
|
||||
|
||||
## Overview
|
||||
The label system allows users to organize library items by applying custom labels. Labels can be created, edited, deleted, and applied to library items.
|
||||
|
||||
## Backend (NestJS API)
|
||||
|
||||
### Database Schema
|
||||
|
||||
**`omnivore.labels` table:**
|
||||
- `id` (uuid, primary key)
|
||||
- `user_id` (uuid, references users)
|
||||
- `name` (text, unique per user)
|
||||
- `color` (text, hex color code, default: #000000)
|
||||
- `description` (text, nullable)
|
||||
- `position` (integer, for ordering)
|
||||
- `internal` (boolean, system labels cannot be modified/deleted)
|
||||
- `created_at` (timestamptz)
|
||||
- `updated_at` (timestamptz, with DEFAULT current_timestamp)
|
||||
|
||||
**`omnivore.entity_labels` table:**
|
||||
- `id` (uuid, primary key)
|
||||
- `label_id` (uuid, references labels)
|
||||
- `library_item_id` (uuid, references library items)
|
||||
- `source` (text, 'user' or 'system')
|
||||
- `created_at` (timestamptz)
|
||||
|
||||
### GraphQL API
|
||||
|
||||
**Queries:**
|
||||
- `labels: [Label!]!` - Get all labels for current user
|
||||
- `label(id: String!): Label` - Get single label by ID
|
||||
|
||||
**Mutations:**
|
||||
- `createLabel(input: CreateLabelInput!): Label!` - Create new label
|
||||
- `updateLabel(id: String!, input: UpdateLabelInput!): Label!` - Update existing label
|
||||
- `deleteLabel(id: String!): DeleteResult!` - Delete label
|
||||
- `setLibraryItemLabels(itemId: String!, labelIds: [String!]!): [Label!]!` - Set labels on a library item
|
||||
|
||||
**Types:**
|
||||
```graphql
|
||||
type Label {
|
||||
id: ID!
|
||||
name: String!
|
||||
color: String!
|
||||
description: String
|
||||
position: Int!
|
||||
internal: Boolean!
|
||||
createdAt: DateTime!
|
||||
updatedAt: DateTime!
|
||||
}
|
||||
|
||||
input CreateLabelInput {
|
||||
name: String! # 1-100 chars
|
||||
color: String # Hex color (e.g., #FF5733)
|
||||
description: String # 0-500 chars
|
||||
}
|
||||
|
||||
input UpdateLabelInput {
|
||||
name: String # 1-100 chars
|
||||
color: String # Hex color
|
||||
description: String # 0-500 chars
|
||||
}
|
||||
```
|
||||
|
||||
### Service Layer (`LabelService`)
|
||||
|
||||
**Key Methods:**
|
||||
- `findAll(userId)` - Retrieve all labels for a user
|
||||
- `findOne(userId, labelId)` - Get single label
|
||||
- `create(userId, input)` - Create new label with validation
|
||||
- `update(userId, labelId, input)` - Update label (protects internal labels)
|
||||
- `delete(userId, labelId)` - Delete label (protects internal labels)
|
||||
- `setLibraryItemLabels(userId, libraryItemId, labelIds)` - Replace all labels on an item
|
||||
- `getLibraryItemLabels(userId, libraryItemId)` - Get labels for an item
|
||||
|
||||
**Validation:**
|
||||
- Label names must be unique per user
|
||||
- Internal (system) labels cannot be modified or deleted
|
||||
- Color format must be valid hex code
|
||||
- Name length: 1-100 characters
|
||||
- Description length: 0-500 characters
|
||||
|
||||
## Frontend (Vite/React)
|
||||
|
||||
### Components
|
||||
|
||||
**`/pages/LabelsPage.tsx`** - Label management interface
|
||||
- View all labels in a grid layout
|
||||
- Create new labels with color picker
|
||||
- Edit existing labels (except internal labels)
|
||||
- Delete labels with confirmation
|
||||
|
||||
**`/components/LabelPicker.tsx`** - Label assignment UI
|
||||
- Dropdown with checkbox list of available labels
|
||||
- Select/deselect labels for a library item
|
||||
- Save/Cancel actions
|
||||
- Converts label names to IDs before API call
|
||||
|
||||
### GraphQL Client (`/lib/graphql-client.ts`)
|
||||
|
||||
**Label Hooks:**
|
||||
- `useLabels()` - Fetch all labels with refetch capability
|
||||
- `useCreateLabel()` - Create new label
|
||||
- `useUpdateLabel()` - Update existing label
|
||||
- `useDeleteLabel()` - Delete label
|
||||
- `useSetLibraryItemLabels()` - Set labels on library item
|
||||
|
||||
**Mutation Pattern:**
|
||||
```typescript
|
||||
const { setLibraryItemLabels, loading, error } = useSetLibraryItemLabels()
|
||||
|
||||
// Usage:
|
||||
await setLibraryItemLabels(itemId, ['label-uuid-1', 'label-uuid-2'])
|
||||
```
|
||||
|
||||
### Library Integration
|
||||
|
||||
**LibraryPage (`/pages/LibraryPage.tsx`):**
|
||||
- Displays label chips on each library item
|
||||
- Label picker button opens LabelPicker component
|
||||
- Label filter dropdown to filter items by labels
|
||||
- Server-side filtering via GraphQL query
|
||||
|
||||
**Label Display:**
|
||||
```tsx
|
||||
{item.labels && item.labels.length > 0 && (
|
||||
<div className="article-labels">
|
||||
{item.labels.map((label) => (
|
||||
<span
|
||||
key={label.id}
|
||||
className="label"
|
||||
style={{ backgroundColor: label.color, color: '#fff' }}
|
||||
>
|
||||
{label.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
```
|
||||
|
||||
**Label Assignment:**
|
||||
```tsx
|
||||
<LabelPicker
|
||||
itemId={item.id}
|
||||
currentLabels={item.labels?.map(l => l.name) || []}
|
||||
onUpdate={(labelNames) => handleLabelsUpdate(item.id, labelNames)}
|
||||
/>
|
||||
```
|
||||
|
||||
## Data Flow
|
||||
|
||||
### Creating a Label
|
||||
1. User fills out form in LabelsPage
|
||||
2. Frontend calls `createLabel` mutation
|
||||
3. Backend validates input
|
||||
4. Backend creates label in database
|
||||
5. Frontend refetches labels list
|
||||
|
||||
### Assigning Labels to Library Item
|
||||
1. User opens LabelPicker on a library item
|
||||
2. User selects/deselects labels
|
||||
3. User clicks "Save"
|
||||
4. Frontend converts label names → label IDs
|
||||
5. Frontend calls `setLibraryItemLabels(itemId, labelIds)`
|
||||
6. Backend:
|
||||
- Verifies all labels belong to user
|
||||
- Deletes existing label associations
|
||||
- Creates new label associations
|
||||
- Returns updated labels
|
||||
7. Frontend updates UI optimistically
|
||||
8. Frontend shows success toast
|
||||
|
||||
### Filtering by Labels
|
||||
1. User selects labels in filter dropdown
|
||||
2. Frontend adds `labels: [labelName1, labelName2]` to search params
|
||||
3. Backend filters library items with matching labels
|
||||
4. Results displayed in LibraryPage
|
||||
|
||||
## Migration History
|
||||
|
||||
**Migration 0191: Fix labels updated_at default**
|
||||
- Added DEFAULT current_timestamp to `updated_at` column
|
||||
- Backfilled NULL values with `created_at`
|
||||
- Added NOT NULL constraint
|
||||
- Ensures GraphQL non-nullable field returns valid timestamp
|
||||
|
||||
## Known Issues & Future Improvements
|
||||
|
||||
### Current Issues:
|
||||
1. **No optimistic updates** - Labels don't appear immediately after assignment
|
||||
2. **No cache invalidation** - Library items list doesn't refresh after label changes
|
||||
3. **No label validation on frontend** - Duplicate names not checked before API call
|
||||
|
||||
### Recommended Improvements:
|
||||
1. **Add optimistic UI updates** - Show labels immediately while API call is in progress
|
||||
2. **Implement cache invalidation** - Refresh library items after label changes
|
||||
3. **Add label autocomplete** - Match legacy behavior with create-on-the-fly
|
||||
4. **Add keyboard shortcuts** - Quick label assignment via keyboard
|
||||
5. **Add label analytics** - Track label usage and suggest cleanup
|
||||
6. **Add bulk label operations** - Apply labels to multiple items at once
|
||||
7. **Add label groups/categories** - Organize labels hierarchically
|
||||
|
||||
## Comparison with Legacy System
|
||||
|
||||
### Legacy (`/packages/web`):
|
||||
- Uses `pageId` parameter name
|
||||
- Modal-based UI with autocomplete
|
||||
- Throttled saves (2 second debounce)
|
||||
- Optimistic cache updates
|
||||
- Query invalidation on mutation success
|
||||
|
||||
### New System (`/packages/web-vite`):
|
||||
- Uses `itemId` parameter name
|
||||
- Dropdown-based UI with checkboxes
|
||||
- Immediate saves
|
||||
- No optimistic updates yet
|
||||
- No cache invalidation yet
|
||||
|
||||
## Testing
|
||||
|
||||
### Manual Test Flow:
|
||||
1. Navigate to `/labels`
|
||||
2. Create a new label "Test Label" with color #FF5733
|
||||
3. Navigate to library page
|
||||
4. Click "🏷️ Labels" on a library item
|
||||
5. Select "Test Label"
|
||||
6. Click "Save"
|
||||
7. Verify label appears on the item
|
||||
8. Use label filter to find items with "Test Label"
|
||||
|
||||
### E2E Test Coverage:
|
||||
See `/packages/api-nest/test/label.e2e-spec.ts` for backend tests
|
||||
|
||||
## API Examples
|
||||
|
||||
### Create Label
|
||||
```graphql
|
||||
mutation {
|
||||
createLabel(input: {
|
||||
name: "Important"
|
||||
color: "#FF5733"
|
||||
description: "High priority items"
|
||||
}) {
|
||||
id
|
||||
name
|
||||
color
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Assign Labels to Item
|
||||
```graphql
|
||||
mutation {
|
||||
setLibraryItemLabels(
|
||||
itemId: "abc-123"
|
||||
labelIds: ["label-uuid-1", "label-uuid-2"]
|
||||
) {
|
||||
id
|
||||
name
|
||||
color
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Filter Library Items by Label
|
||||
```graphql
|
||||
query {
|
||||
libraryItems(
|
||||
first: 50
|
||||
search: {
|
||||
labels: ["Important", "Work"]
|
||||
}
|
||||
) {
|
||||
items {
|
||||
id
|
||||
title
|
||||
labels {
|
||||
id
|
||||
name
|
||||
color
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
152
packages/web-vite/src/components/LabelPicker.tsx
Normal file
152
packages/web-vite/src/components/LabelPicker.tsx
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
import { useState, useEffect, useRef } from 'react'
|
||||
import { useLabels, useSetLibraryItemLabels, type Label } from '../lib/graphql-client'
|
||||
import '../styles/LabelPicker.css'
|
||||
|
||||
interface LabelPickerProps {
|
||||
itemId: string
|
||||
currentLabels: string[]
|
||||
onUpdate?: (labels: string[]) => void
|
||||
}
|
||||
|
||||
export function LabelPicker({ itemId, currentLabels, onUpdate }: LabelPickerProps) {
|
||||
const { data: allLabels, loading: loadingLabels, fetchLabels } = useLabels()
|
||||
const { setLibraryItemLabels, loading: updating } = useSetLibraryItemLabels()
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const [selectedLabels, setSelectedLabels] = useState<Set<string>>(new Set(currentLabels))
|
||||
const dropdownRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && !allLabels) {
|
||||
fetchLabels()
|
||||
}
|
||||
}, [isOpen, allLabels, fetchLabels])
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedLabels(new Set(currentLabels))
|
||||
}, [currentLabels])
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (isOpen) {
|
||||
document.addEventListener('mousedown', handleClickOutside)
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside)
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
const toggleLabel = (labelName: string) => {
|
||||
setSelectedLabels((prev) => {
|
||||
const newSet = new Set(prev)
|
||||
if (newSet.has(labelName)) {
|
||||
newSet.delete(labelName)
|
||||
} else {
|
||||
newSet.add(labelName)
|
||||
}
|
||||
return newSet
|
||||
})
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
const labelNames = Array.from(selectedLabels)
|
||||
|
||||
// Convert label names to label IDs
|
||||
const labelIds = allLabels
|
||||
?.filter((label) => labelNames.includes(label.name))
|
||||
.map((label) => label.id) || []
|
||||
|
||||
await setLibraryItemLabels(itemId, labelIds)
|
||||
|
||||
if (onUpdate) {
|
||||
onUpdate(labelNames)
|
||||
}
|
||||
|
||||
setIsOpen(false)
|
||||
} catch (err) {
|
||||
console.error('Failed to update labels:', err)
|
||||
// Revert to original labels on error
|
||||
setSelectedLabels(new Set(currentLabels))
|
||||
}
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
setSelectedLabels(new Set(currentLabels))
|
||||
setIsOpen(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="label-picker" ref={dropdownRef}>
|
||||
<button
|
||||
className="label-picker-trigger"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
disabled={updating}
|
||||
>
|
||||
🏷️ Labels
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="label-picker-dropdown">
|
||||
<div className="label-picker-header">
|
||||
<h4>Select Labels</h4>
|
||||
</div>
|
||||
|
||||
{loadingLabels ? (
|
||||
<div className="label-picker-loading">Loading labels...</div>
|
||||
) : allLabels && allLabels.length === 0 ? (
|
||||
<div className="label-picker-empty">
|
||||
No labels available. Create labels from the Labels page.
|
||||
</div>
|
||||
) : (
|
||||
<div className="label-picker-list">
|
||||
{allLabels?.map((label: Label) => (
|
||||
<label key={label.id} className="label-picker-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedLabels.has(label.name)}
|
||||
onChange={() => toggleLabel(label.name)}
|
||||
disabled={updating}
|
||||
/>
|
||||
<span
|
||||
className="label-color-indicator"
|
||||
style={{ backgroundColor: label.color }}
|
||||
/>
|
||||
<span className="label-name">{label.name}</span>
|
||||
{label.internal && (
|
||||
<span className="label-system-badge">System</span>
|
||||
)}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="label-picker-footer">
|
||||
<button
|
||||
className="label-picker-btn label-picker-btn-cancel"
|
||||
onClick={handleCancel}
|
||||
disabled={updating}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="label-picker-btn label-picker-btn-save"
|
||||
onClick={handleSave}
|
||||
disabled={updating || loadingLabels}
|
||||
>
|
||||
{updating ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LabelPicker
|
||||
663
packages/web-vite/src/lib/graphql-client.ts
Normal file
663
packages/web-vite/src/lib/graphql-client.ts
Normal file
|
|
@ -0,0 +1,663 @@
|
|||
// Minimal GraphQL helper targeting the NestJS `/api/graphql` endpoint
|
||||
// Mirrors the behaviour of the legacy web package's fetcher but keeps dependencies light
|
||||
|
||||
import { useState, useCallback } from 'react'
|
||||
|
||||
const DEFAULT_GRAPHQL_PATH = '/api/graphql'
|
||||
const TOKEN_STORAGE_KEY = 'omnivore-auth-token'
|
||||
|
||||
const resolveGraphqlUrl = (): string => {
|
||||
const rawBase = import.meta.env.VITE_API_URL as string | undefined
|
||||
const normalizedBase =
|
||||
rawBase && rawBase.trim().length > 0
|
||||
? rawBase.trim().replace(/\/$/, '')
|
||||
: ''
|
||||
|
||||
if (!normalizedBase) {
|
||||
return DEFAULT_GRAPHQL_PATH
|
||||
}
|
||||
|
||||
// Handle env values that point at `/api/v2` (REST base) by trimming the suffix
|
||||
if (normalizedBase.endsWith('/api/v2')) {
|
||||
return `${normalizedBase.slice(
|
||||
0,
|
||||
-'/api/v2'.length
|
||||
)}${DEFAULT_GRAPHQL_PATH}`
|
||||
}
|
||||
|
||||
if (normalizedBase.endsWith('/api')) {
|
||||
return `${normalizedBase}${DEFAULT_GRAPHQL_PATH.replace('/api', '')}`
|
||||
}
|
||||
|
||||
return `${normalizedBase}${DEFAULT_GRAPHQL_PATH}`
|
||||
}
|
||||
|
||||
const isBrowser = typeof window !== 'undefined'
|
||||
|
||||
export interface GraphqlResponse<T> {
|
||||
data?: T
|
||||
errors?: Array<{ message: string }>
|
||||
}
|
||||
|
||||
export async function graphqlRequest<T>(
|
||||
query: string,
|
||||
variables?: Record<string, unknown>
|
||||
): Promise<T> {
|
||||
const endpoint = resolveGraphqlUrl()
|
||||
const token = isBrowser
|
||||
? window.localStorage.getItem(TOKEN_STORAGE_KEY)
|
||||
: null
|
||||
|
||||
const response = await fetch(endpoint, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
'X-OmnivoreClient': 'web',
|
||||
},
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ query, variables }),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`GraphQL request failed (${response.status})`)
|
||||
}
|
||||
|
||||
const payload = (await response.json()) as GraphqlResponse<T>
|
||||
if (payload.errors?.length) {
|
||||
throw new Error(payload.errors.map((error) => error.message).join(', '))
|
||||
}
|
||||
|
||||
if (!payload.data) {
|
||||
throw new Error('GraphQL response missing data')
|
||||
}
|
||||
|
||||
return payload.data
|
||||
}
|
||||
|
||||
// ==================== MUTATIONS ====================
|
||||
|
||||
const ARCHIVE_LIBRARY_ITEM_MUTATION = `
|
||||
mutation ArchiveLibraryItem($id: String!, $archived: Boolean!) {
|
||||
archiveLibraryItem(id: $id, archived: $archived) {
|
||||
id
|
||||
state
|
||||
folder
|
||||
updatedAt
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const DELETE_LIBRARY_ITEM_MUTATION = `
|
||||
mutation DeleteLibraryItem($id: String!) {
|
||||
deleteLibraryItem(id: $id) {
|
||||
success
|
||||
message
|
||||
itemId
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const UPDATE_READING_PROGRESS_MUTATION = `
|
||||
mutation UpdateReadingProgress($id: String!, $progress: ReadingProgressInput!) {
|
||||
updateReadingProgress(id: $id, progress: $progress) {
|
||||
id
|
||||
readingProgressTopPercent
|
||||
readingProgressBottomPercent
|
||||
readAt
|
||||
updatedAt
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const MOVE_LIBRARY_ITEM_TO_FOLDER_MUTATION = `
|
||||
mutation MoveLibraryItemToFolder($id: String!, $folder: String!) {
|
||||
moveLibraryItemToFolder(id: $id, folder: $folder) {
|
||||
id
|
||||
folder
|
||||
state
|
||||
updatedAt
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const BULK_ARCHIVE_ITEMS_MUTATION = `
|
||||
mutation BulkArchiveItems($itemIds: [String!]!, $archived: Boolean!) {
|
||||
bulkArchiveItems(itemIds: $itemIds, archived: $archived) {
|
||||
success
|
||||
successCount
|
||||
failureCount
|
||||
errors
|
||||
message
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const BULK_DELETE_ITEMS_MUTATION = `
|
||||
mutation BulkDeleteItems($itemIds: [String!]!) {
|
||||
bulkDeleteItems(itemIds: $itemIds) {
|
||||
success
|
||||
successCount
|
||||
failureCount
|
||||
errors
|
||||
message
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const BULK_MOVE_TO_FOLDER_MUTATION = `
|
||||
mutation BulkMoveToFolder($itemIds: [String!]!, $folder: String!) {
|
||||
bulkMoveToFolder(itemIds: $itemIds, folder: $folder) {
|
||||
success
|
||||
successCount
|
||||
failureCount
|
||||
errors
|
||||
message
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const BULK_MARK_AS_READ_MUTATION = `
|
||||
mutation BulkMarkAsRead($itemIds: [String!]!) {
|
||||
bulkMarkAsRead(itemIds: $itemIds) {
|
||||
success
|
||||
successCount
|
||||
failureCount
|
||||
errors
|
||||
message
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
// ==================== HOOKS ====================
|
||||
|
||||
interface MutationState<T> {
|
||||
loading: boolean
|
||||
error: Error | null
|
||||
data: T | null
|
||||
}
|
||||
|
||||
export function useArchiveItem() {
|
||||
const [state, setState] = useState<MutationState<any>>({
|
||||
loading: false,
|
||||
error: null,
|
||||
data: null,
|
||||
})
|
||||
|
||||
const archiveItem = useCallback(async (id: string, archived: boolean) => {
|
||||
setState({ loading: true, error: null, data: null })
|
||||
try {
|
||||
const data = await graphqlRequest(ARCHIVE_LIBRARY_ITEM_MUTATION, {
|
||||
id,
|
||||
archived,
|
||||
})
|
||||
setState({ loading: false, error: null, data })
|
||||
return data
|
||||
} catch (error) {
|
||||
const err = error instanceof Error ? error : new Error('Archive failed')
|
||||
setState({ loading: false, error: err, data: null })
|
||||
throw err
|
||||
}
|
||||
}, [])
|
||||
|
||||
return { ...state, archiveItem }
|
||||
}
|
||||
|
||||
export function useDeleteItem() {
|
||||
const [state, setState] = useState<MutationState<any>>({
|
||||
loading: false,
|
||||
error: null,
|
||||
data: null,
|
||||
})
|
||||
|
||||
const deleteItem = useCallback(async (id: string) => {
|
||||
setState({ loading: true, error: null, data: null })
|
||||
try {
|
||||
const data = await graphqlRequest(DELETE_LIBRARY_ITEM_MUTATION, { id })
|
||||
setState({ loading: false, error: null, data })
|
||||
return data
|
||||
} catch (error) {
|
||||
const err = error instanceof Error ? error : new Error('Delete failed')
|
||||
setState({ loading: false, error: err, data: null })
|
||||
throw err
|
||||
}
|
||||
}, [])
|
||||
|
||||
return { ...state, deleteItem }
|
||||
}
|
||||
|
||||
export function useUpdateReadingProgress() {
|
||||
const [state, setState] = useState<MutationState<any>>({
|
||||
loading: false,
|
||||
error: null,
|
||||
data: null,
|
||||
})
|
||||
|
||||
const updateProgress = useCallback(
|
||||
async (
|
||||
id: string,
|
||||
progress: {
|
||||
readingProgressTopPercent: number
|
||||
readingProgressBottomPercent: number
|
||||
readingProgressAnchorIndex?: number
|
||||
readingProgressHighestAnchor?: number
|
||||
}
|
||||
) => {
|
||||
setState({ loading: true, error: null, data: null })
|
||||
try {
|
||||
const data = await graphqlRequest(UPDATE_READING_PROGRESS_MUTATION, {
|
||||
id,
|
||||
progress,
|
||||
})
|
||||
setState({ loading: false, error: null, data })
|
||||
return data
|
||||
} catch (error) {
|
||||
const err =
|
||||
error instanceof Error ? error : new Error('Update progress failed')
|
||||
setState({ loading: false, error: err, data: null })
|
||||
throw err
|
||||
}
|
||||
},
|
||||
[]
|
||||
)
|
||||
|
||||
return { ...state, updateProgress }
|
||||
}
|
||||
|
||||
export function useMoveToFolder() {
|
||||
const [state, setState] = useState<MutationState<any>>({
|
||||
loading: false,
|
||||
error: null,
|
||||
data: null,
|
||||
})
|
||||
|
||||
const moveToFolder = useCallback(async (id: string, folder: string) => {
|
||||
setState({ loading: true, error: null, data: null })
|
||||
try {
|
||||
const data = await graphqlRequest(MOVE_LIBRARY_ITEM_TO_FOLDER_MUTATION, {
|
||||
id,
|
||||
folder,
|
||||
})
|
||||
setState({ loading: false, error: null, data })
|
||||
return data
|
||||
} catch (error) {
|
||||
const err =
|
||||
error instanceof Error ? error : new Error('Move to folder failed')
|
||||
setState({ loading: false, error: err, data: null })
|
||||
throw err
|
||||
}
|
||||
}, [])
|
||||
|
||||
return { ...state, moveToFolder }
|
||||
}
|
||||
|
||||
// ==================== BULK OPERATION HOOKS ====================
|
||||
|
||||
interface BulkActionResult {
|
||||
success: boolean
|
||||
successCount: number
|
||||
failureCount: number
|
||||
errors?: string[]
|
||||
message?: string
|
||||
}
|
||||
|
||||
export function useBulkArchive() {
|
||||
const [state, setState] = useState<MutationState<BulkActionResult>>({
|
||||
loading: false,
|
||||
error: null,
|
||||
data: null,
|
||||
})
|
||||
|
||||
const bulkArchive = useCallback(
|
||||
async (itemIds: string[], archived: boolean) => {
|
||||
setState({ loading: true, error: null, data: null })
|
||||
try {
|
||||
const result = await graphqlRequest<{
|
||||
bulkArchiveItems: BulkActionResult
|
||||
}>(BULK_ARCHIVE_ITEMS_MUTATION, { itemIds, archived })
|
||||
setState({ loading: false, error: null, data: result.bulkArchiveItems })
|
||||
return result.bulkArchiveItems
|
||||
} catch (error) {
|
||||
const err =
|
||||
error instanceof Error ? error : new Error('Bulk archive failed')
|
||||
setState({ loading: false, error: err, data: null })
|
||||
throw err
|
||||
}
|
||||
},
|
||||
[]
|
||||
)
|
||||
|
||||
return { ...state, bulkArchive }
|
||||
}
|
||||
|
||||
export function useBulkDelete() {
|
||||
const [state, setState] = useState<MutationState<BulkActionResult>>({
|
||||
loading: false,
|
||||
error: null,
|
||||
data: null,
|
||||
})
|
||||
|
||||
const bulkDelete = useCallback(async (itemIds: string[]) => {
|
||||
setState({ loading: true, error: null, data: null })
|
||||
try {
|
||||
const result = await graphqlRequest<{ bulkDeleteItems: BulkActionResult }>(
|
||||
BULK_DELETE_ITEMS_MUTATION,
|
||||
{ itemIds }
|
||||
)
|
||||
setState({ loading: false, error: null, data: result.bulkDeleteItems })
|
||||
return result.bulkDeleteItems
|
||||
} catch (error) {
|
||||
const err = error instanceof Error ? error : new Error('Bulk delete failed')
|
||||
setState({ loading: false, error: err, data: null })
|
||||
throw err
|
||||
}
|
||||
}, [])
|
||||
|
||||
return { ...state, bulkDelete }
|
||||
}
|
||||
|
||||
export function useBulkMoveToFolder() {
|
||||
const [state, setState] = useState<MutationState<BulkActionResult>>({
|
||||
loading: false,
|
||||
error: null,
|
||||
data: null,
|
||||
})
|
||||
|
||||
const bulkMoveToFolder = useCallback(
|
||||
async (itemIds: string[], folder: string) => {
|
||||
setState({ loading: true, error: null, data: null })
|
||||
try {
|
||||
const result = await graphqlRequest<{
|
||||
bulkMoveToFolder: BulkActionResult
|
||||
}>(BULK_MOVE_TO_FOLDER_MUTATION, { itemIds, folder })
|
||||
setState({ loading: false, error: null, data: result.bulkMoveToFolder })
|
||||
return result.bulkMoveToFolder
|
||||
} catch (error) {
|
||||
const err =
|
||||
error instanceof Error ? error : new Error('Bulk move to folder failed')
|
||||
setState({ loading: false, error: err, data: null })
|
||||
throw err
|
||||
}
|
||||
},
|
||||
[]
|
||||
)
|
||||
|
||||
return { ...state, bulkMoveToFolder }
|
||||
}
|
||||
|
||||
export function useBulkMarkAsRead() {
|
||||
const [state, setState] = useState<MutationState<BulkActionResult>>({
|
||||
loading: false,
|
||||
error: null,
|
||||
data: null,
|
||||
})
|
||||
|
||||
const bulkMarkAsRead = useCallback(async (itemIds: string[]) => {
|
||||
setState({ loading: true, error: null, data: null })
|
||||
try {
|
||||
const result = await graphqlRequest<{
|
||||
bulkMarkAsRead: BulkActionResult
|
||||
}>(BULK_MARK_AS_READ_MUTATION, { itemIds })
|
||||
setState({ loading: false, error: null, data: result.bulkMarkAsRead })
|
||||
return result.bulkMarkAsRead
|
||||
} catch (error) {
|
||||
const err =
|
||||
error instanceof Error ? error : new Error('Bulk mark as read failed')
|
||||
setState({ loading: false, error: err, data: null })
|
||||
throw err
|
||||
}
|
||||
}, [])
|
||||
|
||||
return { ...state, bulkMarkAsRead }
|
||||
}
|
||||
|
||||
// ==================== LABEL TYPES ====================
|
||||
|
||||
export interface Label {
|
||||
id: string
|
||||
name: string
|
||||
color: string
|
||||
description?: string | null
|
||||
position: number
|
||||
internal: boolean
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
export interface CreateLabelInput {
|
||||
name: string
|
||||
color?: string
|
||||
description?: string
|
||||
}
|
||||
|
||||
export interface UpdateLabelInput {
|
||||
name?: string
|
||||
color?: string
|
||||
description?: string
|
||||
}
|
||||
|
||||
// ==================== LABEL QUERIES ====================
|
||||
|
||||
const GET_LABELS_QUERY = `
|
||||
query GetLabels {
|
||||
labels {
|
||||
id
|
||||
name
|
||||
color
|
||||
description
|
||||
position
|
||||
internal
|
||||
createdAt
|
||||
updatedAt
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const GET_LABEL_QUERY = `
|
||||
query GetLabel($id: String!) {
|
||||
label(id: $id) {
|
||||
id
|
||||
name
|
||||
color
|
||||
description
|
||||
position
|
||||
internal
|
||||
createdAt
|
||||
updatedAt
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
// ==================== LABEL MUTATIONS ====================
|
||||
|
||||
const CREATE_LABEL_MUTATION = `
|
||||
mutation CreateLabel($input: CreateLabelInput!) {
|
||||
createLabel(input: $input) {
|
||||
id
|
||||
name
|
||||
color
|
||||
description
|
||||
position
|
||||
internal
|
||||
createdAt
|
||||
updatedAt
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const UPDATE_LABEL_MUTATION = `
|
||||
mutation UpdateLabel($id: String!, $input: UpdateLabelInput!) {
|
||||
updateLabel(id: $id, input: $input) {
|
||||
id
|
||||
name
|
||||
color
|
||||
description
|
||||
position
|
||||
internal
|
||||
updatedAt
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const DELETE_LABEL_MUTATION = `
|
||||
mutation DeleteLabel($id: String!) {
|
||||
deleteLabel(id: $id) {
|
||||
success
|
||||
message
|
||||
itemId
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const SET_LIBRARY_ITEM_LABELS_MUTATION = `
|
||||
mutation SetLibraryItemLabels($itemId: String!, $labelIds: [String!]!) {
|
||||
setLibraryItemLabels(itemId: $itemId, labelIds: $labelIds) {
|
||||
id
|
||||
name
|
||||
color
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
// ==================== LABEL HOOKS ====================
|
||||
|
||||
export function useLabels() {
|
||||
const [state, setState] = useState<{
|
||||
loading: boolean
|
||||
error: Error | null
|
||||
data: Label[] | null
|
||||
}>({
|
||||
loading: false,
|
||||
error: null,
|
||||
data: null,
|
||||
})
|
||||
|
||||
const fetchLabels = useCallback(async () => {
|
||||
setState({ loading: true, error: null, data: null })
|
||||
try {
|
||||
const result = await graphqlRequest<{ labels: Label[] }>(GET_LABELS_QUERY)
|
||||
setState({ loading: false, error: null, data: result.labels })
|
||||
return result.labels
|
||||
} catch (error) {
|
||||
const err = error instanceof Error ? error : new Error('Failed to fetch labels')
|
||||
setState({ loading: false, error: err, data: null })
|
||||
throw err
|
||||
}
|
||||
}, [])
|
||||
|
||||
return { ...state, fetchLabels, refetch: fetchLabels }
|
||||
}
|
||||
|
||||
export function useCreateLabel() {
|
||||
const [state, setState] = useState<MutationState<Label>>({
|
||||
loading: false,
|
||||
error: null,
|
||||
data: null,
|
||||
})
|
||||
|
||||
const createLabel = useCallback(async (input: CreateLabelInput) => {
|
||||
setState({ loading: true, error: null, data: null })
|
||||
try {
|
||||
const result = await graphqlRequest<{ createLabel: Label }>(
|
||||
CREATE_LABEL_MUTATION,
|
||||
{ input }
|
||||
)
|
||||
setState({ loading: false, error: null, data: result.createLabel })
|
||||
return result.createLabel
|
||||
} catch (error) {
|
||||
const err = error instanceof Error ? error : new Error('Failed to create label')
|
||||
setState({ loading: false, error: err, data: null })
|
||||
throw err
|
||||
}
|
||||
}, [])
|
||||
|
||||
return { ...state, createLabel }
|
||||
}
|
||||
|
||||
export function useUpdateLabel() {
|
||||
const [state, setState] = useState<MutationState<Label>>({
|
||||
loading: false,
|
||||
error: null,
|
||||
data: null,
|
||||
})
|
||||
|
||||
const updateLabel = useCallback(
|
||||
async (id: string, input: UpdateLabelInput) => {
|
||||
setState({ loading: true, error: null, data: null })
|
||||
try {
|
||||
const result = await graphqlRequest<{ updateLabel: Label }>(
|
||||
UPDATE_LABEL_MUTATION,
|
||||
{ id, input }
|
||||
)
|
||||
setState({ loading: false, error: null, data: result.updateLabel })
|
||||
return result.updateLabel
|
||||
} catch (error) {
|
||||
const err = error instanceof Error ? error : new Error('Failed to update label')
|
||||
setState({ loading: false, error: err, data: null })
|
||||
throw err
|
||||
}
|
||||
},
|
||||
[]
|
||||
)
|
||||
|
||||
return { ...state, updateLabel }
|
||||
}
|
||||
|
||||
export function useDeleteLabel() {
|
||||
const [state, setState] = useState<MutationState<DeleteResult>>({
|
||||
loading: false,
|
||||
error: null,
|
||||
data: null,
|
||||
})
|
||||
|
||||
const deleteLabel = useCallback(async (id: string) => {
|
||||
setState({ loading: true, error: null, data: null })
|
||||
try {
|
||||
const result = await graphqlRequest<{ deleteLabel: DeleteResult }>(
|
||||
DELETE_LABEL_MUTATION,
|
||||
{ id }
|
||||
)
|
||||
setState({ loading: false, error: null, data: result.deleteLabel })
|
||||
return result.deleteLabel
|
||||
} catch (error) {
|
||||
const err = error instanceof Error ? error : new Error('Failed to delete label')
|
||||
setState({ loading: false, error: err, data: null })
|
||||
throw err
|
||||
}
|
||||
}, [])
|
||||
|
||||
return { ...state, deleteLabel }
|
||||
}
|
||||
|
||||
export function useSetLibraryItemLabels() {
|
||||
const [state, setState] = useState<MutationState<Label[]>>({
|
||||
loading: false,
|
||||
error: null,
|
||||
data: null,
|
||||
})
|
||||
|
||||
const setLibraryItemLabels = useCallback(
|
||||
async (itemId: string, labelIds: string[]) => {
|
||||
setState({ loading: true, error: null, data: null })
|
||||
try {
|
||||
const result = await graphqlRequest<{
|
||||
setLibraryItemLabels: Label[]
|
||||
}>(SET_LIBRARY_ITEM_LABELS_MUTATION, { itemId, labelIds })
|
||||
setState({
|
||||
loading: false,
|
||||
error: null,
|
||||
data: result.setLibraryItemLabels,
|
||||
})
|
||||
return result.setLibraryItemLabels
|
||||
} catch (error) {
|
||||
const err =
|
||||
error instanceof Error ? error : new Error('Failed to set item labels')
|
||||
setState({ loading: false, error: err, data: null })
|
||||
throw err
|
||||
}
|
||||
},
|
||||
[]
|
||||
)
|
||||
|
||||
return { ...state, setLibraryItemLabels }
|
||||
}
|
||||
292
packages/web-vite/src/pages/LabelsPage.tsx
Normal file
292
packages/web-vite/src/pages/LabelsPage.tsx
Normal file
|
|
@ -0,0 +1,292 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
useLabels,
|
||||
useCreateLabel,
|
||||
useUpdateLabel,
|
||||
useDeleteLabel,
|
||||
type Label,
|
||||
type CreateLabelInput,
|
||||
type UpdateLabelInput,
|
||||
} from '../lib/graphql-client'
|
||||
import '../styles/LabelsPage.css'
|
||||
|
||||
export function LabelsPage() {
|
||||
const { data: labels, loading, error, fetchLabels } = useLabels()
|
||||
const { createLabel, loading: creating } = useCreateLabel()
|
||||
const { updateLabel, loading: updating } = useUpdateLabel()
|
||||
const { deleteLabel, loading: deleting } = useDeleteLabel()
|
||||
|
||||
const [showCreateForm, setShowCreateForm] = useState(false)
|
||||
const [editingLabel, setEditingLabel] = useState<Label | null>(null)
|
||||
const [formData, setFormData] = useState<CreateLabelInput>({
|
||||
name: '',
|
||||
color: '#6366f1',
|
||||
description: '',
|
||||
})
|
||||
const [notification, setNotification] = useState<{
|
||||
message: string
|
||||
type: 'success' | 'error'
|
||||
} | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
fetchLabels()
|
||||
}, [fetchLabels])
|
||||
|
||||
const showToast = (message: string, type: 'success' | 'error') => {
|
||||
setNotification({ message, type })
|
||||
setTimeout(() => setNotification(null), 3000)
|
||||
}
|
||||
|
||||
const handleCreateLabel = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
try {
|
||||
await createLabel(formData)
|
||||
showToast('Label created successfully', 'success')
|
||||
setShowCreateForm(false)
|
||||
setFormData({ name: '', color: '#6366f1', description: '' })
|
||||
fetchLabels()
|
||||
} catch (err) {
|
||||
showToast(
|
||||
err instanceof Error ? err.message : 'Failed to create label',
|
||||
'error'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpdateLabel = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!editingLabel) return
|
||||
|
||||
try {
|
||||
const input: UpdateLabelInput = {
|
||||
name: formData.name,
|
||||
color: formData.color,
|
||||
description: formData.description,
|
||||
}
|
||||
await updateLabel(editingLabel.id, input)
|
||||
showToast('Label updated successfully', 'success')
|
||||
setEditingLabel(null)
|
||||
setFormData({ name: '', color: '#6366f1', description: '' })
|
||||
fetchLabels()
|
||||
} catch (err) {
|
||||
showToast(
|
||||
err instanceof Error ? err.message : 'Failed to update label',
|
||||
'error'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteLabel = async (label: Label) => {
|
||||
if (label.internal) {
|
||||
showToast('Cannot delete system labels', 'error')
|
||||
return
|
||||
}
|
||||
|
||||
if (!confirm(`Are you sure you want to delete "${label.name}"?`)) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await deleteLabel(label.id)
|
||||
showToast('Label deleted successfully', 'success')
|
||||
fetchLabels()
|
||||
} catch (err) {
|
||||
showToast(
|
||||
err instanceof Error ? err.message : 'Failed to delete label',
|
||||
'error'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const startEdit = (label: Label) => {
|
||||
if (label.internal) {
|
||||
showToast('Cannot edit system labels', 'error')
|
||||
return
|
||||
}
|
||||
setEditingLabel(label)
|
||||
setFormData({
|
||||
name: label.name,
|
||||
color: label.color,
|
||||
description: label.description || '',
|
||||
})
|
||||
}
|
||||
|
||||
const cancelEdit = () => {
|
||||
setEditingLabel(null)
|
||||
setShowCreateForm(false)
|
||||
setFormData({ name: '', color: '#6366f1', description: '' })
|
||||
}
|
||||
|
||||
if (loading && !labels) {
|
||||
return (
|
||||
<div className="labels-page">
|
||||
<div className="labels-loading">Loading labels...</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="labels-page">
|
||||
<div className="labels-error">Error loading labels: {error.message}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="labels-page">
|
||||
<div className="labels-header">
|
||||
<h1>Labels</h1>
|
||||
<button
|
||||
className="btn-primary"
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
disabled={showCreateForm || !!editingLabel}
|
||||
>
|
||||
+ Create Label
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{notification && (
|
||||
<div className={`notification notification-${notification.type}`}>
|
||||
{notification.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(showCreateForm || editingLabel) && (
|
||||
<div className="label-form-card">
|
||||
<h2>{editingLabel ? 'Edit Label' : 'Create New Label'}</h2>
|
||||
<form
|
||||
onSubmit={editingLabel ? handleUpdateLabel : handleCreateLabel}
|
||||
>
|
||||
<div className="form-group">
|
||||
<label htmlFor="name">Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, name: e.target.value })
|
||||
}
|
||||
required
|
||||
maxLength={100}
|
||||
disabled={creating || updating}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="color">Color *</label>
|
||||
<div className="color-input-group">
|
||||
<input
|
||||
type="color"
|
||||
id="color"
|
||||
value={formData.color}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, color: e.target.value })
|
||||
}
|
||||
disabled={creating || updating}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.color}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, color: e.target.value })
|
||||
}
|
||||
pattern="^#[0-9A-Fa-f]{6}$"
|
||||
placeholder="#6366f1"
|
||||
disabled={creating || updating}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="description">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
value={formData.description}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, description: e.target.value })
|
||||
}
|
||||
maxLength={500}
|
||||
rows={3}
|
||||
disabled={creating || updating}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-secondary"
|
||||
onClick={cancelEdit}
|
||||
disabled={creating || updating}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn-primary"
|
||||
disabled={creating || updating}
|
||||
>
|
||||
{creating || updating ? 'Saving...' : editingLabel ? 'Update' : 'Create'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="labels-list">
|
||||
{labels && labels.length === 0 ? (
|
||||
<div className="labels-empty">
|
||||
<p>No labels yet. Create your first label to get started!</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="labels-grid">
|
||||
{labels?.map((label) => (
|
||||
<div key={label.id} className="label-card">
|
||||
<div className="label-card-header">
|
||||
<div className="label-name-group">
|
||||
<span
|
||||
className="label-color-dot"
|
||||
style={{ backgroundColor: label.color }}
|
||||
/>
|
||||
<span className="label-name">{label.name}</span>
|
||||
{label.internal && (
|
||||
<span className="label-badge">System</span>
|
||||
)}
|
||||
</div>
|
||||
{!label.internal && (
|
||||
<div className="label-actions">
|
||||
<button
|
||||
className="btn-icon"
|
||||
onClick={() => startEdit(label)}
|
||||
title="Edit label"
|
||||
disabled={deleting}
|
||||
>
|
||||
✏️
|
||||
</button>
|
||||
<button
|
||||
className="btn-icon btn-danger"
|
||||
onClick={() => handleDeleteLabel(label)}
|
||||
title="Delete label"
|
||||
disabled={deleting}
|
||||
>
|
||||
🗑️
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{label.description && (
|
||||
<p className="label-description">{label.description}</p>
|
||||
)}
|
||||
<div className="label-meta">
|
||||
<span className="label-color-code">{label.color}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LabelsPage
|
||||
|
|
@ -1,60 +1,144 @@
|
|||
// Library page component for Omnivore Vite migration
|
||||
// Displays library items in a clean, modern interface similar to the current web package
|
||||
// Uses the new NestJS GraphQL endpoint to fetch the user's library items
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import React, { useState, useEffect, useMemo } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useAuthStore } from '../stores'
|
||||
import { OmnivoreApiClient } from '../lib/api-client'
|
||||
import type { Article } from '../types/api'
|
||||
import {
|
||||
graphqlRequest,
|
||||
useArchiveItem,
|
||||
useDeleteItem,
|
||||
useBulkArchive,
|
||||
useBulkDelete,
|
||||
useBulkMoveToFolder,
|
||||
useBulkMarkAsRead,
|
||||
useLabels,
|
||||
} from '../lib/graphql-client'
|
||||
import type {
|
||||
LibraryItem as LibraryItemType,
|
||||
LibraryItemsConnection,
|
||||
LibraryItemState,
|
||||
} from '../types/api'
|
||||
import ErrorBoundary from '../components/ErrorBoundary'
|
||||
import LabelPicker from '../components/LabelPicker'
|
||||
import '../styles/LabelPicker.css'
|
||||
|
||||
const LIBRARY_ITEMS_QUERY = `
|
||||
query LibraryItems($first: Int!, $after: String, $search: LibrarySearchInput) {
|
||||
libraryItems(first: $first, after: $after, search: $search) {
|
||||
items {
|
||||
id
|
||||
title
|
||||
slug
|
||||
originalUrl
|
||||
author
|
||||
description
|
||||
savedAt
|
||||
createdAt
|
||||
updatedAt
|
||||
publishedAt
|
||||
readAt
|
||||
state
|
||||
contentReader
|
||||
folder
|
||||
labels {
|
||||
id
|
||||
name
|
||||
color
|
||||
description
|
||||
}
|
||||
}
|
||||
nextCursor
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const INITIAL_PAGE_SIZE = 50
|
||||
|
||||
const LibraryPage: React.FC = () => {
|
||||
const navigate = useNavigate()
|
||||
const { user } = useAuthStore()
|
||||
const [articles, setArticles] = useState<Article[]>([])
|
||||
const [items, setItems] = useState<LibraryItemType[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [searching, setSearching] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [filteredArticles, setFilteredArticles] = useState<Article[]>([])
|
||||
const [activeFolder, setActiveFolder] = useState<string>('all')
|
||||
const [sortBy, setSortBy] = useState<string>('SAVED_AT')
|
||||
const [sortOrder, setSortOrder] = useState<'ASC' | 'DESC'>('DESC')
|
||||
const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null)
|
||||
const [processingItemId, setProcessingItemId] = useState<string | null>(null)
|
||||
const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set())
|
||||
const [isMultiSelectMode, setIsMultiSelectMode] = useState(false)
|
||||
const [selectedLabelFilters, setSelectedLabelFilters] = useState<string[]>([])
|
||||
const [showLabelFilter, setShowLabelFilter] = useState(false)
|
||||
|
||||
const { archiveItem } = useArchiveItem()
|
||||
const { deleteItem } = useDeleteItem()
|
||||
const { bulkArchive } = useBulkArchive()
|
||||
const { bulkDelete } = useBulkDelete()
|
||||
const { bulkMoveToFolder } = useBulkMoveToFolder()
|
||||
const { bulkMarkAsRead } = useBulkMarkAsRead()
|
||||
const { data: allLabels, fetchLabels } = useLabels()
|
||||
|
||||
useEffect(() => {
|
||||
const fetchArticles = async () => {
|
||||
fetchLabels()
|
||||
}, [fetchLabels])
|
||||
|
||||
useEffect(() => {
|
||||
const fetchItems = async () => {
|
||||
if (!user) return
|
||||
|
||||
try {
|
||||
setLoading(true)
|
||||
const apiClient = new OmnivoreApiClient()
|
||||
const response = await apiClient.getLibraryItems(1, 20)
|
||||
|
||||
if (response.success && response.data) {
|
||||
setArticles(response.data)
|
||||
setFilteredArticles(response.data)
|
||||
// Use searching state for filter/search changes (less jarring than full loading)
|
||||
// Use loading state only for initial page load
|
||||
if (items.length === 0) {
|
||||
setLoading(true)
|
||||
} else {
|
||||
setError(response.errorMessage || 'Failed to fetch articles')
|
||||
setSearching(true)
|
||||
}
|
||||
|
||||
// Build search parameters
|
||||
const searchParams: any = {}
|
||||
if (searchQuery.trim()) {
|
||||
searchParams.query = searchQuery.trim()
|
||||
}
|
||||
if (activeFolder && activeFolder !== 'all') {
|
||||
searchParams.folder = activeFolder
|
||||
}
|
||||
if (selectedLabelFilters.length > 0) {
|
||||
searchParams.labels = selectedLabelFilters
|
||||
}
|
||||
searchParams.sortBy = sortBy
|
||||
searchParams.sortOrder = sortOrder
|
||||
|
||||
const data = await graphqlRequest<{ libraryItems: LibraryItemsConnection }>(
|
||||
LIBRARY_ITEMS_QUERY,
|
||||
{
|
||||
first: INITIAL_PAGE_SIZE,
|
||||
search: Object.keys(searchParams).length > 0 ? searchParams : undefined
|
||||
}
|
||||
)
|
||||
|
||||
setItems(data.libraryItems.items)
|
||||
setError(null)
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : 'An unexpected error occurred'
|
||||
err instanceof Error ? err.message : 'Failed to load your library'
|
||||
)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setSearching(false)
|
||||
}
|
||||
}
|
||||
|
||||
fetchArticles()
|
||||
}, [user])
|
||||
// Debounce search query - shorter for better UX
|
||||
const debounceTimer = setTimeout(fetchItems, searchQuery ? 300 : 0)
|
||||
return () => clearTimeout(debounceTimer)
|
||||
}, [user, searchQuery, activeFolder, sortBy, sortOrder, selectedLabelFilters])
|
||||
|
||||
useEffect(() => {
|
||||
if (!searchQuery.trim()) {
|
||||
setFilteredArticles(articles)
|
||||
return
|
||||
}
|
||||
|
||||
const filtered = articles.filter(
|
||||
(article) =>
|
||||
article.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
article.url.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
)
|
||||
setFilteredArticles(filtered)
|
||||
}, [searchQuery, articles])
|
||||
// No client-side filtering needed - using server-side search
|
||||
const filteredItems = items
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString)
|
||||
|
|
@ -69,32 +153,302 @@ const LibraryPage: React.FC = () => {
|
|||
return date.toLocaleDateString()
|
||||
}
|
||||
|
||||
const getStateColor = (state: string) => {
|
||||
const getStateColor = (state: LibraryItemState) => {
|
||||
switch (state) {
|
||||
case 'UNREAD':
|
||||
case 'SUCCEEDED':
|
||||
return '#4a9eff'
|
||||
case 'READING':
|
||||
case 'PROCESSING':
|
||||
return '#ffd700'
|
||||
case 'ARCHIVED':
|
||||
return '#999'
|
||||
case 'FAILED':
|
||||
return '#ff4d4f'
|
||||
default:
|
||||
return '#4a9eff'
|
||||
}
|
||||
}
|
||||
|
||||
const getStateLabel = (state: string) => {
|
||||
const getStateLabel = (state: LibraryItemState) => {
|
||||
switch (state) {
|
||||
case 'UNREAD':
|
||||
return 'Unread'
|
||||
case 'READING':
|
||||
return 'Reading'
|
||||
case 'SUCCEEDED':
|
||||
return 'Saved'
|
||||
case 'PROCESSING':
|
||||
return 'Processing'
|
||||
case 'ARCHIVED':
|
||||
return 'Archived'
|
||||
case 'FAILED':
|
||||
return 'Failed'
|
||||
default:
|
||||
return 'Unread'
|
||||
return state.charAt(0) + state.slice(1).toLowerCase()
|
||||
}
|
||||
}
|
||||
|
||||
const showToast = (message: string, type: 'success' | 'error' = 'success') => {
|
||||
setToast({ message, type })
|
||||
setTimeout(() => setToast(null), 3000)
|
||||
}
|
||||
|
||||
const handleRead = (itemId: string) => {
|
||||
navigate(`/reader/${itemId}`)
|
||||
}
|
||||
|
||||
const handleArchive = async (itemId: string, currentState: LibraryItemState) => {
|
||||
const isArchived = currentState === 'ARCHIVED'
|
||||
|
||||
try {
|
||||
setProcessingItemId(itemId)
|
||||
|
||||
// Optimistic update
|
||||
setItems((prevItems) =>
|
||||
prevItems.map((item) =>
|
||||
item.id === itemId
|
||||
? { ...item, state: isArchived ? 'SUCCEEDED' : 'ARCHIVED', folder: isArchived ? 'inbox' : 'archive' }
|
||||
: item
|
||||
)
|
||||
)
|
||||
|
||||
await archiveItem(itemId, !isArchived)
|
||||
showToast(isArchived ? 'Item unarchived' : 'Item archived', 'success')
|
||||
} catch (err) {
|
||||
// Revert optimistic update on error
|
||||
setItems((prevItems) =>
|
||||
prevItems.map((item) =>
|
||||
item.id === itemId
|
||||
? { ...item, state: currentState }
|
||||
: item
|
||||
)
|
||||
)
|
||||
showToast(err instanceof Error ? err.message : 'Action failed', 'error')
|
||||
} finally {
|
||||
setProcessingItemId(null)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (itemId: string) => {
|
||||
if (!confirm('Are you sure you want to delete this item?')) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
setProcessingItemId(itemId)
|
||||
|
||||
// Optimistic update - remove from list
|
||||
setItems((prevItems) => prevItems.filter((item) => item.id !== itemId))
|
||||
|
||||
await deleteItem(itemId)
|
||||
showToast('Item deleted', 'success')
|
||||
} catch (err) {
|
||||
// Refetch on error
|
||||
window.location.reload()
|
||||
showToast(err instanceof Error ? err.message : 'Delete failed', 'error')
|
||||
} finally {
|
||||
setProcessingItemId(null)
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== MULTI-SELECT HANDLERS ====================
|
||||
|
||||
const toggleItemSelection = (itemId: string) => {
|
||||
setSelectedItems((prev) => {
|
||||
const newSet = new Set(prev)
|
||||
if (newSet.has(itemId)) {
|
||||
newSet.delete(itemId)
|
||||
} else {
|
||||
newSet.add(itemId)
|
||||
}
|
||||
return newSet
|
||||
})
|
||||
}
|
||||
|
||||
const selectAll = () => {
|
||||
setSelectedItems(new Set(items.map((item) => item.id)))
|
||||
}
|
||||
|
||||
const deselectAll = () => {
|
||||
setSelectedItems(new Set())
|
||||
}
|
||||
|
||||
const handleBulkArchive = async (archived: boolean) => {
|
||||
if (selectedItems.size === 0) return
|
||||
|
||||
try {
|
||||
const itemIds = Array.from(selectedItems)
|
||||
|
||||
// Optimistic update
|
||||
setItems((prevItems) =>
|
||||
prevItems.map((item) =>
|
||||
selectedItems.has(item.id)
|
||||
? { ...item, state: archived ? 'ARCHIVED' : 'SUCCEEDED', folder: archived ? 'archive' : 'inbox' }
|
||||
: item
|
||||
)
|
||||
)
|
||||
|
||||
const result = await bulkArchive(itemIds, archived)
|
||||
showToast(result.message || `${result.successCount} items ${archived ? 'archived' : 'unarchived'}`, 'success')
|
||||
|
||||
if (result.failureCount > 0 && result.errors) {
|
||||
console.error('Bulk archive errors:', result.errors)
|
||||
}
|
||||
|
||||
deselectAll()
|
||||
} catch (err) {
|
||||
showToast(err instanceof Error ? err.message : 'Bulk archive failed', 'error')
|
||||
// Refetch to restore correct state
|
||||
window.location.reload()
|
||||
}
|
||||
}
|
||||
|
||||
const handleBulkDelete = async () => {
|
||||
if (selectedItems.size === 0) return
|
||||
|
||||
if (!confirm(`Are you sure you want to delete ${selectedItems.size} item(s)?`)) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const itemIds = Array.from(selectedItems)
|
||||
|
||||
// Optimistic update - remove from list
|
||||
setItems((prevItems) => prevItems.filter((item) => !selectedItems.has(item.id)))
|
||||
|
||||
const result = await bulkDelete(itemIds)
|
||||
showToast(result.message || `${result.successCount} items deleted`, 'success')
|
||||
|
||||
if (result.failureCount > 0 && result.errors) {
|
||||
console.error('Bulk delete errors:', result.errors)
|
||||
}
|
||||
|
||||
deselectAll()
|
||||
} catch (err) {
|
||||
showToast(err instanceof Error ? err.message : 'Bulk delete failed', 'error')
|
||||
window.location.reload()
|
||||
}
|
||||
}
|
||||
|
||||
const handleBulkMoveToFolderAction = async (folder: string) => {
|
||||
if (selectedItems.size === 0) return
|
||||
|
||||
try {
|
||||
const itemIds = Array.from(selectedItems)
|
||||
|
||||
// Determine state based on folder
|
||||
let newState: LibraryItemState = 'SUCCEEDED'
|
||||
if (folder === 'archive') newState = 'ARCHIVED'
|
||||
if (folder === 'trash') newState = 'DELETED'
|
||||
|
||||
// Optimistic update
|
||||
setItems((prevItems) =>
|
||||
prevItems.map((item) =>
|
||||
selectedItems.has(item.id)
|
||||
? { ...item, folder, state: newState }
|
||||
: item
|
||||
)
|
||||
)
|
||||
|
||||
const result = await bulkMoveToFolder(itemIds, folder)
|
||||
showToast(result.message || `${result.successCount} items moved to ${folder}`, 'success')
|
||||
|
||||
if (result.failureCount > 0 && result.errors) {
|
||||
console.error('Bulk move errors:', result.errors)
|
||||
}
|
||||
|
||||
deselectAll()
|
||||
} catch (err) {
|
||||
showToast(err instanceof Error ? err.message : 'Bulk move failed', 'error')
|
||||
window.location.reload()
|
||||
}
|
||||
}
|
||||
|
||||
const handleBulkMarkAsReadAction = async () => {
|
||||
if (selectedItems.size === 0) return
|
||||
|
||||
try {
|
||||
const itemIds = Array.from(selectedItems)
|
||||
|
||||
// Optimistic update
|
||||
setItems((prevItems) =>
|
||||
prevItems.map((item) =>
|
||||
selectedItems.has(item.id)
|
||||
? { ...item, readAt: new Date().toISOString() }
|
||||
: item
|
||||
)
|
||||
)
|
||||
|
||||
const result = await bulkMarkAsRead(itemIds)
|
||||
showToast(result.message || `${result.successCount} items marked as read`, 'success')
|
||||
|
||||
if (result.failureCount > 0 && result.errors) {
|
||||
console.error('Bulk mark as read errors:', result.errors)
|
||||
}
|
||||
|
||||
deselectAll()
|
||||
} catch (err) {
|
||||
showToast(err instanceof Error ? err.message : 'Bulk mark as read failed', 'error')
|
||||
window.location.reload()
|
||||
}
|
||||
}
|
||||
|
||||
const handleLabelsUpdate = async (itemId: string, newLabelNames: string[]) => {
|
||||
// Optimistic update - convert label names to Label objects
|
||||
setItems((prevItems) =>
|
||||
prevItems.map((item) => {
|
||||
if (item.id === itemId && allLabels) {
|
||||
// Map label names to full Label objects from allLabels
|
||||
const updatedLabels = newLabelNames
|
||||
.map(name => allLabels.find(l => l.name === name))
|
||||
.filter((l): l is NonNullable<typeof l> => l !== undefined)
|
||||
return { ...item, labels: updatedLabels }
|
||||
}
|
||||
return item
|
||||
})
|
||||
)
|
||||
showToast('Labels updated', 'success')
|
||||
|
||||
// Refetch library items to get the actual updated data from server
|
||||
// This ensures the labels are persisted and the filter will work correctly
|
||||
try {
|
||||
const searchParams: any = {}
|
||||
if (searchQuery.trim()) {
|
||||
searchParams.query = searchQuery.trim()
|
||||
}
|
||||
if (activeFolder && activeFolder !== 'all') {
|
||||
searchParams.folder = activeFolder
|
||||
}
|
||||
if (selectedLabelFilters.length > 0) {
|
||||
searchParams.labels = selectedLabelFilters
|
||||
}
|
||||
searchParams.sortBy = sortBy
|
||||
searchParams.sortOrder = sortOrder
|
||||
|
||||
const data = await graphqlRequest<{ libraryItems: LibraryItemsConnection }>(
|
||||
LIBRARY_ITEMS_QUERY,
|
||||
{
|
||||
first: INITIAL_PAGE_SIZE,
|
||||
search: Object.keys(searchParams).length > 0 ? searchParams : undefined
|
||||
}
|
||||
)
|
||||
|
||||
setItems(data.libraryItems.items)
|
||||
} catch (err) {
|
||||
console.error('Failed to refetch library items:', err)
|
||||
// Don't show error toast here since the optimistic update already succeeded
|
||||
}
|
||||
}
|
||||
|
||||
const toggleLabelFilter = (labelName: string) => {
|
||||
setSelectedLabelFilters((prev) => {
|
||||
if (prev.includes(labelName)) {
|
||||
return prev.filter((l) => l !== labelName)
|
||||
} else {
|
||||
return [...prev, labelName]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const clearLabelFilters = () => {
|
||||
setSelectedLabelFilters([])
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="loading-spinner">
|
||||
|
|
@ -116,48 +470,223 @@ const LibraryPage: React.FC = () => {
|
|||
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
{toast && (
|
||||
<div className={`toast toast-${toast.type}`}>
|
||||
{toast.message}
|
||||
</div>
|
||||
)}
|
||||
<div className="library-page">
|
||||
<div className="library-header">
|
||||
<h1>Your Library</h1>
|
||||
<h1>
|
||||
Your Library {searching && <span className="searching-indicator">Searching...</span>}
|
||||
{selectedItems.size > 0 && (
|
||||
<span className="selection-count">({selectedItems.size} selected)</span>
|
||||
)}
|
||||
</h1>
|
||||
<div className="library-controls">
|
||||
<div className="search-box">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search articles..."
|
||||
placeholder="Search saved items..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="search-input"
|
||||
/>
|
||||
{searching && <span className="search-spinner">⏳</span>}
|
||||
</div>
|
||||
<div className="label-filter-wrapper">
|
||||
<button
|
||||
className="label-filter-toggle-btn"
|
||||
onClick={() => setShowLabelFilter(!showLabelFilter)}
|
||||
>
|
||||
🏷️ Filter by Labels {selectedLabelFilters.length > 0 && `(${selectedLabelFilters.length})`}
|
||||
</button>
|
||||
{showLabelFilter && (
|
||||
<div className="label-filter-dropdown">
|
||||
<div className="label-filter-header">
|
||||
<h4>Filter by Labels</h4>
|
||||
{selectedLabelFilters.length > 0 && (
|
||||
<button
|
||||
className="clear-filters-btn"
|
||||
onClick={clearLabelFilters}
|
||||
>
|
||||
Clear All
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{allLabels && allLabels.length > 0 ? (
|
||||
<div className="label-filter-list">
|
||||
{allLabels.map((label) => (
|
||||
<label key={label.id} className="label-filter-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedLabelFilters.includes(label.name)}
|
||||
onChange={() => toggleLabelFilter(label.name)}
|
||||
/>
|
||||
<span
|
||||
className="label-color-dot"
|
||||
style={{ backgroundColor: label.color }}
|
||||
/>
|
||||
<span className="label-name">{label.name}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="label-filter-empty">
|
||||
No labels available. Create labels from the Labels page.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
className="multi-select-toggle-btn"
|
||||
onClick={() => {
|
||||
setIsMultiSelectMode(!isMultiSelectMode)
|
||||
if (isMultiSelectMode) {
|
||||
deselectAll()
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isMultiSelectMode ? 'Exit Multi-Select' : 'Multi-Select'}
|
||||
</button>
|
||||
<button className="add-article-btn">+ Add Article</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isMultiSelectMode && (
|
||||
<div className="bulk-actions-bar">
|
||||
<div className="bulk-select-controls">
|
||||
<button onClick={selectAll} className="bulk-control-btn">
|
||||
Select All
|
||||
</button>
|
||||
<button onClick={deselectAll} className="bulk-control-btn">
|
||||
Deselect All
|
||||
</button>
|
||||
<span className="selected-count">
|
||||
{selectedItems.size} of {items.length} selected
|
||||
</span>
|
||||
</div>
|
||||
{selectedItems.size > 0 && (
|
||||
<div className="bulk-action-buttons">
|
||||
<button
|
||||
onClick={() => handleBulkArchive(true)}
|
||||
className="bulk-action-btn"
|
||||
>
|
||||
Archive Selected
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleBulkArchive(false)}
|
||||
className="bulk-action-btn"
|
||||
>
|
||||
Unarchive Selected
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleBulkMoveToFolderAction('inbox')}
|
||||
className="bulk-action-btn"
|
||||
>
|
||||
Move to Inbox
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleBulkMoveToFolderAction('archive')}
|
||||
className="bulk-action-btn"
|
||||
>
|
||||
Move to Archive
|
||||
</button>
|
||||
<button
|
||||
onClick={handleBulkMarkAsReadAction}
|
||||
className="bulk-action-btn"
|
||||
>
|
||||
Mark as Read
|
||||
</button>
|
||||
<button
|
||||
onClick={handleBulkDelete}
|
||||
className="bulk-action-btn bulk-action-btn-danger"
|
||||
>
|
||||
Delete Selected
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="library-filters">
|
||||
<div className="folder-tabs">
|
||||
<button
|
||||
className={`folder-tab ${activeFolder === 'all' ? 'active' : ''}`}
|
||||
onClick={() => setActiveFolder('all')}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
<button
|
||||
className={`folder-tab ${activeFolder === 'inbox' ? 'active' : ''}`}
|
||||
onClick={() => setActiveFolder('inbox')}
|
||||
>
|
||||
Inbox
|
||||
</button>
|
||||
<button
|
||||
className={`folder-tab ${activeFolder === 'archive' ? 'active' : ''}`}
|
||||
onClick={() => setActiveFolder('archive')}
|
||||
>
|
||||
Archive
|
||||
</button>
|
||||
<button
|
||||
className={`folder-tab ${activeFolder === 'trash' ? 'active' : ''}`}
|
||||
onClick={() => setActiveFolder('trash')}
|
||||
>
|
||||
Trash
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="sort-controls">
|
||||
<label htmlFor="sort-by">Sort by:</label>
|
||||
<select
|
||||
id="sort-by"
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value)}
|
||||
className="sort-select"
|
||||
>
|
||||
<option value="SAVED_AT">Date Saved</option>
|
||||
<option value="UPDATED_AT">Last Updated</option>
|
||||
<option value="PUBLISHED_AT">Published Date</option>
|
||||
<option value="TITLE">Title</option>
|
||||
<option value="AUTHOR">Author</option>
|
||||
</select>
|
||||
<button
|
||||
className="sort-order-btn"
|
||||
onClick={() => setSortOrder(sortOrder === 'DESC' ? 'ASC' : 'DESC')}
|
||||
title={sortOrder === 'DESC' ? 'Descending' : 'Ascending'}
|
||||
>
|
||||
{sortOrder === 'DESC' ? '↓' : '↑'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="library-stats">
|
||||
<div className="stat">
|
||||
<span className="stat-number">{articles.length}</span>
|
||||
<span className="stat-label">Total Articles</span>
|
||||
<span className="stat-number">{items.length}</span>
|
||||
<span className="stat-label">Total Items</span>
|
||||
</div>
|
||||
<div className="stat">
|
||||
<span className="stat-number">
|
||||
{articles.filter((a) => a.state === 'UNREAD').length}
|
||||
{items.filter((item) => item.state === 'SUCCEEDED').length}
|
||||
</span>
|
||||
<span className="stat-label">Unread</span>
|
||||
<span className="stat-label">Saved</span>
|
||||
</div>
|
||||
<div className="stat">
|
||||
<span className="stat-number">
|
||||
{articles.filter((a) => a.state === 'READING').length}
|
||||
{items.filter((item) => item.state === 'ARCHIVED').length}
|
||||
</span>
|
||||
<span className="stat-label">Reading</span>
|
||||
<span className="stat-label">Archived</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{filteredArticles.length === 0 ? (
|
||||
{filteredItems.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<h2>No articles found</h2>
|
||||
<h2>No items found</h2>
|
||||
<p>
|
||||
{searchQuery
|
||||
? `No articles match "${searchQuery}"`
|
||||
? `No items match "${searchQuery}"`
|
||||
: 'Your library is empty. Add some articles to get started!'}
|
||||
</p>
|
||||
{!searchQuery && (
|
||||
|
|
@ -168,42 +697,64 @@ const LibraryPage: React.FC = () => {
|
|||
</div>
|
||||
) : (
|
||||
<div className="articles-grid">
|
||||
{filteredArticles.map((article) => (
|
||||
<div key={article.id} className="article-card">
|
||||
{filteredItems.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={`article-card ${selectedItems.has(item.id) ? 'selected' : ''}`}
|
||||
>
|
||||
{isMultiSelectMode && (
|
||||
<div className="article-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedItems.has(item.id)}
|
||||
onChange={() => toggleItemSelection(item.id)}
|
||||
className="checkbox-input"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="article-header">
|
||||
<div className="article-state">
|
||||
<span
|
||||
className="state-indicator"
|
||||
style={{ backgroundColor: getStateColor(article.state) }}
|
||||
style={{ backgroundColor: getStateColor(item.state) }}
|
||||
></span>
|
||||
<span className="state-label">
|
||||
{getStateLabel(article.state)}
|
||||
{getStateLabel(item.state)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="article-date">
|
||||
{formatDate(article.savedAt)}
|
||||
</div>
|
||||
<div className="article-date">{formatDate(item.savedAt)}</div>
|
||||
</div>
|
||||
|
||||
<h3 className="article-title">
|
||||
<a
|
||||
href={article.url}
|
||||
href={item.originalUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="article-link"
|
||||
>
|
||||
{article.title}
|
||||
{item.title}
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
<div className="article-meta">
|
||||
<span className="article-url">{article.url}</span>
|
||||
<span className="article-url">{item.originalUrl}</span>
|
||||
</div>
|
||||
|
||||
{article.labels && article.labels.length > 0 && (
|
||||
{item.labels && item.labels.length > 0 && (
|
||||
<div className="article-labels">
|
||||
{article.labels.map((label, index) => (
|
||||
<span key={index} className="label">
|
||||
{item.labels.map((label) => (
|
||||
<span
|
||||
key={label.id}
|
||||
className="label"
|
||||
style={{
|
||||
backgroundColor: label.color,
|
||||
color: '#fff',
|
||||
padding: '0.25rem 0.5rem',
|
||||
borderRadius: '0.25rem',
|
||||
fontSize: '0.75rem',
|
||||
marginRight: '0.25rem'
|
||||
}}
|
||||
>
|
||||
{label.name}
|
||||
</span>
|
||||
))}
|
||||
|
|
@ -211,9 +762,32 @@ const LibraryPage: React.FC = () => {
|
|||
)}
|
||||
|
||||
<div className="article-actions">
|
||||
<button className="action-btn">Read</button>
|
||||
<button className="action-btn">Archive</button>
|
||||
<button className="action-btn">Share</button>
|
||||
<button
|
||||
className="action-btn"
|
||||
onClick={() => handleRead(item.id)}
|
||||
disabled={processingItemId === item.id}
|
||||
>
|
||||
Read
|
||||
</button>
|
||||
<button
|
||||
className="action-btn"
|
||||
onClick={() => handleArchive(item.id, item.state)}
|
||||
disabled={processingItemId === item.id}
|
||||
>
|
||||
{item.state === 'ARCHIVED' ? 'Unarchive' : 'Archive'}
|
||||
</button>
|
||||
<LabelPicker
|
||||
itemId={item.id}
|
||||
currentLabels={item.labels?.map(l => l.name) || []}
|
||||
onUpdate={(labelNames) => handleLabelsUpdate(item.id, labelNames)}
|
||||
/>
|
||||
<button
|
||||
className="action-btn action-btn-danger"
|
||||
onClick={() => handleDelete(item.id)}
|
||||
disabled={processingItemId === item.id}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ const LoginPage = React.lazy(() => import('../pages/LoginPage'))
|
|||
const EmailLoginPage = React.lazy(() => import('../pages/EmailLoginPage'))
|
||||
const RegisterPage = React.lazy(() => import('../pages/RegisterPage'))
|
||||
const LibraryPage = React.lazy(() => import('../pages/LibraryPage'))
|
||||
const LabelsPage = React.lazy(() => import('../pages/LabelsPage'))
|
||||
const ReaderPage = React.lazy(() => import('../pages/ReaderPage'))
|
||||
const SettingsPage = React.lazy(() => import('../pages/SettingsPage'))
|
||||
const AdminPage = React.lazy(() => import('../pages/AdminPage'))
|
||||
|
|
@ -91,6 +92,9 @@ const AppLayout: React.FC = () => {
|
|||
<a href="/home" className="nav-link">
|
||||
Library
|
||||
</a>
|
||||
<a href="/labels" className="nav-link">
|
||||
Labels
|
||||
</a>
|
||||
<a href="/settings" className="nav-link">
|
||||
Settings
|
||||
</a>
|
||||
|
|
@ -163,6 +167,7 @@ const AppRouter: React.FC = () => {
|
|||
>
|
||||
<Route path="home" element={<LibraryPage />} />
|
||||
<Route path="library" element={<Navigate to="/home" replace />} />
|
||||
<Route path="labels" element={<LabelsPage />} />
|
||||
<Route path="reader/:id" element={<ReaderPage />} />
|
||||
<Route path="settings" element={<SettingsPage />} />
|
||||
<Route
|
||||
|
|
|
|||
|
|
@ -150,14 +150,51 @@ export const useAuthStore = create<AuthState>()(
|
|||
set({ statusMessage: null, pendingEmailVerification: false }),
|
||||
|
||||
verifyAuth: async () => {
|
||||
const startTime = Date.now()
|
||||
|
||||
try {
|
||||
set({ isLoading: true, error: null })
|
||||
const response = await apiClient.verifyAuth()
|
||||
const existingToken =
|
||||
get().token ??
|
||||
(isBrowser ? window.localStorage.getItem(AUTH_TOKEN_STORAGE_KEY) : null)
|
||||
|
||||
// Fast path: no token, don't even try
|
||||
if (!existingToken) {
|
||||
set({ ...initialAuthState, isLoading: false })
|
||||
storeToken(null)
|
||||
return
|
||||
}
|
||||
|
||||
// Optimistic: assume valid if we have persisted user
|
||||
const persistedUser = get().user
|
||||
if (persistedUser && existingToken) {
|
||||
set({
|
||||
user: persistedUser,
|
||||
token: existingToken,
|
||||
isAuthenticated: true,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
})
|
||||
} else {
|
||||
set({ isLoading: true, error: null, token: existingToken })
|
||||
}
|
||||
|
||||
// Verify in background with timeout
|
||||
const timeoutPromise = new Promise((_, reject) =>
|
||||
setTimeout(() => reject(new Error('Auth verification timeout')), 5000)
|
||||
)
|
||||
|
||||
const response = await Promise.race([
|
||||
apiClient.verifyAuth(),
|
||||
timeoutPromise
|
||||
]) as Awaited<ReturnType<typeof apiClient.verifyAuth>>
|
||||
|
||||
const elapsed = Date.now() - startTime
|
||||
console.log(`[Auth] Verification took ${elapsed}ms`)
|
||||
|
||||
if (response.authStatus === 'AUTHENTICATED' && response.user) {
|
||||
set({
|
||||
user: response.user as AuthUser,
|
||||
token: get().token,
|
||||
token: existingToken,
|
||||
isAuthenticated: true,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
|
|
@ -171,15 +208,21 @@ export const useAuthStore = create<AuthState>()(
|
|||
pendingEmailVerification: true,
|
||||
isLoading: false,
|
||||
})
|
||||
storeToken(existingToken)
|
||||
} else {
|
||||
set({ ...initialAuthState })
|
||||
set({ ...initialAuthState, isLoading: false })
|
||||
storeToken(null)
|
||||
}
|
||||
} catch (error) {
|
||||
const message =
|
||||
error instanceof Error ? error.message : 'Auth check failed'
|
||||
set({ ...initialAuthState, error: message })
|
||||
storeToken(null)
|
||||
console.warn('[Auth] Verification failed, using cached state:', error)
|
||||
// If we have a cached user, keep using it (offline-first)
|
||||
const cachedUser = get().user
|
||||
if (cachedUser && get().token) {
|
||||
set({ isLoading: false, error: null })
|
||||
} else {
|
||||
set({ ...initialAuthState, isLoading: false })
|
||||
storeToken(null)
|
||||
}
|
||||
}
|
||||
},
|
||||
}),
|
||||
|
|
|
|||
273
packages/web-vite/src/styles/LabelPicker.css
Normal file
273
packages/web-vite/src/styles/LabelPicker.css
Normal file
|
|
@ -0,0 +1,273 @@
|
|||
.label-picker {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.label-picker-trigger {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.label-picker-trigger:hover:not(:disabled) {
|
||||
background-color: #f9fafb;
|
||||
border-color: #6366f1;
|
||||
}
|
||||
|
||||
.label-picker-trigger:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.label-picker-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.5rem);
|
||||
left: 0;
|
||||
min-width: 280px;
|
||||
max-width: 320px;
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
z-index: 1000;
|
||||
animation: dropdownSlideIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes dropdownSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.label-picker-header {
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.label-picker-header h4 {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.label-picker-loading,
|
||||
.label-picker-empty {
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.label-picker-list {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.label-picker-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
|
||||
.label-picker-item:hover {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.label-picker-item input[type='checkbox'] {
|
||||
cursor: pointer;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.label-color-indicator {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.label-picker-item .label-name {
|
||||
flex: 1;
|
||||
font-size: 0.875rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.label-system-badge {
|
||||
background-color: #e5e7eb;
|
||||
color: #6b7280;
|
||||
font-size: 0.625rem;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 0.25rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.label-picker-footer {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.label-picker-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.label-picker-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.label-picker-btn-cancel {
|
||||
background-color: #f3f4f6;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.label-picker-btn-cancel:hover:not(:disabled) {
|
||||
background-color: #e5e7eb;
|
||||
}
|
||||
|
||||
.label-picker-btn-save {
|
||||
background-color: #6366f1;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.label-picker-btn-save:hover:not(:disabled) {
|
||||
background-color: #4f46e5;
|
||||
}
|
||||
|
||||
/* Label Filter (for LibraryPage search filtering) */
|
||||
.label-filter-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.label-filter-toggle-btn {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.label-filter-toggle-btn:hover {
|
||||
background-color: #f9fafb;
|
||||
border-color: #6366f1;
|
||||
}
|
||||
|
||||
.label-filter-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.5rem);
|
||||
left: 0;
|
||||
min-width: 300px;
|
||||
max-width: 350px;
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
z-index: 1000;
|
||||
animation: dropdownSlideIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
.label-filter-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.label-filter-header h4 {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.clear-filters-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #6366f1;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
|
||||
.clear-filters-btn:hover {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.label-filter-list {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.label-filter-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
|
||||
.label-filter-item:hover {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.label-filter-item input[type='checkbox'] {
|
||||
cursor: pointer;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.label-filter-item .label-color-dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.label-filter-item .label-name {
|
||||
flex: 1;
|
||||
font-size: 0.875rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.label-filter-empty {
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
270
packages/web-vite/src/styles/LabelsPage.css
Normal file
270
packages/web-vite/src/styles/LabelsPage.css
Normal file
|
|
@ -0,0 +1,270 @@
|
|||
.labels-page {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.labels-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.labels-header h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.labels-loading,
|
||||
.labels-error,
|
||||
.labels-empty {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.labels-error {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* Notification Toast */
|
||||
.notification {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.notification-success {
|
||||
background-color: #10b981;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.notification-error {
|
||||
background-color: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Label Form */
|
||||
.label-form-card {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.label-form-card h2 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.form-group input[type='text'],
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: #6366f1;
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.color-input-group {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.color-input-group input[type='color'] {
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.color-input-group input[type='text'] {
|
||||
flex: 1;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: flex-end;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn-primary,
|
||||
.btn-secondary {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #6366f1;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background-color: #4f46e5;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #f3f4f6;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background-color: #e5e7eb;
|
||||
}
|
||||
|
||||
.btn-primary:disabled,
|
||||
.btn-secondary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
font-size: 1.25rem;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.btn-icon:hover:not(:disabled) {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.btn-icon:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
/* Labels Grid */
|
||||
.labels-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.label-card {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.label-card:hover {
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.label-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.label-name-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.label-color-dot {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.label-name {
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.label-badge {
|
||||
background-color: #e5e7eb;
|
||||
color: #6b7280;
|
||||
font-size: 0.75rem;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.label-actions {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.label-description {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
margin: 0.5rem 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.label-meta {
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.label-color-code {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
background-color: #f3f4f6;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
|
@ -130,7 +130,8 @@ export interface Label {
|
|||
id: string
|
||||
name: string
|
||||
color: string
|
||||
createdAt: string
|
||||
description?: string | null
|
||||
createdAt?: string
|
||||
}
|
||||
|
||||
export interface Highlight {
|
||||
|
|
@ -162,6 +163,37 @@ export interface LibraryItemsResponse extends PaginatedResponse<Article> {
|
|||
}
|
||||
}
|
||||
|
||||
export type LibraryItemState =
|
||||
| 'FAILED'
|
||||
| 'PROCESSING'
|
||||
| 'SUCCEEDED'
|
||||
| 'DELETED'
|
||||
| 'ARCHIVED'
|
||||
| 'CONTENT_NOT_FETCHED'
|
||||
|
||||
export interface LibraryItem {
|
||||
id: string
|
||||
title: string
|
||||
slug: string
|
||||
originalUrl: string
|
||||
author?: string | null
|
||||
description?: string | null
|
||||
savedAt: string
|
||||
createdAt: string
|
||||
publishedAt?: string | null
|
||||
readAt?: string | null
|
||||
updatedAt: string
|
||||
state: LibraryItemState
|
||||
contentReader: string
|
||||
folder: string
|
||||
labels?: Label[] | null
|
||||
}
|
||||
|
||||
export interface LibraryItemsConnection {
|
||||
items: LibraryItem[]
|
||||
nextCursor: string | null
|
||||
}
|
||||
|
||||
export interface Subscription {
|
||||
id: string
|
||||
name: string
|
||||
|
|
|
|||
Loading…
Reference in a new issue