feat: integrate TitleBar component across chat, settings, and tasks pages
- Added a new TitleBar component to enhance the UI consistency across chat, settings, and tasks pages. - Updated layout structure to support responsive design and improve user experience. - Adjusted container styles to ensure proper overflow handling and visual appeal. - Enhanced Tauri configuration for improved window dimensions and capabilities.
This commit is contained in:
1 parent
ad2ce1e887
commit
2b09462538
6 files changed
+159
-9
No files matched your search
+9
-3
@@ -8,6 +8,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
|
|||||||
import { ChatInput } from "@/components/chat/chat-input";
|
import { ChatInput } from "@/components/chat/chat-input";
|
||||||
import { ChatMessage } from "@/components/chat/chat-message";
|
import { ChatMessage } from "@/components/chat/chat-message";
|
||||||
import { ReasoningChain } from "@/components/chat/reasoning-chain";
|
import { ReasoningChain } from "@/components/chat/reasoning-chain";
|
||||||
|
import { TitleBar } from "@/components/titlebar";
|
||||||
|
|
||||||
import { SidebarList } from "@/components/chat/sidebar-list";
|
import { SidebarList } from "@/components/chat/sidebar-list";
|
||||||
import { useChat } from "@/hooks/use-chat";
|
import { useChat } from "@/hooks/use-chat";
|
||||||
@@ -874,9 +875,13 @@ Ao responder sobre fatos atuais ou notícias, inicie mencionando explicitamente
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-screen w-full bg-background overflow-hidden flex overflow-x-hidden">
|
<div className="h-screen w-full bg-background overflow-hidden flex flex-col overflow-x-hidden">
|
||||||
{/* Left Sidebar (Nav) */}
|
{/* Custom Title Bar */}
|
||||||
<ResizablePanelGroup direction="horizontal" className="flex-1">
|
<TitleBar />
|
||||||
|
|
||||||
|
{/* Main Content Area */}
|
||||||
|
<div className="flex-1 flex overflow-hidden">
|
||||||
|
<ResizablePanelGroup direction="horizontal" className="flex-1">
|
||||||
|
|
||||||
<ResizablePanel
|
<ResizablePanel
|
||||||
defaultSize={4}
|
defaultSize={4}
|
||||||
@@ -1252,6 +1257,7 @@ Ao responder sobre fatos atuais ou notícias, inicie mencionando explicitamente
|
|||||||
</div>
|
</div>
|
||||||
</ResizablePanel>
|
</ResizablePanel>
|
||||||
</ResizablePanelGroup>
|
</ResizablePanelGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Mobile Sidebar Overlay */}
|
{/* Mobile Sidebar Overlay */}
|
||||||
{!isChatsSidebarCollapsed && (
|
{!isChatsSidebarCollapsed && (
|
||||||
|
|||||||
@@ -28,6 +28,7 @@ import { CheckCircle2, XCircle, Loader2, Download, Trash2, Copy, ExternalLink, P
|
|||||||
import { useToast } from '@/hooks/use-toast';
|
import { useToast } from '@/hooks/use-toast';
|
||||||
import { useRouter } from 'next/navigation';
|
import { useRouter } from 'next/navigation';
|
||||||
import { SourcesConfig, SourceCategory } from '@/lib/types';
|
import { SourcesConfig, SourceCategory } from '@/lib/types';
|
||||||
|
import { TitleBar } from '@/components/titlebar';
|
||||||
|
|
||||||
interface Model {
|
interface Model {
|
||||||
name: string;
|
name: string;
|
||||||
@@ -217,7 +218,10 @@ export default function SettingsPage() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto py-4 sm:py-6 md:py-8 px-3 sm:px-4 md:px-6 max-w-4xl w-full overflow-x-hidden">
|
<div className="h-screen w-full bg-background overflow-hidden flex flex-col">
|
||||||
|
<TitleBar />
|
||||||
|
<div className="flex-1 overflow-y-auto">
|
||||||
|
<div className="container mx-auto py-4 sm:py-6 md:py-8 px-3 sm:px-4 md:px-6 max-w-4xl w-full overflow-x-hidden">
|
||||||
<div className="mb-4 sm:mb-6">
|
<div className="mb-4 sm:mb-6">
|
||||||
<div className="flex items-start justify-between gap-3">
|
<div className="flex items-start justify-between gap-3">
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
@@ -1130,6 +1134,8 @@ export default function SettingsPage() {
|
|||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+7
-1
@@ -8,6 +8,7 @@ import { Switch } from '@/components/ui/switch';
|
|||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
import { Plus, Trash2, Clock, Play, Pause, CheckCircle2, XCircle, X, ArrowLeft } from 'lucide-react';
|
import { Plus, Trash2, Clock, Play, Pause, CheckCircle2, XCircle, X, ArrowLeft } from 'lucide-react';
|
||||||
import { useRouter } from 'next/navigation';
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { TitleBar } from '@/components/titlebar';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
@@ -102,7 +103,10 @@ export default function TasksPage() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto p-4 sm:p-6 max-w-6xl w-full overflow-x-hidden">
|
<div className="h-screen w-full bg-background overflow-hidden flex flex-col">
|
||||||
|
<TitleBar />
|
||||||
|
<div className="flex-1 overflow-y-auto">
|
||||||
|
<div className="container mx-auto p-4 sm:p-6 max-w-6xl w-full overflow-x-hidden">
|
||||||
<div className="mb-4 sm:mb-6">
|
<div className="mb-4 sm:mb-6">
|
||||||
<div className="flex items-start justify-between gap-3">
|
<div className="flex items-start justify-between gap-3">
|
||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
@@ -254,6 +258,8 @@ export default function TasksPage() {
|
|||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,123 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { getCurrentWindow } from '@tauri-apps/api/window';
|
||||||
|
import { Minus, Square, X } from 'lucide-react';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
export function TitleBar() {
|
||||||
|
const [isMaximized, setIsMaximized] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let isMounted = true;
|
||||||
|
|
||||||
|
const checkMaximized = async () => {
|
||||||
|
try {
|
||||||
|
const appWindow = getCurrentWindow();
|
||||||
|
const maximized = await appWindow.isMaximized();
|
||||||
|
if (isMounted) {
|
||||||
|
setIsMaximized(maximized);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to check window state:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
checkMaximized();
|
||||||
|
|
||||||
|
// Listener para mudanças de estado
|
||||||
|
const setupListener = async () => {
|
||||||
|
try {
|
||||||
|
const appWindow = getCurrentWindow();
|
||||||
|
const unlisten = await appWindow.onResized(async () => {
|
||||||
|
if (isMounted) {
|
||||||
|
const maximized = await appWindow.isMaximized();
|
||||||
|
setIsMaximized(maximized);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return unlisten;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to setup resize listener:', error);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
let unlistenFn: (() => void) | null = null;
|
||||||
|
setupListener().then(fn => {
|
||||||
|
unlistenFn = fn;
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
isMounted = false;
|
||||||
|
if (unlistenFn) {
|
||||||
|
unlistenFn();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleMinimize = async () => {
|
||||||
|
const appWindow = getCurrentWindow();
|
||||||
|
await appWindow.minimize();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMaximize = async () => {
|
||||||
|
const appWindow = getCurrentWindow();
|
||||||
|
if (isMaximized) {
|
||||||
|
await appWindow.unmaximize();
|
||||||
|
} else {
|
||||||
|
await appWindow.maximize();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = async () => {
|
||||||
|
const appWindow = getCurrentWindow();
|
||||||
|
await appWindow.close();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="h-8 bg-sidebar border-b border-sidebar-border flex items-center justify-between select-none z-50 shrink-0"
|
||||||
|
data-tauri-drag-region
|
||||||
|
>
|
||||||
|
{/* Área de arrasto com logo/título */}
|
||||||
|
<div
|
||||||
|
className="flex items-center gap-2 px-4 h-full flex-1"
|
||||||
|
data-tauri-drag-region
|
||||||
|
>
|
||||||
|
<span className="text-sm font-medium text-sidebar-foreground">
|
||||||
|
OllaHub
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Controles de janela */}
|
||||||
|
<div className="flex items-center h-full">
|
||||||
|
<button
|
||||||
|
onClick={handleMinimize}
|
||||||
|
className="h-full w-12 flex items-center justify-center hover:bg-sidebar-accent transition-colors"
|
||||||
|
title="Minimizar"
|
||||||
|
>
|
||||||
|
<Minus className="w-4 h-4 text-sidebar-foreground" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleMaximize}
|
||||||
|
className="h-full w-12 flex items-center justify-center hover:bg-sidebar-accent transition-colors"
|
||||||
|
title={isMaximized ? "Restaurar" : "Maximizar"}
|
||||||
|
>
|
||||||
|
<Square className={cn(
|
||||||
|
"w-3.5 h-3.5 text-sidebar-foreground",
|
||||||
|
isMaximized && "opacity-60"
|
||||||
|
)} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleClose}
|
||||||
|
className="h-full w-12 flex items-center justify-center hover:bg-destructive transition-colors"
|
||||||
|
title="Fechar"
|
||||||
|
>
|
||||||
|
<X className="w-4 h-4 text-sidebar-foreground" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@@ -6,6 +6,13 @@
|
|||||||
"main"
|
"main"
|
||||||
],
|
],
|
||||||
"permissions": [
|
"permissions": [
|
||||||
"core:default"
|
"core:default",
|
||||||
|
"core:window:allow-start-dragging",
|
||||||
|
"core:window:allow-start-resize-dragging",
|
||||||
|
"core:window:allow-minimize",
|
||||||
|
"core:window:allow-maximize",
|
||||||
|
"core:window:allow-unmaximize",
|
||||||
|
"core:window:allow-close",
|
||||||
|
"core:window:allow-is-maximized"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -13,10 +13,12 @@
|
|||||||
"windows": [
|
"windows": [
|
||||||
{
|
{
|
||||||
"title": "OllaHub",
|
"title": "OllaHub",
|
||||||
"width": 800,
|
"width": 1200,
|
||||||
"height": 600,
|
"height": 800,
|
||||||
"resizable": true,
|
"resizable": true,
|
||||||
"fullscreen": false
|
"fullscreen": false,
|
||||||
|
"decorations": false,
|
||||||
|
"transparent": false
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"security": {
|
"security": {
|
||||||
|
|||||||
Reference in new issue
Block a user