fix(styles): dialog styles, bracket fixes, share contrast, scroll container (#589)

Author: Fake-User

js/app/packages/app/component/UnifiedListView.tsx

@@ -1297,10 +1297,10 @@ export function UnifiedListView(props: UnifiedListViewProps) {
                 <div class="grid divide-y divide-edge">
                   <section class="gap-1 grid p-2">
                     <ToggleSwitch
-                      size="SM"
-                      label="Important"
-                      checked={importantFilter()}
                       onChange={setImportantFilter}
+                      checked={importantFilter()}
+                      label="Important"
+                      size="SM"
                     />
                     <SegmentedControl
                       size="SM"

js/app/packages/app/component/command/Konsole.tsx

@@ -1,8 +1,9 @@
 import { useChannelsContext } from '@core/component/ChannelsProvider';
+import { ClippedPanel } from '@core/component/ClippedPanel';
+import { ToggleSwitch } from '@core/component/FormControls/ToggleSwitch';
 import { StaticMarkdownContext } from '@core/component/LexicalMarkdown/component/core/StaticMarkdown';
 import { ENABLE_SEARCH_PAGINATION } from '@core/constant/featureFlags';
 import type { CommandWithInfo } from '@core/hotkey/getCommands';
-import { cornerClip } from '@core/util/clipPath';
 import { createFreshSearch } from '@core/util/freshSort';
 import { Popover } from '@kobalte/core';
 import { Command as CommandK, useCommandState } from 'cmdk-solid';
@@ -45,6 +46,7 @@ import {
   konsoleOpen,
   lastCommandTime,
   rawQuery,
+  setKonsoleMode,
   setLastCommandTime,
   setRawQuery,
   toggleKonsoleVisibility,
@@ -97,32 +99,10 @@ export function KommandMenu() {
         <Popover.Portal>
           <CommandWindow>
             <Popover.Content>
-              <div class="bg-dialog mt-[25vh] border-2 border-accent w-6xl max-w-[90vw] max-h-[75vh] overflow-hidden">
-                <div
-                  class="left-0 absolute bg-accent py-1.5 pr-10 pl-2 font-mono font-black text-menu text-xs -translate-y-full"
-                  style={{ 'clip-path': cornerClip(0, '1.5rem', 0, 0) }}
-                >
-                  <svg
-                    fill="none"
-                    viewBox="0 0 127 16"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                    class="h-2"
-                  >
-                    <clipPath id="a">
-                      <path d="m.599609 0h125.8v16h-125.8z" />
-                    </clipPath>
-                    <g clip-path="url(#a)" fill="currentColor">
-                      <path d="m108.249 0c-2.397 0-4.381 1.94809-4.381 4.30241v7.37539c0 2.3543 1.984 4.3024 4.381 4.3024h13.769c2.398 0 4.382-1.9481 4.382-4.3024v-7.37539c0-2.35432-1.984-4.30241-4.382-4.30241zm0 3.68767h13.769c.368 0 .626.25328.626.61455v7.37538c0 .3612-.258.6145-.626.6145h-13.769c-.368 0-.626-.2533-.626-.6145v-7.37519c0-.36126.258-.61474.626-.61474z" />
-                      <path d="m78.8333 0v15.98h3.7552v-4.917h11.6697l2.5034 4.917h4.1994l-2.6237-5.1522c1.7427-.5698 3.0277-2.1784 3.0277-4.067v-2.45839c0-2.35432-1.984-4.30241-4.3815-4.30241zm3.7552 3.68767h14.395c.3679 0 .6258.25328.6258.61455v2.45838c0 .36127-.2579.61455-.6258.61455h-14.395z" />
-                      <path d="m58.1792 0c-2.3972 0-4.381 1.94809-4.381 4.30241v7.37539c0 2.3543 1.9838 4.3024 4.381 4.3024h18.1505v-3.6877h-18.1505c-.3679 0-.6258-.2533-.6258-.6145v-7.37559c0-.36126.2579-.61454.6258-.61454h18.1505v-3.68787z" />
-                      <path d="m33.1443.0200268c-2.3974 0-4.381 1.9480932-4.381 4.3024132v11.67776h3.7552v-4.9374h15.0209v4.9374h3.7552v-11.67776c0-2.35432-1.9836-4.3024132-4.381-4.3024132zm0 3.6876732h13.7693c.3678 0 .6258.25328.6258.61454v3.05271h-15.0209v-3.05271c0-.36126.2579-.61454.6258-.61454z" />
-                      <path d="m.599609 0v15.98h3.755211v-12.29233h2.35626c.19253 0 .38028.05969.53603.17082.15595.11093.27211.26761.33189.44746l3.8762 11.67425h3.9495l3.888-11.70783c.0564-.16983.1659-.31787.3131-.42291.1473-.10505.3245-.16159.5064-.16159h2.3931v12.29233h3.7552v-15.9802h-8.873c-.1819 0-.3591.0567425-.5064.161588-.1472.105043-.2568.253084-.3131.422918l-3.138 9.447894-3.1379-9.447894c-.0563-.169834-.1659-.317875-.31326-.422918-.14715-.1050419-.3245-.161588-.50644-.161588z" />
-                    </g>
-                  </svg>
-                </div>
-
-                <KommandMenuInner commandKRef={commandKRef} />
+              <div class="bg-dialog mt-[25vh] w-6xl max-w-[90vw] max-h-[75vh] overflow-hidden">
+                <ClippedPanel tl active>
+                  <KommandMenuInner commandKRef={commandKRef} />
+                </ClippedPanel>
               </div>
             </Popover.Content>
           </CommandWindow>
@@ -335,34 +315,42 @@ export function KommandMenuInner(props: {
   return (
     <CommandK
       label="Global CommandK Menu"
-      class="flex flex-col gap-px bg-accent w-full"
+      class="flex flex-col gap-px w-full"
       value={currentValue()}
       shouldFilter={false}
       onValueChange={(value) => {
         if (isLoadingMore()) return;
         setCurrentValue(value);
       }}
     >
-      <div
-        class="flex items-center gap-2 bg-menu p-3"
-        style={{ 'clip-path': cornerClip(0, 0, '0.25rem', '0.25rem') }}
-      >
-        <span class="text-accent">❯</span>
+      <div class="flex items-center gap-2 bg-panel px-2 h-[40px] border-b border-edge-muted">
+        <span class="pl-2 pointer-events-none">❯</span>
         <CommandK.Input
-          value={rawQuery()}
-          placeholder="Search files..."
-          class="flex-1 border-0 outline-none! focus:outline-none ring-0! focus:ring-0 font-mono placeholder:text-edge text-accent-270"
+          class="flex-1 border-0 outline-none! focus:outline-none ring-0! focus:ring-0 font-mono"
           onValueChange={setRawQuery}
+          placeholder="Search"
+          value={rawQuery()}
+          autofocus
+        />
+        <ToggleSwitch
+          onChange={(val) => {
+            if (val) {
+              setKonsoleMode('FULL_TEXT_SEARCH');
+            } else {
+              setKonsoleMode('ENTITY_SEARCH');
+            }
+          }}
+          checked={isFullTextSearch()}
+          // switchRootClass='subtle'
+          label="Full Text Search"
+          size="SM"
         />
       </div>
-      <div
-        class="bg-menu"
-        style={{ 'clip-path': cornerClip('0.25rem', '0.25rem', 0, 0) }}
-      >
+      <div class="bg-panel">
         <KonsoleFilter />
         <CommandK.List class="scrollbar-hidden">
           <CommandK.Empty>
-            <div class="px-2 pb-2 text-ink-muted">
+            <div class="px-2 text-ink-muted min-h-[40px]">
               {currentKonsoleMode() === 'FULL_TEXT_SEARCH' &&
               cleanQuery().length < 3
                 ? 'Enter 3 or more characters to search all documents.'
@@ -375,7 +363,7 @@ export function KommandMenuInner(props: {
               <VList
                 data={filteredItems()}
                 style={{ height: containerHeight() }}
-                class="scrollbar-hidden pb-2 bg-dialog"
+                class="scrollbar-hidden pb-2 bg-panel"
               >
                 {(item, index) => (
                   <CommandKItemWrapper index={index()} item={item} />

js/app/packages/app/component/command/KonsoleFilter.tsx

@@ -1,12 +1,5 @@
-import { TextButton } from '@core/component/TextButton';
-import {
-  createEffect,
-  createSignal,
-  For,
-  onCleanup,
-  onMount,
-  Show,
-} from 'solid-js';
+import { SegmentedControl } from '@core/component/FormControls/SegmentControls';
+import { createMemo, onCleanup, onMount } from 'solid-js';
 import {
   commandCategoryIndex,
   searchCategories,
@@ -15,8 +8,35 @@ import {
 import { konsoleOpen } from './state';
 
 export function KonsoleFilter() {
-  const [containerRef, setContainerRef] = createSignal<HTMLDivElement>();
-  const buttonRefs: HTMLDivElement[] = [];
+  const visibleCategories = createMemo(() => {
+    return searchCategories
+      .listVisible()
+      .map((category, index) => {
+        if (searchCategories.isCategoryActive(index)) {
+          return category.name;
+        }
+        return null;
+      })
+      .filter(Boolean) as string[];
+  });
+
+  const selectedCategoryName = createMemo(() => {
+    const categories = searchCategories.listVisible();
+    const index = commandCategoryIndex();
+    if (index >= 0 && index < categories.length) {
+      return categories[index].name;
+    }
+    return categories[0]?.name || '';
+  });
+
+  const handleCategoryChange = (categoryName: string) => {
+    const index = searchCategories
+      .listVisible()
+      .findIndex((cat) => cat.name === categoryName);
+    if (index !== -1) {
+      setCommandCategoryIndex(index);
+    }
+  };
 
   onMount(() => {
     const down = (e: KeyboardEvent) => {
@@ -48,62 +68,14 @@ export function KonsoleFilter() {
     });
   });
 
-  // Scroll selected category into view when selection changes
-  createEffect(() => {
-    const container = containerRef();
-    const selectedIndex = commandCategoryIndex();
-
-    if (container && buttonRefs[selectedIndex]) {
-      const selectedButtonDiv = buttonRefs[selectedIndex];
-
-      // Use requestAnimationFrame to ensure DOM updates are complete
-      requestAnimationFrame(() => {
-        const containerRect = container.getBoundingClientRect();
-        const buttonRect = selectedButtonDiv.getBoundingClientRect();
-
-        const isFullyVisible =
-          buttonRect.left >= containerRect.left &&
-          buttonRect.right <= containerRect.right;
-
-        if (!isFullyVisible) {
-          // For rightmost items like "Companies", scroll to show them fully
-          // Add some padding so the button isn't right at the edge
-          const scrollLeft =
-            selectedButtonDiv.offsetLeft -
-            container.clientWidth +
-            selectedButtonDiv.offsetWidth +
-            8;
-          container.scrollTo({
-            left: Math.max(0, scrollLeft),
-            behavior: 'smooth',
-          });
-        }
-      });
-    }
-  });
-
   return (
-    <div
-      ref={setContainerRef}
-      class="flex pb-4 overflow-x-auto scrollbar-hidden bg-transparent"
-    >
-      <For each={searchCategories.listVisible()}>
-        {(item, index) => (
-          <Show when={searchCategories.isCategoryActive(index())}>
-            <TextButton
-              ref={(el) => {
-                if (el) buttonRefs[index()] = el;
-              }}
-              theme={
-                index() === commandCategoryIndex() ? 'accentFill' : 'clear'
-              }
-              text={item.name}
-              onMouseDown={() => setCommandCategoryIndex(index())}
-              class="flex-shrink-0 h-auto *:h-7 *:px-2"
-            />
-          </Show>
-        )}
-      </For>
+    <div class="flex items-center bg-transparent border-b px-2 border-edge-muted/50 h-[40px]">
+      <SegmentedControl
+        onChange={handleCategoryChange}
+        value={selectedCategoryName()}
+        list={visibleCategories()}
+        size="SM"
+      />
     </div>
   );
 }

js/app/packages/app/component/command/state.ts

@@ -44,7 +44,7 @@ export function cleanQuery(query?: string) {
 }
 
 export const COMMAND_MODES = [
-  // { id: 'FULL_TEXT_SEARCH', sigil: '%', label: 'Full Text Search' },
+  { id: 'FULL_TEXT_SEARCH', sigil: '%', label: 'Full Text Search' },
   // { id: "REGEX_SEARCH", sigil: "/", label: "Regex Search" },
   // { id: "RUN_COMMAND", sigil: ">", label: "Run" },
   // { id: "TEMP_CHAT", sigil: " ", label: "Temporary Chat" },

js/app/packages/app/index.css

@@ -212,7 +212,7 @@
 
   --color-task: var(--theme-task);
   --color-task-bg: color-mix(in srgb, var(--color-task), var(--color-panel) 90%);
-  
+
   /* SCUFFED We probably want to let the theme determine 3 or 4 "extra" hue offsets. Rights now these are only being */
   /* used as debug colors and to improve the consistency of markdown block lightness/chroma with themed css */
   --color-accent-30:  oklch(var(--a0l) var(--a0c) calc(var(--a0h) +  30deg));
@@ -243,6 +243,13 @@
   --color-focus: var(--color-accent);
 }
 
+/*
+*{
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-accent);
+}
+*/
+
 /* NOTE: We use this as a compile-time css util in this file to be able reuse the
  * declarations while still being able to override the color. */
 @utility util-bracket-bg-image {
@@ -320,6 +327,10 @@
     }
 }
 
+@utility hide-scrollbar {
+  scrollbar-width: none;
+}
+
 @utility bracket-* {
   background-image:
     conic-gradient(from 90deg at top 1px left 1px, #0000 90deg, var(--color-focus) 0),