Refine editor, auth, and git sidebar flows

Author: mehmetozguldev

src/features/athas-editor/components/inline-edit-model-selector.tsx

@@ -12,6 +12,7 @@ import { Button } from "@/ui/button";
 import Command, {
   CommandEmpty,
   CommandFooter,
+  CommandFooterAction,
   CommandHeader,
   CommandInput,
   CommandItem,
@@ -243,14 +244,13 @@ export const InlineEditModelSelector = ({
             </CommandList>
             {providerNeedsApiKey && (
               <CommandFooter>
-                <Button
+                <CommandFooterAction
                   type="button"
-                  variant="ghost"
                   onClick={() => setIsApiKeyOpen(true)}
                   className="px-1.5 text-text-lighter hover:text-text"
                 >
                   Add API key
-                </Button>
+                </CommandFooterAction>
               </CommandFooter>
             )}
           </>

src/features/command-palette/constants/git-actions.tsx

@@ -7,7 +7,6 @@ import {
   GitCommit,
   HardDrives as Server,
   Tag,
-  TreeStructure,
   ArrowClockwise as RefreshCw,
 } from "@phosphor-icons/react";
 import type { GitRemoteActionResult } from "@/features/git/api/git-remotes-api";
@@ -107,14 +106,6 @@ export const createGitActions = (params: GitActionsParams): Action[] => {
       category: "Git",
       action: () => openGitAction({ type: "show-tab", tab: "history" }),
     },
-    {
-      id: "git-show-worktrees",
-      label: "Git: Show Worktrees",
-      description: "Open worktree manager",
-      icon: <TreeStructure />,
-      category: "Git",
-      action: () => openGitAction({ type: "show-tab", tab: "worktrees" }),
-    },
     {
       id: "git-manage-remotes",
       label: "Git: Manage Remotes",

src/features/database/components/database-sidebar.tsx

@@ -16,7 +16,13 @@ import { extractDroppedFilePaths } from "@/features/file-system/utils/file-syste
 import { useUIState } from "@/features/window/stores/ui-state-store";
 import { Button } from "@/ui/button";
 import Checkbox from "@/ui/checkbox";
-import { CommandFooter, CommandInput, CommandItem, CommandList } from "@/ui/command";
+import {
+  CommandFooter,
+  CommandFooterAction,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/ui/command";
 import Input from "@/ui/input";
 import { LoadingIndicator } from "@/ui/loading";
 import {
@@ -613,17 +619,16 @@ export function DatabaseSidebar() {
 
       {mode === "network-provider" ? (
         <CommandFooter>
-          <Button
+          <CommandFooterAction
             type="button"
             variant="default"
-            compact
-            className="w-full gap-1.5"
+            className="w-full justify-center gap-1.5"
             disabled={busyConnectionId !== null}
             onClick={() => void saveNetworkConnection()}
           >
             <FilePlus />
             Add Database
-          </Button>
+          </CommandFooterAction>
         </CommandFooter>
       ) : null}
 

src/features/database/components/table-sidebar.tsx

@@ -81,13 +81,13 @@ export default function TableSidebar({
                     variant="ghost"
                     compact
                     className={cn(
-                      "flex h-auto w-full items-start justify-start gap-1.5 rounded-lg px-2.5 py-1.5 text-left ui-text-xs hover:bg-hover",
+                      "flex h-auto w-full items-start justify-start gap-1.5 rounded-lg px-2.5 py-1.5 text-left ui-text-xs leading-[1.35] hover:bg-hover",
                       selectedTable === t.name && "bg-selected text-text",
                     )}
                     aria-label={`Select ${group.kind} ${t.name}`}
                   >
                     <Icon className="mt-0.5 shrink-0" />
-                    <span className="flex min-w-0 flex-col items-start">
+                    <span className="flex min-w-0 flex-col items-start leading-[1.35]">
                       <span className="max-w-full truncate">{t.name}</span>
                       {owner && (
                         <span className="max-w-full truncate text-text-lighter">on {owner}</span>

src/features/database/providers/mongodb/mongodb-viewer.tsx

@@ -93,7 +93,7 @@ export default function MongoDBViewer({ connectionId }: MongoDBViewerProps) {
                 variant="ghost"
                 compact
                 className={cn(
-                  "block h-auto w-full justify-start rounded-lg px-2 py-1 text-left ui-text-xs",
+                  "block h-auto w-full justify-start rounded-lg px-2 py-1 text-left ui-text-xs leading-[1.35]",
                   store.selectedCollection === col.name && "bg-selected",
                 )}
                 aria-label={`Select collection ${col.name}`}

src/features/database/providers/redis/redis-viewer.tsx

@@ -145,7 +145,7 @@ export default function RedisViewer({ connectionId }: RedisViewerProps) {
                 variant="ghost"
                 onClick={() => actions.selectKey(keyInfo.key)}
                 className={cn(
-                  "h-auto w-full justify-start gap-1.5 px-2 py-1",
+                  "h-auto w-full justify-start gap-1.5 px-2 py-1 leading-[1.35]",
                   store.selectedKey === keyInfo.key && "bg-selected",
                 )}
                 aria-label={`Select key ${keyInfo.key}`}
@@ -158,7 +158,7 @@ export default function RedisViewer({ connectionId }: RedisViewerProps) {
                 >
                   {keyInfo.type.substring(0, 3)}
                 </Badge>
-                <span className="flex-1 truncate">{keyInfo.key}</span>
+                <span className="flex-1 truncate leading-[1.35]">{keyInfo.key}</span>
                 {keyInfo.ttl > 0 && (
                   <span className="flex items-center gap-0.5 text-text-lighter">
                     <Clock />

src/features/editor/components/monaco-editor.tsx

@@ -206,15 +206,32 @@ function defineMonacoTheme(themeId: string): string {
     ["comment", "comment"],
     ["keyword", "keyword"],
     ["string", "string"],
+    ["string.escape", "string"],
     ["number", "number"],
+    ["number.float", "number"],
+    ["number.hex", "number"],
     ["regexp", "regex"],
+    ["regexp.escape", "regex"],
+    ["regexp.escape.control", "regex"],
+    ["identifier", "variable"],
+    ["type.identifier", "type"],
     ["function", "function"],
+    ["method", "function"],
     ["variable", "variable"],
+    ["parameter", "variable"],
     ["constant", "constant"],
+    ["enumMember", "constant"],
+    ["boolean", "boolean"],
+    ["keyword.other", "keyword"],
     ["type", "type"],
+    ["typeParameter", "type"],
     ["class", "type"],
+    ["enum", "type"],
     ["interface", "type"],
     ["namespace", "type"],
+    ["module", "type"],
+    ["property", "property"],
+    ["decorator", "attribute"],
     ["tag", "tag"],
     ["attribute.name", "attribute"],
     ["delimiter", "punctuation"],
@@ -630,7 +647,8 @@ export function MonacoBackedEditor({
       cursorBlinking: vimModeEnabled && vimCurrentMode === "normal" ? "solid" : "blink",
       contextmenu: false,
       overviewRulerLanes: 0,
-      fixedOverflowWidgets: true,
+      fixedOverflowWidgets: false,
+      "semanticHighlighting.enabled": true,
       scrollbar: {
         vertical: scrollable ? "auto" : "hidden",
         horizontal: scrollable ? "auto" : "hidden",
@@ -906,6 +924,7 @@ export function MonacoBackedEditor({
       parameterHints: { enabled: parameterHints },
       cursorStyle: vimModeEnabled && vimCurrentMode === "normal" ? "block" : "line",
       cursorBlinking: vimModeEnabled && vimCurrentMode === "normal" ? "solid" : "blink",
+      "semanticHighlighting.enabled": true,
       scrollbar: {
         vertical: scrollable ? "auto" : "hidden",
         horizontal: scrollable ? "auto" : "hidden",

src/features/editor/monaco/language-contributions.ts

@@ -1,4 +1,4 @@
-import { languages } from "monaco-editor";
+import { languages, typescript } from "monaco-editor";
 
 import "monaco-editor/esm/vs/basic-languages/cpp/cpp.contribution";
 import "monaco-editor/esm/vs/basic-languages/css/css.contribution";
@@ -36,6 +36,20 @@ import "monaco-editor/esm/vs/language/html/monaco.contribution";
 import "monaco-editor/esm/vs/language/json/monaco.contribution";
 import "monaco-editor/esm/vs/language/typescript/monaco.contribution";
 
+const jsxCompilerOptions = {
+  jsx: typescript.JsxEmit.Preserve,
+} satisfies typescript.CompilerOptions;
+
+typescript.typescriptDefaults.setCompilerOptions({
+  ...typescript.typescriptDefaults.getCompilerOptions(),
+  ...jsxCompilerOptions,
+});
+
+typescript.javascriptDefaults.setCompilerOptions({
+  ...typescript.javascriptDefaults.getCompilerOptions(),
+  ...jsxCompilerOptions,
+});
+
 function ensureLanguage(id: string, extensions: string[], aliases: string[], filenames?: string[]) {
   if (languages.getLanguages().some((language) => language.id === id)) return;
   languages.register({ id, extensions, aliases, filenames });

src/features/file-explorer/components/file-explorer-tree.tsx

@@ -1248,15 +1248,14 @@ function FileExplorerTreeComponent({
               ? rowVirtualizer.getTotalSize() - items[items.length - 1].end
               : 0;
             const densityConfig = FILE_TREE_DENSITY_CONFIG[fileTreeDensity];
+            const stickyViewportStart =
+              (rowVirtualizer.scrollOffset ?? 0) +
+              FILE_TREE_HEADER_HEIGHT -
+              FILE_TREE_CONTAINER_INSET;
+            const stickyMarkerItem = items.find((item) => item.end > stickyViewportStart);
             const stickyMarkerIndex =
-              items.length && visibleRows.length
-                ? Math.min(
-                    visibleRows.length - 1,
-                    Math.max(
-                      0,
-                      Math.floor((rowVirtualizer.scrollOffset ?? 0) / densityConfig.rowHeight),
-                    ),
-                  )
+              stickyMarkerItem && visibleRows.length
+                ? Math.min(visibleRows.length - 1, Math.max(0, stickyMarkerItem.index))
                 : -1;
             const stickyAncestors =
               stickyMarkerIndex >= 0 ? getStickyAncestorRows(visibleRows, stickyMarkerIndex) : [];
@@ -1283,16 +1282,13 @@ function FileExplorerTreeComponent({
                           stickyAncestor.depth * settings.fileTreeIndentSize;
 
                         return (
-                          <button
+                          <div
                             key={stickyAncestor.file.path}
-                            type="button"
-                            data-file-path={stickyAncestor.file.path}
-                            data-is-dir={stickyAncestor.file.isDir}
                             data-path={stickyAncestor.file.path}
                             data-depth={stickyAncestor.depth}
                             title={stickyAncestor.file.path}
                             className={cn(
-                              "file-tree-row ui-font ui-text-sm flex w-full min-w-max cursor-pointer select-none items-center whitespace-nowrap rounded-none border-none bg-transparent text-left text-text outline-none transition-colors duration-150 hover:bg-hover focus:outline-none",
+                              "file-tree-row ui-font ui-text-sm flex w-full min-w-max select-none items-center whitespace-nowrap rounded-none border-none bg-transparent text-left text-text outline-none",
                               densityConfig.rowClassName,
                             )}
                             style={{ paddingLeft: `${stickyAncestorPaddingLeft}px` }}
@@ -1312,7 +1308,7 @@ function FileExplorerTreeComponent({
                             >
                               {stickyAncestorLabel}
                             </span>
-                          </button>
+                          </div>
                         );
                       })}
                     </div>

src/features/file-explorer/styles/file-explorer-tree.css

@@ -152,7 +152,7 @@
   overflow: hidden;
   background-color: var(--color-primary-bg);
   box-shadow: 0 -1px 0 0 var(--color-primary-bg);
-  pointer-events: auto;
+  pointer-events: none;
 }
 
 .file-tree-sticky-ancestor-stack::after {