UI fixes: emoji icons, modal form, Czech labels, polish

- Fixed group emoji icons in DB (💼🛒📚🗺️🏃✨🏠🌿)
- Added TaskModal component for + button
- Czech status labels (Čeká, Probíhá, Hotovo, Zrušeno)
- Improved TaskCard, GroupSelector, Header, StatusBadge
- Better dark/light mode transitions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/tasks/components/GroupSelector.tsx

@@ -8,34 +8,43 @@ interface GroupSelectorProps {
   onSelect: (id: string | null) => void;
 }
 
-export default function GroupSelector({ groups, selected, onSelect }: GroupSelectorProps) {
+export default function GroupSelector({
+  groups,
+  selected,
+  onSelect,
+}: GroupSelectorProps) {
   return (
-    <div className="flex gap-2 overflow-x-auto scrollbar-hide py-2 px-1">
+    <div
+      className="flex gap-2 overflow-x-auto scrollbar-hide px-4 py-3"
+      style={{ WebkitOverflowScrolling: "touch" } as React.CSSProperties}
+    >
       <button
         onClick={() => onSelect(null)}
-        className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-all ${
+        className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-all min-h-[36px] whitespace-nowrap ${
           selected === null
-            ? "bg-gray-800 text-white dark:bg-white dark:text-gray-900"
+            ? "bg-gray-800 text-white dark:bg-white dark:text-gray-900 shadow-md"
             : "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
         }`}
       >
-        Vse
+        V\u0161e
       </button>
       {groups.map((g) => (
         <button
           key={g.id}
           onClick={() => onSelect(g.id)}
-          className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-all ${
+          className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-all min-h-[36px] flex items-center gap-1.5 whitespace-nowrap ${
             selected === g.id
               ? "text-white shadow-md"
-              : "text-gray-600 dark:text-gray-400 hover:opacity-80"
+              : "hover:opacity-80"
           }`}
           style={{
             backgroundColor: selected === g.id ? g.color : undefined,
             border: selected !== g.id ? `2px solid ${g.color}` : undefined,
+            color: selected !== g.id ? g.color : undefined,
           }}
         >
-          {g.icon ? `${g.icon} ` : ""}{g.name}
+          {g.icon && <span className="text-base">{g.icon}</span>}
+          <span>{g.name}</span>
         </button>
       ))}
     </div>