chore: Add sidebar for theme editor

apps/frontend/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
     "geist": "^1.3.1",
+    "lucide-react": "^0.456.0",
     "next": "^15.0.3",
     "next-intl": "^3.25.0",
     "react": "19.0.0-rc-5c56b873-20241107",

apps/frontend/src/plugins/admin/langs/en.json

@@ -397,6 +397,11 @@
         }
       },
       "styles": {
+        "theme-editor": {
+          "desktop": "Desktop",
+          "tablet": "Tablet",
+          "mobile": "Mobile"
+        },
         "nav": {
           "title": "Navigation",
           "href": "URL: {href}",

packages/backend-ai-google/eslint.config.mjs

@@ -4,6 +4,6 @@ import eslintVitNode from 'eslint-config-typescript-vitnode/eslint.shared.mjs';
 export default [
   ...eslintVitNode,
   {
-    ignores: ['tsup.config.ts', 'src/graphql-upload'],
+    ignores: ['tsup.config.ts'],
   },
 ];

packages/backend-ai-open-ai/eslint.config.mjs

@@ -4,6 +4,6 @@ import eslintVitNode from 'eslint-config-typescript-vitnode/eslint.shared.mjs';
 export default [
   ...eslintVitNode,
   {
-    ignores: ['tsup.config.ts', 'src/graphql-upload'],
+    ignores: ['tsup.config.ts'],
   },
 ];

packages/backend-email-resend/eslint.config.mjs

@@ -4,6 +4,6 @@ import eslintVitNode from 'eslint-config-typescript-vitnode/eslint.shared.mjs';
 export default [
   ...eslintVitNode,
   {
-    ignores: ['tsup.config.ts', 'src/graphql-upload'],
+    ignores: ['tsup.config.ts'],
   },
 ];

packages/backend-email-smtp/eslint.config.mjs

@@ -4,6 +4,6 @@ import eslintVitNode from 'eslint-config-typescript-vitnode/eslint.shared.mjs';
 export default [
   ...eslintVitNode,
   {
-    ignores: ['tsup.config.ts', 'src/graphql-upload'],
+    ignores: ['tsup.config.ts'],
   },
 ];

packages/backend/eslint.config.mjs

@@ -4,6 +4,6 @@ import eslintVitNode from 'eslint-config-typescript-vitnode/eslint.shared.mjs';
 export default [
   ...eslintVitNode,
   {
-    ignores: ['tsup.config.ts', 'src/graphql-upload'],
+    ignores: ['tsup.config.ts'],
   },
 ];

packages/backend/package.json

@@ -45,7 +45,6 @@
     "nestjs",
     "nest.js",
     "nest",
-    "graphql",
     "drizzle",
     "typescript",
     "appollo",

packages/backend/src/core/admin/auth/services/nav/core.nav.ts

@@ -60,10 +60,6 @@ export const coreNav: ShowAuthAdminObj['nav'] = [
         icon: 'paintbrush',
         keywords: [],
         children: [
-          {
-            code: 'theme-editor',
-            keywords: ['theme', 'editor', 'color', 'logo'],
-          },
           {
             code: 'nav',
             keywords: ['nav', 'navigation'],
@@ -72,6 +68,10 @@ export const coreNav: ShowAuthAdminObj['nav'] = [
             code: 'editor',
             keywords: ['editor', 'tiptap'],
           },
+          {
+            code: 'theme-editor',
+            keywords: ['theme', 'editor', 'color', 'logo'],
+          },
         ],
       },
       {

packages/create-vitnode-app/helpers/create-packages-json.ts

@@ -94,6 +94,7 @@ export const createPackagesJSON = ({
     dependencies: {
       '@hookform/resolvers': '^3.9.1',
       geist: '^1.3.1',
+      'lucide-react': '^0.456.0',
       next: '^15.0.3',
       'next-intl': '^3.25.0',
       react: '19.0.0-rc-5c56b873-20241107',

packages/create-vitnode-app/templates/basic/turbo.json

@@ -1,5 +1,6 @@
 {
   "$schema": "https://turbo.build/schema.json",
+  "ui": "tui",
   "tasks": {
     "build": {
       "outputs": [".next/**", "!.next/cache/**", "dist/**"],

packages/eslint-config-typescript-vitnode/eslint.frontend.mjs

@@ -49,11 +49,6 @@ export default [
     },
   },
   {
-    ignores: [
-      'tailwind.config.ts',
-      'postcss.config.mjs',
-      'graphql',
-      'src/graphql/types.ts',
-    ],
+    ignores: ['tailwind.config.ts', 'postcss.config.mjs'],
   },
 ];

packages/frontend/eslint.config.mjs

@@ -4,6 +4,6 @@ import eslintVitNode from 'eslint-config-typescript-vitnode/eslint.react.mjs';
 export default [
   ...eslintVitNode,
   {
-    ignores: ['src/graphql', 'next.config.d.ts'],
+    ignores: ['next.config.d.ts'],
   },
 ];

packages/frontend/src/components/ui/sidebar.tsx

@@ -219,7 +219,7 @@ const Sidebar = ({
       {/* This is what handles the sidebar gap on desktop */}
       <div
         className={cn(
-          'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-in-out',
+          'relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-in-out',
           'group-data-[collapsible=offcanvas]:w-0',
           'group-data-[side=right]:rotate-180',
           variant === 'floating' || variant === 'inset'

packages/frontend/src/views/admin/layout/admin-layout.tsx

@@ -34,14 +34,14 @@ export const AdminLayout = async ({
           <SidebarProvider>
             <SidebarAdmin />
             <SidebarInset>
-              <header className="flex h-16 shrink-0 items-center gap-2">
+              <header className="flex h-12 shrink-0 items-center gap-2">
                 <div className="flex items-center gap-2 px-4">
                   <SidebarTrigger className="-ml-1" />
                   {/* <Separator className="mr-2 h-4" orientation="vertical" /> */}
                 </div>
               </header>
 
-              <div className="container p-4">{children}</div>
+              <div className="container flex-1 p-4">{children}</div>
             </SidebarInset>
           </SidebarProvider>
         </WrapperAdminLayout>

packages/frontend/src/views/admin/views/core/settings/email/email-settings-admin-view.tsx

@@ -1,12 +1,6 @@
 import { fetcher } from '@/api/fetcher';
 import { Card } from '@/components/ui/card';
 import { HeaderContent } from '@/components/ui/header-content';
-// import { fetcher } from '@/graphql/fetcher';
-// import {
-//   Admin__Core_Email_Settings__Show,
-//   Admin__Core_Email_Settings__ShowQuery,
-//   Admin__Core_Email_Settings__ShowQueryVariables,
-// } from '@/graphql/queries/admin/settings/admin__core_email_settings__show.generated';
 import { Metadata } from 'next';
 import { getTranslations } from 'next-intl/server';
 import { ShowEmailSettingsAdminObj } from 'vitnode-shared/admin/settings/email.dto';

packages/frontend/src/views/admin/views/core/styles/theme-editor/content.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { SidebarTrigger } from '@/components/ui/sidebar';
+import { SidebarInset } from '@/components/ui/sidebar-server';
+import { cn } from '@/helpers/classnames';
+import { CONFIG } from '@/helpers/config-with-env';
+import React from 'react';
+
+import { SidebarThemeEditorStyleAdmin } from './sidebar';
+
+export enum ThemeEditorViewEnum {
+  Desktop = 'desktop',
+  Mobile = 'mobile',
+  Tablet = 'tablet',
+}
+
+export const ContentThemeEditorStyleAdmin = () => {
+  const [activeMode, setActiveMode] = React.useState<ThemeEditorViewEnum>(
+    ThemeEditorViewEnum.Desktop,
+  );
+
+  return (
+    <>
+      <div className="fixed right-0 top-0 z-20 flex h-12 items-center gap-2 px-4">
+        <SidebarTrigger />
+      </div>
+      <SidebarInset className="flex min-h-full items-center justify-center">
+        <iframe
+          className={cn('bg-card rounded-lg border shadow-md transition-all', {
+            'h-full w-full': activeMode === ThemeEditorViewEnum.Desktop,
+            'h-5/6 w-[768px] rounded-md border':
+              activeMode === ThemeEditorViewEnum.Tablet,
+            'h-5/6 w-[375px] rounded-md border':
+              activeMode === ThemeEditorViewEnum.Mobile,
+          })}
+          src={CONFIG.frontend_url}
+          title={CONFIG.frontend_url}
+        />
+      </SidebarInset>
+
+      <SidebarThemeEditorStyleAdmin
+        activeMode={activeMode}
+        setActiveMode={setActiveMode}
+      />
+    </>
+  );
+};

packages/frontend/src/views/admin/views/core/styles/theme-editor/sidebar.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Sidebar } from '@/components/ui/sidebar';
+import { TooltipWrapper } from '@/components/ui/tooltip';
+import { MonitorIcon, SmartphoneIcon, TabletIcon } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+import { ThemeEditorViewEnum } from './content';
+
+export const SidebarThemeEditorStyleAdmin = ({
+  setActiveMode,
+  activeMode,
+}: {
+  activeMode: ThemeEditorViewEnum;
+  setActiveMode: React.Dispatch<React.SetStateAction<ThemeEditorViewEnum>>;
+}) => {
+  const t = useTranslations('admin.core.styles.theme-editor');
+
+  const ButtonWithTooltip = ({
+    active,
+    ariaLabel,
+    children,
+    onClick,
+  }: {
+    active?: boolean;
+    ariaLabel: string;
+    children: React.ReactNode;
+    onClick: () => void;
+  }) => {
+    return (
+      <TooltipWrapper content={ariaLabel}>
+        <Button
+          ariaLabel={ariaLabel}
+          className="relative size-9 shrink-0"
+          onClick={onClick}
+          size="icon"
+          variant={active ? 'default' : 'ghost'}
+        >
+          {children}
+        </Button>
+      </TooltipWrapper>
+    );
+  };
+
+  return (
+    <Sidebar className="h-auto" side="right">
+      <div className="flex gap-1 p-2">
+        <ButtonWithTooltip
+          active={activeMode === ThemeEditorViewEnum.Desktop}
+          ariaLabel={t(ThemeEditorViewEnum.Desktop)}
+          onClick={() => {
+            setActiveMode(ThemeEditorViewEnum.Desktop);
+          }}
+        >
+          <MonitorIcon />
+        </ButtonWithTooltip>
+
+        <ButtonWithTooltip
+          active={activeMode === ThemeEditorViewEnum.Tablet}
+          ariaLabel={t(ThemeEditorViewEnum.Tablet)}
+          onClick={() => {
+            setActiveMode(ThemeEditorViewEnum.Tablet);
+          }}
+        >
+          <TabletIcon />
+        </ButtonWithTooltip>
+
+        <ButtonWithTooltip
+          active={activeMode === ThemeEditorViewEnum.Mobile}
+          ariaLabel={t(ThemeEditorViewEnum.Mobile)}
+          onClick={() => {
+            setActiveMode(ThemeEditorViewEnum.Mobile);
+          }}
+        >
+          <SmartphoneIcon />
+        </ButtonWithTooltip>
+      </div>
+    </Sidebar>
+  );
+};

packages/frontend/src/views/admin/views/core/styles/theme-editor/theme-editor-admin-view.tsx

@@ -0,0 +1,15 @@
+import { TranslationsProvider } from '@/components/translations-provider';
+import { SidebarProvider } from '@/components/ui/sidebar';
+import React from 'react';
+
+import { ContentThemeEditorStyleAdmin } from './content';
+
+export const ThemeEditorStyleAdminView = () => {
+  return (
+    <TranslationsProvider namespaces="admin.core.styles.theme-editor">
+      <SidebarProvider className="min-h-full">
+        <ContentThemeEditorStyleAdmin />
+      </SidebarProvider>
+    </TranslationsProvider>
+  );
+};

packages/frontend/src/views/admin/views/dynamic-admin-view.tsx

@@ -56,6 +56,7 @@ import {
   generateMetadataNavStyleAdmin,
   NavStyleAdminView,
 } from './core/styles/nav/nav-admin-view';
+import { ThemeEditorStyleAdminView } from './core/styles/theme-editor/theme-editor-admin-view';
 import {
   generateMetadataGroupsMembersAdmin,
   GroupsMembersAdminView,
@@ -230,6 +231,10 @@ export const DynamicAdminView = async (props: {
     }
 
     if (slug[1] === 'styles' && !slug[3]) {
+      if (slug[2] === 'theme-editor') {
+        return <ThemeEditorStyleAdminView />;
+      }
+
       if (slug[2] === 'editor') {
         return <EditorStylesAdminView />;
       }