From a1e0e7c7c0b757677a7ea92ba304785ca8dbf49a Mon Sep 17 00:00:00 2001
From: lorentz <lorentz@wulfconsulting.com>
Date: Thu, 5 Feb 2026 08:13:25 -0500
Subject: [PATCH] feat: improve ticker layout and speed controls

- Restructured ticker to show ticket number and title on first line
- Company name now displays on second line below ticket
- Adjusted ticker speed slider range: 8s-120s (was 10s-120s)
- Changed step from 5s to 2s for finer speed control
- Allows 25% faster speed adjustment (down to 8s)
- Better two-line layout for improved readability
---
 components/kiosk/settings-panel.tsx | 31 +++++++++++++++++++++++++----
 components/kiosk/ticker.tsx         | 25 +++++++++++++----------
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/components/kiosk/settings-panel.tsx b/components/kiosk/settings-panel.tsx
index 169ef40..62a0d8d 100644
--- a/components/kiosk/settings-panel.tsx
+++ b/components/kiosk/settings-panel.tsx
@@ -8,11 +8,14 @@ import { Slider } from '@/components/ui/slider';
 interface SettingsPanelProps {
   cycleInterval: number;
   onIntervalChange: (interval: number) => void;
+  tickerSpeed: number;
+  onTickerSpeedChange: (speed: number) => void;
 }
 
-export function SettingsPanel({ cycleInterval, onIntervalChange }: SettingsPanelProps) {
+export function SettingsPanel({ cycleInterval, onIntervalChange, tickerSpeed, onTickerSpeedChange }: SettingsPanelProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [localInterval, setLocalInterval] = useState(cycleInterval);
+  const [localTickerSpeed, setLocalTickerSpeed] = useState(tickerSpeed);
 
   useEffect(() => {
     if (!isOpen) {
@@ -26,6 +29,8 @@ export function SettingsPanel({ cycleInterval, onIntervalChange }: SettingsPanel
   const handleSave = () => {
     onIntervalChange(localInterval);
     localStorage.setItem('kiosk-cycle-interval', localInterval.toString());
+    onTickerSpeedChange(localTickerSpeed);
+    localStorage.setItem('kiosk-ticker-speed', localTickerSpeed.toString());
     setIsOpen(false);
   };
 
@@ -47,7 +52,7 @@ export function SettingsPanel({ cycleInterval, onIntervalChange }: SettingsPanel
           <div className="space-y-4">
             <div>
               <label className="text-gray-300 text-lg mb-2 block">
-                Cycle Interval: {localInterval} seconds
+                Card Cycle Speed: {localInterval} seconds
               </label>
               <Slider
                 value={[localInterval]}
@@ -58,8 +63,26 @@ export function SettingsPanel({ cycleInterval, onIntervalChange }: SettingsPanel
                 className="w-full"
               />
               <div className="flex justify-between text-sm text-gray-500 mt-1">
-                <span>3s</span>
-                <span>15s</span>
+                <span>3s (Fast)</span>
+                <span>15s (Slow)</span>
+              </div>
+            </div>
+
+            <div>
+              <label className="text-gray-300 text-lg mb-2 block">
+                Ticker Scroll Speed: {localTickerSpeed} seconds
+              </label>
+              <Slider
+                value={[localTickerSpeed]}
+                onValueChange={(value: number[]) => setLocalTickerSpeed(value[0])}
+                min={8}
+                max={120}
+                step={2}
+                className="w-full"
+              />
+              <div className="flex justify-between text-sm text-gray-500 mt-1">
+                <span>8s (Very Fast)</span>
+                <span>120s (Slow)</span>
               </div>
             </div>
 
diff --git a/components/kiosk/ticker.tsx b/components/kiosk/ticker.tsx
index 231820c..20cfdf1 100644
--- a/components/kiosk/ticker.tsx
+++ b/components/kiosk/ticker.tsx
@@ -51,17 +51,22 @@ export function Ticker({ activities, speed }: TickerProps) {
         {[...activities, ...activities].map((activity, index) => (
           <div
             key={`${activity.ticketNumber}-${index}`}
-            className="inline-flex items-center mx-8 text-2xl"
+            className="inline-flex items-center mx-8"
           >
-            <span className="mr-3">{getPriorityIcon(activity.priority)}</span>
-            <span className={`font-bold mr-2 ${getPriorityColor(activity.priority)}`}>
-              #{activity.ticketNumber}
-            </span>
-            <span className="text-white mr-2">-</span>
-            <span className="text-gray-300 mr-2">{activity.companyName}</span>
-            <span className="text-white mr-2">-</span>
-            <span className="text-gray-400 mr-2">{activity.title.substring(0, 60)}</span>
-            <span className="text-gray-500 text-xl">({activity.statusLabel})</span>
+            <span className="mr-3 text-2xl">{getPriorityIcon(activity.priority)}</span>
+            <div className="flex flex-col">
+              <div className="flex items-center text-xl">
+                <span className={`font-bold mr-2 ${getPriorityColor(activity.priority)}`}>
+                  #{activity.ticketNumber}
+                </span>
+                <span className="text-white mr-2">-</span>
+                <span className="text-gray-400">{activity.title.substring(0, 60)}</span>
+                <span className="text-gray-500 text-lg ml-2">({activity.statusLabel})</span>
+              </div>
+              <div className="text-lg text-gray-300 mt-1">
+                {activity.companyName}
+              </div>
+            </div>
           </div>
         ))}
       </div>