chore: use formatDurationSeconds consistently for duration display

Replace all manual inline duration formatting (e.g. \`{duration}s\`,
\`{(ms / 1000).toFixed(1)}s\`) with formatDurationSeconds across
RichControlModule, SharedShockerControlModule,
PublicShareClassicControlModule, and RestrictionsSelector.

Author: hhvrc

src/lib/components/ControlModules/PublicShareClassicControlModule.svelte

@@ -9,7 +9,7 @@
   } from '$lib/constants/ControlConstants';
   import type { Control } from '$lib/signalr/models/Control';
   import { ControlType } from '$lib/signalr/models/ControlType';
-  import { getPauseReason } from '$lib/utils';
+  import { formatDurationSeconds, getPauseReason } from '$lib/utils';
   import { useShockerEvents } from '$lib/hooks/shocker-events.svelte';
   import ActionButtons from './impl/ActionButtons.svelte';
   import CircleSlider from './impl/CircleSlider.svelte';
@@ -84,7 +84,7 @@
       </span>
       <span class="flex items-center gap-1" title="Max Duration">
         <ClockFading size={14} />
-        {maxDurationSeconds}s
+        {formatDurationSeconds(maxDurationSeconds)}
       </span>
     </div>
   </div>

src/lib/components/ControlModules/RichControlModule.svelte

@@ -10,6 +10,7 @@
   import { getConnection } from '$lib/signalr/user.svelte';
   import { ControlType } from '$lib/signalr/models/ControlType';
   import { serializeControlMessages } from '$lib/signalr/serializers/Control';
+  import { formatDurationSeconds } from '$lib/utils';
   import { useShockerEvents } from '$lib/hooks/shocker-events.svelte';
   import ActionButtons from './impl/ActionButtons.svelte';
 
@@ -38,7 +39,7 @@
   <p>{intensity}%</p>
   <Timer />
   <input type="range" bind:value={duration} {...ControlDurationProps} />
-  <p>{duration}s</p>
+  <p>{formatDurationSeconds(duration)}</p>
 </div>
 <!-- Buttons -->
 <ActionButtons {ctrl} {duration} {active} {disabled} />

src/lib/components/ControlModules/SharedShockerControlModule.svelte

@@ -10,6 +10,7 @@
   import { getConnection } from '$lib/signalr/user.svelte';
   import { ControlType } from '$lib/signalr/models/ControlType';
   import { serializeControlMessages } from '$lib/signalr/serializers/Control';
+  import { formatDurationSeconds } from '$lib/utils';
   import { useShockerEvents } from '$lib/hooks/shocker-events.svelte';
   import ActionButtons from './impl/ActionButtons.svelte';
   import CircleSlider from './impl/CircleSlider.svelte';
@@ -86,7 +87,7 @@
       </span>
       <span class="flex items-center gap-1" title="Max Duration">
         <ClockFading size={14} />
-        {maxDurationSeconds}s
+        {formatDurationSeconds(maxDurationSeconds)}
       </span>
     </div>
   </div>

src/lib/components/shares/restrictions-selector.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Volume2, Waves, Zap } from '@lucide/svelte';
+  import { formatDurationSeconds } from '$lib/utils';
   import { Label } from '$lib/components/ui/label';
   import { Slider } from '$lib/components/ui/slider';
   import { Switch } from '$lib/components/ui/switch';
@@ -62,7 +63,7 @@
       <div class="flex items-center justify-between">
         <Label class="text-xs">Max Duration</Label>
         <span class="text-muted-foreground font-mono text-xs"
-          >{(limits.duration / 1000).toFixed(1)}s</span
+          >{formatDurationSeconds(limits.duration / 1000)}</span
         >
       </div>
       <Slider type="single" bind:value={limits.duration} min={0} max={30_000} step={100} />