Make default workspace icon the Wave logo (#1470)

I made our logo a custom icon in Font Awesome so we can add it to our
workspace switcher as the default icon

.storybook/main.ts

@@ -58,6 +58,7 @@ const config: StorybookConfig = {
         <link rel="stylesheet" href="./fontawesome/css/solid.min.css" />
         <link rel="stylesheet" href="./fontawesome/css/sharp-solid.min.css" />
         <link rel="stylesheet" href="./fontawesome/css/sharp-regular.min.css" />
+        <link rel="stylesheet" href="./fontawesome/css/custom-icons.min.css" />
         <style>
         #storybook-docs {
             [id^="anchor--"],

assets/wave-logo_icon-black.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.8.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 600 400" style="enable-background:new 0 0 600 400;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:url(#SVGID_00000123405442604648655120000000636425700907447225_);}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#58C142;}
+	.st4{fill:url(#SVGID_00000100361222533905006500000012948355425597525920_);}
+	.st5{fill:url(#SVGID_00000039098984540155201650000005728924474174226367_);}
+	.st6{fill:url(#SVGID_00000065066116668922763670000009055193333651929737_);}
+	.st7{fill:url(#SVGID_00000046310373342220590360000000833566212213317053_);}
+	.st8{fill:url(#SVGID_00000067914870925445215340000010520730682335284873_);}
+	.st9{fill:url(#SVGID_00000139972009352615321800000011748188400644384138_);}
+	.st10{fill:url(#SVGID_00000137813723102203423940000002281677718566419372_);}
+	.st11{fill:url(#SVGID_00000117658585713214366330000001759073570098750902_);}
+	.st12{fill:url(#SVGID_00000075146307645666362690000001517567647835044244_);}
+	.st13{fill:url(#SVGID_00000169553343881037582000000012883033354483876241_);}
+</style>
+<g>
+	<path d="M218.2,133.2c51,0,99.3,21.9,138.2,39.5c21.2,9.6,43.1,19.5,53.4,19.5c8,0,21.5,0,30.5-42.1l4.6-21.3l21.6,3.1l66.7,9.6
+		c11.2-27.9,18.8-61.6,22.9-101.2L426.4,21.7c-8.6,40.3-24.5,60.5-53.3,60.5c-37.4,0-113.8-59.1-191.6-59.1
+		C76.4,23.1,23.2,89.4,7.3,226.2l46,6.7c7.6-15.6,16.4-29.3,26.4-41.2C112.6,152.9,159.2,133.2,218.2,133.2z"/>
+	<path d="M409.8,215.6c-37.4,0-113.8-59.1-191.6-59.1c-105.1,0-158.4,66.3-174.3,203.1l129.6,18.7c8.7-41.8,24.5-60.5,53.3-60.5
+		c38.9,0,112.3,59.1,191.6,59.1c105.1,0,159.9-66.3,174.3-203.1l-129.6-18.7C454.4,195.4,438.6,215.6,409.8,215.6z"/>
+</g>
+</svg>

frontend/app/tab/workspaceswitcher.tsx

@@ -43,7 +43,7 @@ const colors = [
 ];
 
 const icons = [
-    "circle",
+    "custom@wave-logo-solid",
     "triangle",
     "star",
     "heart",
@@ -93,7 +93,7 @@ const IconSelector = memo(({ icons, selectedIcon, onSelect, className }: IconSel
     return (
         <div className={clsx("icon-selector", className)}>
             {icons.map((icon) => {
-                const iconClass = makeIconClass(icon, false);
+                const iconClass = makeIconClass(icon, true);
                 return (
                     <i
                         key={icon}

frontend/util/util.ts

@@ -103,6 +103,11 @@ function makeIconClass(icon: string, fw: boolean, opts?: { spin?: boolean; defau
         icon = icon.replace(/^brands@/, "");
         return clsx(`fa fa-brands fa-${icon}`, fw ? "fa-fw" : null, opts?.spin ? "fa-spin" : null);
     }
+    if (icon.match(/^custom@[a-z0-9-]+$/)) {
+        // strip off the "custom@" prefix if it exists
+        icon = icon.replace(/^custom@/, "");
+        return clsx(`fa fa-kit fa-${icon}`, fw ? "fa-fw" : null, opts?.spin ? "fa-spin" : null);
+    }
     if (opts?.defaultIcon != null) {
         return makeIconClass(opts.defaultIcon, fw, { spin: opts?.spin });
     }

index.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="/fontawesome/css/solid.min.css" />
     <link rel="stylesheet" href="/fontawesome/css/sharp-solid.min.css" />
     <link rel="stylesheet" href="/fontawesome/css/sharp-regular.min.css" />
+    <link rel="stylesheet" href="/fontawesome/css/custom-icons.min.css" />
     <script type="module" src="frontend/wave.ts"></script>
   </head>
   <body class="init">

pkg/wcore/wcore.go

@@ -54,7 +54,7 @@ func EnsureInitialData() error {
 		return nil
 	}
 	log.Println("client has no windows, creating starter workspace")
-	starterWs, err := CreateWorkspace(ctx, "Starter workspace", "circle", "#58C142", true)
+	starterWs, err := CreateWorkspace(ctx, "Starter workspace", "custom@wave-logo-solid", "#58C142", true)
 	if err != nil {
 		return fmt.Errorf("error creating starter workspace: %w", err)
 	}

public/fontawesome/css/custom-icons.min.css

@@ -0,0 +1 @@
+@charset "utf-8";.fak.fa-wave-logo-solid,.fa-kit.fa-wave-logo-solid{--fa:"";--fa--fa:""}.fak,.fa-kit{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:var(--fa-display,inline-block);font-variant:normal;text-rendering:auto;font-family:Font Awesome Kit;font-style:normal;font-weight:400;line-height:1}.fak:before,.fa-kit:before{content:var(--fa)}@font-face{font-family:Font Awesome Kit;font-style:normal;font-display:block;src:url(../webfonts/custom-icons.woff2)format("woff2"),url(../webfonts/custom-icons.ttf)format("truetype")}