Improve mobile friendly styling of chat session side panel

This commit is contained in:
Debanjum Singh Solanky 2024-07-14 00:55:24 +05:30
parent b26a6e25d1
commit e9567741eb
2 changed files with 7 additions and 10 deletions

View file

@ -72,9 +72,8 @@ import {
import { Pencil, Trash, Share } from "@phosphor-icons/react"; import { Pencil, Trash, Share } from "@phosphor-icons/react";
import { Button, buttonVariants } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
import { modifyFileFilterForConversation } from "@/app/common/chatFunctions"; import { modifyFileFilterForConversation } from "@/app/common/chatFunctions";
import { ScrollAreaScrollbar } from "@radix-ui/react-scroll-area"; import { ScrollAreaScrollbar } from "@radix-ui/react-scroll-area";
@ -141,7 +140,6 @@ function deleteConversation(conversationId: string) {
}); });
} }
interface FilesMenuProps { interface FilesMenuProps {
conversationId: string | null; conversationId: string | null;
uploadedFiles: string[]; uploadedFiles: string[];
@ -555,7 +553,7 @@ function ChatSessionsModal({ data, showSidePanel }: ChatSessionsModalProps) {
<DialogTitle>All Conversations</DialogTitle> <DialogTitle>All Conversations</DialogTitle>
<DialogDescription <DialogDescription
className="p-0"> className="p-0">
<ScrollArea className="h-[500px] p-4"> <ScrollArea className="h-[500px] py-4">
{data && Object.keys(data).map((timeGrouping) => ( {data && Object.keys(data).map((timeGrouping) => (
<div key={timeGrouping}> <div key={timeGrouping}>
<div className={`text-muted-foreground text-sm font-bold p-[0.5rem] `}> <div className={`text-muted-foreground text-sm font-bold p-[0.5rem] `}>
@ -655,18 +653,15 @@ interface SidePanelProps {
export default function SidePanel(props: SidePanelProps) { export default function SidePanel(props: SidePanelProps) {
const [data, setData] = useState<ChatHistory[] | null>(null); const [data, setData] = useState<ChatHistory[] | null>(null);
const [organizedData, setOrganizedData] = useState<GroupedChatHistory | null>(null); const [organizedData, setOrganizedData] = useState<GroupedChatHistory | null>(null);
const [subsetOrganizedData, setSubsetOrganizedData] = useState<GroupedChatHistory | null>(null); const [subsetOrganizedData, setSubsetOrganizedData] = useState<GroupedChatHistory | null>(null);
const [enabled, setEnabled] = useState(false); const [enabled, setEnabled] = useState(false);
const [isMobileWidth, setIsMobileWidth] = useState(false);
const authenticatedData = useAuthenticatedData(); const authenticatedData = useAuthenticatedData();
const { data: chatSessions } = useChatSessionsFetchRequest(authenticatedData ? `/api/chat/sessions` : ''); const { data: chatSessions } = useChatSessionsFetchRequest(authenticatedData ? `/api/chat/sessions` : '');
const [isMobileWidth, setIsMobileWidth] = useState(false);
useEffect(() => { useEffect(() => {
if (chatSessions) { if (chatSessions) {
setData(chatSessions); setData(chatSessions);

View file

@ -6,7 +6,8 @@ div.session {
max-width: 14rem; max-width: 14rem;
font-size: medium; font-size: medium;
display: grid; display: grid;
grid-template-columns: minmax(auto, 350px) 1fr; grid-template-columns: minmax(auto, 400px) 1fr;
gap: 1rem;
} }
div.compressed { div.compressed {
@ -83,6 +84,7 @@ div.profile {
div.panelWrapper { div.panelWrapper {
display: grid; display: grid;
padding: 0 1rem;
grid-template-rows: auto 1fr auto auto; grid-template-rows: auto 1fr auto auto;
height: 100%; height: 100%;
} }
@ -142,6 +144,6 @@ div.modalSessionsList div.session {
div.session { div.session {
max-width: 100%; max-width: 100%;
grid-template-columns: 200px 1fr; grid-template-columns: minmax(auto, 70vw) 1fr;
} }
} }