From bb8763bca1d8b42d5a250bbc0e89e466f10956c0 Mon Sep 17 00:00:00 2001
From: Admin <admin@hasdo.info>
Date: Sun, 29 Mar 2026 21:00:14 +0000
Subject: [PATCH] Install menu in Settings + logout icon + drawer install link

- Settings: Install section (Android APK, PWA, iOS soon, F-Droid soon)
- Logout: icon only (red door), no text
- Avatar: initials only, name in drawer
- Drawer: Install link to /settings#install
- Translations: install key in cs/he/ru/ua

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/tasks/app/settings/page.tsx | 31 +++++++++++++++++++++++++++++++
 apps/tasks/components/Header.tsx | 31 ++++++++++++++++++++++---------
 apps/tasks/messages/cs.json      |  3 ++-
 apps/tasks/messages/he.json      |  3 ++-
 apps/tasks/messages/ru.json      |  3 ++-
 apps/tasks/messages/ua.json      |  3 ++-
 6 files changed, 61 insertions(+), 13 deletions(-)

diff --git a/apps/tasks/app/settings/page.tsx b/apps/tasks/app/settings/page.tsx
index b2e0629..e784c87 100644
--- a/apps/tasks/app/settings/page.tsx
+++ b/apps/tasks/app/settings/page.tsx
@@ -70,6 +70,37 @@ export default function SettingsPage() {
         </div>
       </div>
 
+      {/* Install section */}
+      <section id="install" className="bg-white dark:bg-gray-900 rounded-xl p-4 border border-gray-200 dark:border-gray-700">
+        <h2 className="font-semibold mb-3">{t("settings.install") || "Instalace"}</h2>
+        <div className="space-y-2">
+          <a href="https://expo.dev/accounts/it-enterprise/projects/task-team/builds/b31c63a8-0e4f-44d6-80e9-98cb24174037"
+             target="_blank" rel="noopener"
+             className="flex items-center gap-3 px-4 py-3 bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 transition-colors">
+            <span className="text-xl">&#x1F916;</span>
+            <span>Android APK</span>
+            <span className="ml-auto text-sm opacity-75">St&#xe1;hnout</span>
+          </a>
+          <a href="https://tasks.hasdo.info"
+             target="_blank" rel="noopener"
+             className="flex items-center gap-3 px-4 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors">
+            <span className="text-xl">&#x1F310;</span>
+            <span>PWA Web App</span>
+            <span className="ml-auto text-sm opacity-75">Otev&#x159;&#xed;t</span>
+          </a>
+          <div className="flex items-center gap-3 px-4 py-3 bg-gray-200 dark:bg-gray-700 text-gray-500 rounded-lg">
+            <span className="text-xl">&#x1F34E;</span>
+            <span>iOS (App Store)</span>
+            <span className="ml-auto text-sm">P&#x159;ipravujeme</span>
+          </div>
+          <div className="flex items-center gap-3 px-4 py-3 bg-gray-200 dark:bg-gray-700 text-gray-500 rounded-lg">
+            <span className="text-xl">&#x1F4E6;</span>
+            <span>F-Droid</span>
+            <span className="ml-auto text-sm">P&#x159;ipravujeme</span>
+          </div>
+        </div>
+      </section>
+
       {/* Appearance */}
       <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-5">
         <h2 className="text-sm font-semibold text-muted uppercase tracking-wide mb-4">{t("settings.appearance")}</h2>
diff --git a/apps/tasks/components/Header.tsx b/apps/tasks/components/Header.tsx
index 92c8f20..3aa8872 100644
--- a/apps/tasks/components/Header.tsx
+++ b/apps/tasks/components/Header.tsx
@@ -41,7 +41,7 @@ export default function Header() {
     <>
       <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-11 flex items-center justify-end gap-2">
-          {/* Right side only: avatar + hamburger */}
+          {/* Right side only: avatar (no name text) + hamburger */}
           {token && user && (
             <button
               onClick={openDrawer}
@@ -73,7 +73,7 @@ export default function Header() {
           />
 
           {/* Drawer panel */}
-          <div className="absolute right-0 top-0 bottom-0 w-72 bg-white dark:bg-gray-900 shadow-2xl animate-slideInRight">
+          <div className="absolute right-0 top-0 bottom-0 w-72 bg-white dark:bg-gray-900 shadow-2xl animate-slideInRight flex flex-col">
             {/* Close button */}
             <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800">
               <span className="font-semibold text-lg">{t("common.menu")}</span>
@@ -88,7 +88,7 @@ export default function Header() {
               </button>
             </div>
 
-            {/* User info */}
+            {/* User info - full name + email */}
             {token && user && (
               <div className="p-4 border-b border-gray-200 dark:border-gray-800">
                 <div className="flex items-center gap-3">
@@ -104,7 +104,7 @@ export default function Header() {
             )}
 
             {/* Menu items */}
-            <div className="p-2 space-y-1">
+            <div className="p-2 space-y-1 flex-1 overflow-y-auto">
               <Link
                 href="/tasks"
                 onClick={closeDrawer}
@@ -150,6 +150,18 @@ export default function Header() {
                 <span className="text-sm font-medium">{t("nav.settings")}</span>
               </Link>
 
+              {/* Install link */}
+              <Link
+                href="/settings#install"
+                onClick={closeDrawer}
+                className="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors min-h-[48px]"
+              >
+                <svg className="w-5 h-5 text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                </svg>
+                <span className="text-sm font-medium">{t("settings.install") || "Instalace"}</span>
+              </Link>
+
               {/* Theme toggle */}
               <button
                 onClick={() => { toggleTheme(); }}
@@ -170,17 +182,18 @@ export default function Header() {
               </button>
             </div>
 
-            {/* Logout at bottom */}
+            {/* Logout icon at bottom */}
             {token && (
-              <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200 dark:border-gray-800 safe-area-bottom">
+              <div className="p-4 border-t border-gray-200 dark:border-gray-800 safe-area-bottom">
                 <button
                   onClick={handleLogout}
-                  className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors min-h-[48px]"
+                  title={t("auth.logout")}
+                  className="p-2 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("auth.logout")}
                 >
-                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                  <svg className="w-5 h-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                     <path strokeLinecap="round" strokeLinejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                   </svg>
-                  <span className="text-sm font-medium">{t("auth.logout")}</span>
                 </button>
               </div>
             )}
diff --git a/apps/tasks/messages/cs.json b/apps/tasks/messages/cs.json
index 313c84d..d36b6e7 100644
--- a/apps/tasks/messages/cs.json
+++ b/apps/tasks/messages/cs.json
@@ -114,7 +114,8 @@
     "saved": "Uloženo!",
     "profile": "Profil",
     "appearance": "Vzhled",
-    "user": "Uživatel"
+    "user": "Uživatel",
+    "install": "Instalace"
   },
   "goals": {
     "title": "Cíle",
diff --git a/apps/tasks/messages/he.json b/apps/tasks/messages/he.json
index 5d9acf6..66dc94e 100644
--- a/apps/tasks/messages/he.json
+++ b/apps/tasks/messages/he.json
@@ -114,7 +114,8 @@
     "saved": "נשמר!",
     "profile": "פרופיל",
     "appearance": "מראה",
-    "user": "משתמש"
+    "user": "משתמש",
+    "install": "התקנה"
   },
   "goals": {
     "title": "מטרות",
diff --git a/apps/tasks/messages/ru.json b/apps/tasks/messages/ru.json
index f626174..76ee7f3 100644
--- a/apps/tasks/messages/ru.json
+++ b/apps/tasks/messages/ru.json
@@ -114,7 +114,8 @@
     "saved": "Сохранено!",
     "profile": "Профиль",
     "appearance": "Внешний вид",
-    "user": "Пользователь"
+    "user": "Пользователь",
+    "install": "Установка"
   },
   "goals": {
     "title": "Цели",
diff --git a/apps/tasks/messages/ua.json b/apps/tasks/messages/ua.json
index b83dd0c..86a1016 100644
--- a/apps/tasks/messages/ua.json
+++ b/apps/tasks/messages/ua.json
@@ -114,7 +114,8 @@
     "saved": "Збережено!",
     "profile": "Профіль",
     "appearance": "Зовнішній вигляд",
-    "user": "Користувач"
+    "user": "Користувач",
+    "install": "Встановлення"
   },
   "goals": {
     "title": "Цілі",