Unverified 提交 05e5403f authored 作者: wwwillchen-bot's avatar wwwillchen-bot 提交者: GitHub

move ActionHeader from TitleBar to right side bar (#2553)

## Summary - Move the ActionHeader component from TitleBar into PreviewPanel where it logically belongs - Improve component organization by separating preview-related controls from the global title bar - Update ActionHeader styling to fit its new location with sidebar background ## Test plan - Verify the ActionHeader appears at the top of the PreviewPanel instead of in the title bar - Confirm the tab switching (Preview/Code/Console) functionality works correctly - Test the refresh and external link buttons work as expected - Verify the title bar still renders correctly with the spacer element 🤖 Generated with [Claude Code](https://claude.com/claude-code) <!-- devin-review-badge-begin --> --- <a href="https://app.devin.ai/review/dyad-sh/dyad/pull/2553" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://static.devin.ai/assets/gh-open-in-devin-review-dark.svg?v=1"> <img src="https://static.devin.ai/assets/gh-open-in-devin-review-light.svg?v=1" alt="Open with Devin"> </picture> </a> <!-- devin-review-badge-end --> <!-- This is an auto-generated description by cubic. --> --- ## Summary by cubic Moved the preview action header into the PreviewPanel and added a right action sidebar for quick mode switching. Maintenance actions moved to a TitleBar “More” menu so controls are closer to their content. - New Features - RightActionSidebar on the chat page with buttons for Preview, Problems (with count), Code, Configure, Security, Publish. - TitleBar actions: Chat activity button and a “More” menu for Clean Rebuild and Clear Preview Data. - Refactors - Render ActionHeader at the top of PreviewPanel; remove it from TitleBar, drop useLocation, and add a spacer. - Polish styles for ActionHeader (px-2, sidebar background) and sidebar active/hover states. <sup>Written for commit 5cc7c53453f280024838a43fdd89a357abca3523. Summary will update on new commits.</sup> <!-- End of auto-generated description by cubic. --> --------- Co-authored-by: 's avatarWill Chen <willchen90@gmail.com> Co-authored-by: 's avatarClaude Opus 4.5 <noreply@anthropic.com>
上级 552a705d
......@@ -453,6 +453,7 @@
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz",
"integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/code-frame": "^7.27.1",
"@babel/generator": "^7.28.3",
......@@ -675,6 +676,7 @@
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
"integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/code-frame": "^7.27.1",
"@babel/parser": "^7.27.2",
......@@ -1420,6 +1422,7 @@
"integrity": "sha512-zx0EIq78WlY/lBb1uXlziZmDZI4ubcCXIMJ4uGjXzZW0nS19TjSPeXPAjzzTmKQlJUZm0SbmZhPKP7tuQ1SsEw==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"chalk": "^4.1.1",
"fs-extra": "^9.0.1",
......@@ -2741,7 +2744,8 @@
"version": "0.22.0",
"resolved": "https://registry.npmjs.org/@flakiness/flakiness-report/-/flakiness-report-0.22.0.tgz",
"integrity": "sha512-soo8VpTu1/LqFXrwv7HX/YcvKHRN6gjyGZqpOeSa0u5ZrtysuFL4u59FhDhnfKqCC17UQUACPBE8KSM36PiOaw==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/@flakiness/playwright": {
"version": "1.0.0",
......@@ -2904,7 +2908,6 @@
"os": [
"darwin"
],
"peer": true,
"engines": {
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
},
......@@ -2927,7 +2930,6 @@
"os": [
"darwin"
],
"peer": true,
"engines": {
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
},
......@@ -2950,7 +2952,6 @@
"os": [
"darwin"
],
"peer": true,
"funding": {
"url": "https://opencollective.com/libvips"
}
......@@ -2967,7 +2968,6 @@
"os": [
"darwin"
],
"peer": true,
"funding": {
"url": "https://opencollective.com/libvips"
}
......@@ -2984,7 +2984,6 @@
"os": [
"linux"
],
"peer": true,
"funding": {
"url": "https://opencollective.com/libvips"
}
......@@ -3001,7 +3000,6 @@
"os": [
"linux"
],
"peer": true,
"funding": {
"url": "https://opencollective.com/libvips"
}
......@@ -3018,7 +3016,6 @@
"os": [
"linux"
],
"peer": true,
"funding": {
"url": "https://opencollective.com/libvips"
}
......@@ -3035,7 +3032,6 @@
"os": [
"linux"
],
"peer": true,
"funding": {
"url": "https://opencollective.com/libvips"
}
......@@ -3052,7 +3048,6 @@
"os": [
"linux"
],
"peer": true,
"funding": {
"url": "https://opencollective.com/libvips"
}
......@@ -3069,7 +3064,6 @@
"os": [
"linux"
],
"peer": true,
"funding": {
"url": "https://opencollective.com/libvips"
}
......@@ -3086,7 +3080,6 @@
"os": [
"linux"
],
"peer": true,
"funding": {
"url": "https://opencollective.com/libvips"
}
......@@ -3103,7 +3096,6 @@
"os": [
"linux"
],
"peer": true,
"engines": {
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
},
......@@ -3126,7 +3118,6 @@
"os": [
"linux"
],
"peer": true,
"engines": {
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
},
......@@ -3149,7 +3140,6 @@
"os": [
"linux"
],
"peer": true,
"engines": {
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
},
......@@ -3172,7 +3162,6 @@
"os": [
"linux"
],
"peer": true,
"engines": {
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
},
......@@ -3195,7 +3184,6 @@
"os": [
"linux"
],
"peer": true,
"engines": {
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
},
......@@ -3218,7 +3206,6 @@
"os": [
"linux"
],
"peer": true,
"engines": {
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
},
......@@ -3241,7 +3228,6 @@
"os": [
"linux"
],
"peer": true,
"engines": {
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
},
......@@ -3261,7 +3247,6 @@
],
"license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
"optional": true,
"peer": true,
"dependencies": {
"@emnapi/runtime": "^1.4.4"
},
......@@ -3284,7 +3269,6 @@
"os": [
"win32"
],
"peer": true,
"engines": {
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
},
......@@ -3304,7 +3288,6 @@
"os": [
"win32"
],
"peer": true,
"engines": {
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
},
......@@ -3324,7 +3307,6 @@
"os": [
"win32"
],
"peer": true,
"engines": {
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
},
......@@ -3610,6 +3592,7 @@
"integrity": "sha512-yl43JD/86CIj3Mz5mvvLJqAOfIup7ncxfJ0Btnl0/v5TouVUyeEdcpknfgc+yMevS/48oH9WAkkw93m7otLb/A==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@inquirer/checkbox": "^3.0.1",
"@inquirer/confirm": "^4.0.1",
......@@ -4373,7 +4356,6 @@
"resolved": "https://registry.npmjs.org/@lexical/utils/-/utils-0.35.0.tgz",
"integrity": "sha512-2H393EYDnFznYCDFOW3MHiRzwEO5M/UBhtUjvTT+9kc+qhX4U3zc8ixQalo5UmZ5B2nh7L/inXdTFzvSRXtsRA==",
"license": "MIT",
"peer": true,
"dependencies": {
"@lexical/list": "0.35.0",
"@lexical/selection": "0.35.0",
......@@ -4386,7 +4368,6 @@
"resolved": "https://registry.npmjs.org/@lexical/clipboard/-/clipboard-0.35.0.tgz",
"integrity": "sha512-ko7xSIIiayvDiqjNDX6fgH9RlcM6r9vrrvJYTcfGVBor5httx16lhIi0QJZ4+RNPvGtTjyFv4bwRmsixRRwImg==",
"license": "MIT",
"peer": true,
"dependencies": {
"@lexical/html": "0.35.0",
"@lexical/list": "0.35.0",
......@@ -4400,7 +4381,6 @@
"resolved": "https://registry.npmjs.org/@lexical/html/-/html-0.35.0.tgz",
"integrity": "sha512-rXGFE5S5rKsg3tVnr1s4iEgOfCApNXGpIFI3T2jGEShaCZ5HLaBY9NVBXnE9Nb49e9bkDkpZ8FZd1qokCbQXbw==",
"license": "MIT",
"peer": true,
"dependencies": {
"@lexical/selection": "0.35.0",
"@lexical/utils": "0.35.0",
......@@ -4412,7 +4392,6 @@
"resolved": "https://registry.npmjs.org/@lexical/list/-/list-0.35.0.tgz",
"integrity": "sha512-owsmc8iwgExBX8sFe8fKTiwJVhYULt9hD1RZ/HwfaiEtRZZkINijqReOBnW2mJfRxBzhFSWc4NG3ISB+fHYzqw==",
"license": "MIT",
"peer": true,
"dependencies": {
"@lexical/selection": "0.35.0",
"@lexical/utils": "0.35.0",
......@@ -4424,7 +4403,6 @@
"resolved": "https://registry.npmjs.org/@lexical/selection/-/selection-0.35.0.tgz",
"integrity": "sha512-mMtDE7Q0nycXdFTTH/+ta6EBrBwxBB4Tg8QwsGntzQ1Cq//d838dpXpFjJOqHEeVHUqXpiuj+cBG8+bvz/rPRw==",
"license": "MIT",
"peer": true,
"dependencies": {
"lexical": "0.35.0"
}
......@@ -4434,7 +4412,6 @@
"resolved": "https://registry.npmjs.org/@lexical/table/-/table-0.35.0.tgz",
"integrity": "sha512-9jlTlkVideBKwsEnEkqkdg7A3mije1SvmfiqoYnkl1kKJCLA5iH90ywx327PU0p+bdnURAytWUeZPXaEuEl2OA==",
"license": "MIT",
"peer": true,
"dependencies": {
"@lexical/clipboard": "0.35.0",
"@lexical/utils": "0.35.0",
......@@ -4445,8 +4422,7 @@
"version": "0.35.0",
"resolved": "https://registry.npmjs.org/lexical/-/lexical-0.35.0.tgz",
"integrity": "sha512-3VuV8xXhh5xJA6tzvfDvE0YBCMkIZUmxtRilJQDDdCgJCc+eut6qAv2qbN+pbqvarqcQqPN1UF+8YvsjmyOZpw==",
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/@lexical/yjs": {
"version": "0.33.1",
......@@ -4601,6 +4577,7 @@
"resolved": "https://registry.npmjs.org/@neondatabase/serverless/-/serverless-1.0.1.tgz",
"integrity": "sha512-O6yC5TT0jbw86VZVkmnzCZJB0hfxBl0JJz6f+3KHoZabjb/X08r9eFA+vuY06z1/qaovykvdkrXYq3SPUuvogA==",
"license": "MIT",
"peer": true,
"dependencies": {
"@types/node": "^22.15.30",
"@types/pg": "^8.8.0"
......@@ -4613,8 +4590,7 @@
"version": "15.5.2",
"resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.2.tgz",
"integrity": "sha512-Qe06ew4zt12LeO6N7j8/nULSOe3fMXE4dM6xgpBQNvdzyK1sv5y4oAP3bq4LamrvGCZtmRYnW8URFCeX5nFgGg==",
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/@next/swc-darwin-arm64": {
"version": "15.5.2",
......@@ -4628,7 +4604,6 @@
"os": [
"darwin"
],
"peer": true,
"engines": {
"node": ">= 10"
}
......@@ -4645,7 +4620,6 @@
"os": [
"darwin"
],
"peer": true,
"engines": {
"node": ">= 10"
}
......@@ -4662,7 +4636,6 @@
"os": [
"linux"
],
"peer": true,
"engines": {
"node": ">= 10"
}
......@@ -4679,7 +4652,6 @@
"os": [
"linux"
],
"peer": true,
"engines": {
"node": ">= 10"
}
......@@ -4696,7 +4668,6 @@
"os": [
"linux"
],
"peer": true,
"engines": {
"node": ">= 10"
}
......@@ -4713,7 +4684,6 @@
"os": [
"linux"
],
"peer": true,
"engines": {
"node": ">= 10"
}
......@@ -4730,7 +4700,6 @@
"os": [
"win32"
],
"peer": true,
"engines": {
"node": ">= 10"
}
......@@ -4747,7 +4716,6 @@
"os": [
"win32"
],
"peer": true,
"engines": {
"node": ">= 10"
}
......@@ -4874,6 +4842,7 @@
"integrity": "sha512-/g2d4sW9nUDJOMz3mabVQvOGhVa4e/BN/Um7yca9Bb2XTzPPnfTWHWQg+IsEYO7M3Vx+EXvaM/I2pJWIMun1bg==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@octokit/auth-token": "^4.0.0",
"@octokit/graphql": "^7.1.0",
......@@ -5435,6 +5404,7 @@
"integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==",
"devOptional": true,
"license": "Apache-2.0",
"peer": true,
"dependencies": {
"playwright": "1.58.2"
},
......@@ -6859,6 +6829,7 @@
"integrity": "sha512-EwquDRUDVvWcZds3T2abmB5wSN/Vattal4YtZ6fpBlIUqONV4o/cOBX39cFfQSUCBrIXIjQ6RmapQCHK/PvBYw==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@storybook/global": "^5.0.0",
"@storybook/instrumenter": "8.6.15",
......@@ -7003,7 +6974,6 @@
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
"integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
"license": "Apache-2.0",
"peer": true,
"dependencies": {
"tslib": "^2.8.0"
}
......@@ -7643,6 +7613,7 @@
"integrity": "sha512-NMv9ASNARoKksWtsq/SHakpYAYnhBrQgGD8zkLYk/jaK8jUGn08CfEdTRgYhMypUQAfzSP8W6gNLe0q19/t4VA==",
"devOptional": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@types/node": "*"
}
......@@ -7888,6 +7859,7 @@
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
"integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
"license": "MIT",
"peer": true,
"dependencies": {
"csstype": "^3.0.2"
}
......@@ -7898,6 +7870,7 @@
"integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
"devOptional": true,
"license": "MIT",
"peer": true,
"peerDependencies": {
"@types/react": "^19.0.0"
}
......@@ -8006,6 +7979,7 @@
"integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
"dev": true,
"license": "BSD-2-Clause",
"peer": true,
"dependencies": {
"@typescript-eslint/scope-manager": "5.62.0",
"@typescript-eslint/types": "5.62.0",
......@@ -8441,6 +8415,7 @@
"integrity": "sha512-hGISOaP18plkzbWEcP/QvtRW1xDXF2+96HbEX6byqQhAUbiS5oH6/9JwW+QsQCIYON2bI6QZBF+2PvOmrRZ9wA==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@vitest/utils": "3.2.4",
"fflate": "^0.8.2",
......@@ -8732,6 +8707,7 @@
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"devOptional": true,
"license": "MIT",
"peer": true,
"bin": {
"acorn": "bin/acorn"
},
......@@ -9204,6 +9180,7 @@
"integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==",
"devOptional": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/types": "^7.26.0"
}
......@@ -9350,6 +9327,7 @@
"integrity": "sha512-8VYKM3MjCa9WcaSAI3hzwhmyHVlH8tiGFwf0RlTsZPWJ1I5MkzjiudCo4KC4DxOaL/53A5B1sI/IbldNFDbsKA==",
"hasInstallScript": true,
"license": "MIT",
"peer": true,
"dependencies": {
"bindings": "^1.5.0",
"prebuild-install": "^7.1.1"
......@@ -9478,6 +9456,7 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.9.0",
"caniuse-lite": "^1.0.30001759",
......@@ -10054,8 +10033,7 @@
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/cliui": {
"version": "8.0.1",
......@@ -10176,7 +10154,6 @@
"integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
"license": "MIT",
"optional": true,
"peer": true,
"dependencies": {
"color-convert": "^2.0.1",
"color-string": "^1.9.0"
......@@ -10209,7 +10186,6 @@
"integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
"license": "MIT",
"optional": true,
"peer": true,
"dependencies": {
"color-name": "^1.0.0",
"simple-swizzle": "^0.2.2"
......@@ -12377,6 +12353,7 @@
"integrity": "sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==",
"hasInstallScript": true,
"license": "MIT",
"peer": true,
"bin": {
"esbuild": "bin/esbuild"
},
......@@ -12459,6 +12436,7 @@
"deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.2.0",
"@eslint-community/regexpp": "^4.6.1",
......@@ -13831,6 +13809,7 @@
"integrity": "sha512-Newg9X7mRYskoBjSw70l1YnJ/ZGbq64VPyR821H5WVkTGpHG2O0mQILxCeUhxdYERLFY9B4tUyKLyf3uMTjtKw==",
"devOptional": true,
"license": "Apache-2.0",
"peer": true,
"dependencies": {
"@petamoriken/float16": "^3.8.7",
"debug": "^4.3.4",
......@@ -14323,6 +14302,7 @@
"integrity": "sha512-UVIHeVhxmxedbWPCfgS55Jg2rDfwf2BCKeylcPSqazLz5w3Kri7Q4xdBJubsr/+VUzFLh0VjIvh13RaDA2/Xug==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"webidl-conversions": "^7.0.0",
"whatwg-mimetype": "^3.0.0"
......@@ -15510,7 +15490,6 @@
"resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz",
"integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==",
"license": "MIT",
"peer": true,
"funding": {
"type": "GitHub Sponsors ❤",
"url": "https://github.com/sponsors/dmonad"
......@@ -15824,7 +15803,8 @@
"url": "https://github.com/sponsors/lavrton"
}
],
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/levn": {
"version": "0.4.1",
......@@ -15844,7 +15824,8 @@
"version": "0.33.1",
"resolved": "https://registry.npmjs.org/lexical/-/lexical-0.33.1.tgz",
"integrity": "sha512-+kiCS/GshQmCs/meMb8MQT4AMvw3S3Ef0lSCv2Xi6Itvs59OD+NjQWNfYkDteIbKtVE/w0Yiqh56VyGwIb8UcA==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/lexical-beautiful-mentions": {
"version": "0.1.48",
......@@ -15864,7 +15845,6 @@
"resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.114.tgz",
"integrity": "sha512-gcxmNFzA4hv8UYi8j43uPlQ7CGcyMJ2KQb5kZASw6SnAKAf10hK12i2fjrS3Cl/ugZa5Ui6WwIu1/6MIXiHttQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"isomorphic.js": "^0.2.4"
},
......@@ -18063,7 +18043,8 @@
"version": "0.52.2",
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz",
"integrity": "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/motion-dom": {
"version": "12.23.12",
......@@ -19238,7 +19219,6 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"nanoid": "^3.3.6",
"picocolors": "^1.0.0",
......@@ -19688,6 +19668,7 @@
"resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
"integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=0.10.0"
}
......@@ -19729,6 +19710,7 @@
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
"integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==",
"license": "MIT",
"peer": true,
"dependencies": {
"scheduler": "^0.27.0"
},
......@@ -20543,6 +20525,7 @@
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.50.1.tgz",
"integrity": "sha512-78E9voJHwnXQMiQdiqswVLZwJIzdBKJ1GdI5Zx6XwoFKUIk09/sSrr+05QFzvYb8q6Y9pPV45zzDuYa3907TZA==",
"license": "MIT",
"peer": true,
"dependencies": {
"@types/estree": "1.0.8"
},
......@@ -20743,6 +20726,7 @@
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"fast-deep-equal": "^3.1.3",
"fast-uri": "^3.0.1",
......@@ -20883,6 +20867,7 @@
"resolved": "https://registry.npmjs.org/seroval/-/seroval-1.3.2.tgz",
"integrity": "sha512-RbcPH1n5cfwKrru7v7+zrZvjLurgHhGyso3HTyGtRivGWgYjbOmGuivCQaORNELjNONoK35nj28EoWul9sb1zQ==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=10"
}
......@@ -20995,7 +20980,6 @@
"hasInstallScript": true,
"license": "Apache-2.0",
"optional": true,
"peer": true,
"dependencies": {
"color": "^4.2.3",
"detect-libc": "^2.0.4",
......@@ -21388,7 +21372,6 @@
"integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
"license": "MIT",
"optional": true,
"peer": true,
"dependencies": {
"is-arrayish": "^0.3.1"
}
......@@ -21398,8 +21381,7 @@
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
"license": "MIT",
"optional": true,
"peer": true
"optional": true
},
"node_modules/sirv": {
"version": "3.0.2",
......@@ -21736,6 +21718,7 @@
"integrity": "sha512-Ob7DMlwWx8s7dMvcQ3xPc02TvUeralb+xX3oaPRk9wY9Hc6M1IBC/7cEoITkSmRS2v38DHubC+mtEKNc1u2gQg==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@storybook/core": "8.6.15"
},
......@@ -22084,7 +22067,6 @@
"resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
"integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
"license": "MIT",
"peer": true,
"dependencies": {
"client-only": "0.0.1"
},
......@@ -22162,7 +22144,8 @@
"version": "4.1.13",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.13.tgz",
"integrity": "sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/tapable": {
"version": "2.3.0",
......@@ -22829,6 +22812,7 @@
"integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
"devOptional": true,
"license": "Apache-2.0",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
......@@ -23351,6 +23335,7 @@
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.20.tgz",
"integrity": "sha512-j3lYzGC3P+B5Yfy/pfKNgVEg4+UtcIJcVRt2cDjIOmhLourAqPqf8P7acgxeiSgUB7E3p2P8/3gNIgDLpwzs4g==",
"license": "MIT",
"peer": true,
"dependencies": {
"esbuild": "^0.21.3",
"postcss": "^8.4.43",
......@@ -23882,6 +23867,7 @@
"integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@types/chai": "^5.2.2",
"@vitest/expect": "3.2.4",
......@@ -24543,6 +24529,7 @@
"resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
"integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
"license": "MIT",
"peer": true,
"funding": {
"url": "https://github.com/sponsors/colinhacks"
}
......
......@@ -39,5 +39,7 @@ gh api repos/dyad-sh/dyad/issues/{PR_NUMBER}/labels -f "labels[]=label-name"
## Rebase conflict resolution tips
- **Before rebasing:** If `npm install` modified `package-lock.json` (common in CI/local), discard changes with `git restore package-lock.json` to avoid "unstaged changes" errors
- When resolving import conflicts (e.g., `<<<<<<< HEAD` with different imports), keep **both** imports if both are valid and needed by the component
- When resolving conflicts in i18n-related commits, watch for duplicate constant definitions that conflict with imports from `@/lib/schemas` (e.g., `DEFAULT_ZOOM_LEVEL`)
- If both sides of a conflict have valid imports/hooks, keep both and remove any duplicate constant redefinitions
import { useAtom } from "jotai";
import { selectedAppIdAtom } from "@/atoms/appAtoms";
import { useLoadApps } from "@/hooks/useLoadApps";
import { useRouter, useLocation } from "@tanstack/react-router";
import { useRouter } from "@tanstack/react-router";
import { useSettings } from "@/hooks/useSettings";
import { Button } from "@/components/ui/button";
// @ts-ignore
......@@ -9,7 +9,7 @@ import logo from "../../assets/logo.svg";
import { providerSettingsRoute } from "@/routes/settings/providers/$provider";
import { cn } from "@/lib/utils";
import { useDeepLink } from "@/contexts/DeepLinkContext";
import { useEffect, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import { DyadProSuccessDialog } from "@/components/DyadProSuccessDialog";
import { useTheme } from "@/contexts/ThemeContext";
import { ipc } from "@/ipc/types";
......@@ -21,13 +21,23 @@ import {
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { ActionHeader } from "@/components/preview_panel/ActionHeader";
import { ChatActivityButton } from "@/components/chat/ChatActivity";
import { MoreVertical, Cog, Trash2 } from "lucide-react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useRunApp } from "@/hooks/useRunApp";
import { showError, showSuccess } from "@/lib/toast";
import { useMutation } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";
export const TitleBar = () => {
const [selectedAppId] = useAtom(selectedAppIdAtom);
const { apps } = useLoadApps();
const { navigate } = useRouter();
const location = useLocation();
const { settings, refreshSettings } = useSettings();
const [isSuccessDialogOpen, setIsSuccessDialogOpen] = useState(false);
const platform = useSystemPlatform();
......@@ -83,12 +93,10 @@ export const TitleBar = () => {
</Button>
{isDyadPro && <DyadProButton isDyadProEnabled={isDyadProEnabled} />}
{/* Preview Header */}
{location.pathname === "/chat" && (
<div className="flex-1 flex justify-end">
<ActionHeader />
</div>
)}
{/* Spacer to push window controls to the right */}
<div className="flex-1" />
<TitleBarActions />
{showWindowControls && <WindowsControls />}
</div>
......@@ -181,6 +189,70 @@ function WindowsControls() {
);
}
function TitleBarActions() {
const { t } = useTranslation("home");
const { restartApp, refreshAppIframe } = useRunApp();
const onCleanRestart = useCallback(() => {
restartApp({ removeNodeModules: true });
}, [restartApp]);
const useClearSessionData = () => {
return useMutation({
mutationFn: () => {
return ipc.system.clearSessionData();
},
onSuccess: async () => {
await refreshAppIframe();
showSuccess("Preview data cleared");
},
onError: (error) => {
showError(`Error clearing preview data: ${error}`);
},
});
};
const { mutate: clearSessionData } = useClearSessionData();
const onClearSessionData = useCallback(() => {
clearSessionData();
}, [clearSessionData]);
return (
<div className="flex items-center gap-0.5 no-app-region-drag mr-2">
<ChatActivityButton />
<DropdownMenu>
<DropdownMenuTrigger
data-testid="preview-more-options-button"
className="flex items-center justify-center w-8 h-8 rounded-md text-sm hover:bg-sidebar-accent transition-colors"
>
<MoreVertical size={16} />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-60">
<DropdownMenuItem onClick={onCleanRestart}>
<Cog size={16} />
<div className="flex flex-col">
<span>{t("preview.rebuild")}</span>
<span className="text-xs text-muted-foreground">
{t("preview.rebuildDescription")}
</span>
</div>
</DropdownMenuItem>
<DropdownMenuItem onClick={onClearSessionData}>
<Trash2 size={16} />
<div className="flex flex-col">
<span>{t("preview.clearCache")}</span>
<span className="text-xs text-muted-foreground">
{t("preview.clearCacheDescription")}
</span>
</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
}
export function DyadProButton({
isDyadProEnabled,
}: {
......
import { useAtom, useAtomValue } from "jotai";
import { previewModeAtom, selectedAppIdAtom } from "../atoms/appAtoms";
import { Eye, Code, AlertTriangle, Wrench, Globe, Shield } from "lucide-react";
import { motion } from "framer-motion";
import { useCheckProblems } from "@/hooks/useCheckProblems";
import { isPreviewOpenAtom } from "@/atoms/viewAtoms";
import { useTranslation } from "react-i18next";
import type { PreviewMode } from "./preview_panel/ActionHeader";
// Right Action Sidebar component - mirrors the left sidebar when collapsed
export const RightActionSidebar = () => {
const { t } = useTranslation("home");
const [previewMode, setPreviewMode] = useAtom(previewModeAtom);
const [isPreviewOpen, setIsPreviewOpen] = useAtom(isPreviewOpenAtom);
const selectedAppId = useAtomValue(selectedAppIdAtom);
const { problemReport } = useCheckProblems(selectedAppId);
const selectPanel = (panel: PreviewMode) => {
if (previewMode === panel) {
setIsPreviewOpen(!isPreviewOpen);
} else {
setPreviewMode(panel);
setIsPreviewOpen(true);
}
};
// Get the problem count for the selected app
const problemCount = problemReport ? problemReport.problems.length : 0;
// Format the problem count for display
const formatProblemCount = (count: number): string => {
if (count === 0) return "";
if (count > 100) return "100+";
return count.toString();
};
const displayCount = formatProblemCount(problemCount);
const iconSize = 18;
const renderButton = (
mode: PreviewMode,
icon: React.ReactNode,
text: string,
testId: string,
badge?: React.ReactNode,
) => {
const isActive = previewMode === mode && isPreviewOpen;
return (
<button
data-testid={testId}
className={`no-app-region-drag cursor-pointer relative flex flex-col items-center justify-center w-12 h-12 rounded-lg font-medium transition-colors duration-150 active:scale-90 ${
isActive
? "text-sidebar-accent-foreground"
: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
}`}
onClick={() => selectPanel(mode)}
>
{isActive && (
<motion.div
layoutId="active-sidebar-indicator"
className="absolute inset-0 rounded-lg bg-sidebar-accent"
transition={{ type: "spring", stiffness: 500, damping: 35 }}
/>
)}
<div className="relative z-10">
{icon}
{badge}
</div>
<span className="relative z-10 text-[10px] leading-tight mt-0.5 truncate max-w-full">
{text}
</span>
</button>
);
};
return (
<div className="flex flex-col h-full w-16 pl-1 -mr-1.5 bg-sidebar border-l border-sidebar-border">
{/* Main action buttons */}
<div className="flex flex-col items-center gap-1 pt-2 flex-1">
{renderButton(
"preview",
<Eye size={iconSize} />,
t("preview.title"),
"preview-mode-button",
)}
{renderButton(
"problems",
<AlertTriangle size={iconSize} />,
t("preview.problems"),
"problems-mode-button",
displayCount && (
<span className="absolute -top-1 -right-1 px-1 py-0.5 text-[10px] font-medium bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 rounded-full min-w-[16px] text-center">
{displayCount}
</span>
),
)}
{renderButton(
"code",
<Code size={iconSize} />,
t("preview.code"),
"code-mode-button",
)}
{renderButton(
"configure",
<Wrench size={iconSize} />,
t("preview.configure"),
"configure-mode-button",
)}
{renderButton(
"security",
<Shield size={iconSize} />,
t("preview.security"),
"security-mode-button",
)}
{renderButton(
"publish",
<Globe size={iconSize} />,
t("preview.publish"),
"publish-mode-button",
)}
</div>
</div>
);
};
......@@ -201,7 +201,7 @@ export const ActionHeader = () => {
const iconSize = 15;
return (
<div className="flex items-center justify-between px-1 py-2 mt-1 border-b border-border">
<div className="flex items-center justify-between px-2 py-2 border-b border-border bg-(--sidebar)">
<div className="relative flex rounded-md p-0.5 gap-0.5">
<motion.div
className="absolute top-0.5 bottom-0.5 bg-[var(--background-lightest)] shadow rounded-md"
......
......@@ -7,6 +7,7 @@ import {
} from "react-resizable-panels";
import { ChatPanel } from "../components/ChatPanel";
import { PreviewPanel } from "../components/preview_panel/PreviewPanel";
import { RightActionSidebar } from "../components/RightActionSidebar";
import { useNavigate, useSearch } from "@tanstack/react-router";
import { cn } from "@/lib/utils";
import { useAtom, useAtomValue, useSetAtom } from "jotai";
......@@ -135,6 +136,7 @@ export default function ChatPage() {
>
<PreviewPanel />
</Panel>
<RightActionSidebar />
</PanelGroup>
);
}
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论