npm run prettier-fix
This commit is contained in:
parent
bff09e0409
commit
0a3b994540
2 changed files with 29 additions and 5 deletions
|
|
@ -28,7 +28,10 @@ import React, {
|
||||||
useState,
|
useState,
|
||||||
} from "react";
|
} from "react";
|
||||||
import { useConnection } from "./lib/hooks/useConnection";
|
import { useConnection } from "./lib/hooks/useConnection";
|
||||||
import { useDraggablePane, useDraggableSidebar } from "./lib/hooks/useDraggablePane";
|
import {
|
||||||
|
useDraggablePane,
|
||||||
|
useDraggableSidebar,
|
||||||
|
} from "./lib/hooks/useDraggablePane";
|
||||||
import { StdErrNotification } from "./lib/notificationTypes";
|
import { StdErrNotification } from "./lib/notificationTypes";
|
||||||
|
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
|
|
@ -163,7 +166,11 @@ const App = () => {
|
||||||
const progressTokenRef = useRef(0);
|
const progressTokenRef = useRef(0);
|
||||||
|
|
||||||
const { height: historyPaneHeight, handleDragStart } = useDraggablePane(300);
|
const { height: historyPaneHeight, handleDragStart } = useDraggablePane(300);
|
||||||
const { width: sidebarWidth, isDragging: isSidebarDragging, handleDragStart: handleSidebarDragStart } = useDraggableSidebar(320);
|
const {
|
||||||
|
width: sidebarWidth,
|
||||||
|
isDragging: isSidebarDragging,
|
||||||
|
handleDragStart: handleSidebarDragStart,
|
||||||
|
} = useDraggableSidebar(320);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
connectionStatus,
|
connectionStatus,
|
||||||
|
|
@ -564,7 +571,12 @@ const App = () => {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen bg-background">
|
<div className="flex h-screen bg-background">
|
||||||
<div
|
<div
|
||||||
style={{ width: sidebarWidth, minWidth: 200, maxWidth: 600, transition: isSidebarDragging ? 'none' : 'width 0.15s' }}
|
style={{
|
||||||
|
width: sidebarWidth,
|
||||||
|
minWidth: 200,
|
||||||
|
maxWidth: 600,
|
||||||
|
transition: isSidebarDragging ? "none" : "width 0.15s",
|
||||||
|
}}
|
||||||
className="bg-card border-r border-border flex flex-col h-full relative"
|
className="bg-card border-r border-border flex flex-col h-full relative"
|
||||||
>
|
>
|
||||||
<Sidebar
|
<Sidebar
|
||||||
|
|
@ -596,7 +608,16 @@ const App = () => {
|
||||||
{/* Drag handle for resizing sidebar */}
|
{/* Drag handle for resizing sidebar */}
|
||||||
<div
|
<div
|
||||||
onMouseDown={handleSidebarDragStart}
|
onMouseDown={handleSidebarDragStart}
|
||||||
style={{ cursor: 'col-resize', position: 'absolute', top: 0, right: 0, width: 6, height: '100%', zIndex: 10, background: isSidebarDragging ? 'rgba(0,0,0,0.08)' : 'transparent' }}
|
style={{
|
||||||
|
cursor: "col-resize",
|
||||||
|
position: "absolute",
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
width: 6,
|
||||||
|
height: "100%",
|
||||||
|
zIndex: 10,
|
||||||
|
background: isSidebarDragging ? "rgba(0,0,0,0.08)" : "transparent",
|
||||||
|
}}
|
||||||
aria-label="Resize sidebar"
|
aria-label="Resize sidebar"
|
||||||
data-testid="sidebar-drag-handle"
|
data-testid="sidebar-drag-handle"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -72,7 +72,10 @@ export function useDraggableSidebar(initialWidth: number) {
|
||||||
(e: MouseEvent) => {
|
(e: MouseEvent) => {
|
||||||
if (!isDragging) return;
|
if (!isDragging) return;
|
||||||
const deltaX = e.clientX - dragStartX.current;
|
const deltaX = e.clientX - dragStartX.current;
|
||||||
const newWidth = Math.max(200, Math.min(600, dragStartWidth.current + deltaX));
|
const newWidth = Math.max(
|
||||||
|
200,
|
||||||
|
Math.min(600, dragStartWidth.current + deltaX),
|
||||||
|
);
|
||||||
setWidth(newWidth);
|
setWidth(newWidth);
|
||||||
},
|
},
|
||||||
[isDragging],
|
[isDragging],
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue