mirror of
https://github.com/nexu-io/open-design.git
synced 2026-09-28 05:22:59 +08:00
fix(web): show folder icons and unread dots in recent projects
This commit is contained in:
@@ -20,6 +20,7 @@ import type { ProjectDisplayStatus, WorkspaceCollabContext } from '@open-design/
|
||||
|
||||
import { useT } from '../../i18n';
|
||||
import { RemixIcon } from '../RemixIcon';
|
||||
import { Icon } from '../Icon';
|
||||
import { hasRunStatusGlyph, ProjectRunStatusIcon } from '../ProjectRunStatusIcon';
|
||||
import { STATUS_LABEL_KEYS } from '../../state/projectRunStatus';
|
||||
import { exportProjectAsZip } from '../../runtime/exports';
|
||||
@@ -131,31 +132,6 @@ function DeleteMark() {
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* The mark every recent row leads with (supplied artwork): a chat bubble with a
|
||||
* spark, i.e. "a conversation with the agent lives in here" — which is what a
|
||||
* project is from the rail's point of view.
|
||||
*
|
||||
* Inlined for the same reason as the marks above: the shared icon set has no
|
||||
* glyph for it, and this is the only place it appears. `currentColor` is what
|
||||
* lets it take the row's ink, including the darker hover one.
|
||||
*/
|
||||
function ChatMark() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width={16}
|
||||
height={16}
|
||||
fill="currentColor"
|
||||
aria-hidden
|
||||
focusable="false"
|
||||
>
|
||||
<path d="M7.0009 4.00001C3.6869 4.00001 1 6.69522 1 9.99416V22.0001H14.999C18.3131 22.0001 21 19.3049 21 16.0059V12.0001H19V16.0059C19 18.2043 17.2045 20.0001 14.999 20.0001H3V9.99416C3 7.79582 4.7954 6.00001 7.0009 6.00001H13V4.00001H7.0009ZM13 14.0001H15V12.0001H13V14.0001ZM7 14.0001H9V12.0001H7V14.0001ZM19.4707 2.31934C19.2942 1.89355 18.7058 1.89355 18.5293 2.31934L18.2764 2.93067C17.8445 3.97346 17.0385 4.80618 16.0254 5.25685L15.3076 5.57618C14.8973 5.759 14.8974 6.35621 15.3076 6.53908L16.0674 6.87697C17.055 7.31625 17.8466 8.11947 18.2861 9.12795L18.5332 9.69338C18.7136 10.1075 19.2863 10.1075 19.4668 9.69338L19.7139 9.12795C20.1534 8.11948 20.9449 7.31625 21.9326 6.87697L22.6924 6.53908C23.1025 6.35621 23.1026 5.759 22.6924 5.57618L21.9746 5.25685C20.9615 4.80619 20.1555 3.97349 19.7236 2.93067L19.4707 2.31934Z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function RailRecentRow({
|
||||
project,
|
||||
workspaceContext,
|
||||
@@ -351,25 +327,30 @@ export function RailRecentRow({
|
||||
which can also wrap it instead of ellipsizing. */
|
||||
data-testid="entry-nav-recent-item"
|
||||
>
|
||||
{/* The row's leading glyph, in the SAME column the destinations put
|
||||
their icons in, so the rail stays one left edge. A project with a
|
||||
run to report shows that run's status instead of the chat mark
|
||||
(per product: 和项目切换器里的状态对齐) — the very same component
|
||||
the workspace tab dropdown leads its rows with
|
||||
(`leadGlyphFor` in WorkspaceTabsBar), so the two can never tell
|
||||
different stories about the same project. */}
|
||||
{/* Live run states share the project switcher's glyphs. Completed,
|
||||
unread projects retain their folder and show a trailing blue dot;
|
||||
RailRecentSection clears that notice when the project is opened. */}
|
||||
<span className="entry-nav-rail__recent-icon">
|
||||
{runStatus && hasRunStatusGlyph(runStatus) ? (
|
||||
{runStatus && runStatus !== 'succeeded' && hasRunStatusGlyph(runStatus) ? (
|
||||
<ProjectRunStatusIcon
|
||||
status={runStatus}
|
||||
size={14}
|
||||
label={t(STATUS_LABEL_KEYS[runStatus])}
|
||||
/>
|
||||
) : (
|
||||
<ChatMark />
|
||||
<Icon name="folder" size={16} />
|
||||
)}
|
||||
</span>
|
||||
<span className="entry-nav-rail__recent-name">{project.name}</span>
|
||||
{runStatus === 'succeeded' && (
|
||||
<span
|
||||
className="entry-nav-rail__recent-unread"
|
||||
role="img"
|
||||
aria-label={t(STATUS_LABEL_KEYS.succeeded)}
|
||||
title={t(STATUS_LABEL_KEYS.succeeded)}
|
||||
data-testid="entry-nav-recent-unread"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
{onRename || onDelete ? (
|
||||
|
||||
@@ -9699,3 +9699,13 @@ button.entry-nav-rail__menu-credits-row:active:not(:disabled) {
|
||||
font-size: 12px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* A completed recent project keeps its folder and adds an unread notice. */
|
||||
.entry-nav-rail__recent-unread {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
flex: 0 0 6px;
|
||||
margin-left: auto;
|
||||
border-radius: 50%;
|
||||
background: #1F68FE;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user