refactor: extract render methods for workspace panel templates

Break the dense one-liner workspace-panel and expand-button templates
into multi-line formatted render methods for readability and safer
future edits.

src/client/src/components/PiWebApp.ts

@@ -511,13 +511,37 @@ export class PiWebApp extends LitElement {
     const panelContext = workspace === undefined ? undefined : this.createWorkspacePanelContext(workspace);
     const workspaceLabelItems = workspace === undefined ? [] : this.plugins.getWorkspaceLabelItems(this.state, workspace);
     const emptyState = workspace === undefined ? this.workspacePanelEmptyState() : undefined;
-    return html`<workspace-panel .workspace=${workspace} .panelContext=${panelContext} .emptyState=${emptyState} .tool=${this.state.workspaceTool} .panels=${this.visibleWorkspacePanels()} .workspaceLabelItems=${workspaceLabelItems} .onSelectTool=${(tool: QualifiedContributionId) => { this.openWorkspaceTool(tool); }} .onToggleCollapse=${() => { this.toggleWorkspacePanelCollapse(); }}></workspace-panel>`;
+    return html`
+      <workspace-panel
+        .workspace=${workspace}
+        .panelContext=${panelContext}
+        .emptyState=${emptyState}
+        .tool=${this.state.workspaceTool}
+        .panels=${this.visibleWorkspacePanels()}
+        .workspaceLabelItems=${workspaceLabelItems}
+        .onSelectTool=${(tool: QualifiedContributionId) => { this.openWorkspaceTool(tool); }}
+        .onToggleCollapse=${() => { this.toggleWorkspacePanelCollapse(); }}
+      ></workspace-panel>
+    `;
   }
 
   private toggleWorkspacePanelCollapse(): void {
     this.setState({ workspacePanelCollapsed: !this.state.workspacePanelCollapsed });
   }
 
+  private renderExpandWorkspacePanelButton() {
+    return html`
+      <div class="expand-panel-strip">
+        <button
+          class="expand-workspace-panel-button"
+          title="Toggle Panel"
+          aria-label="Toggle Panel"
+          @click=${() => { this.toggleWorkspacePanelCollapse(); }}
+        ><svg class="expand-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15 18l-6-6 6-6"/></svg></button>
+      </div>
+    `;
+  }
+
   private renderNavigationPanel(autoSwitchToChat: boolean) {
     const openChatAfter = (action: () => Promise<void>) => this.withChatScrollTransition(async () => {
       await action();
@@ -1200,7 +1224,7 @@ export class PiWebApp extends LitElement {
         <aside>${this.isMobileNavigationLayout ? null : this.renderNavigationPanel(false)}</aside>
         <main class=${state.mainView === "chat" ? "chat-view" : state.mainView === "navigation" ? "navigation-view" : "workspace-view"}>
           ${this.renderContextBar()}
-          ${state.workspacePanelCollapsed ? html`<div class="expand-panel-strip"><button class="expand-workspace-panel-button" title="Toggle Panel" aria-label="Toggle Panel" @click=${() => { this.toggleWorkspacePanelCollapse(); }}><svg class="expand-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15 18l-6-6 6-6"/></svg></button></div>` : null}
+          ${state.workspacePanelCollapsed ? this.renderExpandWorkspacePanelButton() : null}
           <div class=${this.mobileTabsFrameClass()}>
             <div class="mobile-tabs" @scroll=${this.onMobileTabsScroll}>
               <button class=${state.mainView === "navigation" ? "mobile-navigation-tab selected" : "mobile-navigation-tab"} @click=${() => { this.selectMainView("navigation"); }}>Sessions</button>