UI redesign: compact header, group dropdown, slim task cards

- Removed logo/brand from header
- Group selector as dropdown (not horizontal scroll)
- Compact task cards (single line, less padding)
- Status filter pills smaller
- Sticky header 44px

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

apps/tasks/app/tasks/page.tsx

@@ -63,7 +63,7 @@ export default function TasksPage() {
     loadData();
   }, [token, router, loadData]);
 
-  // Navigate to next/previous group
+  // Navigate to next/previous group via swipe
   const navigateGroup = useCallback(
     (direction: "left" | "right") => {
       if (groupOrder.length <= 1) return;
@@ -73,7 +73,6 @@ export default function TasksPage() {
           : (currentGroupIndex - 1 + groupOrder.length) % groupOrder.length;
       const newGroupId = groupOrder[newIndex];
 
-      // Show overlay
       if (newGroupId === null) {
         setSwipeOverlay({ name: t("tasks.all"), icon: null });
       } else {
@@ -83,7 +82,6 @@ export default function TasksPage() {
       setSwipeDirection(direction);
       setSelectedGroup(newGroupId);
 
-      // Hide overlay after animation
       setTimeout(() => {
         setSwipeOverlay(null);
         setSwipeDirection(null);
@@ -131,21 +129,23 @@ export default function TasksPage() {
   if (!token) return null;
 
   return (
-    <div className="space-y-3 pb-24 sm:pb-8 px-4 sm:px-0">
+    <div className="space-y-2 pb-24 sm:pb-8 px-4 sm:px-0">
-      {/* Group tabs */}
+      {/* Group dropdown + Status pills row */}
-      <GroupSelector
+      <div className="flex items-center gap-3 flex-wrap">
-        groups={groups}
+        <GroupSelector
-        selected={selectedGroup}
+          groups={groups}
-        onSelect={setSelectedGroup}
+          selected={selectedGroup}
-      />
+          onSelect={setSelectedGroup}
+        />
+      </div>
 
-      {/* Status filter */}
+      {/* Status filter pills - compact */}
-      <div className="flex gap-1.5 overflow-x-auto scrollbar-hide pb-1">
+      <div className="flex gap-1 overflow-x-auto scrollbar-hide px-4">
         {statusOptions.map((opt) => (
           <button
             key={opt.value}
             onClick={() => setStatusFilter(opt.value)}
-            className={`flex-shrink-0 px-3 py-2 rounded-lg text-xs font-medium transition-all min-h-[44px] ${
+            className={`flex-shrink-0 px-2.5 py-1 rounded-full text-[11px] font-medium transition-all ${
               statusFilter === opt.value
                 ? "bg-gray-800 text-white dark:bg-white dark:text-gray-900"
                 : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
@@ -174,7 +174,7 @@ export default function TasksPage() {
           </div>
         )}
 
-        {/* Task list with transition animation */}
+        {/* Task list */}
         <div
           className={`transition-all duration-300 ease-out ${
             swipeDirection === "left"
@@ -185,19 +185,19 @@ export default function TasksPage() {
           }`}
         >
           {loading ? (
-            <div className="flex justify-center py-12">
+            <div className="flex justify-center py-8">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
+              <div className="animate-spin rounded-full h-7 w-7 border-b-2 border-blue-600" />
             </div>
           ) : tasks.length === 0 ? (
-            <div className="text-center py-16">
+            <div className="text-center py-12">
-              <div className="text-5xl mb-4 opacity-50">&#9744;</div>
+              <div className="text-4xl mb-3 opacity-50">&#9744;</div>
-              <p className="text-muted text-lg font-medium">{t("tasks.noTasks")}</p>
+              <p className="text-muted text-base font-medium">{t("tasks.noTasks")}</p>
               <p className="text-muted text-sm mt-1">
                 {t("tasks.createFirst")}
               </p>
             </div>
           ) : (
-            <div className="space-y-2">
+            <div className="space-y-1">
               {tasks.map((task) => (
                 <TaskCard
                   key={task.id}
@@ -210,7 +210,7 @@ export default function TasksPage() {
         </div>
       </div>
 
-      {/* Floating action button - positioned for thumb reach */}
+      {/* Floating action button */}
       <button
         onClick={() => setShowForm(true)}
         className="fixed bottom-20 sm:bottom-6 right-4 sm:right-6 w-14 h-14 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white rounded-full shadow-lg hover:shadow-xl active:shadow-md transition-all duration-200 flex items-center justify-center z-40 hover:scale-105 active:scale-95"

apps/tasks/components/GroupSelector.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
 import { Group } from "@/lib/api";
 import { useTranslation } from "@/lib/i18n";
 
@@ -15,61 +15,101 @@ export default function GroupSelector({
   selected,
   onSelect,
 }: GroupSelectorProps) {
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const activeRef = useRef<HTMLButtonElement>(null);
   const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
-  // Scroll active button into view
+  const selectedGroup = selected ? groups.find((g) => g.id === selected) : null;
+
+  const handleSelect = useCallback((id: string | null) => {
+    onSelect(id);
+    setOpen(false);
+  }, [onSelect]);
+
+  // Close on outside click
   useEffect(() => {
-    if (activeRef.current && scrollRef.current) {
+    if (!open) return;
-      const container = scrollRef.current;
+    function handleClick(e: MouseEvent) {
-      const btn = activeRef.current;
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
-      const containerRect = container.getBoundingClientRect();
+        setOpen(false);
-      const btnRect = btn.getBoundingClientRect();
-
-      if (btnRect.left < containerRect.left || btnRect.right > containerRect.right) {
-        btn.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
       }
     }
-  }, [selected]);
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+
+  // Close on escape
+  useEffect(() => {
+    if (!open) return;
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open]);
 
   return (
-    <div
+    <div ref={dropdownRef} className="relative px-4">
-      ref={scrollRef}
+      {/* Dropdown trigger */}
-      className="flex gap-2 overflow-x-auto scrollbar-hide snap-x snap-mandatory px-4 py-3"
-      style={{ WebkitOverflowScrolling: "touch" } as React.CSSProperties}
-    >
       <button
-        ref={selected === null ? activeRef : undefined}
+        onClick={() => setOpen(!open)}
-        onClick={() => onSelect(null)}
+        className="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors text-sm font-medium min-h-[40px]"
-        className={`flex-shrink-0 px-4 py-2.5 rounded-full text-sm font-medium transition-all whitespace-nowrap snap-center ${
-          selected === null
-            ? "bg-gray-800 text-white dark:bg-white dark:text-gray-900 shadow-md scale-105 min-h-[44px]"
-            : "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 min-h-[44px]"
-        }`}
       >
-        {t("tasks.all")}
+        {selectedGroup ? (
-      </button>
+          <>
-      {groups.map((g) => (
+            {selectedGroup.icon && <span className="text-base">{selectedGroup.icon}</span>}
-        <button
+            <span style={{ color: selectedGroup.color }}>{selectedGroup.name}</span>
-          key={g.id}
+          </>
-          ref={selected === g.id ? activeRef : undefined}
+        ) : (
-          onClick={() => onSelect(g.id)}
+          <span>{t("tasks.all")}</span>
-          className={`flex-shrink-0 px-4 py-2.5 rounded-full text-sm font-medium transition-all flex items-center gap-1.5 whitespace-nowrap snap-center ${
+        )}
-            selected === g.id
+        <svg
-              ? "text-white shadow-md scale-105 min-h-[44px]"
+          className={`w-4 h-4 text-muted transition-transform ${open ? "rotate-180" : ""}`}
-              : "hover:opacity-80 min-h-[44px]"
+          fill="none"
-          }`}
+          viewBox="0 0 24 24"
-          style={{
+          stroke="currentColor"
-            backgroundColor: selected === g.id ? g.color : undefined,
+          strokeWidth={2}
-            border: selected !== g.id ? `2px solid ${g.color}` : undefined,
-            color: selected !== g.id ? g.color : undefined,
-          }}
         >
-          {g.icon && <span className="text-lg">{g.icon}</span>}
+          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-          <span>{g.name}</span>
+        </svg>
-        </button>
+      </button>
-      ))}
+
+      {/* Dropdown menu */}
+      {open && (
+        <div className="absolute left-4 top-full mt-1 z-50 min-w-[200px] bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-xl py-1 animate-fadeIn">
+          <button
+            onClick={() => handleSelect(null)}
+            className={`w-full flex items-center gap-2.5 px-4 py-2.5 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors ${
+              selected === null ? "font-semibold bg-gray-50 dark:bg-gray-800/50" : ""
+            }`}
+          >
+            <span className="w-5 text-center text-base">*</span>
+            <span>{t("tasks.all")}</span>
+            {selected === null && (
+              <svg className="w-4 h-4 ml-auto text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+            )}
+          </button>
+          {groups.map((g) => (
+            <button
+              key={g.id}
+              onClick={() => handleSelect(g.id)}
+              className={`w-full flex items-center gap-2.5 px-4 py-2.5 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors ${
+                selected === g.id ? "font-semibold bg-gray-50 dark:bg-gray-800/50" : ""
+              }`}
+            >
+              <span className="w-5 text-center text-base">{g.icon || ""}</span>
+              <span style={{ color: g.color }}>{g.name}</span>
+              {selected === g.id && (
+                <svg className="w-4 h-4 ml-auto text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                </svg>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
     </div>
   );
 }

apps/tasks/components/Header.tsx

@@ -40,88 +40,30 @@ export default function Header() {
   return (
     <>
       <header className="sticky top-0 z-50 bg-white/80 dark:bg-gray-950/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800">
-        <div className="max-w-4xl mx-auto px-4 h-14 flex items-center justify-between">
+        <div className="max-w-4xl mx-auto px-4 h-11 flex items-center justify-end gap-2">
-          {/* Left: Logo + title */}
+          {/* Right side only: avatar + hamburger */}
-          <Link href="/tasks" className="flex items-center gap-2">
+          {token && user && (
-            <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
-              <svg className="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
-              </svg>
-            </div>
-            <span className="text-lg font-bold tracking-tight hidden sm:inline">{t("common.appName")}</span>
-          </Link>
-
-          {/* Right: Desktop controls */}
-          <div className="hidden sm:flex items-center gap-2">
-            <button
-              onClick={toggleTheme}
-              className="p-2.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors min-w-[44px] min-h-[44px] flex items-center justify-center"
-              aria-label={t("common.toggleTheme")}
-            >
-              {theme === "dark" ? (
-                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                </svg>
-              ) : (
-                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-                </svg>
-              )}
-            </button>
-
-            {token && user ? (
-              <div className="flex items-center gap-2">
-                <button
-                  onClick={openDrawer}
-                  className="w-7 h-7 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full flex items-center justify-center text-xs font-bold cursor-pointer hover:ring-2 hover:ring-blue-400 transition-all"
-                >
-                  {(user.name || user.email || "?").charAt(0).toUpperCase()}
-                </button>
-                <span className="text-sm text-muted max-w-[120px] truncate">
-                  {user.name || user.email}
-                </span>
-                <button
-                  onClick={handleLogout}
-                  className="text-sm px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors min-h-[44px] flex items-center"
-                >
-                  {t("auth.logout")}
-                </button>
-              </div>
-            ) : (
-              <Link
-                href="/login"
-                className="text-sm px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors min-h-[44px] flex items-center"
-              >
-                {t("auth.submit")}
-              </Link>
-            )}
-          </div>
-
-          {/* Right: Mobile - avatar + hamburger both open drawer */}
-          <div className="flex sm:hidden items-center gap-1">
-            {token && user && (
-              <button
-                onClick={openDrawer}
-                className="w-8 h-8 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full flex items-center justify-center text-xs font-bold cursor-pointer"
-                aria-label={t("common.menu")}
-              >
-                {(user.name || user.email || "?").charAt(0).toUpperCase()}
-              </button>
-            )}
             <button
               onClick={openDrawer}
-              className="p-2.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors min-w-[44px] min-h-[44px] flex items-center justify-center"
+              className="w-7 h-7 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full flex items-center justify-center text-xs font-bold cursor-pointer hover:ring-2 hover:ring-blue-400 transition-all flex-shrink-0"
               aria-label={t("common.menu")}
             >
-              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              {(user.name || user.email || "?").charAt(0).toUpperCase()}
-                <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
-              </svg>
             </button>
-          </div>
+          )}
+          <button
+            onClick={openDrawer}
+            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors flex items-center justify-center flex-shrink-0"
+            aria-label={t("common.menu")}
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
         </div>
       </header>
 
-      {/* Mobile slide-out drawer */}
+      {/* Slide-out drawer */}
       {drawerOpen && (
         <div className="fixed inset-0 z-[60]">
           {/* Backdrop */}

apps/tasks/components/TaskCard.tsx

@@ -24,8 +24,7 @@ function isDone(status: string): boolean {
 }
 
 export default function TaskCard({ task, onComplete }: TaskCardProps) {
-  const { t, locale } = useTranslation();
+  const { t } = useTranslation();
-  const groupColor = task.group_color || "#6b7280";
   const priorityColor = PRIORITY_COLORS[task.priority] || PRIORITY_COLORS.medium;
   const taskDone = isDone(task.status);
   const [swipeOffset, setSwipeOffset] = useState(0);
@@ -34,11 +33,8 @@ export default function TaskCard({ task, onComplete }: TaskCardProps) {
 
   const SWIPE_THRESHOLD = 120;
 
-  const dateLocale = locale === "ua" ? "uk-UA" : locale === "cs" ? "cs-CZ" : locale === "he" ? "he-IL" : "ru-RU";
-
   const swipeHandlers = useSwipeable({
     onSwiping: (e) => {
-      // Only allow right swipe for complete gesture
       if (e.dir === "Right" && !taskDone && onComplete) {
         const offset = Math.min(e.deltaX, 160);
         setSwipeOffset(offset);
@@ -66,25 +62,25 @@ export default function TaskCard({ task, onComplete }: TaskCardProps) {
   const showCompleteHint = swipeOffset > 40;
 
   return (
-    <div className="relative overflow-hidden rounded-xl" ref={cardRef}>
+    <div className="relative overflow-hidden rounded-lg" ref={cardRef}>
       {/* Swipe background - green complete indicator */}
       {onComplete && !taskDone && (
         <div
-          className={`absolute inset-0 flex items-center pl-5 rounded-xl transition-colors ${
+          className={`absolute inset-0 flex items-center pl-4 rounded-lg transition-colors ${
             swipeOffset > SWIPE_THRESHOLD
               ? "bg-green-500"
               : "bg-green-400/80"
           }`}
         >
           <div
-            className={`flex items-center gap-2 text-white font-medium transition-opacity ${
+            className={`flex items-center gap-1.5 text-white font-medium transition-opacity ${
               showCompleteHint ? "opacity-100" : "opacity-0"
             }`}
           >
-            <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
             </svg>
-            <span className="text-sm">{t("tasks.status.done")}</span>
+            <span className="text-xs">{t("tasks.status.done")}</span>
           </div>
         </div>
       )}
@@ -97,81 +93,39 @@ export default function TaskCard({ task, onComplete }: TaskCardProps) {
         }}
       >
         <Link href={`/tasks/${task.id}`} className="block group">
-          <div className={`relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-200 active:scale-[0.98] ${swiped ? "opacity-0 transition-opacity duration-300" : ""}`}>
+          <div className={`relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:shadow-md transition-all duration-150 active:scale-[0.99] ${swiped ? "opacity-0 transition-opacity duration-300" : ""}`}>
-            {/* Priority dot on left edge */}
+            {/* Priority line on left edge */}
             <div
-              className="absolute left-0 top-0 bottom-0 w-1 rounded-l-xl"
+              className="absolute left-0 top-0 bottom-0 w-0.5"
               style={{ backgroundColor: priorityColor }}
             />
 
-            {/* Group color accent bar on top (mobile) */}
+            <div className="pl-3 pr-2.5 py-2 flex items-center gap-2">
-            <div
+              {/* Group icon */}
-              className="absolute top-0 left-1 right-0 h-0.5 sm:hidden"
+              {task.group_icon && (
-              style={{ backgroundColor: groupColor }}
+                <span className="text-base flex-shrink-0 leading-none">{task.group_icon}</span>
-            />
+              )}
 
-            <div className="pl-4 pr-3 py-3">
+              {/* Title - single line, truncated */}
-              {/* Mobile: compact one-line layout */}
+              <h3
-              <div className="flex items-center gap-2.5">
+                className={`text-sm font-medium truncate flex-1 min-w-0 ${
-                {/* Group icon */}
+                  taskDone ? "line-through text-muted" : ""
-                {task.group_icon && (
+                }`}
-                  <span className="text-lg flex-shrink-0">{task.group_icon}</span>
+              >
-                )}
+                {task.title}
+              </h3>
 
-                {/* Content - mobile compact */}
+              {/* Status badge */}
-                <div className="flex-1 min-w-0">
+              <div className="flex-shrink-0">
-                  {/* Title + status on one line on mobile */}
+                <StatusBadge status={task.status} size="sm" />
-                  <div className="flex items-center gap-2">
-                    <h3
-                      className={`font-semibold text-[15px] leading-snug truncate flex-1 ${
-                        taskDone ? "line-through text-muted" : ""
-                      }`}
-                    >
-                      {task.title}
-                    </h3>
-                    <div className="flex-shrink-0 hidden sm:block">
-                      <StatusBadge status={task.status} />
-                    </div>
-                  </div>
-
-                  {/* Description - hidden on very small screens */}
-                  {task.description && (
-                    <p className="text-sm text-muted mt-0.5 line-clamp-1 sm:line-clamp-2 leading-relaxed">
-                      {task.description}
-                    </p>
-                  )}
-
-                  {/* Meta row */}
-                  <div className="flex items-center gap-2 mt-1.5 flex-wrap">
-                    <div className="sm:hidden">
-                      <StatusBadge status={task.status} size="sm" />
-                    </div>
-                    {task.group_name && (
-                      <span
-                        className="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-medium text-white"
-                        style={{ backgroundColor: groupColor }}
-                      >
-                        {task.group_name}
-                      </span>
-                    )}
-                    {task.due_at && (
-                      <span className="text-[11px] text-muted flex items-center gap-1">
-                        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                        </svg>
-                        {new Date(task.due_at).toLocaleDateString(dateLocale)}
-                      </span>
-                    )}
-                  </div>
-                </div>
-
-                {/* Priority indicator */}
-                <div
-                  className="w-2.5 h-2.5 rounded-full flex-shrink-0"
-                  style={{ backgroundColor: priorityColor }}
-                  title={t(`tasks.priority.${task.priority}`)}
-                />
               </div>
+
+              {/* Priority dot */}
+              <div
+                className="w-2 h-2 rounded-full flex-shrink-0"
+                style={{ backgroundColor: priorityColor }}
+                title={t(`tasks.priority.${task.priority}`)}
+              />
             </div>
           </div>
         </Link>