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>
This commit is contained in:
@@ -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">🤖</span>
|
||||
<span>Android APK</span>
|
||||
<span className="ml-auto text-sm opacity-75">Stá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">🌐</span>
|
||||
<span>PWA Web App</span>
|
||||
<span className="ml-auto text-sm opacity-75">Otevří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">🍎</span>
|
||||
<span>iOS (App Store)</span>
|
||||
<span className="ml-auto text-sm">Př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">📦</span>
|
||||
<span>F-Droid</span>
|
||||
<span className="ml-auto text-sm">Př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>
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -114,7 +114,8 @@
|
||||
"saved": "Uloženo!",
|
||||
"profile": "Profil",
|
||||
"appearance": "Vzhled",
|
||||
"user": "Uživatel"
|
||||
"user": "Uživatel",
|
||||
"install": "Instalace"
|
||||
},
|
||||
"goals": {
|
||||
"title": "Cíle",
|
||||
|
||||
@@ -114,7 +114,8 @@
|
||||
"saved": "נשמר!",
|
||||
"profile": "פרופיל",
|
||||
"appearance": "מראה",
|
||||
"user": "משתמש"
|
||||
"user": "משתמש",
|
||||
"install": "התקנה"
|
||||
},
|
||||
"goals": {
|
||||
"title": "מטרות",
|
||||
|
||||
@@ -114,7 +114,8 @@
|
||||
"saved": "Сохранено!",
|
||||
"profile": "Профиль",
|
||||
"appearance": "Внешний вид",
|
||||
"user": "Пользователь"
|
||||
"user": "Пользователь",
|
||||
"install": "Установка"
|
||||
},
|
||||
"goals": {
|
||||
"title": "Цели",
|
||||
|
||||
@@ -114,7 +114,8 @@
|
||||
"saved": "Збережено!",
|
||||
"profile": "Профіль",
|
||||
"appearance": "Зовнішній вигляд",
|
||||
"user": "Користувач"
|
||||
"user": "Користувач",
|
||||
"install": "Встановлення"
|
||||
},
|
||||
"goals": {
|
||||
"title": "Цілі",
|
||||
|
||||
Reference in New Issue
Block a user