style: improve consistency on font weight & scrollbar

pnd280 · Jan 9, 2025 · 91cc97b · 91cc97b
1 parent 626752e
commit 91cc97b
Show file tree

Hide file tree

Showing 39 changed files with 280 additions and 162 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "complexity",
   "displayName": "Complexity - Perplexity AI Supercharged",
-  "version": "1.2.6.0",
+  "version": "1.2.7.0",
   "author": "pnd280",
   "description": "⚡ Supercharge your Perplexity AI",
   "type": "module",
@@ -36,6 +36,7 @@
     "@hookform/resolvers": "^3.10.0",
     "@lukemorales/query-key-factory": "^1.3.4",
     "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.4",
     "@tanstack/react-query": "^5.62.16",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/CodeHighlighter.tsx b/src/components/CodeHighlighter.tsx
@@ -1,18 +1,13 @@
 import { ComponentProps } from "react";
-import SyntaxHighlighter from "react-syntax-highlighter";
-import lightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/vs";
-import darkStyle from "react-syntax-highlighter/dist/esm/styles/hljs/vs2015";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import lightStyle from "react-syntax-highlighter/dist/esm/styles/prism/vs";
+import darkStyle from "react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus";
 
 import { useColorSchemeStore } from "@/data/color-scheme-store";
 
 const INTERPRETED_LANGUAGES: Record<string, string> = {
-  html: "xml",
-  react: "javascript",
-  jsx: "javascript",
-  tsx: "typescript",
-  js: "javascript",
-  ts: "typescript",
-  py: "python",
+  html: "markup",
+  react: "jsx",
 };
 
 const CodeHighlighter = memo(function CodeHighlighter({
@@ -35,6 +30,10 @@ const CodeHighlighter = memo(function CodeHighlighter({
   return (
     <SyntaxHighlighter
       style={colorScheme === "dark" ? darkStyle : lightStyle}
+      codeTagProps={{
+        className: "tw-font-mono",
+        style: {},
+      }}
       language={targetLanguage}
       {...props}
     >

diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
@@ -28,6 +28,7 @@ export default function Tooltip({
 }: TooltipProps) {
   return (
     <TooltipRoot
+      unmountOnExit
       lazyMount={true}
       openDelay={0}
       closeDelay={0}
@@ -43,7 +44,7 @@ export default function Tooltip({
       </TooltipTrigger>
       {!(typeof content === "string" && content.length === 0) && (
         <TooltipContent asChild portal={portal}>
-          <div>{content}</div>
+          <div className="tw-font-medium">{content}</div>
         </TooltipContent>
       )}
     </TooltipRoot>

diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
@@ -46,7 +46,7 @@ const DialogContent = ({
       <ArkDialog.Positioner>
         <ArkDialog.Content
           className={cn(
-            "tw-fixed tw-left-[50%] tw-top-[50%] tw-z-50 tw-flex tw-w-full tw-max-w-lg tw-flex-col tw-fill-mode-forwards",
+            "custom-scrollbar tw-fixed tw-left-[50%] tw-top-[50%] tw-z-50 tw-flex tw-max-h-[95vh] tw-w-full tw-max-w-lg tw-flex-col tw-overflow-y-auto tw-fill-mode-forwards",
             "tw-translate-x-[-50%] tw-translate-y-[-50%] tw-gap-4 tw-border tw-border-border/50 tw-bg-background tw-p-6 tw-shadow-lg tw-duration-200",
             "tw-max-h-[95vh] data-[state=closed]:tw-hidden data-[state=closed]:tw-animate-out data-[state=open]:tw-fade-in-0",
             "sm:tw-rounded-lg",

diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
@@ -0,0 +1,49 @@
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { ComponentProps } from "react";
+
+const ScrollArea = ({
+  className,
+  children,
+  type = "always",
+  ...props
+}: ComponentProps<typeof ScrollAreaPrimitive.Root>) => (
+  <ScrollAreaPrimitive.Root
+    type={type}
+    className={cn("tw-relative tw-overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="tw-h-full tw-w-full tw-rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollBar orientation="horizontal" />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+);
+
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = ({
+  className,
+  orientation = "vertical",
+  ...props
+}: ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    orientation={orientation}
+    className={cn(
+      "tw-flex tw-touch-none tw-select-none tw-transition-colors",
+      orientation === "vertical" &&
+        "tw-h-full tw-w-2.5 tw-border-l tw-border-l-transparent tw-p-[1px]",
+      orientation === "horizontal" &&
+        "tw-h-2.5 tw-flex-col tw-border-t tw-border-t-transparent tw-p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="tw-relative tw-flex-1 tw-rounded-full tw-bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+);
+
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
diff --git a/...res/options-page/dashboard/pages/plugins/components/plugin-details/PluginDetailsModal.tsx b/...res/options-page/dashboard/pages/plugins/components/plugin-details/PluginDetailsModal.tsx
@@ -45,7 +45,7 @@ export default function PluginDetailsModal({
             {PLUGINS_METADATA[pluginId].description}
           </DialogDescription>
         </DialogHeader>
-        {PLUGIN_DETAILS[pluginId]}
+        <div className="tw-mt-4">{PLUGIN_DETAILS[pluginId]}</div>
       </DialogContentComp>
     </DialogComp>
   );

diff --git a/...eatures/options-page/dashboard/pages/plugins/components/plugin-details/content/Canvas.tsx b/...eatures/options-page/dashboard/pages/plugins/components/plugin-details/content/Canvas.tsx
@@ -7,7 +7,7 @@ export default function CanvasPluginDetails() {
   const { settings, mutation } = useExtensionLocalStorage();
 
   return (
-    <div className="tw-flex tw-max-w-screen-lg tw-flex-col tw-gap-4 tw-overflow-auto">
+    <div className="tw-flex tw-max-w-screen-lg tw-flex-col tw-gap-4">
       <Switch
         textLabel="Enable"
         checked={settings?.plugins["thread:canvas"].enabled}
@@ -99,6 +99,17 @@ export default function CanvasPluginDetails() {
                     </div>
                   </td>
                 </tr>
+                <tr>
+                  <td className="tw-border tw-border-border tw-bg-secondary tw-p-2 tw-text-secondary-foreground">
+                    Supported language models
+                  </td>
+                  <td className="tw-border tw-border-border tw-p-2 tw-text-center tw-text-muted-foreground">
+                    any
+                  </td>
+                  <td className="tw-border tw-border-border tw-p-2 tw-text-center">
+                    Claude 3.5 Sonnet, GPT-4o, GPT-o1, Sonar Huge, Grok-2
+                  </td>
+                </tr>
                 <tr>
                   <td className="tw-border tw-border-border tw-bg-secondary tw-p-2 tw-text-secondary-foreground">
                     Ease of use

diff --git a/src/features/plugins/command-menu/Wrapper.tsx b/src/features/plugins/command-menu/Wrapper.tsx
@@ -89,7 +89,9 @@ export default function CommandMenuWrapper() {
         <SearchFilterBadge />
         <CommandInput
           ref={ref}
-          className="tw-grow tw-border-none"
+          className={cn("tw-grow tw-border-none", {
+            "tw-font-medium": !searchValue,
+          })}
           placeholder={
             !filter
               ? t("plugin-command-menu:commandMenu.input.placeholder")

diff --git a/src/features/plugins/command-menu/components/BaseItem.tsx b/src/features/plugins/command-menu/components/BaseItem.tsx
@@ -22,13 +22,15 @@ const BaseMenuItem = memo(function BaseMenuItem({
   keywords,
   onSelect,
   closeOnSelect = true,
+  className,
   ...props
 }: BaseMenuItemProps) {
   const { closeCommandMenu } = useCommandMenuStore();
 
   return (
     <CommandItem
       keywords={keywords}
+      className={cn("tw-font-medium", className)}
       onSelect={() => {
         onSelect?.();
         if (closeOnSelect) closeCommandMenu();

diff --git a/src/features/plugins/command-menu/components/space-search-items/SpaceItem.tsx b/src/features/plugins/command-menu/components/space-search-items/SpaceItem.tsx
@@ -46,7 +46,7 @@ export function SpaceItem({ space }: SpaceItemProps) {
       value={space.uuid}
       keywords={[searchKeyword]}
       className={cn(
-        "tw-flex tw-min-h-10 tw-items-center",
+        "tw-flex tw-min-h-10 tw-items-center tw-font-medium",
         isHighlighted && "tw-h-max",
       )}
       onSelect={() => {

diff --git a/src/features/plugins/command-menu/components/thread-search-items/ThreadItem.tsx b/src/features/plugins/command-menu/components/thread-search-items/ThreadItem.tsx
@@ -19,7 +19,7 @@ export function ThreadItem({ thread }: ThreadItemProps) {
       key={thread.slug}
       asChild
       value={thread.slug}
-      className="tw-flex tw-h-10 tw-items-center tw-justify-between tw-gap-8"
+      className="tw-flex tw-h-10 tw-items-center tw-justify-between tw-gap-8 tw-font-medium"
       onSelect={() => {
         if (isHotkeyPressed("ctrl"))
           return window.open(`/search/${thread.slug}`, "_blank");

diff --git a/src/features/plugins/image-gen-popover/ImageGenModelSelector.tsx b/src/features/plugins/image-gen-popover/ImageGenModelSelector.tsx
@@ -53,7 +53,7 @@ export default function ImageGenModelSelector() {
         <SelectTrigger variant="ghost">
           <div className="tw-flex tw-min-h-8 tw-items-center tw-justify-center tw-gap-1">
             <Image className="tw-size-4" />
-            <SelectValue>
+            <SelectValue className="tw-font-medium">
               {imageGenModels.find((model) => model.code === value)?.shortLabel}
             </SelectValue>
             <span className="tw-self-start tw-text-[.5rem] tw-text-primary">
@@ -77,6 +77,7 @@ export default function ImageGenModelSelector() {
               <SelectItem
                 key={model.code}
                 item={model.code}
+                className="tw-font-medium"
                 onClick={(e) => {
                   e.stopPropagation();
                 }}

diff --git a/src/features/plugins/query-box/focus-selector/Wrapper.tsx b/src/features/plugins/query-box/focus-selector/Wrapper.tsx
@@ -1,4 +1,5 @@
 import { createListCollection, SelectContext } from "@ark-ui/react";
+import { sendMessage } from "webext-bridge/content-script";
 
 import Tooltip from "@/components/Tooltip";
 import { Select, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -34,6 +35,16 @@ export default function FocusSelectorWrapper() {
     FOCUS_MODES.find((mode) => mode.code === selectedFocusMode) ??
     FOCUS_MODES[0]!;
 
+  useEffect(() => {
+    sendMessage(
+      "reactVdom:setFocusMode",
+      {
+        focusMode: selectedFocusMode,
+      },
+      "window",
+    );
+  }, [selectedFocusMode]);
+
   return (
     <Select
       lazyMount

diff --git a/src/features/plugins/query-box/focus-selector/components/DesktopSelectContent.tsx b/src/features/plugins/query-box/focus-selector/components/DesktopSelectContent.tsx
@@ -8,7 +8,7 @@ export function DesktopSelectContent() {
         <SelectItem
           key={mode.code}
           item={mode.code}
-          className="tw-flex tw-flex-col tw-items-start tw-gap-1 tw-text-foreground"
+          className="tw-flex tw-flex-col tw-items-start tw-gap-1 tw-font-medium tw-text-foreground"
         >
           <div className="tw-flex tw-items-center tw-gap-2">
             <mode.Icon className="tw-size-4" />

diff --git a/src/features/plugins/query-box/focus-selector/components/MobileSelectContent.tsx b/src/features/plugins/query-box/focus-selector/components/MobileSelectContent.tsx
@@ -11,7 +11,7 @@ export function MobileSelectContent({ ...props }: DialogProps) {
           <SelectItem
             key={mode.code}
             item={mode.code}
-            className="tw-flex tw-flex-col tw-items-start tw-gap-2 tw-py-3 tw-text-foreground"
+            className="tw-flex tw-flex-col tw-items-start tw-gap-2 tw-py-3 tw-font-medium tw-text-foreground"
           >
             <div className="tw-flex tw-items-center tw-gap-3">
               <mode.Icon className="tw-size-5" />

diff --git a/src/features/plugins/query-box/focus-web-recency/FocusWebRecencySelector.tsx b/src/features/plugins/query-box/focus-web-recency/FocusWebRecencySelector.tsx
@@ -6,7 +6,6 @@ import { Select, SelectTrigger, SelectValue } from "@/components/ui/select";
 import {
   RECENCIES,
   FocusWebRecency,
-  FocusWebRecencyValue,
 } from "@/data/plugins/focus-selector/focus-web-recency";
 import { DesktopSelectContent } from "@/features/plugins/query-box/focus-web-recency/components/DesktopSelectContent";
 import { MobileSelectContent } from "@/features/plugins/query-box/focus-web-recency/components/MobileSelectContent";
@@ -18,8 +17,8 @@ export default function FocusWebRecencySelector({
   setValue,
   recencyData,
 }: {
-  value: FocusWebRecencyValue;
-  setValue: (value: FocusWebRecencyValue) => void;
+  value: FocusWebRecency["value"];
+  setValue: (value: FocusWebRecency["value"]) => void;
   recencyData: FocusWebRecency;
 }) {
   const { isMobile } = useIsMobileStore();
@@ -37,7 +36,7 @@ export default function FocusWebRecencySelector({
       value={[value]}
       className="tw-h-8"
       onValueChange={({ value }) => {
-        setValue(value[0] as FocusWebRecencyValue);
+        setValue(value[0] as FocusWebRecency["value"]);
 
         setTimeout(() => {
           UiUtils.getActiveQueryBoxTextarea().trigger("focus");