From 3b9acb3113122571614fd3d1ac12d1f8b7876825 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daphn=C3=A9=20Popin?= <daphne.popin@gmail.com>
Date: Wed, 30 Oct 2024 21:35:42 +0100
Subject: [PATCH] Extension: Better UX navigation headers

---
 .../src/components/auth/ProtectedRoute.tsx    |  4 +--
 .../app/src/pages/ConversationPage.tsx        | 30 ++++++++++++++-----
 .../app/src/pages/ConversationsPage.tsx       | 27 ++++++++++-------
 3 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/front/extension/app/src/components/auth/ProtectedRoute.tsx b/front/extension/app/src/components/auth/ProtectedRoute.tsx
index f31d915bfde5..40f1e2af9c14 100644
--- a/front/extension/app/src/components/auth/ProtectedRoute.tsx
+++ b/front/extension/app/src/components/auth/ProtectedRoute.tsx
@@ -53,7 +53,7 @@ export const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
   return (
     <div className="flex h-screen flex-col gap-2 p-4">
       <div className="flex items-start justify-between">
-        <div className="flex items-center gap-2 pb-10">
+        <div className="flex items-center gap-2 pb-16">
           <LogoHorizontalColorLogo className="h-4 w-16" />
           <a href="https://dust.tt" target="_blank">
             <ExternalLinkIcon color="#64748B" />
@@ -64,7 +64,7 @@ export const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
           variant="outline"
           label="Sign out"
           onClick={handleLogout}
-          size="sm"
+          size="xs"
         />
       </div>
       <>
diff --git a/front/extension/app/src/pages/ConversationPage.tsx b/front/extension/app/src/pages/ConversationPage.tsx
index f7309830bfd5..43d085c5e96b 100644
--- a/front/extension/app/src/pages/ConversationPage.tsx
+++ b/front/extension/app/src/pages/ConversationPage.tsx
@@ -1,7 +1,8 @@
-import { BarHeader, ChevronLeftIcon, Page } from "@dust-tt/sparkle";
+import { usePublicConversation } from "@app/extension/app/src/components/conversation/usePublicConversation";
+import { BarHeader, ExternalLinkIcon, IconButton } from "@dust-tt/sparkle";
 import type { ProtectedRouteChildrenProps } from "@extension/components/auth/ProtectedRoute";
 import { ConversationContainer } from "@extension/components/conversation/ConversationContainer";
-import { Link, useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 export const ConversationPage = ({
   workspace,
@@ -10,6 +11,11 @@ export const ConversationPage = ({
   const navigate = useNavigate();
   const { conversationId } = useParams();
 
+  const { conversation } = usePublicConversation({
+    conversationId: conversationId ?? null,
+    workspaceId: workspace.sId,
+  });
+
   if (!conversationId) {
     navigate("/");
     return;
@@ -18,15 +24,23 @@ export const ConversationPage = ({
   return (
     <>
       <BarHeader
-        title="Home"
-        leftActions={
-          <Link to="/">
-            <ChevronLeftIcon />
-          </Link>
+        title={conversation?.title || "Conversation"}
+        rightActions={
+          <div>
+            <a
+              href={`${process.env.DUST_DOMAIN}/w/${workspace.sId}/assistant/${conversationId}`}
+              target="_blank"
+            >
+              <IconButton icon={ExternalLinkIcon} />
+            </a>
+            <BarHeader.ButtonBar
+              variant="close"
+              onClose={() => navigate("/")}
+            />
+          </div>
         }
       />
       <div className="h-full w-full pt-4">
-        <Page.SectionHeader title="Conversation" />
         <ConversationContainer
           owner={workspace}
           conversationId={conversationId}
diff --git a/front/extension/app/src/pages/ConversationsPage.tsx b/front/extension/app/src/pages/ConversationsPage.tsx
index bd79fc133409..849a3aca0c46 100644
--- a/front/extension/app/src/pages/ConversationsPage.tsx
+++ b/front/extension/app/src/pages/ConversationsPage.tsx
@@ -1,16 +1,16 @@
 import {
   BarHeader,
-  ChevronLeftIcon,
+  ExternalLinkIcon,
+  IconButton,
   NavigationList,
   NavigationListItem,
   NavigationListLabel,
-  Page,
 } from "@dust-tt/sparkle";
 import type { ConversationWithoutContentType } from "@dust-tt/types";
 import type { ProtectedRouteChildrenProps } from "@extension/components/auth/ProtectedRoute";
 import { useConversations } from "@extension/components/conversation/useConversations";
 import moment from "moment";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 type GroupLabel =
   | "Today"
@@ -71,16 +71,23 @@ export const ConversationsPage = ({
   return (
     <>
       <BarHeader
-        title="Home"
-        leftActions={
-          <Link to="/">
-            <ChevronLeftIcon />
-          </Link>
+        title="Conversations"
+        rightActions={
+          <div>
+            <a
+              href={`${process.env.DUST_DOMAIN}/w/${workspace.sId}`}
+              target="_blank"
+            >
+              <IconButton icon={ExternalLinkIcon} />
+            </a>
+            <BarHeader.ButtonBar
+              variant="close"
+              onClose={() => navigate("/")}
+            />
+          </div>
         }
       />
       <div className="h-full w-full pt-4">
-        <Page.SectionHeader title="Conversations" />
-
         {conversationsByDate &&
           Object.keys(conversationsByDate).map((dateLabel) => (
             <RenderConversations