d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-03-07 23:17:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(AppContent): update MobileNav import path and add MobileNav component

Browse Source
This commit is contained in:
Haileyesus
2026-03-02 18:38:17 +03:00
parent b3ace59728
commit aad99fd935
2 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/app/AppContent.tsx
View File

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
import Sidebar from '../sidebar/view/Sidebar';
import MainContent from '../main-content/view/MainContent';
import MobileNav from '../MobileNav';
import MobileNav from './MobileNav';
import { useWebSocket } from '../../contexts/WebSocketContext';
import { useDeviceSettings } from '../../hooks/useDeviceSettings';

28
src/components/MobileNav.jsx → src/components/app/MobileNav.tsx
View File

@@ -1,7 +1,15 @@
import { MessageSquare, Folder, Terminal, GitBranch, ClipboardCheck } from 'lucide-react';
import { useTasksSettings } from '../contexts/TasksSettingsContext';
import { useTasksSettings } from '../../contexts/TasksSettingsContext';
import { Dispatch, SetStateAction } from 'react';
import { AppTab } from '../../types/app';
function MobileNav({ activeTab, setActiveTab, isInputFocused }) {
type MobileNavProps = {
activeTab: AppTab;
setActiveTab: Dispatch<SetStateAction<AppTab>>;
isInputFocused: boolean;
};
export default function MobileNav({ activeTab, setActiveTab, isInputFocused }: MobileNavProps) {
const { tasksEnabled, isTaskMasterInstalled } = useTasksSettings();
const shouldShowTasksTab = Boolean(tasksEnabled && isTaskMasterInstalled);
@@ -40,9 +48,8 @@ function MobileNav({ activeTab, setActiveTab, isInputFocused }) {
return (
<div
className={`fixed bottom-0 left-0 right-0 z-50 px-3 pb-[max(8px,env(safe-area-inset-bottom))] transform transition-transform duration-300 ease-in-out ${
isInputFocused ? 'translate-y-full' : 'translate-y-0'
}`}
className={`fixed bottom-0 left-0 right-0 z-50 px-3 pb-[max(8px,env(safe-area-inset-bottom))] transform transition-transform duration-300 ease-in-out ${isInputFocused ? 'translate-y-full' : 'translate-y-0'
}`}
>
<div className="nav-glass mobile-nav-float rounded-2xl border border-border/30">
<div className="flex items-center justify-around px-1 py-1.5 gap-0.5">
@@ -58,11 +65,10 @@ function MobileNav({ activeTab, setActiveTab, isInputFocused }) {
e.preventDefault();
item.onClick();
}}
className={`flex flex-col items-center justify-center gap-0.5 px-3 py-2 rounded-xl flex-1 relative touch-manipulation transition-all duration-200 active:scale-95 ${
isActive
? 'text-primary'
: 'text-muted-foreground hover:text-foreground'
}`}
className={`flex flex-col items-center justify-center gap-0.5 px-3 py-2 rounded-xl flex-1 relative touch-manipulation transition-all duration-200 active:scale-95 ${isActive
? 'text-primary'
: 'text-muted-foreground hover:text-foreground'
}`}
aria-label={item.label}
aria-current={isActive ? 'page' : undefined}
>
@@ -84,5 +90,3 @@ function MobileNav({ activeTab, setActiveTab, isInputFocused }) {
</div>
);
}
export default MobileNav;