Merge pull request #149 from midday-ai/feature/responsive-dashboard-v1

Responsive
midday-ai · Jun 13, 2024 · f65d3cb · f65d3cb
2 parents a8aca2b + 74fec59
commit f65d3cb
Show file tree

Hide file tree

Showing 63 changed files with 157 additions and 234 deletions.
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
@@ -39,7 +39,7 @@
     "@upstash/ratelimit": "^1.2.0",
     "@vercel/speed-insights": "^1.0.12",
     "@zip.js/zip.js": "2.7.45",
-    "ai": "^3.1.32",
+    "ai": "^3.1.33",
     "change-case": "^5.4.4",
     "dub": "^0.29.17",
     "framer-motion": "^11.2.10",

diff --git a/apps/dashboard/public/assets/mobile.png b/apps/dashboard/public/assets/mobile.png
diff --git a/apps/dashboard/src/actions/close-mobile-overlay-action.tsx b/apps/dashboard/src/actions/close-mobile-overlay-action.tsx
diff --git a/apps/dashboard/src/actions/schema.ts b/apps/dashboard/src/actions/schema.ts
@@ -63,10 +63,6 @@ export const changeSpendingPeriodSchema = z.object({
   to: z.string().datetime(),
 });
 
-export const closeMobileOverlaySchema = z.object({
-  value: z.boolean(),
-});
-
 export const changeChartCurrencySchema = z.string();
 export const changeChartTypeSchema = z.enum(["profit", "revenue", "burn_rate"]);
 export const changeChartPeriodSchema = z.object({

diff --git a/apps/dashboard/src/app/[locale]/(app)/(sidebar)/layout.tsx b/apps/dashboard/src/app/[locale]/(app)/(sidebar)/layout.tsx
@@ -11,13 +11,6 @@ import dynamic from "next/dynamic";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
 
-const MobileOverview = dynamic(
-  () => import("@/components/mobile-overlay").then((mod) => mod.MobileOverview),
-  {
-    ssr: false,
-  }
-);
-
 const AssistantModal = dynamic(
   () =>
     import("@/components/assistant/assistant-modal").then(
@@ -98,7 +91,6 @@ export default async function Layout({
     : getCountryCode();
 
   const isEU = isEUCountry(countryCode);
-  const mobileOverlay = cookies().has(Cookies.MobileOverlay);
 
   if (!user?.data?.team) {
     redirect("/teams");
@@ -111,11 +103,9 @@ export default async function Layout({
   return (
     <div className="relative">
       <AI initialAIState={{ user: user.data, messages: [], chatId: nanoid() }}>
-        {!mobileOverlay && <MobileOverview />}
-
         <Sidebar />
 
-        <div className="ml-[95px] mr-10 pb-8">
+        <div className="mx-4 md:ml-[95px] md:mr-10 pb-8">
           <Header />
           {children}
         </div>

diff --git a/apps/dashboard/src/app/layout.tsx b/apps/dashboard/src/app/layout.tsx
@@ -18,6 +18,10 @@ export const metadata: Metadata = {
 };
 
 export const viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
   themeColor: [
     { media: "(prefers-color-scheme: light)" },
     { media: "(prefers-color-scheme: dark)" },

diff --git a/apps/dashboard/src/components/assistant/assistant-modal.tsx b/apps/dashboard/src/components/assistant/assistant-modal.tsx
@@ -15,7 +15,7 @@ export function AssistantModal() {
   return (
     <Dialog open={isOpen} onOpenChange={setOpen}>
       <DialogContent
-        className="overflow-hidden p-0 max-w-[740px] h-[480px] rounded-lg"
+        className="overflow-hidden p-0 max-w-full w-full h-full md:max-w-[740px] md:h-[480px] md:rounded-lg m-0"
         hideClose
       >
         <Assistant />

diff --git a/apps/dashboard/src/components/assistant/button.tsx b/apps/dashboard/src/components/assistant/button.tsx
@@ -9,10 +9,10 @@ export function AssistantButton() {
   return (
     <Button
       variant="outline"
-      className="relative w-full justify-start text-sm text-muted-foreground sm:pr-12 md:w-40 lg:w-64 border-0 p-0 hover:bg-transparent font-normal todesktop:hidden"
+      className="relative w-full justify-start text-sm text-muted-foreground sm:pr-12 md:w-40 lg:w-64 border-0 p-0 hover:bg-transparent font-normal no-drag"
       onClick={() => setOpen()}
     >
-      <span className="hidden lg:inline-flex">Ask Midday a question...</span>
+      <span className="ml-4 md:ml-0">Ask Midday a question...</span>
       <kbd className="pointer-events-none absolute right-1.5 top-1.5 hidden h-5 select-none items-center gap-1 rounded border bg-accent px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
         <span className="text-xs">⌘</span>K
       </kbd>

diff --git a/apps/dashboard/src/components/assistant/header.tsx b/apps/dashboard/src/components/assistant/header.tsx
@@ -1,3 +1,4 @@
+import { useAssistantStore } from "@/store/assistant";
 import { Button } from "@midday/ui/button";
 import { Icons } from "@midday/ui/icons";
 import { Experimental } from "../experimental";
@@ -8,6 +9,8 @@ type Props = {
 };
 
 export function Header({ toggleSidebar, isExpanded }: Props) {
+  const { setOpen } = useAssistantStore();
+
   return (
     <div className="px-4 py-3 flex justify-between items-center border-border border-b-[1px]">
       <div className="flex items-center space-x-3">
@@ -27,7 +30,16 @@ export function Header({ toggleSidebar, isExpanded }: Props) {
         <h2>Assistant</h2>
       </div>
 
-      <div className="flex space-x-2 items-center">
+      <Button
+        className="flex md:hidden todesktop:hidden"
+        size="icon"
+        variant="ghost"
+        onClick={() => setOpen()}
+      >
+        <Icons.Close />
+      </Button>
+
+      <div className="space-x-2 items-center hidden md:flex todesktop:flex">
         <Experimental className="border-border text-[#878787]" />
       </div>
     </div>

diff --git a/apps/dashboard/src/components/assistant/index.tsx b/apps/dashboard/src/components/assistant/index.tsx
@@ -54,7 +54,7 @@ export function Assistant() {
   }, [chatId]);
 
   return (
-    <div className="overflow-hidden p-0 max-w-[760px] h-[480px]">
+    <div className="overflow-hidden p-0 h-full w-full todesktop:max-w-[760px] md:max-w-[760px] md:h-[480px] todesktop:h-[480px]">
       {showFeedback && (
         <AssistantFeedback onClose={() => setShowFeedback(false)} />
       )}

diff --git a/apps/dashboard/src/components/assistant/sidebar-items.tsx b/apps/dashboard/src/components/assistant/sidebar-items.tsx
@@ -52,7 +52,7 @@ export function SidebarItems({ onSelect, chatId }: SidebarItemsProps) {
   }, [aiState]);
 
   return (
-    <div className="overflow-auto relative h-[410px] mt-16 scrollbar-hide p-4 pt-0 pb-[50px] flex flex-col space-y-6">
+    <div className="overflow-auto relative h-screen md:h-[410px] mt-16 scrollbar-hide p-4 pt-0 pb-[50px] flex flex-col space-y-6">
       {!Object.keys(items).length && (
         <div className="flex flex-col justify-center items-center h-full">
           <div className="flex flex-col items-center -mt-12 text-xs space-y-1">

diff --git a/apps/dashboard/src/components/assistant/sidebar-list.tsx b/apps/dashboard/src/components/assistant/sidebar-list.tsx
@@ -27,7 +27,7 @@ export function SidebarList({
       <div
         ref={ref}
         className={cn(
-          "w-[220px] h-[477px] bg-background dark:bg-[#131313] absolute -left-[220px] top-0 bottom-[1px] duration-200 ease-out transition-all border-border border-r-[1px] z-20 invisible",
+          "w-[220px] h-screen md:h-[477px] bg-background dark:bg-[#131313] absolute -left-[220px] top-0 bottom-[1px] duration-200 ease-out transition-all border-border border-r-[1px] z-20 invisible",
           isExpanded && "visible translate-x-full"
         )}
       >

diff --git a/apps/dashboard/src/components/attachments.tsx b/apps/dashboard/src/components/attachments.tsx
@@ -128,7 +128,7 @@ export function Attachments({ id, data }) {
       />
       <div
         className={cn(
-          "mt-4 w-full h-[120px] border-dotted border-2 border-border rounded-xl text-center flex flex-col justify-center space-y-1 transition-colors text-[#606060]",
+          "mt-4 w-full h-[120px] border-dotted border-2 border-border text-center flex flex-col justify-center space-y-1 transition-colors text-[#606060]",
           isDragActive && "bg-secondary text-primary"
         )}
         {...getRootProps()}

diff --git a/apps/dashboard/src/components/charts/chart-period.tsx b/apps/dashboard/src/components/charts/chart-period.tsx
@@ -79,11 +79,11 @@ export function ChartPeriod({ defaultValue, disabled }: Props) {
             variant="outline"
             className="justify-start text-left font-medium space-x-2"
           >
-            <span>{placeholder}</span>
+            <span className="line-clamp-1 text-ellipsis">{placeholder}</span>
             <Icons.ChevronDown />
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-[450px] mt-2 pt-1" align="end">
+        <PopoverContent className="w-screen md:w-[450px] mt-2 pt-1" align="end">
           <MonthRangePicker setDate={handleChangePeriod} date={date} />
         </PopoverContent>
       </Popover>

diff --git a/apps/dashboard/src/components/charts/chart-selectors.tsx b/apps/dashboard/src/components/charts/chart-selectors.tsx
@@ -9,7 +9,7 @@ export async function ChartSelectors({ defaultValue, currency }) {
   const chartType = cookies().get(Cookies.ChartType)?.value ?? "profit";
 
   return (
-    <div className="flex justify-between mt-6">
+    <div className="flex justify-between mt-6 space-x-2">
       <div className="flex space-x-2">
         <ChartType initialValue={chartType} />
         <ChartCurrency defaultValue={currency} />

diff --git a/apps/dashboard/src/components/charts/spending.tsx b/apps/dashboard/src/components/charts/spending.tsx
@@ -7,7 +7,7 @@ import { SpendingPeriod } from "./spending-period";
 export async function Spending({ disabled, initialPeriod }) {
   return (
     <div className="border aspect-square relative overflow-hidden">
-      <div className="p-8 flex-col">
+      <div className="p-4 md:p-8 flex-col">
         <SpendingPeriod initialPeriod={initialPeriod} />
 
         <ErrorBoundary errorComponent={ErrorFallback}>

diff --git a/apps/dashboard/src/components/charts/transaction-list-item.tsx b/apps/dashboard/src/components/charts/transaction-list-item.tsx
@@ -35,7 +35,7 @@ export function TransactionListItem({ transaction, disabled }: Props) {
           <div className="w-[35%]">
             <span
               className={cn(
-                "text-sm",
+                "text-sm line-clamp-1",
                 disabled && "skeleton-box",
                 transaction?.category?.slug === "income" && "text-[#00C969]"
               )}

diff --git a/apps/dashboard/src/components/charts/transactions.tsx b/apps/dashboard/src/components/charts/transactions.tsx
@@ -13,7 +13,7 @@ export async function Transactions({ disabled }) {
   const type = cookies().get("transactions-period")?.value ?? "all";
 
   return (
-    <div className="border aspect-square overflow-hidden relative p-8">
+    <div className="border aspect-square overflow-hidden relative p-4 md:p-8">
       <TransactionsPeriod type={type} disabled={disabled} />
 
       <div className="mt-8">

diff --git a/apps/dashboard/src/components/chat/chat-empty.tsx b/apps/dashboard/src/components/chat/chat-empty.tsx
@@ -6,7 +6,7 @@ type Props = {
 
 export function ChatEmpty({ firstName }: Props) {
   return (
-    <div className="w-full mt-24 flex flex-col items-center justify-center text-center">
+    <div className="w-full mt-[200px] todesktop:mt-24 md:mt-24 flex flex-col items-center justify-center text-center">
       <Icons.LogoSmall />
       <span className="font-medium text-xl mt-6">
         Hi {firstName}, how can I help <br />

diff --git a/apps/dashboard/src/components/chat/chat-examples.tsx b/apps/dashboard/src/components/chat/chat-examples.tsx
@@ -39,7 +39,7 @@ export function ChatExamples({ onSubmit }) {
 
   return (
     <div
-      className="absolute z-10 bottom-[100px] left-0 right-0 overflow-scroll scrollbar-hide cursor-grabbing"
+      className="absolute z-10 bottom-[100px] left-0 right-0 overflow-scroll scrollbar-hide cursor-grabbing hidden md:block"
       {...events}
       ref={ref}
     >

diff --git a/apps/dashboard/src/components/chat/chat-footer.tsx b/apps/dashboard/src/components/chat/chat-footer.tsx
@@ -23,7 +23,7 @@ export function ChatFooter({ onSubmit, showFeedback }: Props) {
   };
 
   return (
-    <div className="flex px-3 h-[40px] w-full border-t-[1px] items-center bg-background backdrop-filter dark:border-[#2C2C2C] backdrop-blur-lg dark:bg-[#151515]/[99]">
+    <div className="hidden todesktop:flex md:flex px-3 h-[40px] w-full border-t-[1px] items-center bg-background backdrop-filter dark:border-[#2C2C2C] backdrop-blur-lg dark:bg-[#151515]/[99]">
       <Popover>
         <PopoverTrigger>
           <div className="scale-50 opacity-50 -ml-2">

diff --git a/apps/dashboard/src/components/chat/index.tsx b/apps/dashboard/src/components/chat/index.tsx
@@ -6,6 +6,7 @@ import { useScrollAnchor } from "@/hooks/use-scroll-anchor";
 import { useAssistantStore } from "@/store/assistant";
 import { ScrollArea } from "@midday/ui/scroll-area";
 import { Textarea } from "@midday/ui/textarea";
+import { useMediaQuery } from "@uidotdev/usehooks";
 import { useActions } from "ai/rsc";
 import { nanoid } from "nanoid";
 import { useEffect, useRef } from "react";
@@ -67,9 +68,9 @@ export function Chat({
   }, []);
 
   useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
+    requestAnimationFrame(() => {
+      inputRef?.current.focus();
+    });
   }, [messages]);
 
   const { messagesRef, scrollRef, visibilityRef, scrollToBottom } =
@@ -79,7 +80,7 @@ export function Chat({
 
   return (
     <div className="relative">
-      <ScrollArea className="h-[335px]" ref={scrollRef}>
+      <ScrollArea className="todesktop:h-[335px] md:h-[335px]" ref={scrollRef}>
         <div ref={messagesRef}>
           {messages.length ? (
             <ChatList messages={messages} />
@@ -91,7 +92,7 @@ export function Chat({
         </div>
       </ScrollArea>
 
-      <div className="fixed bottom-[1px] left-[1px] right-[1px] h-[88px] bg-background border-border border-t-[1px]">
+      <div className="fixed bottom-[1px] left-[1px] right-[1px] todesktop:h-[88px] md:h-[88px] bg-background border-border border-t-[1px]">
         {showExamples && <ChatExamples onSubmit={onSubmit} />}
 
         <form
@@ -111,7 +112,6 @@ export function Chat({
             value={input}
             className="h-12 min-h-12 pt-3 resize-none border-none"
             placeholder="Ask Midday a question..."
-            autoFocus
             onKeyDown={onKeyDown}
             onChange={(evt) => {
               setInput(evt.target.value);

diff --git a/apps/dashboard/src/components/header.tsx b/apps/dashboard/src/components/header.tsx
@@ -9,20 +9,27 @@ import { Skeleton } from "@midday/ui/skeleton";
 import { isDesktopApp } from "@todesktop/client-core/platform/todesktop";
 import { Suspense } from "react";
 import { DesktopTrafficLight } from "./desktop-traffic-light";
+import { MobileMenu } from "./mobile-menu";
 
 export function Header() {
   return (
-    <header className="border-b-[1px] flex justify-between py-4 items-center todesktop:sticky todesktop:top-0 todesktop:bg-background todesktop:z-10 todesktop:border-none">
+    <header className="-ml-4 -mr-4 md:m-0 z-10 px-4 md:px-4 md:border-b-[1px] flex justify-between pt-4 pb-2 md:pb-4 items-center todesktop:sticky todesktop:top-0 todesktop:bg-background todesktop:border-none sticky md:static top-0 backdrop-filter backdrop-blur-xl md:backdrop-filter md:backdrop-blur-none dark:bg-[#121212] bg-[#fff] bg-opacity-70 ">
+      <MobileMenu />
+
       {isDesktopApp() && <DesktopTrafficLight />}
       {isDesktopApp() && <BrowserNavigation />}
+
       <AssistantButton />
 
       <div className="flex space-x-2 no-drag ml-auto">
         {isDesktopApp() && <DesktopAssistantuButton />}
+
         <TrackerControl />
+
         <Suspense>
           <ReconnectBank />
         </Suspense>
+
         <NotificationCenter />
 
         <Suspense fallback={<Skeleton className="h-8 w-8 rounded-full" />}>

diff --git a/apps/dashboard/src/components/inbox-details-skeleton.tsx b/apps/dashboard/src/components/inbox-details-skeleton.tsx
@@ -5,7 +5,7 @@ import { Skeleton } from "@midday/ui/skeleton";
 
 export function InboxDetailsSkeleton() {
   return (
-    <div className="flex h-[calc(100vh-120px)] overflow-hidden flex-col border w-[1160px]">
+    <div className="h-[calc(100vh-120px)] overflow-hidden flex-col border w-[1160px] hidden md:flex">
       <div className="flex items-center py-2 h-[52px]">
         <div className="flex items-center gap-2" />
       </div>

diff --git a/apps/dashboard/src/components/inbox-details.tsx b/apps/dashboard/src/components/inbox-details.tsx
@@ -51,11 +51,11 @@ export function InboxDetails({
   };
 
   if (isEmpty) {
-    return <div className="w-[1160px]" />;
+    return <div className="hidden md:block w-[1160px]" />;
   }
 
   return (
-    <div className="flex h-[calc(100vh-120px)] overflow-hidden flex-col border w-[1160px]">
+    <div className="h-[calc(100vh-120px)] overflow-hidden flex-col border w-[1160px] hidden md:flex">
       <div className="flex items-center p-2">
         <div className="flex items-center gap-2">
           <Tooltip>

diff --git a/apps/dashboard/src/components/inbox-list-skeleton.tsx b/apps/dashboard/src/components/inbox-list-skeleton.tsx
@@ -14,7 +14,7 @@ export function InboxListSkeleton({
     <div className={cn("flex flex-col gap-4", className)}>
       {[...Array(numberOfItems)].map((_, index) => (
         <div
-          className="flex flex-col items-start gap-2 rounded-xl border p-4 text-left text-sm transition-all h-[82px]"
+          className="flex flex-col items-start gap-2 border p-4 text-left text-sm transition-all h-[82px]"
           key={index.toString()}
         >
           <div className="flex w-full flex-col gap-1">

diff --git a/apps/dashboard/src/components/inbox-toolbar.tsx b/apps/dashboard/src/components/inbox-toolbar.tsx
@@ -43,7 +43,7 @@ export function InboxToolbar({ isFirst, isLast, onKeyPress, onAction }: Props) {
   });
 
   return (
-    <div className="left-0 right-0 absolute bottom-0 flex items-center justify-center">
+    <div className="left-0 right-0 absolute bottom-0 hidden md:flex items-center justify-center">
       <div className="backdrop-filter backdrop-blur-lg dark:bg-[#1A1A1A]/80 bg-[#F6F6F3]/80 h-10 justify-between items-center flex px-2 rounded-lg space-x-4 text-[#878787]">
         <button
           type="button"