From df1d1cc8a9c378ecf2f353fef1857cad686aca3c Mon Sep 17 00:00:00 2001
From: Tom Wise <79859203+tomwisecodes@users.noreply.github.com>
Date: Sun, 1 Sep 2024 13:09:01 +0100
Subject: [PATCH] feat: sidebar on mobile

---
 .../AppComponents/Chat/chat-history.tsx       | 25 +++++++++--
 .../AppComponents/Chat/clear-history.tsx      |  2 +
 .../export-buttons/LessonPlanProgressBar.tsx  |  2 +-
 .../components/AppComponents/Chat/header.tsx  |  2 +-
 .../AppComponents/Chat/sidebar-item.tsx       | 45 +++----------------
 .../AppComponents/Chat/sidebar-list.tsx       |  5 ++-
 .../AppComponents/Chat/sidebar-mobile.tsx     |  2 +-
 .../AppComponents/Chat/ui/sheet.tsx           |  8 ++--
 8 files changed, 40 insertions(+), 51 deletions(-)

diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-history.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-history.tsx
index 3a5caac89..bb37b249d 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/chat-history.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/chat-history.tsx
@@ -2,16 +2,33 @@
 
 import * as React from "react";
 
+import { OakIcon } from "@oaknational/oak-components";
+
 import { SidebarList } from "@/components/AppComponents/Chat/sidebar-list";
 
 import ChatButton from "./ui/chat-button";
 
 export function ChatHistory() {
   return (
-    <div className="flex h-full flex-col">
-      <div className="my-10 px-7">
-        <ChatButton href="/aila" variant="primary">
-          New Lesson
+    <div className="mt-20 flex h-full flex-col">
+      <div className="my-10 flex flex-col px-7">
+        <ChatButton href="/aila" variant="text-link">
+          <span className="rotate-45 scale-90">
+            <OakIcon iconName="cross" />
+          </span>
+          <span>New Lesson</span>
+        </ChatButton>
+        <ChatButton href="/aila" variant="text-link">
+          <span className="scale-90">
+            <OakIcon iconName="home" />
+          </span>
+          Ai experiments page
+        </ChatButton>
+        <ChatButton href="/aila" variant="text-link">
+          <span className="scale-90">
+            <OakIcon iconName="question-mark" />
+          </span>
+          Help
         </ChatButton>
       </div>
       <React.Suspense>
diff --git a/apps/nextjs/src/components/AppComponents/Chat/clear-history.tsx b/apps/nextjs/src/components/AppComponents/Chat/clear-history.tsx
index d179f06d3..256e76cf6 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/clear-history.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/clear-history.tsx
@@ -45,7 +45,9 @@ export function ClearHistory({ isEnabled = false }: ClearHistoryProps) {
       <AlertDialogTrigger asChild>
         <Button variant="ghost" disabled={!isEnabled || isPending}>
           {isPending && <IconSpinner className="mr-7" />}
+          <span className="text-teachersRed">
           Clear history
+          </span>
         </Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
diff --git a/apps/nextjs/src/components/AppComponents/Chat/export-buttons/LessonPlanProgressBar.tsx b/apps/nextjs/src/components/AppComponents/Chat/export-buttons/LessonPlanProgressBar.tsx
index bfe278f8b..5251f88bd 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/export-buttons/LessonPlanProgressBar.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/export-buttons/LessonPlanProgressBar.tsx
@@ -55,7 +55,7 @@ export const LessonPlanProgressBar: React.FC<LessonPlanProgressBarProps> = ({
       >
         <span
           className={`
-          absolute bottom-0 left-0 top-0 rounded-full bg-black
+          absolute bottom-0 left-0 top-0 rounded-full bg-oakGreen
           `}
           style={{
             width: `${(completedSections / LESSON_PLAN_SECTIONS.length) * 100}%`,
diff --git a/apps/nextjs/src/components/AppComponents/Chat/header.tsx b/apps/nextjs/src/components/AppComponents/Chat/header.tsx
index 1774c83f0..b4bad9982 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/header.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/header.tsx
@@ -44,7 +44,7 @@ export function Header() {
         </div>
       )}
 
-      <div className="flex h-26 shrink-0 items-center justify-between border-b-2 border-black bg-white  px-10 ">
+      <div className="flex h-26 w-full shrink-0 items-center justify-between bg-white px-10 sm:w-fit sm:border-b-2  sm:border-black  ">
         <div className="flex items-center gap-10">
           <div className="hidden sm:flex">
             <SidebarMobile>
diff --git a/apps/nextjs/src/components/AppComponents/Chat/sidebar-item.tsx b/apps/nextjs/src/components/AppComponents/Chat/sidebar-item.tsx
index 2fba71aee..8407e0907 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/sidebar-item.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/sidebar-item.tsx
@@ -6,6 +6,7 @@ import { usePathname } from "#next/navigation";
 import { motion } from "framer-motion";
 import Link from "next/link";
 
+import AiIcon from "@/components/AiIcon";
 import { buttonVariants } from "@/components/AppComponents/Chat/ui/button";
 import {
   IconMessage,
@@ -33,7 +34,6 @@ export function SidebarItem({ index, chat, children }: SidebarItemProps) {
 
   const isActive = pathname.includes(chat.id);
   const [newChatId, setNewChatId] = useLocalStorage("newChatId", null);
-  const shouldAnimate = index === 0 && isActive && newChatId;
 
   return (
     <motion.div
@@ -48,14 +48,12 @@ export function SidebarItem({ index, chat, children }: SidebarItemProps) {
           opacity: 1,
         },
       }}
-      initial={shouldAnimate ? "initial" : undefined}
-      animate={shouldAnimate ? "animate" : undefined}
       transition={{
         duration: 0.25,
         ease: "easeIn",
       }}
     >
-      <div className="absolute left-7 top-5 flex h-14 w-14 items-center justify-center">
+      <div className="absolute left-7 top-5 mr-7 flex h-14 w-14 items-center justify-center">
         {chat.isShared ? (
           <Tooltip delayDuration={1000}>
             <TooltipTrigger
@@ -67,7 +65,7 @@ export function SidebarItem({ index, chat, children }: SidebarItemProps) {
             <TooltipContent>This is a shared chat.</TooltipContent>
           </Tooltip>
         ) : (
-          <IconMessage className="mr-7" />
+          <AiIcon />
         )}
       </div>
       <Link
@@ -79,44 +77,11 @@ export function SidebarItem({ index, chat, children }: SidebarItemProps) {
         )}
       >
         <div
-          className="relative flex-1 select-none overflow-hidden text-ellipsis break-all"
+          className="relative ml-7 flex-1 select-none overflow-hidden text-ellipsis break-all"
           title={chat.title}
         >
           <span className="whitespace-nowrap">
-            {shouldAnimate ? (
-              chat.title.split("").map((character, index) => (
-                <motion.span
-                  key={index}
-                  variants={{
-                    initial: {
-                      opacity: 0,
-                      x: -100,
-                    },
-                    animate: {
-                      opacity: 1,
-                      x: 0,
-                    },
-                  }}
-                  initial={shouldAnimate ? "initial" : undefined}
-                  animate={shouldAnimate ? "animate" : undefined}
-                  transition={{
-                    duration: 0.25,
-                    ease: "easeIn",
-                    delay: index * 0.05,
-                    staggerChildren: 0.05,
-                  }}
-                  onAnimationComplete={() => {
-                    if (index === chat.title.length - 1) {
-                      setNewChatId(null);
-                    }
-                  }}
-                >
-                  {character}
-                </motion.span>
-              ))
-            ) : (
-              <span>{chat.title}</span>
-            )}
+            <span>{chat.title}</span>
           </span>
         </div>
       </Link>
diff --git a/apps/nextjs/src/components/AppComponents/Chat/sidebar-list.tsx b/apps/nextjs/src/components/AppComponents/Chat/sidebar-list.tsx
index 611f04a6e..77d7599d2 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/sidebar-list.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/sidebar-list.tsx
@@ -13,10 +13,13 @@ export async function SidebarList() {
     <div className="flex flex-1 flex-col overflow-hidden">
       <div className="flex-1 overflow-auto">
         <div className="space-y-7 px-7">
+          <p className="mb-14 border-t-2 border-black border-opacity-20 pl-10 pt-14 text-xl font-bold">
+            Lesson history
+          </p>
           {chats?.length ? <SidebarItems chats={chats} /> : null}
         </div>
       </div>
-      <div className="flex items-center justify-end p-10">
+      <div className="flex items-center justify-start p-10">
         <ClearHistory isEnabled={chats ? chats?.length > 0 : false} />
       </div>
     </div>
diff --git a/apps/nextjs/src/components/AppComponents/Chat/sidebar-mobile.tsx b/apps/nextjs/src/components/AppComponents/Chat/sidebar-mobile.tsx
index 00d818784..bbac986eb 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/sidebar-mobile.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/sidebar-mobile.tsx
@@ -30,7 +30,7 @@ export function SidebarMobile({ children }: Readonly<SidebarMobileProps>) {
           <span className="sr-only">Toggle Sidebar</span>
         </Button>
       </SheetTrigger>
-      <SheetContent className="inset-y-0 flex h-auto w-[300px] flex-col p-0">
+      <SheetContent className="inset-y-0 flex h-auto w-full flex-col p-0 sm:w-[300px]">
         <Sidebar className="flex">{children}</Sidebar>
       </SheetContent>
     </Sheet>
diff --git a/apps/nextjs/src/components/AppComponents/Chat/ui/sheet.tsx b/apps/nextjs/src/components/AppComponents/Chat/ui/sheet.tsx
index 5700e9b0c..22958100e 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/ui/sheet.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/ui/sheet.tsx
@@ -22,7 +22,7 @@ const sheetVariants = cva(
         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
         bottom:
           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "w-9/4 inset-y-0 left-0 h-full border-r-2 border-black data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        left: "w-9/4 inset-y-0 left-0 h-full border-black data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm sm:border-r-2",
         right:
           "w-9/4 inset-y-0 right-0 h-full  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
       },
@@ -48,8 +48,10 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-10 top-10 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <Icon icon="cross" size="sm" />
+      <SheetPrimitive.Close className="absolute left-16 top-16 rounded-sm  ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <div className="rounded-full bg-black p-6">
+          <Icon icon="cross-white" size="sm" />
+        </div>
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>