feat: update layout

2025-04-28 08:39:35 +07:00 · 2024-03-03 18:24:00 +07:00 · 2024-03-03 18:24:00 +07:00 · e007dd4ac4
commit e007dd4ac4
parent f1f6d65798
12 changed files with 169 additions and 121 deletions
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@ -18,7 +18,7 @@ const BaseInput = forwardRef<HTMLInputElement, BaseInputProps>(
        type={type}
        className={cn(
          "flex h-10 w-full rounded-md border border-slate-200 px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/40 bg-transparent dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300",
-          inputClassName
+          label || error ? inputClassName : className
        )}
        ref={ref}
        {...props}
--- a/components/ui/resizable.tsx
+++ b/components/ui/resizable.tsx
@ -58,26 +58,28 @@ const ResizablePanel = forwardRef((props: ResizablePanelProps, ref: any) => {
  );
 });

-const ResizableHandle = ({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+type ResizableHandleProps = React.ComponentProps<
+  typeof ResizablePrimitive.PanelResizeHandle
+> & {
  withHandle?: boolean;
-}) => (
-  <ResizablePrimitive.PanelResizeHandle
-    className={cn(
-      "relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      className
-    )}
-    {...props}
-  >
-    {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-slate-200 bg-slate-200 dark:border-slate-800 dark:bg-slate-800">
-        <GripVertical className="h-2.5 w-2.5" />
-      </div>
-    )}
-  </ResizablePrimitive.PanelResizeHandle>
-);
+};
+
+const ResizableHandle = (props: ResizableHandleProps) => {
+  const { withHandle, className, ...restProps } = props;
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      className={cn(
+        "relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        withHandle && "w-3 bg-black group",
+        className
+      )}
+      {...restProps}
+    >
+      {withHandle && (
+        <div className="z-10 flex h-full max-h-[100px] w-1.5 items-center justify-center rounded-full bg-white/30 group-hover:bg-white/40"></div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  );
+};

 export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@ -16,17 +16,9 @@ type Props = {
  onChange?: (idx: number) => void;
  onClose?: (idx: number) => void;
  className?: string;
-  containerClassName?: string;
 };

-const Tabs = ({
-  tabs,
-  current = 0,
-  onChange,
-  onClose,
-  className,
-  containerClassName,
-}: Props) => {
+const Tabs = ({ tabs, current = 0, onChange, onClose, className }: Props) => {
  const tabContainerRef = useRef<HTMLDivElement>(null);

  const onWheel = (e: WheelEvent) => {
@ -64,43 +56,44 @@ const Tabs = ({
    container.scrollTo({ left: scrollX, behavior: "smooth" });
  }, [tabs, current]);

-  const tabView = useMemo(() => {
-    const tab = tabs[current];
-    const element = tab?.render ? tab.render() : null;
-    return element;
-  }, [tabs, current]);
-
-  return (
-    <div
+  return tabs.length > 0 ? (
+    <nav
+      ref={tabContainerRef}
      className={cn(
-        "w-full flex flex-col items-stretch bg-slate-800",
+        "flex items-stretch overflow-x-auto h-10 gap-1 hide-scrollbar",
        className
      )}
    >
-      {tabs.length > 0 ? (
-        <nav
-          ref={tabContainerRef}
-          className="flex items-stretch overflow-x-auto w-full h-10 min-h-10 hide-scrollbar"
-        >
-          {tabs.map((tab, idx) => (
-            <TabItem
-              key={idx}
-              index={idx}
-              title={tab.title}
-              icon={tab.icon}
-              isActive={idx === current}
-              onSelect={() => onChange && onChange(idx)}
-              onClose={!tab.locked && onClose ? () => onClose(idx) : null}
-            />
-          ))}
-        </nav>
-      ) : null}
+      {tabs.map((tab, idx) => (
+        <TabItem
+          key={idx}
+          index={idx}
+          title={tab.title}
+          icon={tab.icon}
+          isActive={idx === current}
+          onSelect={() => onChange && onChange(idx)}
+          onClose={!tab.locked && onClose ? () => onClose(idx) : null}
+        />
+      ))}
+    </nav>
+  ) : null;
+};

-      <main className={cn("flex-1 overflow-hidden", containerClassName)}>
-        {tabView}
-      </main>
-    </div>
-  );
+type TabViewProps = {
+  tabs: Tab[];
+  current: number;
+  className?: string;
+};
+
+export const TabView = ({ tabs, current, className }: TabViewProps) => {
+  const tabView = useMemo(() => {
+    const tab = tabs[current];
+    const element = tab?.render ? tab.render() : null;
+
+    return element;
+  }, [tabs, current]);
+
+  return <main className={cn("overflow-hidden", className)}>{tabView}</main>;
 };

 type TabItemProps = {
@ -128,8 +121,8 @@ const TabItem = ({
    <div
      data-idx={index}
      className={cn(
-        "group border-b-2 border-transparent truncate flex-shrink-0 text-white/70 transition-all hover:text-white text-center max-w-[140px] md:max-w-[180px] text-sm flex items-center gap-0 relative z-[1]",
-        isActive ? "border-slate-500 text-white" : ""
+        "group truncate flex-shrink-0 h-full bg-white/10 rounded-lg text-white/70 transition-all hover:text-white text-center max-w-[140px] md:max-w-[180px] text-sm flex items-center gap-0 relative z-[1]",
+        isActive ? "bg-white/20 text-white" : ""
      )}
      onClick={onSelect}
    >
--- a/pages/project/@slug/+Page.tsx
+++ b/pages/project/@slug/+Page.tsx
@ -23,12 +23,9 @@ const ViewProjectPage = () => {
  return (
    <ProjectContext.Provider value={{ project, isCompact, isEmbed }}>
      <ResizablePanelGroup
-        autoSaveId="main-panel"
+        autoSaveId={!isEmbed ? "main-panel" : null}
        direction={{ sm: "vertical", md: "horizontal" }}
-        className={cn(
-          "w-full !h-dvh bg-slate-600",
-          !isCompact && !isEmbed ? "md:p-4" : ""
-        )}
+        className={cn("w-full !h-screen")}
      >
        <ResizablePanel
          defaultSize={hidePreview ? 100 : 60}
@ -38,14 +35,7 @@ const ViewProjectPage = () => {
        >
          <Editor />
        </ResizablePanel>
-        <ResizableHandle
-          withHandle
-          className={
-            !isCompact && !isEmbed
-              ? "bg-slate-800 md:bg-transparent hover:bg-slate-500 transition-colors md:mx-1 w-2 md:data-[panel-group-direction=vertical]:h-2 md:rounded-lg"
-              : "bg-slate-800"
-          }
-        />
+        <ResizableHandle withHandle={!isEmbed && !isCompact} />
        <WebPreview
          defaultSize={40}
          defaultCollapsed={hidePreview}
--- a/pages/project/@slug/+data.ts
+++ b/pages/project/@slug/+data.ts
@ -12,7 +12,7 @@ export const data = async (ctx: PageContext) => {
    throw render(404, "Project not found!");
  }

-  const files = await trpc.file.getAll({ projectId: project.id });
+  const files = await trpc.file.getAll({ projectId: project.id! });
  const initialFiles = files.filter((i) =>
    filesParam != null ? filesParam.includes(i.path) : i.isPinned
  );
--- a/pages/project/@slug/components/editor.tsx
+++ b/pages/project/@slug/components/editor.tsx
@ -4,12 +4,11 @@ import {
  ResizablePanel,
  ResizablePanelGroup,
 } from "~/components/ui/resizable";
-import Tabs, { Tab } from "~/components/ui/tabs";
+import Tabs, { Tab, TabView } from "~/components/ui/tabs";
 import FileViewer from "./file-viewer";
 import trpc from "~/lib/trpc";
 import EditorContext from "../context/editor";
 import type { FileSchema } from "~/server/db/schema/file";
-import Panel from "~/components/ui/panel";
 import { useProjectContext } from "../context/project";
 import Sidebar from "./sidebar";
 import ConsoleLogger from "./console-logger";
@ -22,11 +21,14 @@ import SettingsDialog from "./settings-dialog";
 import FileIcon from "~/components/ui/file-icon";
 import { api } from "~/lib/api";
 import { useMutation } from "@tanstack/react-query";
+import { Button } from "~/components/ui/button";
+import { FaExternalLinkAlt } from "react-icons/fa";
+import { BASE_URL } from "~/lib/consts";

 const Editor = () => {
  const { project, initialFiles } = useData<Data>();
  const trpcUtils = trpc.useUtils();
-  const projectCtx = useProjectContext();
+  const { isEmbed } = useProjectContext();
  const [breakpoint] = useBreakpoint();

  const [curTabIdx, setCurTabIdx] = useState(0);
@ -178,8 +180,7 @@ const Editor = () => {
    return tabs;
  }, [curOpenFiles, openedFiles, breakpoint]);

-  const PanelComponent =
-    !projectCtx.isCompact || !projectCtx.isEmbed ? Panel : "div";
+  const currentTab = Math.min(Math.max(curTabIdx, 0), tabs.length - 1);

  return (
    <EditorContext.Provider
@ -189,9 +190,9 @@ const Editor = () => {
        onDeleteFile,
      }}
    >
-      <PanelComponent className="h-full relative flex flex-col">
+      <div className="h-full relative flex flex-col">
        <ResizablePanelGroup
-          autoSaveId="veditor-panel"
+          autoSaveId={!isEmbed ? "veditor-panel" : null}
          direction="horizontal"
          className="flex-1 order-2 md:order-1"
        >
@ -206,15 +207,36 @@ const Editor = () => {
          <ResizableHandle className="w-0" />

          <ResizablePanel defaultSize={{ md: 100, lg: 75 }}>
-            <ResizablePanelGroup autoSaveId="code-editor" direction="vertical">
+            <ResizablePanelGroup
+              autoSaveId={!isEmbed ? "code-editor" : null}
+              direction="vertical"
+            >
              <ResizablePanel defaultSize={{ sm: 100, md: 80 }} minSize={20}>
-                <Tabs
-                  tabs={tabs}
-                  current={Math.min(Math.max(curTabIdx, 0), tabs.length - 1)}
-                  onChange={setCurTabIdx}
-                  onClose={onCloseFile}
-                  className="h-full"
-                />
+                <div className="w-full h-full flex flex-col items-stretch bg-slate-800">
+                  <div className="flex items-center">
+                    <Tabs
+                      tabs={tabs}
+                      current={currentTab}
+                      onChange={setCurTabIdx}
+                      onClose={onCloseFile}
+                      className="flex-1 p-1 md:h-12 md:p-1.5 md:gap-1.5"
+                    />
+                    <Button
+                      variant="ghost"
+                      className="dark:hover:bg-slate-700"
+                      onClick={() =>
+                        window.open(`${BASE_URL}/${project.slug}`, "_blank")
+                      }
+                    >
+                      <FaExternalLinkAlt />
+                    </Button>
+                  </div>
+                  <TabView
+                    tabs={tabs}
+                    current={currentTab}
+                    className="flex-1"
+                  />
+                </div>
              </ResizablePanel>

              {breakpoint >= 2 ? (
@ -236,7 +258,7 @@ const Editor = () => {
        </ResizablePanelGroup>

        <StatusBar className="order-1 md:order-2" />
-      </PanelComponent>
+      </div>

      <SettingsDialog />
    </EditorContext.Provider>
--- a/pages/project/@slug/components/file-listing.tsx
+++ b/pages/project/@slug/components/file-listing.tsx
@ -39,7 +39,7 @@ const FileListing = () => {

  return (
    <Fragment>
-      <div className="h-10 flex items-center pl-4 pr-1">
+      <div className="h-10 md:h-12 flex items-center pl-4 pr-1">
        <p className="text-xs uppercase truncate flex-1">{project.title}</p>
        <ActionButton
          icon={FiFilePlus}
--- a/pages/project/@slug/components/file-viewer.tsx
+++ b/pages/project/@slug/components/file-viewer.tsx
@ -15,7 +15,7 @@ type Props = {
 const FileViewer = ({ id }: Props) => {
  const { project } = useProjectContext();
  const { initialFiles } = useData<Data>();
-  const initialData = initialFiles.find((i) => i.id === id);
+  const initialData = initialFiles.find((i) => i.id === id) as any;

  const { data, isLoading, refetch } = trpc.file.getById.useQuery(id, {
    initialData,
--- a/pages/project/@slug/components/settings-dialog.tsx
+++ b/pages/project/@slug/components/settings-dialog.tsx
@ -6,7 +6,7 @@ import {
  DialogHeader,
  DialogTitle,
 } from "~/components/ui/dialog";
-import { useMemo, useState } from "react";
+import { Fragment, useMemo, useState } from "react";
 import { useProjectContext } from "../context/project";
 import { useForm, useFormReturn } from "~/hooks/useForm";
 import Input from "~/components/ui/input";
@ -21,8 +21,10 @@ import {
 import trpc from "~/lib/trpc";
 import { toast } from "~/lib/utils";
 import Checkbox from "~/components/ui/checkbox";
-import Tabs, { Tab } from "~/components/ui/tabs";
+import Tabs, { Tab, TabView } from "~/components/ui/tabs";
 import { navigate } from "vike/client/router";
+import { useFieldArray } from "react-hook-form";
+import { FaTrashAlt } from "react-icons/fa";

 const defaultValues: ProjectSettingsSchema = {
  title: "",
@ -102,8 +104,9 @@ const SettingsDialog = () => {
            tabs={tabs}
            current={tab}
            onChange={setTab}
-            containerClassName="mt-4"
+            className="rounded-md overflow-hidden"
          />
+          <TabView current={tab} tabs={tabs} className="mt-4" />

          <div className="flex flex-col sm:flex-row items-stretch sm:items-center sm:justify-end gap-4 mt-8">
            <Button variant="outline" onClick={onClose}>
@ -157,17 +160,55 @@ const CSSTab = ({ form }: TabProps) => {
 };

 const JSTab = ({ form }: TabProps) => {
+  const packages = useFieldArray({
+    control: form.control,
+    name: "settings.js.packages",
+  });
+
  return (
-    <div className="space-y-3">
+    <div>
      <Select
        form={form}
        name="settings.js.transpiler"
        label="Transpiler"
        items={jsTranspilerList}
      />
-      <p className="text-sm">
+      <p className="text-sm mt-1">
        * Set transpiler to <strong>SWC</strong> to use JSX
      </p>
+
+      <p className="text-sm mt-8">External Packages</p>
+      <div>
+        {packages.fields.map((field, index) => (
+          <div key={field.id} className="flex items-center gap-2 mt-2">
+            <Input
+              key={field.id}
+              form={form}
+              name={`settings.js.packages.${index}.name`}
+              placeholder={`Package alias`}
+              className="flex-1"
+            />
+
+            <Input
+              key={field.id}
+              form={form}
+              name={`settings.js.packages.${index}.url`}
+              placeholder={`URL`}
+              className="flex-1"
+            />
+
+            <Button size="icon" onClick={() => packages.remove(index)}>
+              <FaTrashAlt />
+            </Button>
+          </div>
+        ))}
+      </div>
+      <Button
+        onClick={() => packages.append({ name: "", url: "" })}
+        className="mt-3"
+      >
+        Add Package
+      </Button>
    </div>
  );
 };
--- a/pages/project/@slug/components/status-bar.tsx
+++ b/pages/project/@slug/components/status-bar.tsx
@ -17,11 +17,11 @@ import { useProjectContext } from "../context/project";

 const StatusBar = ({ className }: React.ComponentProps<"div">) => {
  const { user, urlPathname } = usePageContext();
-  const { isCompact, project } = useProjectContext();
+  const { isEmbed, project } = useProjectContext();
  const sidebarExpanded = useStore(sidebarStore, (i) => i.expanded);
  const previewExpanded = useStore(previewStore, (i) => i.open);

-  if (isCompact) {
+  if (isEmbed) {
    return null;
  }

--- a/pages/project/@slug/components/web-preview.tsx
+++ b/pages/project/@slug/components/web-preview.tsx
@ -1,5 +1,4 @@
 /* eslint-disable react/display-name */
-import Panel from "~/components/ui/panel";
 import { ComponentProps, useCallback, useEffect, useRef } from "react";
 import { useProjectContext } from "../context/project";
 import { Button } from "~/components/ui/button";
@ -56,8 +55,6 @@ const WebPreview = ({ url, ...props }: WebPreviewProps) => {
    refresh();
  }, [refresh, togglePanel]);

-  const PanelComponent = !project.isCompact || !project.isEmbed ? Panel : "div";
-
  return (
    <ResizablePanel
      ref={panelRef}
@ -65,8 +62,8 @@ const WebPreview = ({ url, ...props }: WebPreviewProps) => {
      onCollapse={() => previewStore.setState({ open: false })}
      {...props}
    >
-      <PanelComponent className="h-full flex flex-col bg-slate-800">
-        <div className="h-10 hidden md:flex items-center pl-4">
+      <div className="h-full flex flex-col bg-slate-800">
+        <div className="h-10 md:h-12 hidden md:flex items-center pl-4">
          <p className="flex-1 truncate text-xs uppercase">Preview</p>
          <Button
            variant="ghost"
@ -75,13 +72,16 @@ const WebPreview = ({ url, ...props }: WebPreviewProps) => {
          >
            <FaRedo />
          </Button>
-          <Button
-            variant="ghost"
-            className="dark:hover:bg-slate-700"
-            onClick={() => window.open(url || "#", "_blank")}
-          >
-            <FaExternalLinkAlt />
-          </Button>
+
+          {!project.isEmbed ? (
+            <Button
+              variant="ghost"
+              className="dark:hover:bg-slate-700"
+              onClick={() => window.open(url || "#", "_blank")}
+            >
+              <FaExternalLinkAlt />
+            </Button>
+          ) : null}
        </div>

        {url != null ? (
@ -92,7 +92,7 @@ const WebPreview = ({ url, ...props }: WebPreviewProps) => {
            sandbox="allow-scripts allow-forms"
          />
        ) : null}
-      </PanelComponent>
+      </div>
    </ResizablePanel>
  );
 };
--- a/server/routers/project.ts
+++ b/server/routers/project.ts
@ -55,20 +55,20 @@ const projectRouter = router({
        isNull(project.deletedAt)
      );

-      const result = await db.query.project.findFirst({
+      const projectData = await db.query.project.findFirst({
        where,
        with: {
          user: { columns: { password: false } },
        },
      });

-      if (!hasPermission(ctx, result, "r")) {
-        throw new TRPCError({ code: "FORBIDDEN" });
+      if (!projectData || !hasPermission(ctx, projectData, "r")) {
+        return null;
      }

-      const isMutable = hasPermission(ctx, result, "w");
+      const isMutable = hasPermission(ctx, projectData, "w");

-      return { ...result, isMutable };
+      return { ...projectData!, isMutable };
    }),

  create: procedure