Merged
Conversation
- 更新了内容库页面的结构，简化了状态管理和数据获取逻辑。 - 引入了新的组件，如 `ContentList`、`ContentCard` 和 `ContentPreview`，以提高代码的可重用性和可维护性。 - 增强了搜索和过滤功能，允许用户更方便地查找内容。 - 实现了 AI 分析卡片组件，展示内容的智能分析结果，提升用户体验。 - 进行了代码格式化和类型定义的改进，确保代码的一致性和清晰度。 这些更改显著提升了内容库的功能和用户交互体验。
- 修改了多个组件和测试文件中的路由路径，将 `/reader/${item.id}` 更新为 `/content-library/reader/${item.id}`，以确保一致性。
- 删除了不再使用的 `page.tsx` 文件，简化了代码结构。
这些更改确保了内容库的路由逻辑与新的页面结构相匹配，提升了代码的可维护性。
- 修改了 `ContentPreview` 组件的内边距，使其顶部间距更为一致。 - 优化了 `EnhancedLLMAnalysisSidebar` 组件的结构，确保推荐分析和自定义分析对话框的布局更加清晰。 这些更改提升了组件的视觉一致性和用户体验。
- 将 `ContentCard` 组件中的背景色从 `bg-primary/10` 修改为 `bg-transparent`，提升视觉效果。 - 移除了 `ContentPreview` 组件中的图标，简化了布局。 这些更改增强了组件的视觉一致性和用户体验。
- 将 `ClientContent` 组件中的某些绝对定位的样式修改为更灵活的布局，提升了响应式设计。 - 移除了不必要的分享按钮和弹窗，简化了用户界面。 - 调整了 `VirtualScrollRenderer` 组件的样式，去掉了多余的边框，增强了视觉效果。 这些更改提升了组件的可用性和用户体验。
- 在 `globals.css` 中添加了 `.no-scrollbar` 类，以完全隐藏滚动条，提升用户界面美观性。 - 在 `ContentLibraryPage` 中重构了页面布局，采用左右两栏设计，增强了内容展示的清晰度。 - 使用新的选择组件替代原有的下拉菜单，优化了状态和类型筛选功能的用户体验。 - 在 `ContentList` 组件中添加了分隔符，提升了内容卡片之间的视觉分隔效果。 这些更改提升了内容库页面的可用性和用户体验。
- 在 `globals.css` 中调整了侧边栏的颜色和宽度，增加了自定义宽度的变量。 - 在 `ContentLibraryPage` 中优化了左栏的布局，确保在不同屏幕尺寸下的适应性。 - 修改了 `ContentCard` 组件的样式，提升了内容卡片的视觉效果和一致性。 - 更新了 `MainLayout` 的背景样式，确保整体视觉风格统一。 - 调整了 `ProcessingStatusBadge` 组件的样式，简化了状态显示。 这些更改提升了内容库页面的可用性和视觉一致性。
- 在 `globals.css` 中添加了新的自定义宽度变量 `--size-card-title`，用于设置卡片标题的宽度。 - 修改了 `ContentCard` 组件，使用新的宽度变量来优化标题和摘要的样式。 - 在 `ContentList` 组件中调整了分隔符的样式，使其宽度与卡片标题一致，增强了视觉一致性。 这些更改提升了内容卡片的可读性和整体布局的美观性。
- 在 `globals.css` 中新增了多个自定义颜色变量，包括 Tailwind 的石头色和锌色调色板，以及 Notion 的颜色调色板，分别适用于浅色和深色主题。 - 这些更改提升了应用的视觉一致性，确保在不同主题下的颜色表现更加协调。
- 将 `IconCirclePlusFilled` 替换为 `IconCirclePlus`，以统一图标样式。 - 调整了 `SidebarHeader` 的内边距，增加了 `px-1`，提升了视觉效果。 - 优化了 `SidebarGroup` 的布局，确保主要导航和上传内容的清晰展示。 这些更改增强了侧边栏的可用性和视觉一致性。
- 在 `globals.css` 中调整了背景和前景颜色，使用新的自定义颜色变量，增强了视觉一致性。 - 修改了 `ContentLibraryPage` 中的侧边栏样式，确保其在不同屏幕尺寸下的适应性。 - 优化了 `AIAnalysisCard` 和 `ContentCard` 组件的样式，简化了布局，提升了用户体验。 - 更新了 `ContentPreview` 组件，调整了内边距和结构，增强了内容展示的清晰度。 这些更改提升了应用的整体可用性和视觉美观性。
- 从 `Providers` 组件中移除了 `ReactQueryDevtools`，以减少不必要的依赖和复杂性。 - 该更改有助于提升应用的性能和可维护性。
- 修改了 `ContentLibraryPage` 中的测试用例，确保点击“查看全文”按钮后正确导航到阅读页面。 - 在 `ContentCard` 组件中调整了点击处理逻辑，首次点击仅设置焦点，第二次点击通过按钮触发导航。 - 更新了 `ContentPreview` 组件，添加了键盘事件处理，确保无障碍访问。 这些更改提升了用户在内容库页面的交互体验和可用性。
- 在 `ContentList` 组件中引入了 `React`，以确保使用 `React.Fragment` 的正确性。 - 将原有的空标签替换为 `React.Fragment`，并为其添加了 `key` 属性，提升了组件的性能和可维护性。 这些更改增强了代码的清晰度和可读性。
- 在 `PreviewTransition.test.tsx` 中添加了对 `PreviewTransition` 组件的测试，确保在切换面板时旧面板在 DOM 中保持可见，直到动画结束。 - 更新了 `ContentLibraryPage` 和 `ContentPreview` 组件的样式，调整了布局以提升用户体验和视觉效果。 这些更改增强了组件的可测试性和用户交互体验。
- 在 `openapi.json` 中添加了多个 API 路径和响应结构，确保文档的完整性和准确性。 - 在 `ContentLibraryPage` 和相关组件中调整了导入语句和样式，提升了代码的可读性和一致性。 - 更新了 `ContentCard` 和 `ContentList` 组件的样式，确保在不同屏幕尺寸下的适应性。 这些更改增强了 API 文档的可用性和组件的用户体验。
- 在 `page.test.tsx` 中添加了对 `scrollTo` 函数的模拟，确保测试环境的稳定性。 - 移除了搜索功能和过滤控件的相关测试，反映了功能的实际变更。 - 删除了 `PreviewTransition.test.tsx` 文件，移除了不再需要的测试用例。 这些更改提升了测试的准确性和代码的整洁性。
- 从 `index.ts` 文件中删除了对 `types` 和 `utils` 的导入，反映了代码的实际需求。 - 该更改有助于提升代码的整洁性和可维护性。
- 修改了 `package.json` 中的 `generate-client` 命令，添加了删除 `index.ts` 文件中对 `types` 和 `utils` 的导入的操作。 - 该更改有助于保持代码的整洁性，确保生成的客户端代码反映实际需求。
- 以远程传入分支的样式设计为主 - 保持了远程分支的简洁设计风格 - 合并了本地的功能增强 - 优化了页面布局和交互体验 - 修复了组件间的样式冲突 - 统一了状态处理逻辑
- Removed unused imports and mock functions from tests to streamline code. - Updated the content library page to improve layout and user experience. - Enhanced AI analysis handling by refining data structures and rendering logic. - Simplified state management for better performance and maintainability. - Adjusted CSS styles for consistency across components, ensuring a cohesive design. - Fixed issues with content rendering and improved loading states for better user feedback.
Contributor
|
Caution Review failedThe pull request is closed. WalkthroughThis change introduces a major refactor and redesign of the content library feature. It adds new modular React components, updates data structures and test cases, revises UI styling with expanded CSS palettes, and removes or simplifies authentication and sharing logic. The content library page is now implemented as a two-pane layout with dedicated components for listing, previewing, and analyzing content. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ContentList
participant ContentPreview
participant useContentItems
participant SSE
participant API
User->>ContentList: Clicks on content card
ContentList->>useContentItems: onSelect(item)
useContentItems->>ContentPreview: Updates selected item
ContentPreview->>User: Shows preview panel
Note over useContentItems, SSE: On mount, subscribe to SSE for content updates
SSE-->>useContentItems: Push status updates or new items
useContentItems->>ContentList: Updates content list
User->>ContentPreview: Clicks "View Full Text"
ContentPreview->>User: Navigates to reader page
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (6)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR refactors and enhances several UI components and utilities in the content library frontend, and updates tests and the client generation script to remove unnecessary imports. Key changes include:
- Adjustments in notification status handling and component styling (e.g. in useGlobalNotificationStore, ProcessingStatusBadge, and PromptRecommendations).
- Significant layout refinements in components such as EnhancedLLMAnalysisSidebar, ClientContent, and AppSidebar.
- Updates to tests reflecting removed search and filter functionality, and improvements in the client generation script.
Reviewed Changes
Copilot reviewed 22 out of 24 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| frontend/lib/stores/useGlobalNotificationStore.ts | Changed notification status from "failed" to "error" to align with revised API responses. |
| frontend/components/ui/prompt-recommendations.tsx | Updated layout from grid to flex with adjustments in the loading indicator; commented out loader code remains. |
| frontend/components/ui/ProcessingStatusBadge.tsx | Modified default showText value and refined icon sizing with an explicit mapping. |
| frontend/app/content-library/reader/[id]/ClientContent.tsx | Renamed and refactored content renderer from OptimizedContentRenderer to ProcessedContentRenderer and updated header layout. |
| admin/package.json | Enhanced generate-client script to automatically remove unnecessary imports from the generated client file. |
Comments suppressed due to low confidence (3)
frontend/components/ui/ProcessingStatusBadge.tsx:81
- [nitpick] Review the default change of showText from true to false to ensure the behavior of the status badge matches the intended UI design.
showText = false,
frontend/app/content-library/reader/[id]/ClientContent.tsx:259
- The renaming from 'OptimizedContentRenderer' to 'ProcessedContentRenderer' should be reviewed to ensure all references and documentation are updated consistently across the codebase.
ProcessedContentRenderer.displayName = "ProcessedContentRenderer";
frontend/lib/stores/useGlobalNotificationStore.ts:308
- Ensure that changing the notification status from 'failed' to 'error' is consistent with the API responses and overall notification handling logic throughout the application.
} else if (evt.status === "error") {
Comment on lines
+64
to
+71
| {/* {isGenerating && ( | ||
| <div className="mt-4 p-3 bg-primary/5 border border-primary/20 rounded-lg"> | ||
| <div className="flex items-center gap-2 text-sm text-primary"> | ||
| <Loader2 className="h-4 w-4 animate-spin" /> | ||
| <span className="font-medium">正在生成 AI 分析...</span> | ||
| </div> | ||
| </div> | ||
| )} | ||
| )} */} |
There was a problem hiding this comment.
[nitpick] Consider removing the commented-out isGenerating loading indicator block if it is no longer needed, to maintain a clean and concise codebase.
CI Feedback 🧐(Feedback updated until commit 9957f5c)A test triggered by this PR failed. Here is an AI-generated analysis of the failure:
|
PR Reviewer Guide 🔍Here are some key observations to aid the review process:
|
PR Code Suggestions ✨Explore these optional code suggestions:
|
||||||||||||||||
Contributor
There was a problem hiding this comment.
Actionable comments posted: 15
🔭 Outside diff range comments (1)
frontend/app/content-library/reader/[id]/ClientContent.tsx (1)
107-120: Remove dead code instead of hiding itThese UI elements are hidden with the
hiddenclass but still included in the bundle. Remove them entirely if they're no longer needed.- {/* 内容类型指示器（隐藏） */} - <div className="hidden"> - <div className="flex items-center justify-between p-3"> - <div className="flex items-center gap-2"> - <div className="w-2 h-2 rounded-full bg-green-500"></div> - <span className="text-sm font-medium text-green-800 dark:text-green-200"> - AI 处理版本 - </span> - </div> - <div className="flex items-center gap-2 text-xs text-green-600 dark:text-green-400"> - <FileText className="h-3 w-3" /> - <span>智能分段显示</span> - </div> - </div> - </div>Also applies to: 223-236
🧹 Nitpick comments (8)
admin/package.json (1)
14-14: Consider cross-platform compatibility for the sed command.The current
sed -iapproach may behave differently on macOS and Linux systems. The-iflag requires different syntax on macOS (needs backup extension).Consider a more robust post-processing approach:
- "generate-client": "openapi-ts && sed -i -e '/from \".\\/types\"/d' -e '/from \".\\/utils\"/d' src/client/index.ts" + "generate-client": "openapi-ts && node -e \"const fs=require('fs'); const file='src/client/index.ts'; const content=fs.readFileSync(file,'utf8').replace(/^.*from \\\"\\.\\/(?:types|utils)\\\".*$/gm,''); fs.writeFileSync(file,content);\""This Node.js approach is more portable and doesn't rely on platform-specific sed behavior.
frontend/app/content-library/components/ContentCard.tsx (2)
49-49: Remove redundant key propThe
keyprop is unnecessary here since this Card component is not being rendered within a list context. Keys are only needed for list items.- key={item.id}
72-75: Consider internationalization for fallback textThe hardcoded Chinese fallback texts ("无标题" and "暂无摘要") should be internationalized to support multiple languages.
Consider using an i18n library or defining these strings as constants that can be easily localized:
- {item.title || "无标题"} + {item.title || t("content.untitled")}- {item.summary || "暂无摘要"} + {item.summary || t("content.noSummary")}frontend/app/content-library/page.tsx (1)
62-62: Consider internationalization for empty state textThe hardcoded Chinese text "暂无内容" should be internationalized for multi-language support.
- <div className="text-center py-12">暂无内容</div> + <div className="text-center py-12">{t("content.noContent")}</div>frontend/app/content-library/hooks/useContentItems.ts (1)
13-23: Consider using a memoized debounce implementationThe current debounce implementation creates a new closure on each render. Consider memoizing it or using a well-tested library like lodash's debounce for better performance and reliability.
-// 简单的防抖 -function debounce<T extends (...args: never[]) => void>( - func: T, - delay: number, -) { - let timeoutId: NodeJS.Timeout; - return (...args: Parameters<T>) => { - clearTimeout(timeoutId); - timeoutId = setTimeout(() => func(...args), delay); - }; -} +import { debounce } from 'lodash-es';frontend/app/content-library/components/AIAnalysisCard.tsx (1)
29-39: Simplify complex preview extraction logicThe nested conditionals for preview extraction are hard to follow. Consider extracting to a helper function.
const extractPreview = (content: unknown): string | null => { if (typeof content === 'string') return content; if (typeof content === 'object' && content !== null) { const obj = content as Record<string, unknown>; // Try common fields in order of preference const fields = ['analysis_result', 'raw_text']; for (const field of fields) { if (typeof obj[field] === 'string') { return obj[field] as string; } } // Fallback to JSON string return JSON.stringify(content).substring(0, PREVIEW_MAX_LENGTH); } return null; };frontend/app/content-library/reader/[id]/ClientContent.tsx (1)
89-259: Consider extracting ProcessedContentRenderer to a separate fileThe
ProcessedContentRenderercomponent is substantial enough to warrant its own file. This would improve code organization and make the main component more focused.frontend/app/content-library/components/ContentPreview.tsx (1)
86-89: Add error handling for focus operation.The focus operation might fail if the element is not focusable or not in the DOM yet. Consider adding error handling.
useEffect(() => { containerRef.current?.scrollTo({ top: 0 }); - containerRef.current?.focus?.(); + try { + containerRef.current?.focus?.(); + } catch (error) { + console.warn('Failed to focus container:', error); + } }, []);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (24)
admin/package.json(1 hunks)frontend/__tests__/app/content-library/page.test.tsx(5 hunks)frontend/app/content-library/components/AIAnalysisCard.tsx(1 hunks)frontend/app/content-library/components/ContentCard.tsx(1 hunks)frontend/app/content-library/components/ContentList.tsx(1 hunks)frontend/app/content-library/components/ContentPreview.tsx(1 hunks)frontend/app/content-library/components/LibraryHeader.tsx(1 hunks)frontend/app/content-library/hooks/useContentItems.ts(1 hunks)frontend/app/content-library/page.tsx(2 hunks)frontend/app/content-library/reader/[id]/ClientContent.tsx(7 hunks)frontend/app/content-library/types.ts(1 hunks)frontend/app/content-library/utils/ripple.ts(1 hunks)frontend/app/globals.css(8 hunks)frontend/app/providers.tsx(0 hunks)frontend/components/ai/ContentAnalysisSidebar.tsx(0 hunks)frontend/components/layout/AppSidebar.tsx(3 hunks)frontend/components/layout/MainLayout.tsx(2 hunks)frontend/components/layout/ReaderLayout.tsx(1 hunks)frontend/components/ui/ProcessingStatusBadge.tsx(3 hunks)frontend/components/ui/VirtualScrollRenderer.tsx(2 hunks)frontend/components/ui/enhanced-llm-analysis-sidebar.tsx(3 hunks)frontend/components/ui/llm-analysis-card.tsx(1 hunks)frontend/components/ui/prompt-recommendations.tsx(3 hunks)frontend/lib/stores/useGlobalNotificationStore.ts(1 hunks)
💤 Files with no reviewable changes (2)
- frontend/components/ai/ContentAnalysisSidebar.tsx
- frontend/app/providers.tsx
🧰 Additional context used
📓 Path-based instructions (5)
`**/*.{ts,tsx,js,jsx}`: Always import modules using the defined path aliases (e.g., '@/ui', '@/features', '@/lib') instead of relative paths. Do not use inline styles (no style= or...
**/*.{ts,tsx,js,jsx}: Always import modules using the defined path aliases (e.g., '@/ui', '@/features', '@/lib') instead of relative paths.
Do not use inline styles (no style= or style={{…}}); use Tailwind utilities or @apply in token CSS.
frontend/components/layout/ReaderLayout.tsxfrontend/components/ui/llm-analysis-card.tsxfrontend/app/content-library/components/LibraryHeader.tsxfrontend/components/ui/prompt-recommendations.tsxfrontend/components/ui/VirtualScrollRenderer.tsxfrontend/lib/stores/useGlobalNotificationStore.tsfrontend/app/content-library/utils/ripple.tsfrontend/app/content-library/components/ContentCard.tsxfrontend/components/layout/MainLayout.tsxfrontend/app/content-library/types.tsfrontend/components/layout/AppSidebar.tsxfrontend/app/content-library/components/ContentList.tsxfrontend/app/content-library/components/AIAnalysisCard.tsxfrontend/components/ui/enhanced-llm-analysis-sidebar.tsxfrontend/app/content-library/hooks/useContentItems.tsfrontend/__tests__/app/content-library/page.test.tsxfrontend/app/content-library/reader/[id]/ClientContent.tsxfrontend/app/content-library/components/ContentPreview.tsxfrontend/app/content-library/page.tsxfrontend/components/ui/ProcessingStatusBadge.tsx
`frontend/components/ui/**/*`: Design-system components must reside in this directory; always compose from here first before creating new UI elements.
frontend/components/ui/**/*: Design-system components must reside in this directory; always compose from here first before creating new UI elements.
frontend/components/ui/llm-analysis-card.tsxfrontend/components/ui/prompt-recommendations.tsxfrontend/components/ui/VirtualScrollRenderer.tsxfrontend/components/ui/enhanced-llm-analysis-sidebar.tsxfrontend/components/ui/ProcessingStatusBadge.tsx
`frontend/lib/**/*`: Utilities, i18n, and helpers must be placed in this directory.
frontend/lib/**/*: Utilities, i18n, and helpers must be placed in this directory.
frontend/lib/stores/useGlobalNotificationStore.ts
`frontend/app/globals.css`: All token CSS (colors, spacing, fonts, radii, shadows) must originate from this file; do not define visual, typographic, motion, or layout rules elsewhe...
frontend/app/globals.css: All token CSS (colors, spacing, fonts, radii, shadows) must originate from this file; do not define visual, typographic, motion, or layout rules elsewhere.
frontend/app/globals.css
`**/*.{css,scss}`: Do not create new .css or .scss files; all styling must be handled via token CSS and Tailwind utilities.
**/*.{css,scss}: Do not create new .css or .scss files; all styling must be handled via token CSS and Tailwind utilities.
frontend/app/globals.css
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: test-playwright (2, 4)
- GitHub Check: test-playwright (3, 4)
- GitHub Check: test-playwright (1, 4)
- GitHub Check: test-playwright (4, 4)
- GitHub Check: test-backend
- GitHub Check: test-docker-compose
🔇 Additional comments (21)
frontend/app/content-library/types.ts (1)
1-30: Well-structured interface with proper typing.The
ContentItemPublicinterface demonstrates good TypeScript practices with:
- Appropriate use of optional (
?) and nullable (| null) fields- Logical nesting for AI analysis data
- Extensible design with the index signature on line 28
- Clear separation of core content metadata and optional AI analysis results
frontend/app/globals.css (1)
28-29: Comprehensive design system expansion follows coding guidelines.The extensive additions properly centralize all styling tokens in
globals.cssas required by the coding guidelines. Key improvements include:
- Comprehensive color palettes (Tailwind v4, Notion, macOS, Linear)
- Custom layout tokens for the content library (
--size-library,--size-library-card)- Utility classes for the new UI components
- Proper organization with clear section comments
The changes support the content library redesign while maintaining a cohesive design system.
Also applies to: 56-56, 68-68, 73-76, 78-167, 207-297, 397-397, 694-704, 760-852, 998-1003
frontend/components/layout/ReaderLayout.tsx (1)
121-122: Layout improvements enhance usability and visual separation.The changes improve the reader layout:
- Increasing
maxSizefrom 60% to 70% provides more flexibility for the analysis panel- Adding
bg-muted/30creates subtle visual separation between panelsBoth changes follow the coding guidelines for using Tailwind utilities.
frontend/components/ui/llm-analysis-card.tsx (1)
265-269: LGTM: Clean UI simplification with preserved loading feedback.The removal of the redundant loading indicator text improves the user experience by reducing visual clutter. The streaming content section still provides adequate loading feedback with the "正在生成..." text and animated cursor, maintaining user awareness of the ongoing process.
frontend/app/content-library/components/LibraryHeader.tsx (1)
1-12: LGTM: Well-structured header component.The component follows React and TypeScript best practices with proper typing, clean JSX structure, and appropriate Tailwind utility classes. The implementation is straightforward and serves its purpose effectively.
frontend/lib/stores/useGlobalNotificationStore.ts (1)
308-308: LGTM: Improved status handling consistency.The change from
"failed"to"error"improves consistency with the error status handling used throughout the same method and aligns with standard error naming conventions.frontend/components/ui/VirtualScrollRenderer.tsx (2)
264-264: LGTM: Clean container styling.The removal of border and background classes simplifies the visual presentation while maintaining all functional aspects of the virtual scroll container.
339-339: LGTM: Simplified chunk item styling.The styling simplification removes visual clutter from individual chunk items, creating a cleaner reading experience while preserving all content functionality.
frontend/components/ui/prompt-recommendations.tsx (3)
29-29: LGTM: Improved layout for better space utilization.The change to a horizontal scrollable flex container is more space-efficient and provides better UX for browsing multiple prompt recommendations.
40-40: LGTM: Modern button styling with proper interaction states.The updated styling with
rounded-xl,w-fit, andshrink-0creates a more modern appearance while maintaining proper hover states and accessibility. The removal of borders creates a cleaner interface.
64-71: LGTM: Removed redundant loading indicator.Commenting out the global loading indicator reduces visual clutter while maintaining per-button loading feedback through the inline loader icons. This provides cleaner UX with adequate loading state communication.
frontend/components/layout/MainLayout.tsx (1)
8-45: Clean removal of authentication logicThe authentication-related code has been cleanly removed from the MainLayout component, aligning with the PR's objective to simplify the UI. The component structure remains valid and maintains proper sidebar integration.
frontend/components/layout/AppSidebar.tsx (1)
8-149: Well-structured sidebar simplificationThe changes effectively simplify the sidebar by:
- Using a non-filled icon variant for consistency
- Merging the upload button with main navigation for a cleaner structure
- Maintaining proper accessibility with tooltip support
frontend/app/content-library/page.tsx (1)
10-83: Excellent refactoring to modular architectureThe refactoring successfully:
- Delegates state management to a custom hook
- Implements a clean two-pane layout
- Provides proper loading and error states
- Improves code maintainability and testability
This is a significant improvement in code organization.
frontend/__tests__/app/content-library/page.test.tsx (2)
122-134: LGTM! Test correctly verifies search removalThe test has been properly updated to verify that search functionality has been removed from the UI.
136-158: Well-structured test for two-step navigationThe test correctly verifies the new two-step navigation flow where clicking the content card sets focus and the "查看全文" button triggers navigation.
frontend/components/ui/ProcessingStatusBadge.tsx (1)
33-55: Consistent neutral styling appliedGood refactoring to use consistent neutral colors across all statuses, aligning with the simplified UI theme.
frontend/app/content-library/reader/[id]/ClientContent.tsx (1)
498-540: Clean implementation of simplified reader UIThe refactored header and content layout is clean and focused. Good job removing unnecessary complexity while maintaining core functionality.
frontend/app/content-library/components/ContentPreview.tsx (1)
82-189: Well-structured component with good accessibility support.The PanelContent component is well-designed with proper keyboard navigation support and clean separation of concerns. The animation implementation using framer-motion is appropriate for the use case.
frontend/components/ui/enhanced-llm-analysis-sidebar.tsx (2)
366-375: Clean header implementation.The simplified header design with just the title and history reload button provides a cleaner user interface while maintaining essential functionality.
55-482: Successful simplification of the LLM analysis sidebar.The refactoring effectively simplifies the component by removing unused features (tabs, embedded mode) while preserving all core functionality for AI analysis. The code is cleaner and more maintainable.
Comment on lines
+1
to
+29
| export const createRipple = (event: React.MouseEvent<HTMLElement>) => { | ||
| const button = event.currentTarget; | ||
| const rect = button.getBoundingClientRect(); | ||
| const size = Math.max(rect.width, rect.height); | ||
| const x = event.clientX - rect.left - size / 2; | ||
| const y = event.clientY - rect.top - size / 2; | ||
|
|
||
| const ripple = document.createElement("span"); | ||
| ripple.style.cssText = ` | ||
| position: absolute; | ||
| border-radius: 50%; | ||
| background: rgba(var(--primary), 0.3); | ||
| transform: scale(0); | ||
| animation: ripple 0.6s linear; | ||
| left: ${x}px; | ||
| top: ${y}px; | ||
| width: ${size}px; | ||
| height: ${size}px; | ||
| pointer-events: none; | ||
| `; | ||
|
|
||
| button.style.position = "relative"; | ||
| button.style.overflow = "hidden"; | ||
| button.appendChild(ripple); | ||
|
|
||
| setTimeout(() => { | ||
| ripple.remove(); | ||
| }, 600); | ||
| }; |
Contributor
There was a problem hiding this comment.
Violation: Avoid inline styles - use Tailwind utilities instead.
This implementation violates the coding guideline that prohibits inline styles. The cssText approach on lines 9-20 is essentially inline styling, and direct DOM manipulation can interfere with React's virtual DOM.
Consider refactoring to use CSS classes and data attributes:
export const createRipple = (event: React.MouseEvent<HTMLElement>) => {
const button = event.currentTarget;
const rect = button.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
const x = event.clientX - rect.left - size / 2;
const y = event.clientY - rect.top - size / 2;
const ripple = document.createElement("span");
- ripple.style.cssText = `
- position: absolute;
- border-radius: 50%;
- background: rgba(var(--primary), 0.3);
- transform: scale(0);
- animation: ripple 0.6s linear;
- left: ${x}px;
- top: ${y}px;
- width: ${size}px;
- height: ${size}px;
- pointer-events: none;
- `;
+ ripple.className = "absolute rounded-full bg-primary/30 animate-[ripple_0.6s_linear] pointer-events-none transform scale-0";
+ ripple.style.left = `${x}px`;
+ ripple.style.top = `${y}px`;
+ ripple.style.width = `${size}px`;
+ ripple.style.height = `${size}px`;
- button.style.position = "relative";
- button.style.overflow = "hidden";
+ if (!button.classList.contains('relative')) button.classList.add('relative');
+ if (!button.classList.contains('overflow-hidden')) button.classList.add('overflow-hidden');This approach uses Tailwind utilities while minimizing inline styles to only the dynamic positioning values.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| export const createRipple = (event: React.MouseEvent<HTMLElement>) => { | |
| const button = event.currentTarget; | |
| const rect = button.getBoundingClientRect(); | |
| const size = Math.max(rect.width, rect.height); | |
| const x = event.clientX - rect.left - size / 2; | |
| const y = event.clientY - rect.top - size / 2; | |
| const ripple = document.createElement("span"); | |
| ripple.style.cssText = ` | |
| position: absolute; | |
| border-radius: 50%; | |
| background: rgba(var(--primary), 0.3); | |
| transform: scale(0); | |
| animation: ripple 0.6s linear; | |
| left: ${x}px; | |
| top: ${y}px; | |
| width: ${size}px; | |
| height: ${size}px; | |
| pointer-events: none; | |
| `; | |
| button.style.position = "relative"; | |
| button.style.overflow = "hidden"; | |
| button.appendChild(ripple); | |
| setTimeout(() => { | |
| ripple.remove(); | |
| }, 600); | |
| }; | |
| export const createRipple = (event: React.MouseEvent<HTMLElement>) => { | |
| const button = event.currentTarget; | |
| const rect = button.getBoundingClientRect(); | |
| const size = Math.max(rect.width, rect.height); | |
| const x = event.clientX - rect.left - size / 2; | |
| const y = event.clientY - rect.top - size / 2; | |
| const ripple = document.createElement("span"); | |
| ripple.className = "absolute rounded-full bg-primary/30 animate-[ripple_0.6s_linear] pointer-events-none transform scale-0"; | |
| ripple.style.left = `${x}px`; | |
| ripple.style.top = `${y}px`; | |
| ripple.style.width = `${size}px`; | |
| ripple.style.height = `${size}px`; | |
| if (!button.classList.contains("relative")) { | |
| button.classList.add("relative"); | |
| } | |
| if (!button.classList.contains("overflow-hidden")) { | |
| button.classList.add("overflow-hidden"); | |
| } | |
| button.appendChild(ripple); | |
| setTimeout(() => { | |
| ripple.remove(); | |
| }, 600); | |
| }; |
🤖 Prompt for AI Agents
In frontend/app/content-library/utils/ripple.ts lines 1 to 29, the ripple effect
is implemented using inline styles via cssText, which violates the guideline
against inline styling and direct DOM manipulation in React. Refactor by
defining the ripple styles as Tailwind CSS classes in a stylesheet or component,
then apply these classes to the ripple element. Use data attributes or inline
styles only for dynamic properties like left, top, width, and height to position
the ripple correctly. This keeps styling consistent with Tailwind and reduces
direct DOM style manipulation.
Comment on lines
+9
to
+10
| import { createRipple } from "../utils/ripple"; | ||
| import type { ContentItemPublic } from "../types"; |
Contributor
There was a problem hiding this comment.
Use path aliases instead of relative imports
Replace relative imports with defined path aliases to maintain consistency with the coding guidelines.
-import { createRipple } from "../utils/ripple";
-import type { ContentItemPublic } from "../types";
+import { createRipple } from "@/app/content-library/utils/ripple";
+import type { ContentItemPublic } from "@/app/content-library/types";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| import { createRipple } from "../utils/ripple"; | |
| import type { ContentItemPublic } from "../types"; | |
| -import { createRipple } from "../utils/ripple"; | |
| -import type { ContentItemPublic } from "../types"; | |
| +import { createRipple } from "@/app/content-library/utils/ripple"; | |
| +import type { ContentItemPublic } from "@/app/content-library/types"; |
🤖 Prompt for AI Agents
In frontend/app/content-library/components/ContentCard.tsx at lines 9 to 10,
replace the relative import paths for createRipple and ContentItemPublic with
the appropriate path aliases defined in the project configuration. This ensures
consistency with the coding guidelines by using standardized import paths
instead of relative ones.
Comment on lines
+34
to
+37
| <Separator | ||
| className="ml-[3.25rem]" | ||
| style={{ width: "calc(var(--size-card-title) - 0.5rem)" }} | ||
| /> |
Contributor
There was a problem hiding this comment.
Avoid inline styles
The inline style violates the coding guidelines. Use Tailwind utilities or CSS custom properties instead.
Consider using a Tailwind class or defining this width in your CSS:
<Separator
className="ml-[3.25rem]"
- style={{ width: "calc(var(--size-card-title) - 0.5rem)" }}
+ className="ml-[3.25rem] w-[calc(var(--size-card-title)-0.5rem)]"
/>Or define a custom CSS class:
.separator-custom-width {
width: calc(var(--size-card-title) - 0.5rem);
}🤖 Prompt for AI Agents
In frontend/app/content-library/components/ContentList.tsx around lines 34 to
37, the Separator component uses an inline style for width, which violates
coding guidelines. Remove the inline style and instead create a CSS class that
sets the width to "calc(var(--size-card-title) - 0.5rem)" or use an appropriate
Tailwind utility if available. Then apply this CSS class to the Separator
component via the className prop.
Comment on lines
+3
to
+4
| import type { ContentItemPublic } from "../types"; | ||
| import { ContentCard } from "./ContentCard"; |
Contributor
There was a problem hiding this comment.
Use path aliases instead of relative imports
Replace relative imports with defined path aliases for consistency.
-import type { ContentItemPublic } from "../types";
-import { ContentCard } from "./ContentCard";
+import type { ContentItemPublic } from "@/app/content-library/types";
+import { ContentCard } from "@/app/content-library/components/ContentCard";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| import type { ContentItemPublic } from "../types"; | |
| import { ContentCard } from "./ContentCard"; | |
| import type { ContentItemPublic } from "@/app/content-library/types"; | |
| import { ContentCard } from "@/app/content-library/components/ContentCard"; |
🤖 Prompt for AI Agents
In frontend/app/content-library/components/ContentList.tsx at lines 3 to 4,
replace the relative import paths with the appropriate path aliases defined in
the project configuration. Update the import statements for ContentItemPublic
and ContentCard to use these aliases instead of relative paths to ensure
consistency across the codebase.
Comment on lines
+6
to
+8
| import { ContentList } from "./components/ContentList"; | ||
| import { ContentPreview } from "./components/ContentPreview"; | ||
| import { useContentItems } from "./hooks/useContentItems"; |
Contributor
There was a problem hiding this comment.
Use path aliases instead of relative imports
Replace relative imports with defined path aliases to maintain consistency.
-import { ContentList } from "./components/ContentList";
-import { ContentPreview } from "./components/ContentPreview";
-import { useContentItems } from "./hooks/useContentItems";
+import { ContentList } from "@/app/content-library/components/ContentList";
+import { ContentPreview } from "@/app/content-library/components/ContentPreview";
+import { useContentItems } from "@/app/content-library/hooks/useContentItems";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| import { ContentList } from "./components/ContentList"; | |
| import { ContentPreview } from "./components/ContentPreview"; | |
| import { useContentItems } from "./hooks/useContentItems"; | |
| import { ContentList } from "@/app/content-library/components/ContentList"; | |
| import { ContentPreview } from "@/app/content-library/components/ContentPreview"; | |
| import { useContentItems } from "@/app/content-library/hooks/useContentItems"; |
🤖 Prompt for AI Agents
In frontend/app/content-library/page.tsx around lines 6 to 8, replace the
relative import paths for ContentList, ContentPreview, and useContentItems with
their corresponding path aliases as defined in the project's configuration. This
will ensure consistency and easier maintenance of import statements.
Comment on lines
+51
to
+52
| {typeof preview === "string" | ||
| ? preview.substring(0, 150) + "..." |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion
Extract magic number to a constant
The 150 character limit is repeated multiple times. Extract it to a named constant for better maintainability.
+const PREVIEW_MAX_LENGTH = 150;
+
interface Props {
analysis: ContentItemPublic["ai_analysis"];
}
// Then replace all occurrences:
- ? preview.substring(0, 150) + "..."
+ ? preview.substring(0, PREVIEW_MAX_LENGTH) + "..."Also applies to: 80-81, 115-116
🤖 Prompt for AI Agents
In frontend/app/content-library/components/AIAnalysisCard.tsx around lines
51-52, 80-81, and 115-116, the character limit 150 is used directly as a magic
number multiple times. Define a named constant at the top of the file, such as
PREVIEW_CHAR_LIMIT = 150, and replace all occurrences of the number 150 with
this constant to improve maintainability and readability.
Comment on lines
+15
to
+16
| let panelIdCounter = 0; | ||
|
|
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion
Avoid global mutable state for panel ID counter.
Using a global variable for the counter can cause issues in concurrent scenarios or when multiple instances of this component exist. Consider using a more robust ID generation approach.
-let panelIdCounter = 0;
+import { useId } from "react";Then use React's useId hook or a timestamp-based approach within the component:
const baseId = useId();
// Or use: Date.now() + Math.random()🤖 Prompt for AI Agents
In frontend/app/content-library/components/ContentPreview.tsx around lines 15 to
16, avoid using the global mutable variable panelIdCounter for generating IDs as
it can cause conflicts in concurrent or multiple component instances. Instead,
remove the global variable and generate unique IDs inside the component using
React's useId hook or a combination of Date.now() and Math.random() to ensure
uniqueness and avoid shared mutable state.
|
|
||
| import { FileText } from "lucide-react"; | ||
| import { useRouter } from "next/navigation"; | ||
| import { AIAnalysisCard } from "./AIAnalysisCard"; |
Contributor
There was a problem hiding this comment.
Use path aliases instead of relative imports.
According to the coding guidelines, always import modules using defined path aliases instead of relative paths.
-import { AIAnalysisCard } from "./AIAnalysisCard";
+import { AIAnalysisCard } from "@/app/content-library/components/AIAnalysisCard";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| import { AIAnalysisCard } from "./AIAnalysisCard"; | |
| -import { AIAnalysisCard } from "./AIAnalysisCard"; | |
| +import { AIAnalysisCard } from "@/app/content-library/components/AIAnalysisCard"; |
🤖 Prompt for AI Agents
In frontend/app/content-library/components/ContentPreview.tsx at line 5, replace
the relative import of AIAnalysisCard with the appropriate path alias as defined
in the project's configuration. Identify the correct alias for the
content-library components and update the import statement to use that alias
instead of the relative path.
Comment on lines
+56
to
+57
| // 采用远程分支的设计：固定为analysis视图，简化组件 | ||
| const activeTab = "analysis" as const; |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion
Remove redundant Tabs component since activeTab is fixed.
The component has been simplified to always show the "analysis" view, but still uses the Tabs component structure which is now redundant. This adds unnecessary DOM elements and complexity.
Remove the Tabs wrapper and directly render the content:
- const activeTab = "analysis" as const;And simplify the content rendering:
- <Tabs value={activeTab} className="h-full">
- {/* 分析标签页 */}
- <TabsContent value="analysis" className="h-full mt-0">
<div className="p-4 space-y-4">
{/* existing content */}
</div>
- </TabsContent>
- </Tabs>Also applies to: 379-454
🤖 Prompt for AI Agents
In frontend/components/ui/enhanced-llm-analysis-sidebar.tsx around lines 56-57
and also lines 379-454, the Tabs component is redundant because activeTab is
fixed to "analysis". Remove the Tabs wrapper entirely and directly render the
content for the "analysis" view to simplify the DOM structure and reduce
complexity.
- Introduced item hover and click handling to improve interaction with content cards. - Updated the content preview to display AI analysis results, including summaries and key points. - Added new fields to the ContentItemPublic type for better AI result handling. - Refactored components for improved state management and layout consistency. - Enhanced loading states and error handling for a smoother user experience. - Implemented star rating and difficulty level indicators in content cards for better content assessment.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
User description
This pull request introduces significant changes to the content library's frontend, including new components for improved UI functionality, updates to tests, and modifications to the client generation script. The most important changes focus on enhancing the user experience with new components and refactoring existing functionality.
New Components and Features:
AIAnalysisCardComponent: Added a new component to display AI analysis results, including summaries and key points, with a structured and visually appealing layout.ContentCardComponent: Introduced a card-based UI for displaying content items with support for selection, prefetching, and ripple effects.ContentListComponent: Created a list component to renderContentCarditems with separators for better organization.ContentPreviewComponent: Added a preview panel for content items, supporting animations and detailed views, including AI analysis and metadata.LibraryHeaderComponent: Added a header component for the content library with a simple title.Test Updates:
getCookie,sonner, andutils) and updated test cases to reflect the removal of search and filter functionalities. [1] [2] [3] [4] [5]Script Update:
generate-clientscript inadmin/package.jsonto include asedcommand for cleaning up unnecessary imports in the generated client file.PR Type
Enhancement, Tests, Bug fix
Description
• Major UI Overhaul: Complete redesign of the content library with new card-based layout, animated preview panels, and simplified two-column interface
• New Component System: Added
ContentCard,ContentList,ContentPreview,AIAnalysisCard, andLibraryHeadercomponents for improved user experience• Enhanced State Management: Introduced comprehensive
useContentItemshook with content fetching, filtering, search, and real-time SSE updates• Design System Expansion: Added extensive color palettes (Linear, Notion, macOS) and CSS variables for consistent theming
• UI Simplification: Removed authentication UI from main layout, simplified LLM analysis sidebar, and streamlined content reader interface
• Interactive Enhancements: Added Material Design ripple effects utility and improved visual feedback across components
• Bug Fix: Corrected notification status check from "failed" to "error" for proper error handling
• Test Updates: Updated test suite to match new simplified component structure and removed unused dependency mocks
• Configuration: Enhanced client generation script with automatic import cleanup
Changes walkthrough 📝
18 files
useContentItems.ts
Add comprehensive content library state management hookfrontend/app/content-library/hooks/useContentItems.ts
• Added comprehensive custom hook for managing content library state
and operations
• Implements content fetching, filtering, search, and
real-time updates via SSE
• Includes prefetching functionality for
performance optimization
• Manages navigation state persistence and
scroll position restoration
ripple.ts
Add ripple effect utility for UI interactionsfrontend/app/content-library/utils/ripple.ts
• Added utility function to create Material Design-style ripple
effects
• Implements click animation with CSS-in-JS styling
• Provides
visual feedback for interactive elements
types.ts
Add TypeScript type definitions for content libraryfrontend/app/content-library/types.ts
• Defined TypeScript interfaces for content library data structures
•
Includes
ContentItemPublicinterface with AI analysis structure•
Provides type safety for content items and AI processing results
globals.css
Expand CSS design system with comprehensive color palettesfrontend/app/globals.css
• Added extensive color palette with Linear, Notion, and macOS system
colors
• Introduced custom CSS variables for layout dimensions and
spacing
• Added utility classes for scrollbar hiding, shadows, and
borders
• Enhanced design system with comprehensive color tokens
page.tsx
Simplify content library page with two-column layoutfrontend/app/content-library/page.tsx
• Complete rewrite from complex component to simplified two-column
layout
• Replaced inline logic with
useContentItemshook for statemanagement
• Simplified UI to focus on content list and preview
components
• Removed search, filters, and complex state management
from component
enhanced-llm-analysis-sidebar.tsx
Simplify LLM analysis sidebar to focus on analysis onlyfrontend/components/ui/enhanced-llm-analysis-sidebar.tsx
• Simplified component by removing conversation history tab
•
Streamlined to focus only on AI analysis functionality
• Removed
embedded mode and conversation-related features
• Cleaned up UI to
single-purpose analysis sidebar
ClientContent.tsx
Simplify content reader interface and remove sharing featuresfrontend/app/content-library/reader/[id]/ClientContent.tsx
• Simplified reader interface with cleaner header design
• Removed
sharing functionality and complex badge displays
• Streamlined content
rendering with focus on readability
• Updated component naming and
styling for consistency
ContentPreview.tsx
New animated content preview component with panel managementfrontend/app/content-library/components/ContentPreview.tsx
• Added new
ContentPreviewcomponent with animated panel system fordisplaying content details
• Implemented stack-based panel management
with animation transitions using framer-motion
• Includes content
metadata display, AI analysis integration, and navigation to full
reader
• Features empty state with placeholder when no content is
selected
MainLayout.tsx
Simplified main layout by removing authentication UIfrontend/components/layout/MainLayout.tsx
• Removed user authentication UI components and dropdown menu from
main layout
• Eliminated user avatar, sync functionality, and logout
actions from header
• Simplified layout by removing
authentication-related imports and state management
• Added
page-top-highlightclass to main containerAIAnalysisCard.tsx
New AI analysis display component with structured formattingfrontend/app/content-library/components/AIAnalysisCard.tsx
• Created new component to display AI analysis results in structured
format
• Supports multiple analysis types including summarizer and key
points extractor
• Renders generic analysis content with appropriate
icons and formatting
• Includes fallback handling for different
content formats and structures
ContentCard.tsx
New content card component with selection and visual effectsfrontend/app/content-library/components/ContentCard.tsx
• Added new card component for displaying content items in library
view
• Implements selection state, ripple effects, and content type
icons
• Includes processing status badge and creation date display
•
Features responsive design with proper text truncation and
accessibility
ProcessingStatusBadge.tsx
Simplified processing status badge styling and defaultsfrontend/components/ui/ProcessingStatusBadge.tsx
• Simplified status badge styling by removing colored backgrounds and
borders
• Changed default
showTextprop fromtruetofalse• Unified
all status indicators to use neutral text color
• Updated icon sizing
to use responsive size mapping
AppSidebar.tsx
Reorganized sidebar navigation and upload button stylingfrontend/components/layout/AppSidebar.tsx
• Moved "Upload Content" button into main navigation section
• Changed
upload icon from filled to outline version (
IconCirclePlus)• Removed
special styling for upload button (primary background)
• Adjusted
sidebar header padding and layout structure
prompt-recommendations.tsx
Updated prompt recommendations to horizontal scrollable layoutfrontend/components/ui/prompt-recommendations.tsx
• Changed layout from grid to horizontal scrollable flex container
•
Updated button styling to use rounded corners and fixed width
•
Commented out loading state indicator for AI generation
• Modified
spacing and overflow handling for better mobile experience
ContentList.tsx
New content list component with separators and selectionfrontend/app/content-library/components/ContentList.tsx
• Created new list component to render multiple
ContentCarditems•
Implements separators between cards with custom width calculation
•
Handles selection state and content prefetching for list items
•
Includes empty state handling and proper React key management
llm-analysis-card.tsx
Removed AI analysis loading indicatorfrontend/components/ui/llm-analysis-card.tsx
• Commented out loading indicator for AI analysis generation
• Removed
visual feedback for analysis in progress state
• Maintained streaming
content rendering functionality
ReaderLayout.tsx
Improved reader layout panel sizing and stylingfrontend/components/layout/ReaderLayout.tsx
• Increased maximum panel size from 60% to 70%
• Added muted
background styling to resizable panel
• Enhanced visual separation in
reader layout
LibraryHeader.tsx
New simple library header componentfrontend/app/content-library/components/LibraryHeader.tsx
• Added simple header component for content library page
• Displays
"内容库" (Content Library) title with consistent styling
• Provides basic
header structure with responsive padding
1 files
useGlobalNotificationStore.ts
Fix notification status check for error handlingfrontend/lib/stores/useGlobalNotificationStore.ts
• Fixed notification status check from "failed" to "error"
• Corrects
status matching for error state handling
1 files
page.test.tsx
Update tests for simplified content library interfacefrontend/tests/app/content-library/page.test.tsx
• Updated tests to match new simplified component structure
• Removed
mocks for unused dependencies like
sonnerandgetCookie• Modified
test expectations to align with new UI without search/filters
•
Updated navigation testing to match new interaction patterns
1 files
VirtualScrollRenderer.tsx
Simplified virtual scroll renderer stylingfrontend/components/ui/VirtualScrollRenderer.tsx
• Removed border styling from main container and chunk items
•
Simplified visual appearance by eliminating gray borders and
backgrounds
• Maintained functionality while reducing visual clutter
1 files
package.json
Enhanced client generation script with import cleanupadmin/package.json
• Modified
generate-clientscript to include sed command for cleaningimports
• Added post-processing to remove specific import statements
from generated client
• Maintains existing OpenAPI TypeScript
generation while cleaning output
2 files
Summary by CodeRabbit
New Features
Refactor
Style
Bug Fixes
Chores