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 (
|
||||
<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
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 12,
|
||||
flex: 1,
|
||||
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 />}
|
||||
</div>
|
||||
|
||||
{/* Right Content Area (Publish Button) */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
alignItems: "center",
|
||||
gap: 12,
|
||||
flexShrink: 0,
|
||||
marginLeft: 12,
|
||||
}}
|
||||
>
|
||||
{actions}
|
||||
@@ -103,27 +97,95 @@ function PreviewDeviceToggles() {
|
||||
|
||||
return (
|
||||
<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={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
background: "#fafafa",
|
||||
border: "1px solid #e4e4e7",
|
||||
padding: "4px 8px",
|
||||
borderRadius: 8,
|
||||
height: 34,
|
||||
flex: 1, // Let the URL bar grow to fill the header space
|
||||
minWidth: 320,
|
||||
justifyContent: "center",
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 4,
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
transition: "all 0.15s",
|
||||
background: "transparent",
|
||||
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
|
||||
onClick={triggerRefresh}
|
||||
title="Reload Preview"
|
||||
onClick={() => setDeviceMode("desktop")}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
@@ -134,108 +196,64 @@ function PreviewDeviceToggles() {
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
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",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = "#e4e4e7";
|
||||
e.currentTarget.style.color = "#18181b";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = "transparent";
|
||||
e.currentTarget.style.color = "#71717a";
|
||||
display: "flex",
|
||||
padding: "4px",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<RotateCw size={12} />
|
||||
</button>
|
||||
<div
|
||||
style={{
|
||||
width: 1,
|
||||
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>
|
||||
<ExternalLink size={14} />
|
||||
</a>
|
||||
) : (
|
||||
<div style={{ padding: "4px", opacity: 0.3, flexShrink: 0 }}>
|
||||
<ExternalLink size={14} />
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user