[front] - chore(sidebarmenu): polish (#8920)

* [front] - fix: adjust conversation sidebar padding and scroll area

 - Remove left padding from the conversation sidebar container for a cleaner layout
 - Add horizontal padding within the scroll area for better content spacing and readability

* [assistant/conversation] - refactor: streamline multi-select actions in SidebarMenu

- Consolidated action buttons for multi-select mode to improve accessibility and interface consistency
- Added a shadow box style to enhance visual separation of action buttons from conversation list

* [front/components/assistant/conversation] - refactor: streamline rendering of sidebar menu actions

 - Simplified the conditionals by separating the multi-select and default action views into distinct blocks
 - Removed redundant classes and elements to clean up the UI structure for better maintainability

* [front/assistant/conversation] - refactor: remove unused Separator import from SidebarMenu

 - Cleanup of SidebarMenu component by removing the import statement for Separator which is no longer used

* [front] - refactor: streamline shadow styling in SidebarMenu components

 - Replace inline shadow styles with a `shadow-fade` utility class for consistency and maintainability
 - Apply the new `shadow-fade` class to elements within the `SidebarMenu.tsx` file

* [front/components/assistant/conversation] - refactor: update shadow styling for SidebarMenu

- Replace `shadow-fade` with `shadow-tale` in SidebarMenu for multi-select and action buttons
- Remove deprecated `shadow-fade` styling from global.css

[front/tailwind.config] - feature: add new 'tale' box-shadow to tailwind configuration

- Introduce a new `tale` box-shadow definition to the TailwindCSS configuration for future use in styling

* [front] - fix: adjust shadow-tale CSS class ordering in SidebarMenu

 - Ensure consistent ordering of CSS classes for improved readability and adherence to styling guidelines
 - Modify the positioning of 'shadow-tale' to be the last class in the class list for sidebar elements

front/components/assistant/conversation/SidebarMenu.tsx

@@ -17,7 +17,6 @@ import {
   PlusIcon,
   RobotIcon,
   ScrollArea,
-  Separator,
   TrashIcon,
   XMarkIcon,
 } from "@dust-tt/sparkle";
@@ -201,29 +200,26 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
         )}
       >
         <div className="flex h-0 min-h-full w-full overflow-y-auto">
-          <div className="flex w-full flex-col pl-2">
+          <div className="flex w-full flex-col">
             {isMultiSelect ? (
-              <div className="flex w-full items-center justify-end py-2 pr-2">
+              <div className="z-50 flex justify-between gap-2 p-2 shadow-tale">
                 <Button
-                  size="xs"
-                  variant="outline"
-                  icon={XMarkIcon}
-                  onClick={toggleMultiSelect}
-                  className="mr-2"
-                />
-                <Button
-                  icon={TrashIcon}
-                  size="xs"
                   variant={
                     selectedConversations.length === 0 ? "outline" : "warning"
                   }
-                  tooltip="Delete conversations"
+                  label="Delete"
                   disabled={selectedConversations.length === 0}
                   onClick={() => setShowDeleteDialog("selection")}
                 />
+                <Button
+                  variant="ghost"
+                  icon={XMarkIcon}
+                  onClick={toggleMultiSelect}
+                  className="mr-2"
+                />
               </div>
             ) : (
-              <div className={classNames("flex justify-end gap-2 py-2 pr-2")}>
+              <div className="z-50 flex justify-end gap-2 p-2 shadow-tale">
                 <Button
                   href={`/w/${owner.sId}/assistant/new`}
                   label="New"
@@ -283,8 +279,7 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
                 Error loading conversations
               </Label>
             )}
-            <Separator />
-            <ScrollArea className="w-full">
+            <ScrollArea className="w-full px-2">
               {conversationsByDate &&
                 Object.keys(conversationsByDate).map((dateLabel) => (
                   <RenderConversations

front/tailwind.config.js

@@ -28,6 +28,7 @@ module.exports = {
         lg: "0 10px 20px rgba(15, 23, 42, 0.12)",
         xl: "0 20px 25px rgba(15, 23, 42, 0.12)",
         "2xl": "0 25px 50px rgba(15, 23, 42, 0.12)",
+        tale: "0px 0px 12px 12px #F6F8FB",
       },
       zIndex: {
         60: "60",