feat(dojo): improve code editor styling and add horizontal tab layout

Signed-off-by: Tyler Slaton <[email protected]>

Author: tylerslaton

typescript-sdk/apps/dojo/src/components/code-viewer/code-editor.tsx

@@ -16,6 +16,8 @@ export function CodeEditor({ file, onFileChange }: CodeEditorProps) {
 
   const theme = useTheme();
 
+  if (file?.language === "ts") file.language = "typescript";
+
   return file ? (
     <div className="h-full flex flex-col">
       <Editor
@@ -25,6 +27,7 @@ export function CodeEditor({ file, onFileChange }: CodeEditorProps) {
         onChange={handleEditorChange}
         options={{
           minimap: { enabled: false },
+          padding: { top: 30, bottom: 30 },
           fontSize: 16,
           lineNumbers: "on",
           readOnly: true,

typescript-sdk/apps/dojo/src/components/code-viewer/code-viewer.tsx

@@ -1,37 +1,64 @@
 import { useMemo, useState } from "react";
 import { FileTree } from "@/components/file-tree/file-tree";
-import { CodeEditor } from './code-editor'
+import { CodeEditor } from "./code-editor";
 import { FeatureFile } from "@/types/feature";
 import { useURLParams } from "@/contexts/url-params-context";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
-export default function CodeViewer({
-  codeFiles
-}: {
-  codeFiles: FeatureFile[];
-}) {
-  const { file, setCodeFile } = useURLParams();
+export default function CodeViewer({ codeFiles }: { codeFiles: FeatureFile[] }) {
+  const { file, setCodeFile, codeLayout } = useURLParams();
 
-  const selectedFile = useMemo(() => (
-    codeFiles.find(f => f.name === file) ?? codeFiles[0]
-  ), [codeFiles, file])
+  const selectedFile = useMemo(
+    () => codeFiles.find((f) => f.name === file) ?? codeFiles[0],
+    [codeFiles, file],
+  );
+
+  if (codeLayout === "tabs") {
+    return (
+      <div className="flex flex-col h-full">
+        <Tabs
+          value={selectedFile?.name}
+          onValueChange={setCodeFile}
+          className="flex-1 flex flex-col"
+        >
+          <TabsList className="w-full justify-start h-auto flex-wrap p-1">
+            {codeFiles.map((file) => (
+              <TabsTrigger
+                key={file.name}
+                value={file.name}
+                className="border border-transparent data-[state=active]:border-indigo-200"
+              >
+                {file.name.split("/").pop()}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {codeFiles.map((file) => (
+            <TabsContent
+              key={file.name}
+              value={file.name}
+              className="flex-1 mt-0 data-[state=inactive]:hidden"
+            >
+              <div className="h-full bg-[#1e1e1e]">
+                <CodeEditor file={file} />
+              </div>
+            </TabsContent>
+          ))}
+        </Tabs>
+      </div>
+    );
+  }
 
   return (
     <div className="flex h-full">
       <div className="w-72 border-r flex flex-col bg-background">
         <div className="flex-1 overflow-auto">
-          <FileTree
-            files={codeFiles}
-            selectedFile={selectedFile}
-            onFileSelect={setCodeFile}
-          />
+          <FileTree files={codeFiles} selectedFile={selectedFile} onFileSelect={setCodeFile} />
         </div>
       </div>
       <div className="flex-1 h-full py-5 bg-[#1e1e1e]">
         {selectedFile ? (
           <div className="h-full">
-            <CodeEditor
-              file={selectedFile}
-            />
+            <CodeEditor file={selectedFile} />
           </div>
         ) : (
           <div className="flex items-center justify-center h-full text-muted-foreground">
@@ -40,5 +67,5 @@ export default function CodeViewer({
         )}
       </div>
     </div>
-  )
-}
+  );
+}

typescript-sdk/apps/dojo/src/contexts/url-params-context.tsx

@@ -1,7 +1,7 @@
-'use client';
+"use client";
 
-import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
-import { useRouter, usePathname, useSearchParams } from 'next/navigation';
+import React, { createContext, useContext, useState, useEffect, ReactNode } from "react";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
 import { View } from "@/types/interface";
 
 interface URLParamsState {
@@ -11,6 +11,7 @@ interface URLParamsState {
   viewPickerHidden: boolean;
   featurePickerHidden: boolean;
   file?: string;
+  codeLayout: "sidebar" | "tabs";
 }
 
 interface URLParamsContextType extends URLParamsState {
@@ -20,6 +21,7 @@ interface URLParamsContextType extends URLParamsState {
   setViewPickerHidden: (disabled: boolean) => void;
   setFeaturePickerHidden: (disabled: boolean) => void;
   setCodeFile: (fileName: string) => void;
+  setCodeLayout: (layout: "sidebar" | "tabs") => void;
 }
 
 const URLParamsContext = createContext<URLParamsContextType | undefined>(undefined);
@@ -40,6 +42,7 @@ export function URLParamsProvider({ children }: URLParamsProviderProps) {
     frameworkPickerHidden: searchParams.get("frameworkPicker") === "false",
     viewPickerHidden: searchParams.get("viewPicker") === "false",
     featurePickerHidden: searchParams.get("featurePicker") === "false",
+    codeLayout: (searchParams.get("codeLayout") as "sidebar" | "tabs") || "sidebar",
   }));
 
   // Update URL when state changes
@@ -90,8 +93,22 @@ export function URLParamsProvider({ children }: URLParamsProviderProps) {
       }
     }
 
+    // Update codeLayout param
+    if (newState.codeLayout !== undefined) {
+      if (newState.codeLayout === "sidebar") {
+        params.delete("codeLayout");
+      } else {
+        params.set("codeLayout", newState.codeLayout);
+      }
+    }
+
+    // Update file param
+    if (newState.file !== undefined) {
+      params.set("file", newState.file);
+    }
+
     const queryString = params.toString();
-    router.push(pathname + (queryString ? '?' + queryString : ''));
+    router.push(pathname + (queryString ? "?" + queryString : ""));
   };
 
   // Sync state with URL changes (e.g., browser back/forward)
@@ -102,6 +119,8 @@ export function URLParamsProvider({ children }: URLParamsProviderProps) {
       frameworkPickerHidden: searchParams.get("frameworkPicker") === "false",
       viewPickerHidden: searchParams.get("viewPicker") === "false",
       featurePickerHidden: searchParams.get("featurePicker") === "false",
+      file: searchParams.get("file") || undefined,
+      codeLayout: (searchParams.get("codeLayout") as "sidebar" | "tabs") || "sidebar",
     };
 
     setState(newState);
@@ -144,6 +163,12 @@ export function URLParamsProvider({ children }: URLParamsProviderProps) {
     updateURL({ file: fileName });
   };
 
+  const setCodeLayout = (codeLayout: "sidebar" | "tabs") => {
+    const newState = { ...state, codeLayout };
+    setState(newState);
+    updateURL({ codeLayout });
+  };
+
   const contextValue: URLParamsContextType = {
     ...state,
     setView,
@@ -152,19 +177,16 @@ export function URLParamsProvider({ children }: URLParamsProviderProps) {
     setViewPickerHidden,
     setFeaturePickerHidden,
     setCodeFile,
+    setCodeLayout,
   };
 
-  return (
-    <URLParamsContext.Provider value={contextValue}>
-      {children}
-    </URLParamsContext.Provider>
-  );
+  return <URLParamsContext.Provider value={contextValue}>{children}</URLParamsContext.Provider>;
 }
 
 export function useURLParams(): URLParamsContextType {
   const context = useContext(URLParamsContext);
   if (context === undefined) {
-    throw new Error('useURLParams must be used within a URLParamsProvider');
+    throw new Error("useURLParams must be used within a URLParamsProvider");
   }
   return context;
 }