feat: add bundled plugin tab icons

.changeset/mobile-tab-icons.md

@@ -2,4 +2,4 @@
 "@jmfederico/pi-web": patch
 ---
 
-Use compact icons, initials, and inline badges for the mobile main tab bar so tabs are easier to fit without losing horizontal scrolling, and let workspace panel plugins provide custom SVG tab icons.
+Use compact icons, initials, and inline badges for the mobile main tab bar so tabs are easier to fit without losing horizontal scrolling; let workspace panel plugins provide custom SVG tab icons; and add icons for bundled Info, Updates, and Tasks plugin panels.

pi-web-plugins/info/pi-web-plugin.ts

@@ -3,7 +3,7 @@ import type { PiWebPlugin } from "../../src/client/src/plugins/types";
 const plugin: PiWebPlugin = {
   apiVersion: 1,
   name: "Info Plugin",
-  activate: ({ html }) => ({
+  activate: ({ html, svg }) => ({
     contributions: {
       actions: [
         {
@@ -28,6 +28,13 @@ const plugin: PiWebPlugin = {
         {
           id: "workspace.info",
           title: "Info",
+          icon: svg`
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="9"></circle>
+              <path d="M12 11v5"></path>
+              <path d="M12 8h.01"></path>
+            </svg>
+          `,
           order: 1000,
           render: (context) => html`
             <section class="toolbar"><strong>Info</strong></section>

pi-web-plugins/pi-web/pi-web-plugin.ts

@@ -149,12 +149,20 @@ function renderStatusPanel(html: HtmlTemplateTag, state: AppState): TemplateResu
 const plugin: PiWebPlugin = {
   apiVersion: 1,
   name: "PI WEB Updates",
-  activate: ({ html }) => ({
+  activate: ({ html, svg }) => ({
     contributions: {
       workspacePanels: [
         {
           id: "workspace.status",
           title: "Updates",
+          icon: svg`
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M20 6v5h-5"></path>
+              <path d="M4 18v-5h5"></path>
+              <path d="M18.4 9A7 7 0 0 0 6.1 6.7L4 8.8"></path>
+              <path d="M5.6 15A7 7 0 0 0 17.9 17.3L20 15.2"></path>
+            </svg>
+          `,
           order: 100,
           visible: (context) => shouldShowStatusPanel(context.state),
           badge: (context) => {

pi-web-plugins/workspace-tasks/pi-web-plugin.ts

@@ -6,7 +6,7 @@ import { terminalCommandRunsFromContext } from "./piWebInternal.js";
 const plugin: PiWebPlugin = {
   apiVersion: 1,
   name: "Workspace Tasks",
-  activate: ({ pluginId, html }) => {
+  activate: ({ pluginId, html, svg }) => {
     defineTasksPanelElement();
 
     return {
@@ -28,6 +28,16 @@ const plugin: PiWebPlugin = {
           {
             id: "workspace.tasks",
             title: "Tasks",
+            icon: svg`
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M9 6h11"></path>
+                <path d="M9 12h11"></path>
+                <path d="M9 18h11"></path>
+                <path d="m4 6 .8 .8L6.5 5"></path>
+                <path d="m4 12 .8 .8 1.7-1.8"></path>
+                <path d="m4 18 .8 .8 1.7-1.8"></path>
+              </svg>
+            `,
             order: 40,
             badge: ({ workspace }) => tasksPanelBadge(workspace),
             render: (context) => html`<pi-web-workspace-tasks-panel .workspace=${context.workspace} .terminalCommandRuns=${terminalCommandRunsFromContext(context)} .openTerminal=${context.openTerminal}></pi-web-workspace-tasks-panel>`,