design(preview): organize address bar tools, move refresh button to far left
This commit is contained in:
@@ -21,65 +21,59 @@ export function ProjectIconRail({ workspace, projectId, actions }: Props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<nav style={bar} aria-label="Project sections">
|
<nav style={bar} aria-label="Project sections">
|
||||||
{/* Dynamic Left Content Area (e.g. Preview Device Toggles & URL bar) */}
|
<div style={primaryGroup}>
|
||||||
|
<Link
|
||||||
|
href={`${projectBase}/preview`}
|
||||||
|
style={{
|
||||||
|
padding: "4px 12px",
|
||||||
|
fontSize: "0.75rem",
|
||||||
|
fontWeight: 500,
|
||||||
|
borderRadius: 6,
|
||||||
|
textDecoration: "none",
|
||||||
|
background: isPreviewActive ? "#ffffff" : "transparent",
|
||||||
|
color: isPreviewActive ? "#18181b" : "#71717a",
|
||||||
|
boxShadow: isPreviewActive ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
|
||||||
|
transition: "all 0.15s ease",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Preview
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href={`${projectBase}/plan`}
|
||||||
|
style={{
|
||||||
|
padding: "4px 12px",
|
||||||
|
fontSize: "0.75rem",
|
||||||
|
fontWeight: 500,
|
||||||
|
borderRadius: 6,
|
||||||
|
textDecoration: "none",
|
||||||
|
background: !isPreviewActive ? "#ffffff" : "transparent",
|
||||||
|
color: !isPreviewActive ? "#18181b" : "#71717a",
|
||||||
|
boxShadow: !isPreviewActive ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
|
||||||
|
transition: "all 0.15s ease",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Dashboard
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
gap: 12,
|
|
||||||
flex: 1,
|
flex: 1,
|
||||||
minWidth: 0,
|
minWidth: 0,
|
||||||
|
marginLeft: 12,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={primaryGroup}>
|
|
||||||
<Link
|
|
||||||
href={`${projectBase}/preview`}
|
|
||||||
style={{
|
|
||||||
padding: "4px 12px",
|
|
||||||
fontSize: "0.75rem",
|
|
||||||
fontWeight: 500,
|
|
||||||
borderRadius: 6,
|
|
||||||
textDecoration: "none",
|
|
||||||
background: isPreviewActive ? "#ffffff" : "transparent",
|
|
||||||
color: isPreviewActive ? "#18181b" : "#71717a",
|
|
||||||
boxShadow: isPreviewActive
|
|
||||||
? "0 1px 2px rgba(0,0,0,0.05)"
|
|
||||||
: "none",
|
|
||||||
transition: "all 0.15s ease",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Preview
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
href={`${projectBase}/plan`}
|
|
||||||
style={{
|
|
||||||
padding: "4px 12px",
|
|
||||||
fontSize: "0.75rem",
|
|
||||||
fontWeight: 500,
|
|
||||||
borderRadius: 6,
|
|
||||||
textDecoration: "none",
|
|
||||||
background: !isPreviewActive ? "#ffffff" : "transparent",
|
|
||||||
color: !isPreviewActive ? "#18181b" : "#71717a",
|
|
||||||
boxShadow: !isPreviewActive
|
|
||||||
? "0 1px 2px rgba(0,0,0,0.05)"
|
|
||||||
: "none",
|
|
||||||
transition: "all 0.15s ease",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Dashboard
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isPreviewActive && <PreviewDeviceToggles />}
|
{isPreviewActive && <PreviewDeviceToggles />}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right Content Area (Publish Button) */}
|
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: "flex-end",
|
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
gap: 12,
|
flexShrink: 0,
|
||||||
|
marginLeft: 12,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{actions}
|
{actions}
|
||||||
@@ -103,27 +97,95 @@ function PreviewDeviceToggles() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{ display: "flex", alignItems: "center", gap: 8, width: "100%" }}
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: 6,
|
||||||
|
background: "#fafafa",
|
||||||
|
border: "1px solid #e4e4e7",
|
||||||
|
padding: "4px 8px",
|
||||||
|
borderRadius: 8,
|
||||||
|
height: 34,
|
||||||
|
flex: 1,
|
||||||
|
minWidth: 0, // critical for input overflow to work
|
||||||
|
color: "#71717a",
|
||||||
|
fontSize: "0.75rem",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<button
|
||||||
|
onClick={triggerRefresh}
|
||||||
|
title="Reload Preview"
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
gap: 6,
|
justifyContent: "center",
|
||||||
background: "#fafafa",
|
width: 24,
|
||||||
border: "1px solid #e4e4e7",
|
height: 24,
|
||||||
padding: "4px 8px",
|
borderRadius: 4,
|
||||||
borderRadius: 8,
|
border: "none",
|
||||||
height: 34,
|
cursor: "pointer",
|
||||||
flex: 1, // Let the URL bar grow to fill the header space
|
transition: "all 0.15s",
|
||||||
minWidth: 320,
|
background: "transparent",
|
||||||
color: "#71717a",
|
color: "#71717a",
|
||||||
fontSize: "0.75rem",
|
flexShrink: 0,
|
||||||
|
}}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
e.currentTarget.style.background = "#e4e4e7";
|
||||||
|
e.currentTarget.style.color = "#18181b";
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
e.currentTarget.style.background = "transparent";
|
||||||
|
e.currentTarget.style.color = "#71717a";
|
||||||
}}
|
}}
|
||||||
|
>
|
||||||
|
<RotateCw size={12} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 1,
|
||||||
|
height: 14,
|
||||||
|
background: "#e4e4e7",
|
||||||
|
margin: "0 2px",
|
||||||
|
flexShrink: 0,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span style={{ opacity: 0.6, flexShrink: 0 }}>🌐</span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={displayUrl}
|
||||||
|
readOnly
|
||||||
|
placeholder="No dev server running..."
|
||||||
|
style={{
|
||||||
|
background: "transparent",
|
||||||
|
border: "none",
|
||||||
|
outline: "none",
|
||||||
|
flex: 1,
|
||||||
|
minWidth: 0,
|
||||||
|
color: "#18181b",
|
||||||
|
fontSize: "0.75rem",
|
||||||
|
textOverflow: "ellipsis",
|
||||||
|
paddingLeft: 4,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 1,
|
||||||
|
height: 14,
|
||||||
|
background: "#e4e4e7",
|
||||||
|
margin: "0 4px",
|
||||||
|
flexShrink: 0,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Device Toggles Inside the Address Bar */}
|
||||||
|
<div
|
||||||
|
style={{ display: "flex", gap: 2, alignItems: "center", flexShrink: 0 }}
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
onClick={triggerRefresh}
|
onClick={() => setDeviceMode("desktop")}
|
||||||
title="Reload Preview"
|
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
@@ -134,108 +196,64 @@ function PreviewDeviceToggles() {
|
|||||||
border: "none",
|
border: "none",
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
transition: "all 0.15s",
|
transition: "all 0.15s",
|
||||||
background: "transparent",
|
background: deviceMode === "desktop" ? "#e4e4e7" : "transparent",
|
||||||
|
color: deviceMode === "desktop" ? "#18181b" : "#71717a",
|
||||||
|
}}
|
||||||
|
title="Desktop view"
|
||||||
|
>
|
||||||
|
<Monitor size={12} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setDeviceMode("mobile")}
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
width: 24,
|
||||||
|
height: 24,
|
||||||
|
borderRadius: 4,
|
||||||
|
border: "none",
|
||||||
|
cursor: "pointer",
|
||||||
|
transition: "all 0.15s",
|
||||||
|
background: deviceMode === "mobile" ? "#e4e4e7" : "transparent",
|
||||||
|
color: deviceMode === "mobile" ? "#18181b" : "#71717a",
|
||||||
|
}}
|
||||||
|
title="Mobile view"
|
||||||
|
>
|
||||||
|
<Smartphone size={12} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 1,
|
||||||
|
height: 14,
|
||||||
|
background: "#e4e4e7",
|
||||||
|
margin: "0 4px",
|
||||||
|
flexShrink: 0,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{displayUrl ? (
|
||||||
|
<a
|
||||||
|
href={displayUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
title="Open preview in new tab"
|
||||||
|
style={{
|
||||||
color: "#71717a",
|
color: "#71717a",
|
||||||
}}
|
display: "flex",
|
||||||
onMouseEnter={(e) => {
|
padding: "4px",
|
||||||
e.currentTarget.style.background = "#e4e4e7";
|
flexShrink: 0,
|
||||||
e.currentTarget.style.color = "#18181b";
|
|
||||||
}}
|
|
||||||
onMouseLeave={(e) => {
|
|
||||||
e.currentTarget.style.background = "transparent";
|
|
||||||
e.currentTarget.style.color = "#71717a";
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<RotateCw size={12} />
|
<ExternalLink size={14} />
|
||||||
</button>
|
</a>
|
||||||
<div
|
) : (
|
||||||
style={{
|
<div style={{ padding: "4px", opacity: 0.3, flexShrink: 0 }}>
|
||||||
width: 1,
|
<ExternalLink size={14} />
|
||||||
height: 14,
|
|
||||||
background: "#e4e4e7",
|
|
||||||
margin: "0 2px",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={displayUrl}
|
|
||||||
readOnly
|
|
||||||
placeholder="No dev server running..."
|
|
||||||
style={{
|
|
||||||
background: "transparent",
|
|
||||||
border: "none",
|
|
||||||
outline: "none",
|
|
||||||
width: "100%",
|
|
||||||
color: "#18181b",
|
|
||||||
fontSize: "0.75rem",
|
|
||||||
textOverflow: "ellipsis",
|
|
||||||
paddingLeft: 4,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Device Toggles Inside the Address Bar */}
|
|
||||||
<div style={{ display: "flex", gap: 2, alignItems: "center", marginRight: 4 }}>
|
|
||||||
<button
|
|
||||||
onClick={() => setDeviceMode("desktop")}
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
width: 24,
|
|
||||||
height: 24,
|
|
||||||
borderRadius: 4,
|
|
||||||
border: "none",
|
|
||||||
cursor: "pointer",
|
|
||||||
transition: "all 0.15s",
|
|
||||||
background: deviceMode === "desktop" ? "#e4e4e7" : "transparent",
|
|
||||||
color: deviceMode === "desktop" ? "#18181b" : "#71717a",
|
|
||||||
}}
|
|
||||||
title="Desktop view"
|
|
||||||
>
|
|
||||||
<Monitor size={12} />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setDeviceMode("mobile")}
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
width: 24,
|
|
||||||
height: 24,
|
|
||||||
borderRadius: 4,
|
|
||||||
border: "none",
|
|
||||||
cursor: "pointer",
|
|
||||||
transition: "all 0.15s",
|
|
||||||
background: deviceMode === "mobile" ? "#e4e4e7" : "transparent",
|
|
||||||
color: deviceMode === "mobile" ? "#18181b" : "#71717a",
|
|
||||||
}}
|
|
||||||
title="Mobile view"
|
|
||||||
>
|
|
||||||
<Smartphone size={12} />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: 1,
|
|
||||||
height: 14,
|
|
||||||
background: "#e4e4e7",
|
|
||||||
margin: "0 4px",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{displayUrl && (
|
|
||||||
<a
|
|
||||||
href={displayUrl}
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
title="Open preview in new tab"
|
|
||||||
style={{ color: "#71717a", display: "flex", padding: "4px" }}
|
|
||||||
>
|
|
||||||
<ExternalLink size={14} />
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user