refactor(web): settings switches are @pi/ui's slide toggle

Visibility, the public's proposals, the definition of done and the link
for clients each had a hand-made switch; they use pi-slide-toggle now,
like the bell's, with their state written beside it.

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

libs/web/tracker/presenters/src/lib/ui/client-share.ts

@@ -7,7 +7,7 @@ import {
   input,
   untracked,
 } from '@angular/core';
-import { PiCheckboxComponent } from '@pi/ui';
+import { PiCheckboxComponent, PiSlideToggleComponent } from '@pi/ui';
 import { ToastService } from '@task-stream/web/shared/ui';
 import {
   provideSharingFacade,
@@ -37,7 +37,7 @@ const DEFAULT_BLOCKS: SharedBlock[] = ['flow', 'sprint', 'releases'];
 @Component({
   selector: 'ts-client-share',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [PiCheckboxComponent],
+  imports: [PiCheckboxComponent, PiSlideToggleComponent],
   providers: [provideSharingFacade()],
   host: { class: 'ts-panel', role: 'region', 'aria-labelledby': 'share-title' },
   template: `
@@ -49,17 +49,17 @@ const DEFAULT_BLOCKS: SharedBlock[] = ['flow', 'sprint', 'releases'];
           enseña personas ni tickets sueltos (salvo las épicas).
         </p>
       </div>
-      <label class="ts-switch">
-        <input
-          type="checkbox"
-          role="switch"
+      <div class="ts-toggle">
+        <pi-slide-toggle
+          label="Panel para clientes compartido"
           [checked]="!!sharing.share()"
           [disabled]="!sharing.loaded() || sharing.busy()"
-          (change)="toggle($any($event.target).checked)"
+          (checkedChange)="toggle($event)"
         />
-        <span class="ts-switch__track" aria-hidden="true"></span>
-        <span>{{ sharing.share() ? 'Compartido' : 'Sin compartir' }}</span>
-      </label>
+        <span aria-hidden="true">{{
+          sharing.share() ? 'Compartido' : 'Sin compartir'
+        }}</span>
+      </div>
     </div>
 
     @if (sharing.share(); as share) {
@@ -186,53 +186,12 @@ const DEFAULT_BLOCKS: SharedBlock[] = ['flow', 'sprint', 'releases'];
       color: var(--ts-c-red);
       font-size: 0.875rem;
     }
-    .ts-switch {
+    .ts-toggle {
       display: inline-flex;
       align-items: center;
       gap: 0.625rem;
       font-size: 0.875rem;
       font-weight: 600;
-      cursor: pointer;
-      input {
-        position: absolute;
-        opacity: 0;
-        width: 1px;
-        height: 1px;
-      }
-      input:focus-visible + .ts-switch__track {
-        outline: 2px solid var(--ts-brand);
-        outline-offset: 2px;
-      }
-      input:disabled ~ * {
-        opacity: 0.6;
-        cursor: default;
-      }
-    }
-    .ts-switch__track {
-      position: relative;
-      width: 2.5rem;
-      height: 1.375rem;
-      border-radius: 999px;
-      background: var(--ts-line-strong);
-      transition: background-color 0.15s ease;
-      &::after {
-        content: '';
-        position: absolute;
-        top: 3px;
-        left: 3px;
-        width: 1rem;
-        height: 1rem;
-        border-radius: 50%;
-        background: var(--ts-surface);
-        box-shadow: var(--ts-shadow);
-        transition: transform 0.15s ease;
-      }
-    }
-    .ts-switch input:checked + .ts-switch__track {
-      background: var(--ts-brand);
-      &::after {
-        transform: translateX(1.125rem);
-      }
     }
   `,
 })