Conversation
エコー（反響・波紋）のコンセプトを視覚的に体現するプロダクション品質のUIに刷新。 - ve-* カラーパレット・シャドウ・アニメーション基盤をglobals.css/tailwind.configに追加 - Button/Card/Badge/Skeleton/PageHeader/Container の共通UIコンポーネント作成 - NavBar（sticky, backdrop-blur）をlayout.tsxに組込み - 全ページをデザインシステムに統一（ホーム・ギャラリー・詳細・生成中・結果・作成・ツリー） - ImageLineageを縦タイムラインから横スクロールフィルムストリップに変更 - 生成中ページに波紋アニメーション＋ステッパーUI追加 - prefers-reduced-motion/aria-label等のアクセシビリティ対応 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Summary of ChangesHello @kwrkb, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! このプルリクエストは、アプリケーションのUI/UXを全面的に刷新し、一貫性のあるデザインシステム「Resonance」を導入することを目的としています。新しいカラーパレット、タイポグラフィ、シャドウ、アニメーション効果を定義し、それらを活用した共通UIコンポーネント群を構築しました。これにより、アプリケーション全体の視覚的な魅力とユーザーエクスペリエンスが大幅に向上し、将来的な機能追加やデザイン変更の基盤が強化されました。 Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8557c5820e
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| > | ||
| {children} | ||
| <NavBar /> | ||
| <main className="pt-14">{children}</main> |
There was a problem hiding this comment.
Adding a fixed NavBar plus unconditional pt-14 on the root <main> makes full-screen routes overflow the viewport by 56px, because pages like app/tree/page.tsx and app/tree/[id]/page.tsx still render h-screen containers; this now creates an extra page-level scroll and clips part of the tree canvas until the user scrolls the document. Please account for navbar height in layout sizing (or opt out for full-screen pages) instead of only adding top padding.
Useful? React with 👍 / 👎.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new design system with custom colors, shadows, and animations, and refactors the UI to use these new styles. The changes include updating the color scheme, adding new components like Badge, Button, Card, Container, PageHeader, and Skeleton, and modifying existing components to use the new UI elements and styles. Review comments suggest using utility classes for consistent date formatting and error message styling, improving the accuracy of the step progression animation, encapsulating status variant logic, avoiding code duplication in conditional rendering, abstracting shadow definitions, and moving inline styles to CSS classes or Tailwind configuration.
| <p className="text-xs text-ve-text line-clamp-2 leading-relaxed"> | ||
| {child.prompt} | ||
| </p> | ||
| <p className="text-xs text-gray-700 mt-1"> | ||
| {new Date(child.created_at).toLocaleDateString('ja-JP', { | ||
| month: 'short', | ||
| day: 'numeric', | ||
| <p className="text-xs text-ve-text-subtle mt-1"> | ||
| {new Date(child.created_at).toLocaleDateString("ja-JP", { | ||
| month: "short", | ||
| day: "numeric", | ||
| })} |
There was a problem hiding this comment.
Consider using the ve-date class or a similar utility class to format dates consistently across the application. This would improve maintainability and ensure a uniform look and feel. Also, the locale is hardcoded as ja-JP. Consider making this configurable or deriving it from user preferences.
| <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-xl text-ve-error text-sm"> | ||
| {error} | ||
| </div> |
There was a problem hiding this comment.
The error message styling is hardcoded. Consider creating a reusable component or utility class for consistent error message styling across the application. This would improve maintainability and ensure a uniform look and feel.
| useEffect(() => { | ||
| params.then(({ id: generationId }) => { | ||
| if (status !== "pending") return; | ||
| const timer = setInterval(() => { | ||
| setActiveStep((s) => (s < 2 ? s + 1 : s)); | ||
| }, 3000); | ||
| return () => clearInterval(timer); | ||
| }, [status]); |
There was a problem hiding this comment.
The setInterval function is used to simulate step progression. While this works, it might be better to control the animation state directly based on the actual backend processing status for better synchronization and a more accurate representation of the generation process. If the backend is slow, the animation might complete before the actual process, leading to a confusing user experience.
| const statusVariant = | ||
| generation.status === "completed" | ||
| ? "success" | ||
| : generation.status === "pending" | ||
| ? "warning" | ||
| : "error"; |
There was a problem hiding this comment.
The status variant logic is repeated in multiple places. Consider creating a utility function or a component to encapsulate this logic for better maintainability and reusability.
| <div | ||
| className="flex flex-col sm:flex-row gap-3 justify-center animate-fade-up" | ||
| style={{ animationDelay: "0.2s" }} | ||
| > | ||
| <Button href={`/gallery/${generation.id}`} size="lg"> | ||
| 続けて生成する | ||
| </Button> | ||
| <Button href="/gallery" variant="secondary" size="lg"> | ||
| ギャラリーに戻る | ||
| </Link> | ||
| </Button> | ||
| {parent && ( | ||
| <Button href={`/tree`} variant="ghost" size="lg"> | ||
| ツリーで見る | ||
| </Button> | ||
| )} |
There was a problem hiding this comment.
The conditional rendering of the parent image section and the single image section duplicates the bg-ve-surface rounded-2xl border border-ve-border shadow-ve-md overflow-hidden ring-2 ring-ve-accent ring-offset-2 styling. Consider extracting this into a reusable component or a CSS class to avoid duplication and improve maintainability.
| .shadow-ve-sm { | ||
| box-shadow: 0 1px 3px rgba(139, 126, 112, 0.08), 0 1px 2px rgba(139, 126, 112, 0.06); | ||
| } | ||
|
|
||
| .shadow-ve-md { | ||
| box-shadow: 0 4px 12px rgba(139, 126, 112, 0.1), 0 2px 4px rgba(139, 126, 112, 0.06); | ||
| } | ||
|
|
||
| .shadow-ve-lg { | ||
| box-shadow: 0 12px 32px rgba(139, 126, 112, 0.12), 0 4px 8px rgba(139, 126, 112, 0.08); | ||
| } |
There was a problem hiding this comment.
The shadow definitions are hardcoded. Consider using a more abstract approach, possibly leveraging CSS variables or Tailwind configuration, to allow for easier modification and consistency across the application.
| > | ||
| <div | ||
| className={`relative overflow-hidden rounded-2xl border-2 bg-ve-surface shadow-ve-sm transition-all duration-200 hover:shadow-ve-md ${statusColor}`} | ||
| > |
There was a problem hiding this comment.
The status color styling is hardcoded. Consider creating a utility function or a component to encapsulate this logic for better maintainability and reusability.
| backgroundImage: `radial-gradient(var(--ve-accent) 0.5px, transparent 0.5px)`, | ||
| backgroundSize: "24px 24px", | ||
| backgroundPosition: "0 0", | ||
| opacity: 1, | ||
| }} |
There was a problem hiding this comment.
The background image style is defined inline. Consider moving this to a CSS class or a Tailwind configuration for better maintainability and consistency.
- ツリーページの h-screen を h-[calc(100dvh-3.5rem)] に変更し、NavBar分のオーバーフローを修正 - ステータスバリアントのロジックを lib/ui/status.ts に共通ユーティリティとして抽出 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 participant
Summary
ve-*カラーパレット（暖色系オフホワイト + 深紫アクセント）、シャドウ3段階、fade-up/ripple/shimmerアニメーションをglobals.cssとtailwind.config.tsに定義Button（primary/secondary/ghost）、Card（hover対応）、Badge（ステータス表示）、Skeleton、PageHeader（タイトル+戻るリンク+アクション）、Containerをcomponents/ui/に新規作成layout.tsxに組込みaria-label、focus-visible:ring、prefers-reduced-motion対応変更ファイル（26ファイル）
新規作成（7ファイル）
components/ui/Button.tsx,Card.tsx,Badge.tsx,Skeleton.tsx,PageHeader.tsx,Container.tsxcomponents/NavBar.tsx既存修正（19ファイル）
globals.css,tailwind.config.ts,layout.tsxpage.tsx× 9）ImageCard,ImageGrid,PromptForm,ImageLineage,ChildImages,TreeView,TreeNode）Test plan
npm run lint— エラーなしnpm run build— ビルド成功/— ホーム: 波紋モチーフ、新カラー、NavBar表示/gallery— ギャラリー: 新カード表示、統一スタイル/gallery/all— 全画像: PageHeader、Badge/gallery/[id]— 詳細: ヒーロー画像、横フィルムストリップ/create— 作成: 新見出し、デザインシステム適用/gallery/[id]/generating— 生成中: 波紋アニメーション/gallery/[id]/result— 結果: Before/After比較/tree— ツリー: 更新された色・ズームコントロール🤖 Generated with Claude Code