Add pause controls and app attribution to the web app

Settings gets a Sharing card (pause 1 hour / until tomorrow / until
turned back on); the feed shows a resume banner while paused. Now-playing
cards say which app a phone reported, e.g. "via Spotify".

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MzFywujuH9TiuXbr9vjoX8

apps/web/src/app/page.tsx

@@ -4,6 +4,7 @@ import Link from 'next/link';
 import useSWR from 'swr';
 import { sortFeed, type FeedItemDTO, type ProfileDTO } from '@musicshare/shared';
 import { NowPlayingCard } from '@/components/NowPlayingCard';
+import { SharingControls } from '@/components/SharingControls';
 import { UserSearch } from '@/components/UserSearch';
 import { api, fetcher, useMe } from '@/lib/api';
 import { useRealtime } from '@/lib/useRealtime';
@@ -53,6 +54,7 @@ function Feed() {
   return (
     <div className="stack">
       <UserSearch />
+      <SharingControls compact />
       {mine?.nowPlaying && (
         <section className="stack">
           <h2 className="section-label">You</h2>

apps/web/src/app/settings/page.tsx

@@ -11,6 +11,7 @@ import {
   type NowPlayingProvider,
   type TrackSearchResultDTO,
 } from '@musicshare/shared';
+import { SharingControls } from '@/components/SharingControls';
 import { api, fetcher, useMe } from '@/lib/api';
 import { timeAgo } from '@musicshare/shared';
 import { useDebounced } from '@/lib/useDebounced';
@@ -32,6 +33,7 @@ function Settings() {
     <div className="stack">
       <h1>Settings</h1>
       <ProfileForm me={me} />
+      <SharingControls />
       <Connections />
       <FeaturedPicker />
       <DangerZone />