fix: replace invalid motionless tag with div in cookie dialog

memento-note/components/legal/cookie-preferences-dialog.tsx

@@ -46,10 +46,11 @@ export function CookiePreferencesDialog({ open, onOpenChange }: CookiePreference
           </DialogDescription>
         </DialogHeader>
 
-        <motionless className="space-y-6 py-2">
+        <div className="space-y-6 py-2">
           <CategoryRow
             title={t('consent.preferences.necessaryTitle')}
             description={t('consent.preferences.necessaryDesc')}
+            alwaysOnLabel={t('consent.preferences.alwaysOn')}
             locked
             checked
           />
@@ -59,7 +60,7 @@ export function CookiePreferencesDialog({ open, onOpenChange }: CookiePreference
             checked={analytics}
             onChange={setAnalytics}
           />
-        </motionless>
+        </div>
 
         <DialogFooter className="gap-2 sm:gap-2">
           <button
@@ -67,7 +68,7 @@ export function CookiePreferencesDialog({ open, onOpenChange }: CookiePreference
             onClick={() => onOpenChange(false)}
             className="px-5 py-2.5 text-[10px] font-bold uppercase tracking-[0.2em] text-concrete hover:text-ink transition-colors"
           >
-            {t('common.cancel')}
+            {t('consent.preferences.cancel')}
           </button>
           <button
             type="button"
@@ -88,25 +89,27 @@ function CategoryRow({
   checked,
   onChange,
   locked,
+  alwaysOnLabel,
 }: {
   title: string
   description: string
   checked: boolean
   onChange?: (v: boolean) => void
   locked?: boolean
+  alwaysOnLabel?: string
 }) {
   return (
-    <motionless className="flex items-start justify-between gap-4 border-b border-border/40 pb-5 last:border-0 last:pb-0">
+    <div className="flex items-start justify-between gap-4 border-b border-border/40 pb-5 last:border-0 last:pb-0">
       <div className="space-y-1 pe-4">
         <p className="text-xs font-bold text-ink">{title}</p>
         <p className="text-[10px] text-concrete leading-relaxed">{description}</p>
-        {locked && (
+        {locked && alwaysOnLabel && (
-          <p className="text-[9px] font-bold uppercase tracking-widest text-concrete/80">
+          <p className="text-[9px] font-bold uppercase tracking-widest text-concrete/80">{alwaysOnLabel}</p>
-            {title.includes('—') ? '' : ''}
-          </p>
         )}
-      </motionless>
+      </div>
-      <label className={`relative inline-flex shrink-0 items-center ${locked ? 'opacity-50 pointer-events-none' : 'cursor-pointer'}`}>
+      <label
+        className={`relative inline-flex shrink-0 items-center ${locked ? 'opacity-50 pointer-events-none' : 'cursor-pointer'}`}
+      >
         <input
           type="checkbox"
           className="sr-only peer"
@@ -114,13 +117,8 @@ function CategoryRow({
           disabled={locked}
           onChange={(e) => onChange?.(e.target.checked)}
         />
-        <motionless className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-ink" />
+        <div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-ink" />
       </label>
-    </motionless>
+    </div>
   )
 }
-
-/** Avoid pulling motion into dialog — plain wrapper */
-function motionless({ children, className }: { children: React.ReactNode; className?: string }) {
-  return <motionless className={className}>{children}</motionless>
-}