refactor: move device name and license inputs to modal popup

shop/components/wizard/summary-sidebar.tsx

@@ -8,6 +8,14 @@ import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 import { Pencil, Trash2, UserPlus, ChevronRight, AlertCircle, Check } from 'lucide-react'
 import { Category, Product, CategorySelection } from '@/lib/types'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
 
 interface SummarySidebarProps {
   visibleCategories: Category[]
@@ -72,6 +80,8 @@ export function SummarySidebar({
   nextStep,
   prevStep,
 }: SummarySidebarProps) {
+  const [isOpen, setIsOpen] = React.useState(false)
+
   return (
     <div className="h-full flex flex-col">
       <Card className="bg-[oklch(0.145_0.01_148)]/90 backdrop-blur-md border border-slate-800 shadow-[0_0_30px_rgba(0,0,0,0.5)] rounded-2xl overflow-hidden flex flex-col h-full">
@@ -252,7 +262,10 @@ export function SummarySidebar({
                         variant="ghost"
                         size="icon"
                         className="w-7 h-7 hover:bg-white/10 text-slate-400 hover:text-white"
-                        onClick={() => editBasketItem(idx)}
+                        onClick={() => {
+                          editBasketItem(idx)
+                          setIsOpen(true)
+                        }}
                         title="Kasse bearbeiten"
                       >
                         <Pencil className="w-3.5 h-3.5" />
@@ -275,34 +288,14 @@ export function SummarySidebar({
           )}
         </CardContent>
         <CardFooter className="flex flex-col gap-3 shrink-0">
-          <div className="w-full space-y-2">
-            <Label htmlFor="device-name" className="text-xs text-slate-400">Kassenname (optional)</Label>
-            <Input
-              id="device-name"
-              placeholder="z.B. Hauptkasse, Theke"
-              value={deviceName}
-              onChange={e => setDeviceName(e.target.value)}
-              className="bg-white/5 border-white/10 text-white text-xs h-9 rounded-lg"
-            />
-          </div>
-          <div className="w-full space-y-2">
-            <Label htmlFor="license-number" className="text-xs text-slate-400">Lizenznummer (optional)</Label>
-            <Input
-              id="license-number"
-              placeholder="z.B. LIZ-12345"
-              value={licenseNumber}
-              onChange={e => setLicenseNumber(e.target.value)}
-              className="bg-white/5 border-white/10 text-white text-xs h-9 rounded-lg"
-            />
-          </div>
           <Button
             type="button"
             variant="outline"
             className="w-full border-primary/30 text-white hover:bg-primary/10 gap-2 h-10 text-sm"
-            onClick={addToBasket}
+            onClick={() => setIsOpen(true)}
             disabled={isNextStepDisabled}
           >
-            <UserPlus className="w-4 h-4" /> {editingIdx !== null ? '💾 Änderungen an Kasse speichern' : (hasActiveSelection ? 'Kasse speichern' : 'Kasse anlegen')}
+            <UserPlus className="w-4 h-4" /> {editingIdx !== null ? '💾 Kasse bearbeiten' : (hasActiveSelection ? 'Kasse speichern' : 'Kasse anlegen')}
           </Button>
           <Separator className="bg-white/10 my-1" />
           <Button
@@ -317,6 +310,61 @@ export function SummarySidebar({
           </Button>
         </CardFooter>
       </Card>
+
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent className="bg-slate-900 border border-slate-800 text-white rounded-2xl max-w-md p-6">
+          <DialogHeader>
+            <DialogTitle className="text-lg font-bold text-white">
+              {editingIdx !== null ? 'Kasse bearbeiten' : 'Kasse anlegen'}
+            </DialogTitle>
+            <DialogDescription className="text-slate-400 text-xs mt-1">
+              Geben Sie den Namen und die Lizenznummer für diese Kasse ein.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="device-name-modal" className="text-xs text-slate-400">Kassenname (optional)</Label>
+              <Input
+                id="device-name-modal"
+                placeholder={`z.B. Kasse ${basketItems.length + 1}, Theke`}
+                value={deviceName}
+                onChange={e => setDeviceName(e.target.value)}
+                className="bg-white/5 border-white/10 text-white text-xs h-9 rounded-lg"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="license-number-modal" className="text-xs text-slate-400">Lizenznummer (optional)</Label>
+              <Input
+                id="license-number-modal"
+                placeholder="z.B. LIZ-12345 (eindeutig)"
+                value={licenseNumber}
+                onChange={e => setLicenseNumber(e.target.value)}
+                className="bg-white/5 border-white/10 text-white text-xs h-9 rounded-lg"
+              />
+            </div>
+          </div>
+          <DialogFooter className="flex flex-row justify-end gap-2 mt-4">
+            <Button
+              type="button"
+              variant="ghost"
+              className="text-slate-400 hover:text-white"
+              onClick={() => setIsOpen(false)}
+            >
+              Abbrechen
+            </Button>
+            <Button
+              type="button"
+              className="h-10"
+              onClick={() => {
+                addToBasket()
+                setIsOpen(false)
+              }}
+            >
+              Speichern
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   )
 }