Skip to content

Commit c8d04af

Browse files
feat: Add status badge to the favicon (#2978)
1 parent bf1af21 commit c8d04af

15 files changed

+74
-4
lines changed

site/htmlTemplates/index.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,14 @@
2222
data-statuscode="{{ .APIResponse.StatusCode }}"
2323
data-message="{{ .APIResponse.Message }}"
2424
/>
25-
<link rel="mask-icon" href="/static/favicon.svg" color="#000000" crossorigin="use-credentials" />
26-
<link rel="alternate icon" type="image/png" href="/favicon.png" />
27-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
25+
<!-- We need to set data-react-helmet to be able to override it in the workspace page -->
26+
<link
27+
rel="alternate icon"
28+
type="image/png"
29+
href="/favicons/favicon.png"
30+
data-react-helmet="true"
31+
/>
32+
<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" data-react-helmet="true" />
2833
</head>
2934

3035
<body>

site/src/pages/WorkspacePage/WorkspacePage.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
1010
import { Workspace } from "../../components/Workspace/Workspace"
1111
import { firstOrItem } from "../../util/array"
1212
import { pageTitle } from "../../util/page"
13+
import { getFaviconByStatus } from "../../util/workspace"
1314
import { selectUser } from "../../xServices/auth/authSelectors"
1415
import { XServiceContext } from "../../xServices/StateContext"
1516
import { workspaceMachine } from "../../xServices/workspace/workspaceXService"
@@ -50,10 +51,13 @@ export const WorkspacePage: React.FC = () => {
5051
} else if (!workspace) {
5152
return <FullScreenLoader />
5253
} else {
54+
const favicon = getFaviconByStatus(workspace.latest_build)
5355
return (
5456
<>
5557
<Helmet>
5658
<title>{pageTitle(`${workspace.owner_name}/${workspace.name}`)}</title>
59+
<link rel="alternate icon" type="image/png" href={`/favicons/${favicon}.png`} />
60+
<link rel="icon" type="image/svg+xml" href={`/favicons/${favicon}.svg`} />
5761
</Helmet>
5862

5963
<Workspace

site/src/util/workspace.ts

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -281,3 +281,41 @@ export const defaultWorkspaceExtension = (
281281
deadline: fourHoursFromNow.format(),
282282
}
283283
}
284+
285+
// You can see the favicon designs here: https://www.figma.com/file/YIGBkXUcnRGz2ZKNmLaJQf/Coder-v2-Design?node-id=560%3A620
286+
287+
type FaviconType =
288+
| "favicon"
289+
| "favicon-success"
290+
| "favicon-error"
291+
| "favicon-warning"
292+
| "favicon-running"
293+
294+
export const getFaviconByStatus = (build: TypesGen.WorkspaceBuild): FaviconType => {
295+
const status = getWorkspaceStatus(build)
296+
switch (status) {
297+
case undefined:
298+
return "favicon"
299+
case "started":
300+
return "favicon-success"
301+
case "starting":
302+
return "favicon-running"
303+
case "stopping":
304+
return "favicon-running"
305+
case "stopped":
306+
return "favicon"
307+
case "deleting":
308+
return "favicon"
309+
case "deleted":
310+
return "favicon"
311+
case "canceling":
312+
return "favicon-warning"
313+
case "canceled":
314+
return "favicon"
315+
case "error":
316+
return "favicon-error"
317+
case "queued":
318+
return "favicon"
319+
}
320+
throw new Error("unknown status " + status)
321+
}

site/static/favicon.png

-571 Bytes
Binary file not shown.

site/static/favicon.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.
2.52 KB
Loading
Lines changed: 4 additions & 0 deletions
Loading
2.43 KB
Loading
Lines changed: 4 additions & 0 deletions
Loading
2.4 KB
Loading
Lines changed: 4 additions & 0 deletions
Loading
2.44 KB
Loading
Lines changed: 4 additions & 0 deletions
Loading

site/static/favicons/favicon.png

1.86 KB
Loading

0 commit comments

Comments
 (0)