UX Cleanup (#2701)

* start * shared iconlogo class * clean out of place components * nit
2025-04-08 11:58:34 +02:00 · 2024-10-07 10:33:08 -07:00 · 2024-10-07 10:33:08 -07:00 · 64909d74f9
commit 64909d74f9
parent 83bc7d4656
13 changed files with 160 additions and 481 deletions
--- a/web/src/app/admin/assistants/AssistantEditor.tsx
+++ b/web/src/app/admin/assistants/AssistantEditor.tsx
@ -165,7 +165,7 @@ export function AssistantEditor({
        existingPersona.num_chunks === 0
      );
    }
-  }, []);
+  }, [isUpdate, existingPrompt]);

  const defaultProvider = llmProviders.find(
    (llmProvider) => llmProvider.is_default_provider
--- a/web/src/app/admin/assistants/PersonaTable.tsx
+++ b/web/src/app/admin/assistants/PersonaTable.tsx
@ -176,7 +176,7 @@ export function PersonasTable({
                </div>
              </div>,
              <div key="edit" className="flex">
-                <div className="mx-auto my-auto">
+                <div className="mr-auto my-auto">
                  {!persona.is_default_persona && isEditable ? (
                    <div
                      className="hover:bg-hover rounded p-1 cursor-pointer"
--- a/web/src/app/admin/prompt-library/modals/EditPromptModal.tsx
+++ b/web/src/app/admin/prompt-library/modals/EditPromptModal.tsx
@ -52,7 +52,7 @@ const EditPromptModal = ({
        }}
      >
        {({ isSubmitting, values }) => (
-          <Form>
+          <Form className="items-stretch">
            <h2 className="text-2xl text-emphasis font-bold mb-3 flex items-center">
              <svg
                className="w-6 h-6 mr-2"
--- a/web/src/app/admin/prompt-library/promptLibrary.tsx
+++ b/web/src/app/admin/prompt-library/promptLibrary.tsx
@ -17,6 +17,7 @@ import { FiTag } from "react-icons/fi";
 import { PageSelector } from "@/components/PageSelector";
 import { InputPrompt } from "./interfaces";
 import { Modal } from "@/components/Modal";
+import { DeleteEntityModal } from "@/components/modals/DeleteEntityModal";

 const CategoryBubble = ({
  name,
@ -120,6 +121,7 @@ export const PromptLibraryTable = ({
      setPopup({ message: "Failed to delete input prompt", type: "error" });
    }
    refresh();
+    setConfirmDeletionId(null);
  };

  const handleStatusSelect = (status: string) => {
@ -138,35 +140,16 @@ export const PromptLibraryTable = ({
  return (
    <div className="justify-center py-2">
      {confirmDeletionId != null && (
-        <Modal
-          onOutsideClick={() => setConfirmDeletionId(null)}
-          className="max-w-sm"
-        >
-          <>
-            <p className="text-lg mb-2">
-              Are you sure you want to delete this prompt? You will not be able
-              to recover this prompt
-            </p>
-            <div className="mt-6 flex justify-between">
-              <button
-                className="rounded py-1.5 px-2 bg-background-800 text-text-200"
-                onClick={async () => {
-                  await handleDelete(confirmDeletionId);
-                  setConfirmDeletionId(null);
-                }}
-              >
-                Yes
-              </button>
-              <button
-                onClick={() => setConfirmDeletionId(null)}
-                className="rounded py-1.5 px-2 bg-background-150 text-text-800"
-              >
-                {" "}
-                No
-              </button>
-            </div>
-          </>
-        </Modal>
+        <DeleteEntityModal
+          onClose={() => setConfirmDeletionId(null)}
+          onSubmit={() => handleDelete(confirmDeletionId)}
+          entityType="prompt"
+          entityName={
+            paginatedPromptLibrary.find(
+              (prompt) => prompt.id === confirmDeletionId
+            )?.prompt ?? ""
+          }
+        />
      )}

      <div className="flex items-center w-full border-2 border-border rounded-lg px-4 py-2 focus-within:border-accent">
--- a/web/src/app/admin/tools/ToolEditor.tsx
+++ b/web/src/app/admin/tools/ToolEditor.tsx
@ -318,10 +318,11 @@ export function ToolEditor({ tool }: { tool?: ToolSnapshot }) {
      <Formik
        initialValues={{
          definition: prettifiedDefinition,
-          customHeaders: tool?.custom_headers?.map((header) => ({
-            key: header.key,
-            value: header.value,
-          })) ?? [{ key: "test", value: "value" }],
+          customHeaders:
+            tool?.custom_headers?.map((header) => ({
+              key: header.key,
+              value: header.value,
+            })) ?? [],
        }}
        validationSchema={ToolSchema}
        onSubmit={async (values: ToolFormValues) => {
--- a/web/src/app/ee/admin/api-key/DanswerApiKeyForm.tsx
+++ b/web/src/app/ee/admin/api-key/DanswerApiKeyForm.tsx
@ -28,18 +28,9 @@ export const DanswerApiKeyForm = ({

  return (
    <Modal onOutsideClick={onClose} width="w-2/6">
-      <div className="px-8 py-6 bg-background">
+      <>
        <h2 className="text-xl font-bold flex">
          {isUpdate ? "Update API Key" : "Create a new API Key"}
-          <div
-            onClick={onClose}
-            className="ml-auto hover:bg-hover p-1.5 rounded"
-          >
-            <XIcon
-              size={20}
-              className="my-auto flex flex-shrink-0 cursor-pointer"
-            />
-          </div>
        </h2>

        <Divider />
@ -126,7 +117,7 @@ export const DanswerApiKeyForm = ({
            </Form>
          )}
        </Formik>
-      </div>
+      </>
    </Modal>
  );
 };
--- a/web/src/app/ee/admin/groups/UserGroupCreationForm.tsx
+++ b/web/src/app/ee/admin/groups/UserGroupCreationForm.tsx
@ -35,18 +35,9 @@ export const UserGroupCreationForm = ({

  return (
    <Modal className="w-fit" onOutsideClick={onClose}>
-      <div className="px-8 py-6 bg-background">
+      <>
        <h2 className="text-xl font-bold flex">
          {isUpdate ? "Update a User Group" : "Create a new User Group"}
-          <div
-            onClick={onClose}
-            className="ml-auto hover:bg-hover p-1.5 rounded"
-          >
-            <XIcon
-              size={20}
-              className="my-auto flex flex-shrink-0 cursor-pointer"
-            />
-          </div>
        </h2>

        <Divider />
@ -89,7 +80,7 @@ export const UserGroupCreationForm = ({
        >
          {({ isSubmitting, values, setFieldValue }) => (
            <Form>
-              <div className="p-4">
+              <div className="py-4">
                <TextFormField
                  name="name"
                  label="Name:"
@ -150,7 +141,7 @@ export const UserGroupCreationForm = ({
            </Form>
          )}
        </Formik>
-      </div>
+      </>
    </Modal>
  );
 };
--- a/web/src/components/icons/icons.tsx
+++ b/web/src/components/icons/icons.tsx
@ -43,7 +43,7 @@ import {
  FiSlack,
 } from "react-icons/fi";
 import { SiBookstack } from "react-icons/si";
-import Image from "next/image";
+import Image, { StaticImageData } from "next/image";
 import jiraSVG from "../../../public/Jira.svg";
 import confluenceSVG from "../../../public/Confluence.svg";
 import openAISVG from "../../../public/Openai.svg";
@ -94,6 +94,23 @@ export interface IconProps {
  className?: string;
 }

+export interface LogoIconProps extends IconProps {
+  src: string | StaticImageData;
+}
+
+export const LogoIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+  src,
+}: LogoIconProps) => (
+  <div
+    style={{ width: `${size}px`, height: `${size}px` }}
+    className={`w-[${size}px] h-[${size}px] ` + className}
+  >
+    <Image src={src} alt="Logo" width="96" height="96" />
+  </div>
+);
+
 export const AssistantsIconSkeleton = ({
  size,
  className = defaultTailwindCSS,
@ -172,36 +189,6 @@ export const AssistantsIcon = ({
  );
 };

-// export const AssistantsIcon = ({
-//   size,
-//   className = defaultTailwindCSS,
-// }: IconProps) => {
-//   return (
-//     <svg
-//       style={{ width: `${size}px`, height: `${size}px` }}
-//       className={`w-[${size}px] h-[${size}px] ` + className}
-//       xmlns="http://www.w3.org/2000/svg"
-//       width="200"
-//       height="200"
-//       viewBox="0 0 24 24"
-//     >
-//       <g fill="none" stroke="currentColor" strokeWidth="1.5">
-//         <path
-//           strokeLinecap="round"
-//           d="M21.483 19c-.04.936-.165 1.51-.569 1.914c-.586.586-1.528.586-3.414.586c-1.886 0-2.828 0-3.414-.586c-.586-.586-.586-1.528-.586-3.414v-2c0-1.886 0-2.828.586-3.414c.586-.586 1.528-.586 3.414-.586c1.886 0 2.828 0 3.414.586c.532.531.581 1.357.585 2.914"
-//         />
-//         <path d="M2 8.5c0 1.886 0 2.828.586 3.414c.586.586 1.528.586 3.414.586c1.886 0 2.828 0 3.414-.586C10 11.328 10 10.386 10 8.5v-2c0-1.886 0-2.828-.586-3.414C8.828 2.5 7.886 2.5 6 2.5c-1.886 0-2.828 0-3.414.586C2 3.672 2 4.614 2 6.5v2Z" />
-//         <path
-//           strokeLinecap="round"
-//           d="M15.5 2.513c-.327.017-.562.055-.765.14a2 2 0 0 0-1.083 1.082c-.152.367-.152.833-.152 1.765c0 .932 0 1.398.152 1.765a2 2 0 0 0 1.083 1.083c.367.152.833.152 1.765.152h2c.932 0 1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083c.152-.367.152-.833.152-1.765c0-.932 0-1.398-.152-1.765a2 2 0 0 0-1.083-1.083c-.204-.084-.438-.122-.765-.139"
-//         />
-//         <path d="M2 18.5c0 .932 0 1.398.152 1.765a2 2 0 0 0 1.083 1.083c.367.152.833.152 1.765.152h2c.932 0 1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083C10 19.898 10 19.432 10 18.5c0-.932 0-1.398-.152-1.765a2 2 0 0 0-1.083-1.083C8.398 15.5 7.932 15.5 7 15.5H5c-.932 0-1.398 0-1.765.152a2 2 0 0 0-1.083 1.083C2 17.102 2 17.568 2 18.5Z" />
-//       </g>
-//     </svg>
-
-//   );
-// };
-
 <svg
  xmlns="http://www.w3.org/2000/svg"
  width="200"
@ -999,103 +986,53 @@ export const LightSettingsIcon = ({
  );
 };

-//
 //  COMPANY LOGOS
-//

 export const LoopioIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] dark:invert ` + className}
-    >
-      <Image src="/Loopio.png" alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon
+    size={size}
+    className={`${className} dark:invert`}
+    src="/Loopio.png"
+  />
+);

 export const NewIconTest = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <svg
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-      xmlns="http://www.w3.org/2000/svg"
-      width="200"
-      height="200"
-      viewBox="0 0 24 24"
-    >
-      <g fill="none" stroke="currentColor" strokeWidth="1.5">
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M2.75 8.917h18.5"
-        />
-        <rect width="18.5" height="18.5" x="2.75" y="2.75" rx="6" />
-      </g>
-    </svg>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src="/NewIconTest.svg" />
+);

 export const GitlabIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src="/Gitlab.png" alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src="/Gitlab.png" />
+);
+
 export const GithubIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src="/Github.png" alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src="/Github.png" />
+);

 export const GmailIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src="/Gmail.png" alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src="/Gmail.png" />
+);

 export const GoogleDriveIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src="/GoogleDrive.png" alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src="/GoogleDrive.png" />
+);

 export const BookstackIcon = ({
  size = 16,
@ -1107,440 +1044,240 @@ export const BookstackIcon = ({
 export const ConfluenceIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
-      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
-    >
-      <Image src={confluenceSVG} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon
+    size={size + 4}
+    className={`${className} -m-0.5`}
+    src={confluenceSVG}
+  />
+);

 export const OCIStorageIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
-      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
-    >
-      <Image src={OCIStorageSVG} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon
+    size={size + 4}
+    className={`${className} -m-0.5`}
+    src={OCIStorageSVG}
+  />
+);

 export const JiraIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  // Jira Icon has a bit more surrounding whitespace than other icons, which is why we need to adjust it here
-  return (
-    <div
-      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
-      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
-    >
-      <Image src={jiraSVG} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size + 4} className={`${className} -m-0.5`} src={jiraSVG} />
+);

 export const ZulipIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src={zulipIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => <LogoIcon size={size} className={className} src={zulipIcon} />;

 export const OpenAIIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src={openAISVG} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => <LogoIcon size={size} className={className} src={openAISVG} />;

 export const VoyageIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src={voyageIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src={voyageIcon} />
+);

 export const GoogleIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src={googleIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src={googleIcon} />
+);

 export const CohereIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src={cohereIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src={cohereIcon} />
+);

 export const GoogleStorageIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
-      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
-    >
-      <Image src={googleCloudStorageIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon
+    size={size + 4}
+    className={`${className} -m-0.5`}
+    src={googleCloudStorageIcon}
+  />
+);

 export const ProductboardIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src="/Productboard.webp" alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src="/Productboard.webp" />
+);

 export const AWSIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      // Linear Icon has a bit more surrounding whitespace than other icons, which is why we need to adjust it here
-      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
-      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
-    >
-      <Image src={awsWEBP} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => <LogoIcon size={size} className={className} src={awsWEBP} />;

 export const AzureIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      // Linear Icon has a bit more surrounding whitespace than other icons, which is why we need to adjust it here
-      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
-      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
-    >
-      <Image src={azureIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => <LogoIcon size={size} className={className} src={azureIcon} />;

 export const LinearIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      // Linear Icon has a bit more surrounding whitespace than other icons, which is why we need to adjust it here
-      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
-      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
-    >
-      <Image src={linearIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src={linearIcon} />
+);

 export const SlabIcon = ({
  size = 16,
  className = defaultTailwindCSS,
 }: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src="/SlabLogo.png" alt="Logo" width="96" height="96" />
-  </div>
+  <LogoIcon size={size} className={className} src="/SlabLogo.png" />
 );

 export const NotionIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src="/Notion.png" alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src="/Notion.png" />
+);

 export const GuruIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={guruIcon} alt="Logo" width="96" height="96" />
-  </div>
-);
+}: IconProps) => <LogoIcon size={size} className={className} src={guruIcon} />;

 export const RequestTrackerIcon = ({
  size = 16,
  className = defaultTailwindCSS,
 }: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={requestTrackerIcon} alt="Logo" width="96" height="96" />
-  </div>
+  <LogoIcon size={size} className={className} src={requestTrackerIcon} />
 );

 export const SalesforceIcon = ({
  size = 16,
  className = defaultTailwindCSS,
 }: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={salesforceIcon} alt="Logo" width="96" height="96" />
-  </div>
+  <LogoIcon size={size} className={className} src={salesforceIcon} />
 );

 export const R2Icon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={r2Icon} alt="Logo" width="96" height="96" />
-  </div>
-);
+}: IconProps) => <LogoIcon size={size} className={className} src={r2Icon} />;

 export const S3Icon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={s3Icon} alt="Logo" width="96" height="96" />
-  </div>
-);
+}: IconProps) => <LogoIcon size={size} className={className} src={s3Icon} />;

 export const SharepointIcon = ({
  size = 16,
  className = defaultTailwindCSS,
 }: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={sharepointIcon} alt="Logo" width="96" height="96" />
-  </div>
+  <LogoIcon size={size} className={className} src={sharepointIcon} />
 );

 export const TeamsIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={teamsIcon} alt="Logo" width="96" height="96" />
-  </div>
-);
+}: IconProps) => <LogoIcon size={size} className={className} src={teamsIcon} />;

 export const GongIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={gongIcon} alt="Logo" width="96" height="96" />
-  </div>
-);
+}: IconProps) => <LogoIcon size={size} className={className} src={gongIcon} />;

 export const HubSpotIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      // HubSpot Icon has a bit more surrounding whitespace than other icons, which is why we need to adjust it here
-      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
-      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
-    >
-      <Image src={hubSpotIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src={hubSpotIcon} />
+);

 export const Document360Icon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
-      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
-    >
-      <Image src={document360Icon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src={document360Icon} />
+);

 export const GoogleSitesIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src={googleSitesIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src={googleSitesIcon} />
+);

 export const ZendeskIcon = ({
  size = 16,
  className = defaultTailwindCSS,
 }: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={zendeskIcon} alt="Logo" width="96" height="96" />
-  </div>
+  <LogoIcon size={size} className={className} src={zendeskIcon} />
 );

 export const DropboxIcon = ({
  size = 16,
  className = defaultTailwindCSS,
 }: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={dropboxIcon} alt="Logo" width="96" height="96" />
-  </div>
+  <LogoIcon size={size} className={className} src={dropboxIcon} />
 );

 export const DiscourseIcon = ({
  size = 16,
  className = defaultTailwindCSS,
 }: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={discourseIcon} alt="Logo" width="96" height="96" />
-  </div>
+  <LogoIcon size={size} className={className} src={discourseIcon} />
 );

 export const AxeroIcon = ({
  size = 16,
  className = defaultTailwindCSS,
 }: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src="/Axero.jpeg" alt="Logo" width="96" height="96" />
-  </div>
+  <LogoIcon size={size} className={className} src="/Axero.jpeg" />
 );

 export const ClickupIcon = ({
  size = 16,
  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size + 4}px`, height: `${size + 4}px` }}
-      className={`w-[${size + 4}px] h-[${size + 4}px] -m-0.5 ` + className}
-    >
-      <Image src={clickupIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src={clickupIcon} />
+);

 export const MediaWikiIcon = ({
  size = 16,
  className = defaultTailwindCSS,
 }: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={mediawikiIcon} alt="Logo" width="96" height="96" />
-  </div>
+  <LogoIcon size={size} className={className} src={mediawikiIcon} />
 );

 export const WikipediaIcon = ({
  size = 16,
  className = defaultTailwindCSS,
 }: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={wikipediaIcon} alt="Logo" width="96" height="96" />
-  </div>
+  <LogoIcon size={size} className={className} src={wikipediaIcon} />
 );

+export const XenforoIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => (
+  <LogoIcon size={size} className={className} src={xenforoIcon} />
+);
+
+export const AsanaIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => <LogoIcon size={size} className={className} src={asanaIcon} />;
+
 /* 
 EE Icons
 */
@ -2836,29 +2573,3 @@ export const WindowsIcon = ({
    </svg>
  );
 };
-
-export const XenforoIcon = ({
-  size = 16,
-  className = defaultTailwindCSS,
-}: IconProps) => {
-  return (
-    <div
-      style={{ width: `${size}px`, height: `${size}px` }}
-      className={`w-[${size}px] h-[${size}px] ` + className}
-    >
-      <Image src={xenforoIcon} alt="Logo" width="96" height="96" />
-    </div>
-  );
-};
-
-export const AsanaIcon = ({
-  size = 16,
-  className = defaultTailwindCSS,
-}: IconProps) => (
-  <div
-    style={{ width: `${size}px`, height: `${size}px` }}
-    className={`w-[${size}px] h-[${size}px] ` + className}
-  >
-    <Image src={asanaIcon} alt="Logo" width="96" height="96" />
-  </div>
-);
--- a/web/src/components/resizable/ResizableSection.tsx
+++ b/web/src/components/resizable/ResizableSection.tsx
@ -41,7 +41,7 @@ export function ResizableSection({
    Cookies.set(DOCUMENT_SIDEBAR_WIDTH_COOKIE_NAME, newWidth.toString(), {
      path: "/",
    });
-  }, [minWidth, maxWidth]);
+  }, [minWidth, maxWidth, width]);

  const startResizing = (mouseDownEvent: React.MouseEvent<HTMLDivElement>) => {
    setIsResizing(true);
--- a/web/src/components/search/SearchBar.tsx
+++ b/web/src/components/search/SearchBar.tsx
@ -178,10 +178,10 @@ export const FullSearchBar = ({
        suppressContentEditableWarning={true}
      />
      <div
-        className={`flex flex-nowrap overflow-y-hidden ${showingSidebar ? " 2xl:justify-between" : "2xl:justify-end"} justify-between 4xl:justify-end w-full max-w-full items-center space-x-3 py-3 px-4`}
+        className={`flex flex-nowrap ${showingSidebar ? " 2xl:justify-between" : "2xl:justify-end"} justify-between 4xl:justify-end w-full max-w-full items-center space-x-3 py-3 px-4`}
      >
        <div
-          className={`-my-1 overflow-x-scroll flex-grow 4xl:hidden ${!showingSidebar && "2xl:hidden"}`}
+          className={`-my-1 flex-grow 4xl:hidden ${!showingSidebar && "2xl:hidden"}`}
        >
          {(ccPairs.length > 0 || documentSets.length > 0) && (
            <HorizontalSourceSelector
--- a/web/src/components/search/SearchResultsDisplay.tsx
+++ b/web/src/components/search/SearchResultsDisplay.tsx
@ -73,7 +73,7 @@ export const SearchResultsDisplay = ({
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
-  }, []);
+  }, [performSweep, agenticResults]);

  if (!searchResponse) {
    return null;
--- a/web/src/components/search/SearchSection.tsx
+++ b/web/src/components/search/SearchSection.tsx
@ -140,7 +140,8 @@ export const SearchSection = ({
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
-  }, []);
+  }, [toggleAgentic]);
+
  const [isFetching, setIsFetching] = useState(false);

  // Search Type
@ -522,7 +523,7 @@ export const SearchSection = ({
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
-  }, [router]);
+  }, [router, toggleSidebar]);

  useEffect(() => {
    if (settings?.isMobile) {
--- a/web/src/components/search/filtering/FilterDropdown.tsx
+++ b/web/src/components/search/filtering/FilterDropdown.tsx
@ -41,7 +41,8 @@ export function FilterDropdown({
              flex-col 
              ${dropdownWidth || width}
              max-h-96 
-              overflow-y-scroll 
+              overflow-y-scroll
+              overscroll-contain
              `}
          >
            {options.map((option, ind) => {