slskd: /soulseek search + downloads on the Workspace/Panel framework

Two panels (search + transfers) via WorkspaceView, coordinating over the
soulseek:refresh channel. Adds the page-title rule and documents the
route conventions in CLAUDE.md.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/apps/officer-web/Screens/Dashboard/Layout/Dock.tsx

@@ -5,8 +5,10 @@ import type { LucideIcon } from 'lucide-react';
 export type DockItem = {
   label: string;
   to: string;
-  icon: LucideIcon;
   color: string;
+  // Either a lucide glyph (rendered white on the coloured tile) or an image asset (e.g. an app favicon).
+  icon?: LucideIcon;
+  image?: string;
 };
 
 type DockProps = {
@@ -99,7 +101,11 @@ export const Dock = ({ items, className, boundaryRef }: DockProps) => {
                 boxShadow: active ? `0 0 12px ${item.color}40` : 'none',
               }}
             >
-              <item.icon className="h-5 w-5 md:h-6 md:w-6 text-white" />
+              {item.image ? (
+                <img src={item.image} alt="" className="h-7 w-7 md:h-8 md:w-8 object-contain" />
+              ) : (
+                item.icon && <item.icon className="h-5 w-5 md:h-6 md:w-6 text-white" />
+              )}
             </div>
             {active && (
               <div className="absolute -bottom-1.5 w-1.5 h-1.5 rounded-full" style={{ background: item.color }} />
@@ -136,6 +142,7 @@ export const ALL_DOCK_ITEMS: DockItem[] = [
   { label: 'Email', to: '/email', icon: Mail, color: '#ef4444' },
   { label: 'Chat', to: '/chat', icon: MessageCircle, color: '#60a5fa' },
   { label: 'Music', to: '/music', icon: Music, color: '#22c55e' },
+  { label: 'Soulseek', to: '/soulseek', image: '/slskd.png', color: '#ffffff' },
   { label: 'Editor', to: '/code-editor', icon: Code, color: '#a78bfa' },
   { label: 'Plans', to: '/plans', icon: FileText, color: '#f472b6' },
   { label: 'Jobs', to: '/jobs', icon: Workflow, color: '#14b8a6' },