Jacob Top Bar Redesign

js/app/packages/app/component/GlobalHotkeys.tsx

@@ -27,7 +27,6 @@ import { playSound } from '../util/sound';
 import {
   konsoleOpen,
   resetKonsoleMode,
-  setKonsoleMode,
   toggleKonsoleVisibility,
 } from './command/state';
 import { CREATABLE_BLOCKS, setCreateMenuOpen } from './Launcher';
@@ -52,12 +51,6 @@ export default function GlobalShortcuts() {
     return;
   };
 
-  const handleSearchMenu = () => {
-    setKonsoleMode('FULL_TEXT_SEARCH');
-    toggleKonsoleVisibility();
-    return;
-  };
-
   const createCommandScope = registerHotkey({
     hotkeyToken: TOKENS.global.createCommand,
     hotkey: 'c',
@@ -232,9 +225,21 @@ export default function GlobalShortcuts() {
       hotkeyToken: TOKENS.global.searchMenu,
       hotkey: 'cmd+p',
       scopeId: 'global',
-      description: 'Full text search',
+      description: 'Search in current tab',
       keyDownHandler: () => {
-        handleSearchMenu();
+        // Focus the search input in the current tab
+        setTimeout(() => {
+          const searchInputs = document.querySelectorAll<HTMLInputElement>(
+            'input[id^="search-input-"]'
+          );
+          // Find the first visible search input
+          for (const input of searchInputs) {
+            if (input.offsetParent !== null) {
+              input.focus();
+              return;
+            }
+          }
+        }, 0);
         return true;
       },
       runWithInputFocused: true,

js/app/packages/app/component/HelpDrawer.tsx

@@ -21,7 +21,12 @@ export function HelpDrawer(props: { viewId?: ViewId }) {
 
   return (
     <Switch>
-      <Match when={props.viewId === 'emails' && !emailActive()}>
+      <Match
+        when={
+          (props.viewId === 'noise' || props.viewId === 'signal') &&
+          !emailActive()
+        }
+      >
         <HelpDrawerInner
           title={'Macro is better with email.'}
           subtitle={
@@ -47,17 +52,13 @@ export function HelpDrawer(props: { viewId?: ViewId }) {
           }}
         />
       </Match>
-      <Match when={props.viewId === 'emails' && emailActive()}>
+      <Match when={props.viewId === 'noise' && emailActive()}>
         <HelpDrawerInner
-          title={'Email is better with Macro.'}
+          title={'Filter out the noise.'}
           subtitle={
             <span>
-              Use{' '}
-              <span class="font-mono bg-edge/20 rounded-xs md-inline-code p-0.3">
-                @mentions
-              </span>{' '}
-              to give email recipients access to anything in Macro. Ask AI to
-              search your emails.
+              This is where we gather everything we think you might not need to
+              see.
             </span>
           }
           hotkeyExamples={[
@@ -79,11 +80,11 @@ export function HelpDrawer(props: { viewId?: ViewId }) {
           ]}
         />
       </Match>
-      <Match when={props.viewId === 'inbox'}>
+      <Match when={props.viewId === 'signal'}>
         <HelpDrawerInner
           title={'Your unified inbox.'}
           subtitle={
-            'All your emails, messages, notifications, tasks in one place. Triage everything. No context switching.'
+            'All your important emails, messages, notifications, tasks in one place. Triage everything. No context switching.'
           }
           hotkeyExamples={[
             {

js/app/packages/app/component/Soup.tsx

@@ -7,18 +7,14 @@ import { playSound } from '@app/util/sound';
 import { useIsAuthenticated } from '@core/auth';
 import { FileDropOverlay } from '@core/component/FileDropOverlay';
 import { Button } from '@core/component/FormControls/Button';
-import { SegmentedControl } from '@core/component/FormControls/SegmentControls';
 import { ContextMenuContent, MenuItem } from '@core/component/Menu';
 import { fileTypeToBlockName } from '@core/constant/allBlocks';
 import { fileFolderDrop } from '@core/directive/fileFolderDrop';
 import { TOKENS } from '@core/hotkey/tokens';
 import type { BlockOrchestrator } from '@core/orchestrator';
 import {
-  CONDITIONAL_VIEWS,
   DEFAULT_VIEWS,
   type DefaultView,
-  VIEWS,
-  type View,
   type ViewId,
   type ViewLabel,
 } from '@core/types/view';
@@ -55,7 +51,6 @@ import { EntityModal } from './EntityModal/EntityModal';
 import { HelpDrawer } from './HelpDrawer';
 import { SplitHeaderLeft } from './split-layout/components/SplitHeader';
 import { SplitTabs } from './split-layout/components/SplitTabs';
-import { SplitToolbarRight } from './split-layout/components/SplitToolbar';
 import type { SplitPanelContextType } from './split-layout/context';
 import { SplitPanelContext } from './split-layout/context';
 import { useSplitPanelOrThrow } from './split-layout/layoutUtils';
@@ -80,51 +75,31 @@ const ViewTab: ParentComponent<{
   );
 };
 
-const DefaultViewTab: Component<{
-  viewId: ViewId;
-}> = (props) => {
-  return (
-    <ViewTab viewId={props.viewId}>
-      <Suspense>
-        <UnifiedListView />
-      </Suspense>
-    </ViewTab>
-  );
-};
-
-const ConditionalViewTab: ParentComponent<{
-  view: Exclude<View, DefaultView>;
-}> = (props) => {
-  return (
-    <Show when={VIEWS.includes(props.view)}>
-      <ViewTab viewId={props.view}>{props.children}</ViewTab>
-    </Show>
-  );
-};
-
 const ViewWithSearch: Component<{
   viewId: ViewId;
 }> = (props) => {
   return (
-    <Switch>
-      <Match when={props.viewId === 'emails'}>
-        <ConditionalViewTab view="emails">
+    <ViewTab viewId={props.viewId}>
+      <Switch>
+        {/* <Match
+          when={props.viewId === 'emails' && DEFAULT_VIEWS.includes('emails')}
+        >
           <Suspense>
             <EmailView />
           </Suspense>
-        </ConditionalViewTab>
-      </Match>
-      <Match when={props.viewId === 'all'}>
-        <ConditionalViewTab view="all">
+        </Match> */}
+        <Match when={props.viewId === 'all' && DEFAULT_VIEWS.includes('all')}>
           <Suspense>
             <AllView />
           </Suspense>
-        </ConditionalViewTab>
-      </Match>
-      <Match when={true}>
-        <DefaultViewTab viewId={props.viewId} />
-      </Match>
-    </Switch>
+        </Match>
+        <Match when={true}>
+          <Suspense>
+            <UnifiedListView />
+          </Suspense>
+        </Match>
+      </Switch>
+    </ViewTab>
   );
 };
 
@@ -255,12 +230,30 @@ export function Soup() {
       if (showHelpDrawer().has(selectedView())) {
         setShowHelpDrawer(new Set<string>());
       } else {
-        setShowHelpDrawer(new Set([...DEFAULT_VIEWS, ...CONDITIONAL_VIEWS]));
+        setShowHelpDrawer(new Set(DEFAULT_VIEWS));
       }
       return true;
     },
   });
 
+  registerHotkey({
+    hotkey: ['cmd+f', 'ctrl+f'],
+    scopeId: splitHotkeyScope,
+    hotkeyToken: TOKENS.soup.switchToSearch,
+    description: 'Search',
+    keyDownHandler: () => {
+      setSelectedView('all');
+      setTimeout(() => {
+        const searchInput = document.getElementById(
+          `search-input-${handle.id}-all`
+        ) as HTMLInputElement;
+        searchInput?.focus();
+      }, 0);
+      return true;
+    },
+    runWithInputFocused: true,
+  });
+
   registerHotkey({
     hotkey: ['p'],
     scopeId: splitHotkeyScope,
@@ -324,7 +317,7 @@ export function Soup() {
   const TabContextMenu = (props: { value: ViewId; label: string }) => {
     const [isModalOpen, setIsModalOpen] = createSignal(false);
     const isDefaultView = () =>
-      VIEWCONFIG_DEFAULTS_IDS.includes(props.value as View);
+      VIEWCONFIG_DEFAULTS_IDS.includes(props.value as DefaultView);
     return (
       <Show when={!isDefaultView()}>
         <ContextMenu>
@@ -461,32 +454,32 @@ function AllView() {
   return <UnifiedListView />;
 }
 
-function EmailView() {
-  const {
-    emailViewSignal: [emailView, setEmailView],
-    viewsDataStore,
-    selectedView,
-  } = useSplitPanelOrThrow().unifiedListContext;
-  const viewData = createMemo(() => viewsDataStore[selectedView()]);
-
-  return (
-    <>
-      <UnifiedListView />
-      <SplitToolbarRight>
-        <div class="flex flex-row items-center pr-2">
-          <SegmentedControl
-            disabled={!!viewData().searchText}
-            size="SM"
-            label="View"
-            list={['inbox', 'sent', 'drafts']}
-            value={emailView()}
-            onChange={setEmailView}
-          />
-        </div>
-      </SplitToolbarRight>
-    </>
-  );
-}
+// function EmailView() {
+//   const {
+//     emailViewSignal: [emailView, setEmailView],
+//     viewsDataStore,
+//     selectedView,
+//   } = useSplitPanelOrThrow().unifiedListContext;
+//   const viewData = createMemo(() => viewsDataStore[selectedView()]);
+
+//   return (
+//     <>
+//       <UnifiedListView />
+//       <SplitToolbarRight>
+//         <div class="flex flex-row items-center pr-2">
+//           <SegmentedControl
+//             disabled={!!viewData().searchText}
+//             size="SM"
+//             label="View"
+//             list={['inbox', 'sent', 'drafts']}
+//             value={emailView()}
+//             onChange={setEmailView}
+//           />
+//         </div>
+//       </SplitToolbarRight>
+//     </>
+//   );
+// }
 
 export const useUpsertSavedViewMutation = () => {
   const queryClient = useQueryClient();
@@ -503,7 +496,7 @@ export const useUpsertSavedViewMutation = () => {
           }
     ) => {
       const isDefaultView = VIEWCONFIG_DEFAULTS_IDS.includes(
-        viewData.id as View
+        viewData.id as DefaultView
       );
       if ('config' in viewData) {
         // if data id is in defaults, exclude default, set up args to create new view

js/app/packages/app/component/SoupContext.tsx

@@ -4,18 +4,14 @@ import { HotkeyTags } from '@core/hotkey/constants';
 import { activeScope, hotkeyScopeTree } from '@core/hotkey/state';
 import { TOKENS } from '@core/hotkey/tokens';
 import type { ValidHotkey } from '@core/hotkey/types';
-import {
-  CONDITIONAL_VIEWS,
-  DEFAULT_VIEWS,
-  type View,
-  type ViewId,
-} from '@core/types/view';
+import { DEFAULT_VIEWS, type DefaultView, type ViewId } from '@core/types/view';
 import { filterMap } from '@core/util/list';
 import { isErr } from '@core/util/maybeResult';
 import { getScrollParent } from '@core/util/scrollParent';
 import { waitForFrames } from '@core/util/sleep';
 import type { EntityData } from '@macro-entity';
 import { entityHasUnreadNotifications } from '@notifications';
+import type { PreviewViewStandardLabel } from '@service-email/generated/schemas';
 import { useTutorialCompleted } from '@service-gql/client';
 import { storageServiceClient } from '@service-storage/client';
 import { createLazyMemo } from '@solid-primitives/memo';
@@ -83,13 +79,13 @@ export type UnifiedListContext = {
   virtualizerHandleSignal: Signal<VirtualizerHandle | undefined>;
   entityListRefSignal: Signal<HTMLDivElement | undefined>;
   entitiesSignal: Signal<EntityData[] | undefined>;
-  emailViewSignal: Signal<'inbox' | 'sent' | 'drafts' | 'all'>;
+  emailViewSignal: Signal<PreviewViewStandardLabel>;
   showHelpDrawer: Accessor<Set<string>>;
   setShowHelpDrawer: Setter<Set<string>>;
   actionRegistry: EntityActionRegistry;
 };
 
-const DEFAULT_VIEW_ID: View = 'inbox';
+const DEFAULT_VIEW_ID: DefaultView = 'signal';
 
 const DEFAULT_VIEW_IDS_SET = new Set(VIEWCONFIG_DEFAULTS_IDS);
 
@@ -101,14 +97,10 @@ export function createSoupContext(): UnifiedListContext {
   const virtualizerHandleSignal = createSignal<VirtualizerHandle>();
   const entityListRefSignal = createSignal<HTMLDivElement>();
   const entitiesSignal = createSignal<EntityData[]>();
-  const emailViewSignal = createSignal<'inbox' | 'sent' | 'drafts' | 'all'>(
-    'inbox'
-  );
+  const emailViewSignal = createSignal<PreviewViewStandardLabel>('inbox');
   const tutorialCompleted = useTutorialCompleted();
   const [showHelpDrawer, setShowHelpDrawer] = createSignal<Set<string>>(
-    !tutorialCompleted()
-      ? new Set([...DEFAULT_VIEWS, ...CONDITIONAL_VIEWS])
-      : new Set()
+    !tutorialCompleted() ? new Set(DEFAULT_VIEWS) : new Set()
   );
   const setViewDataStore: SetStoreFunction<ViewDataMap> = (...args: any[]) => {
     // need to create new reference, causes bug where first entity persits highlighting
@@ -139,7 +131,7 @@ export function createSoupContext(): UnifiedListContext {
 }
 
 function createViewData(
-  view: View,
+  view: DefaultView,
   viewProps?: Omit<ViewConfigEnhanced, 'id'> &
     Partial<Pick<ViewConfigEnhanced, 'id'>>
 ): ViewData {
@@ -301,7 +293,7 @@ export function createNavigationEntityListShortcut({
     'mark_as_done',
     async (entities) => {
       const handler =
-        VIEWCONFIG_DEFAULTS[selectedView() as View]?.hotkeyOptions?.e;
+        VIEWCONFIG_DEFAULTS[selectedView() as DefaultView]?.hotkeyOptions?.e;
       if (handler) {
         if (isEntityLastItem()) {
           navigateThroughList({ axis: 'start', mode: 'step' });
@@ -1280,7 +1272,7 @@ const useAllViews = ({
   const [selectedView, setSelectedView] = selectedViewSignal;
   const initialState: ViewDataMap = {};
   for (const [view, viewProps] of Object.entries(VIEWCONFIG_DEFAULTS)) {
-    initialState[view] = createViewData(view as View, viewProps);
+    initialState[view] = createViewData(view as DefaultView, viewProps);
   }
 
   const [viewsData, setViewsData] = createStore(initialState);
@@ -1308,9 +1300,9 @@ const useAllViews = ({
         const savedViewConfigs = data.views.map((view) => {
           const config = view.config as ViewConfigBase;
 
-          return createViewData(view.name as View, {
+          return createViewData(view.name as DefaultView, {
             id: view.id,
-            view: view.name as View,
+            view: view.name as DefaultView,
             display: { ...VIEWCONFIG_BASE.display, ...config.display },
             filters: { ...VIEWCONFIG_BASE.filters, ...config.filters },
             sort: {
@@ -1329,7 +1321,7 @@ const useAllViews = ({
           Object.entries(viewsData).filter(
             ([viewId, viewData]) =>
               savedViewIds.has(viewId) ||
-              DEFAULT_VIEW_IDS_SET.has(viewId as View) ||
+              DEFAULT_VIEW_IDS_SET.has(viewId as DefaultView) ||
               viewData.viewType !== undefined
           )
         );