Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughSummary by CodeRabbit
Walkthrough選択した画像のファイルパスをバックエンドからフロントエンドへ伝搬して表示する機能が追加され、macOS 検出に基づく CSS クラス適用とトップバーの挙動（ダブルクリック最大化など）やウィンドウの初期最大化設定が導入されました。ExifResult に filePath フィールドが追加されています。 Changes
Sequence Diagram(s)sequenceDiagram
participant UI as Frontend (UI)
participant Backend as Backend (Wails)
participant FS as File Picker / OS
participant Decoder as Image Element (Browser)
UI->>Backend: OpenImage()
Backend->>FS: show file picker / read file
FS-->>Backend: file content, path
Backend-->>UI: ExifResult { imageBase64, metadata, filePath }
UI->>Decoder: set src = imageBase64
Decoder-->>UI: onload
UI->>UI: set EXIF state and filePath (display breadcrumbs)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Review rate limit: 0/1 reviews remaining, refill in 60 minutes.Comment |
There was a problem hiding this comment.
Pull request overview
Mac向けのUI強化（タイトルバー周りの挙動/見た目改善と選択中画像のパス表示）を行うPRです。前回PR #11 の続きとして、Mac特有のウィンドウ/ドラッグ領域調整を追加しています。
Changes:
- WailsのMacタイトルバー設定（HiddenInset）と起動時最大化を追加
- 画像選択結果に
filePathを追加し、トップバーにパス（breadcrumb風）表示を追加 - トップバーのドラッグ領域/ボタンのno-drag、Mac向け余白などのCSS調整を追加
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| main.go | Mac用TitleBar設定と起動時最大化を追加 |
| app.go | ExifResult に filePath を追加してフロントへ返す |
| frontend/wailsjs/go/models.ts | 生成モデルに filePath を反映 |
| frontend/src/App.tsx | Environment判定、トップバーのダブルクリック最大化、ファイルパス表示を追加 |
| frontend/src/App.css | Mac向けトップバー余白、ドラッグ/no-drag、選択不可制御などを追加 |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| iso: result.iso || "" | ||
| }); | ||
| setFilePath(result.filePath || ""); | ||
|
|
There was a problem hiding this comment.
setFilePath is updated before the image has successfully decoded/loaded. If the selected image is corrupted or fails to decode in the img.onerror path, the UI will still show the new file path (and updated EXIF) even though no image was loaded. Consider only updating filePath/exif after img.onload succeeds, or explicitly reverting/clearing them in the img.onerror/catch path so the UI state stays consistent with what is actually rendered.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
frontend/src/App.tsx (2)
60-68:⚠️ Potential issue | 🟠 Major新しい画像の読み込み成功前に
exif/filePathを反映しないでくださいここで先に状態を更新すると、既に画像が表示されている状態で別ファイルを選んだ際に、
useEffect([imageObj, exif])が古いimageObjを新しいメタデータで再描画します。さらに decode に失敗すると、その不整合が残ります。新しいImageのonloadでimageObj/imageLoaded/exif/filePathをまとめて反映した方が安全です。修正例
- // Update EXIF state (leave empty if not found) - setExif({ + const nextExif = { camera: result.camera || "", lens: result.lens || "", focalLength: result.focalLength || "", aperture: result.aperture || "", shutterSpeed: result.shutterSpeed || "", iso: result.iso || "" - }); - setFilePath(result.filePath || ""); + }; + const nextFilePath = result.filePath || ""; // Load the Base64 image and await its decoding await new Promise<void>((resolve, reject) => { const img = new Image(); img.onload = () => { setImageObj(img); setImageLoaded(true); + setExif(nextExif); + setFilePath(nextFilePath); resolve(); };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/App.tsx` around lines 60 - 68, 現在の実装は先に setExif と setFilePath を呼んでしまい、古い imageObj と新しいメタデータが混在して再描画や decode 失敗時に不整合を生むため、Exif と filePath の更新を Image オブジェクトの onload ハンドラでまとめて行うよう修正してください: 具体的には setExif と setFilePath の呼び出しを削除し、Image を作成して imageObj の onload 内で imageObj／imageLoaded／exif／filePath を一度に更新する（useEffect([imageObj, exif]) が古い imageObj を参照して再描画しないようにする）ように実装を移動してください（参照する識別子: setExif, setFilePath, imageObj, imageLoaded, useEffect([imageObj, exif])）。
207-217:⚠️ Potential issue | 🟠 Majorヘッダーの
onDoubleClickがボタン操作にも伝播します
.btnの--wails-draggable: no-dragはドラッグ判定だけで、React のイベント伝播は止めません。Open Photo/Exportをダブルクリックすると、ボタン操作と同時にウィンドウの最大化/復元も走ります。インタラクティブ要素からのイベントは除外してください。修正例
- <header className="top-bar" onDoubleClick={WindowToggleMaximise}> + <header + className="top-bar" + onDoubleClick={(e) => { + if ((e.target as HTMLElement).closest('button')) return; + WindowToggleMaximise(); + }} + >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/App.tsx` around lines 207 - 217, The header's onDoubleClick={WindowToggleMaximise} is firing even when interactive buttons are double-clicked; stop the propagation from those buttons by adding onDoubleClick handlers that call event.stopPropagation() before invoking the existing handlers (e.g. change <button ... onClick={handleSelectImage}> to <button ... onDoubleClick={(e) => { e.stopPropagation(); handleSelectImageDoubleClick? handleSelectImageDoubleClick(): null }} or simply <button ... onDoubleClick={(e) => e.stopPropagation()} onClick={handleSelectImage}>, and do the same for the export/download button that uses downloadImage) so double-clicks on .btn do not bubble up to WindowToggleMaximise; alternatively modify WindowToggleMaximise to ignore events whose target is a button/input by checking event.target (e.g. tagName === 'BUTTON' or classList.contains('btn')) before toggling.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/src/App.css`:
- Around line 64-79: The .top-bar-left rule sets user-select: none which
prevents nested .file-path from being selectable; update the .file-path CSS to
explicitly allow selection and disable dragging by adding user-select: text plus
vendor prefixes (-webkit-user-select: text) and also disable drag behavior with
-webkit-user-drag: none (and any needed vendor equivalents), so the path text
becomes selectable/copiable while keeping the surrounding .top-bar-left
behavior.
---
Outside diff comments:
In `@frontend/src/App.tsx`:
- Around line 60-68: 現在の実装は先に setExif と setFilePath を呼んでしまい、古い imageObj
と新しいメタデータが混在して再描画や decode 失敗時に不整合を生むため、Exif と filePath の更新を Image オブジェクトの onload
ハンドラでまとめて行うよう修正してください: 具体的には setExif と setFilePath の呼び出しを削除し、Image を作成して
imageObj の onload 内で imageObj／imageLoaded／exif／filePath
を一度に更新する（useEffect([imageObj, exif]) が古い imageObj
を参照して再描画しないようにする）ように実装を移動してください（参照する識別子: setExif, setFilePath, imageObj,
imageLoaded, useEffect([imageObj, exif])）。
- Around line 207-217: The header's onDoubleClick={WindowToggleMaximise} is
firing even when interactive buttons are double-clicked; stop the propagation
from those buttons by adding onDoubleClick handlers that call
event.stopPropagation() before invoking the existing handlers (e.g. change
<button ... onClick={handleSelectImage}> to <button ... onDoubleClick={(e) => {
e.stopPropagation(); handleSelectImageDoubleClick?
handleSelectImageDoubleClick(): null }} or simply <button ... onDoubleClick={(e)
=> e.stopPropagation()} onClick={handleSelectImage}>, and do the same for the
export/download button that uses downloadImage) so double-clicks on .btn do not
bubble up to WindowToggleMaximise; alternatively modify WindowToggleMaximise to
ignore events whose target is a button/input by checking event.target (e.g.
tagName === 'BUTTON' or classList.contains('btn')) before toggling.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: b663fa4a-93e1-44ba-9be1-991bdd5eee5b
📒 Files selected for processing (5)
app.gofrontend/src/App.cssfrontend/src/App.tsxfrontend/wailsjs/go/models.tsmain.go
| .top-bar-left { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 1.5rem; | ||
| user-select: none; | ||
| -webkit-user-select: none; | ||
| } | ||
|
|
||
| .file-path { | ||
| font-size: 0.75rem; | ||
| color: var(--text-secondary); | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| max-width: 50vw; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's check if App.css exists and examine its content
if [ -f "frontend/src/App.css" ]; then
echo "=== App.css content (lines 1-100) ==="
head -100 "frontend/src/App.css" | cat -n
else
echo "App.css not found at expected location"
# Search for it
find . -name "App.css" -type f
fiRepository: amemya/ExifFrame
Length of output: 2923
🏁 Script executed:
# Search for .file-path and .top-bar-left class definitions
rg -n "\.top-bar-left|\.file-path|user-select" frontend/src/App.css -B 2 -A 5Repository: amemya/ExifFrame
Length of output: 833
🏁 Script executed:
# Check App.tsx for the file path display around line 210
if [ -f "frontend/src/App.tsx" ]; then
echo "=== App.tsx around line 210 ==="
sed -n '200,220p' "frontend/src/App.tsx" | cat -n
fiRepository: amemya/ExifFrame
Length of output: 1233
🏁 Script executed:
# Search for --wails-draggable property usage in the codebase
rg -r "wails-draggable" . --type css --type tsx --type ts -B 2 -A 2Repository: amemya/ExifFrame
Length of output: 88
表示中のファイルパスが選択・コピーできません
.top-bar-left で user-select: none を設定しているため、ネストされた .file-path がその制約を継承しており、表示されたパスが選択不可になっています。パス表示機能の利便性を高めるには、.file-path で明示的に選択可能にし、ドラッグ動作を無効化する必要があります。
修正例
.file-path {
font-size: 0.75rem;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 50vw;
+ user-select: text;
+ -webkit-user-select: text;
+ --wails-draggable: no-drag;
}📝 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.
| .top-bar-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 1.5rem; | |
| user-select: none; | |
| -webkit-user-select: none; | |
| } | |
| .file-path { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 50vw; | |
| } | |
| .top-bar-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 1.5rem; | |
| user-select: none; | |
| -webkit-user-select: none; | |
| } | |
| .file-path { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 50vw; | |
| user-select: text; | |
| -webkit-user-select: text; | |
| --wails-draggable: no-drag; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/App.css` around lines 64 - 79, The .top-bar-left rule sets
user-select: none which prevents nested .file-path from being selectable; update
the .file-path CSS to explicitly allow selection and disable dragging by adding
user-select: text plus vendor prefixes (-webkit-user-select: text) and also
disable drag behavior with -webkit-user-drag: none (and any needed vendor
equivalents), so the path text becomes selectable/copiable while keeping the
surrounding .top-bar-left behavior.
There was a problem hiding this comment.
パスはあくまで確認用として表示させているだけであり，選択できる必要性はありません（Lightroom等でもパスをドラッグして文字列を選択することはできません）
There was a problem hiding this comment.
@amemya、ご説明ありがとうございます。ファイルパスを確認用の表示専用として扱うのは理にかなったデザイン判断ですね。Lightroom のような参照用途のUIにおいて、パス文字列を選択不可にするのは一般的なアプローチです。ご指摘の通り、変更の必要はありません。
✏️ Learnings added
Learnt from: amemya
Repo: amemya/ExifFrame PR: 12
File: frontend/src/App.css:64-79
Timestamp: 2026-05-01T01:45:07.294Z
Learning: In the ExifFrame project (frontend/src/App.css, App.tsx), the `.file-path` element in the top bar is intentionally display-only (for reference/confirmation). The file path text does not need to be selectable or copyable by design — this is a deliberate UX decision, similar to how Lightroom displays paths without allowing text selection.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
…bar double-click on buttons
Mac向けにUIを強化
前回のPR #11 に続く更新