From 6446634851e5ef688bd8932e7298ce652f333a37 Mon Sep 17 00:00:00 2001
From: Coki <92775570+HashCookie@users.noreply.github.com>
Date: Tue, 23 Jul 2024 14:52:02 +0800
Subject: [PATCH] feat: Support mobile view better (#144)

* refactor: improve layout and responsiveness in editor component

* feat: add custom configuration toggle and improve layout responsiveness

* refactor: remove commented-out code in EditorScreen component

* docs: update title in metadata

* style: adjust padding in editor component
---
 app/components/editor/index.tsx | 282 ++++++++++++++++++--------------
 app/layout.tsx                  |   2 +-
 app/page.tsx                    |  11 +-
 3 files changed, 165 insertions(+), 130 deletions(-)

diff --git a/app/components/editor/index.tsx b/app/components/editor/index.tsx
index b69f093..1c91ba4 100755
--- a/app/components/editor/index.tsx
+++ b/app/components/editor/index.tsx
@@ -40,6 +40,7 @@ export const EditorScreen = () => {
     data: enforceContextData,
   });
   const [casbinVersion, setCasbinVersion] = useState('');
+  const [showCustomConfig, setShowCustomConfig] = useState(false);
   const sidePanelChatRef = useRef<{ openDrawer: (message: string) => void } | null>(null);
   const openDrawerWithMessage = (message: string) => {
     if (sidePanelChatRef.current) {
@@ -90,8 +91,15 @@ export const EditorScreen = () => {
   const textClass = clsx(theme === 'dark' ? 'text-gray-200' : 'text-gray-800');
 
   return (
-    <div className="flex flex-row h-full">
-      <div className={clsx(open ? 'w-72' : 'w-5', 'relative', 'pl-2 pr-2 border-r border-[#dddddd]')}>
+    <div className="flex flex-col sm:flex-row h-full">
+      <div
+        className={clsx('sm:relative', 'pl-0 sm:pl-2 pr-0 sm:pr-2 border-r border-[#dddddd]', 'transition-all duration-300', {
+          'hidden sm:block': !showCustomConfig,
+          block: showCustomConfig,
+          'sm:w-72': open,
+          'sm:w-5': !open,
+        })}
+      >
         <div className="flex flex-col h-full">
           <button
             className={clsx(
@@ -99,14 +107,15 @@ export const EditorScreen = () => {
               'h-7 w-7',
               'bg-[#ffffff]',
               'border-[1.5px] rounded-full',
-              'flex items-center justify-center',
+              'items-center justify-center',
+              'hidden sm:flex',
             )}
             onClick={() => {
               return setOpen(!open);
             }}
           >
             <svg
-              className={clsx('h-8 w-8', '')}
+              className={clsx('h-8 w-8')}
               style={{
                 transform: open ? 'rotateZ(0deg)' : 'rotateZ(180deg)',
               }}
@@ -116,9 +125,11 @@ export const EditorScreen = () => {
             </svg>
           </button>
 
-          <div className={'pt-6 h-12 flex items-center font-bold'}>{open && <div className={textClass}>{t('Custom config')}</div>}</div>
+          <div className={'pt-6 h-12 pl-2 flex items-center font-bold'}>
+            {(showCustomConfig || open) && <div className={textClass}>{t('Custom config')}</div>}
+          </div>
           <div className="flex-grow overflow-auto h-full">
-            {open && (
+            {(showCustomConfig || open) && (
               <div className="flex flex-col h-full">
                 <CodeMirror
                   height="100%"
@@ -139,8 +150,8 @@ export const EditorScreen = () => {
           </div>
         </div>
       </div>
-      <div className={clsx('flex flex-col grow h-full')}>
-        <div className="flex flex-row gap-1 pt-4 flex-1 overflow-hidden">
+      <div className={clsx('flex flex-col grow h-full w-full')}>
+        <div className="flex flex-col sm:flex-row gap-1 pt-4 flex-1 overflow-hidden">
           <div className="flex-1 flex flex-col h-full overflow-hidden">
             <div className={clsx('h-10 pl-2', 'flex items-center justify-start gap-2')}>
               <div className={clsx(textClass, 'font-bold')}>{t('Model')}</div>
@@ -181,7 +192,34 @@ export const EditorScreen = () => {
               >
                 {t('RESET')}
               </button>
+              <div className="sm:hidden ml-auto mr-2">
+                <button
+                  className={clsx(
+                    'rounded',
+                    'flex items-center justify-center',
+                    'border border-[#453d7d]',
+                    'text-[#453d7a]',
+                    'bg-[#efefef]',
+                    'hover:bg-[#453d7d] hover:text-white',
+                    'transition-colors duration-500',
+                  )}
+                  onClick={() => {
+                    return setShowCustomConfig(!showCustomConfig);
+                  }}
+                >
+                  <svg
+                    className={clsx('h-6 w-6')}
+                    style={{
+                      transform: showCustomConfig ? 'rotateZ(90deg)' : 'rotateZ(-90deg)',
+                    }}
+                    viewBox="0 0 24 24"
+                  >
+                    <path fill={'currentColor'} d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
+                  </svg>
+                </button>
+              </div>
             </div>
+
             <div className="flex-grow overflow-auto h-full">
               <div className="flex flex-col h-full">
                 <CodeMirror
@@ -201,14 +239,14 @@ export const EditorScreen = () => {
                     EditorView.lineWrapping,
                     buttonPlugin(openDrawerWithMessage, extractContent, 'model'),
                   ]}
-                  className={'function flex-grow'}
+                  className={'function flex-grow h-[300px]'}
                   value={modelText}
                 />
               </div>
             </div>
           </div>
           <div className="flex-1 flex flex-col h-full overflow-hidden">
-            <div className="h-10 font-bold flex items-center justify-between">
+            <div className="h-10 pl-2 font-bold flex items-center justify-between">
               <div className={textClass}>{t('Policy')}</div>
               <div className="text-right font-bold mr-4 text-sm text-[#e13c3c]">
                 <a href={`https://github.com/casbin/node-casbin/releases/tag/v${casbinVersion}`} target="_blank" rel="noopener noreferrer">
@@ -235,14 +273,14 @@ export const EditorScreen = () => {
                   }}
                   theme={monokai}
                   onChange={setPolicyPersistent}
-                  className={'function flex-grow '}
+                  className={'function flex-grow h-[300px]'}
                   value={policy}
                 />
               </div>
             </div>
           </div>
         </div>
-        <div className="flex flex-row gap-1 pt-2 flex-1 overflow-hidden">
+        <div className="flex flex-col sm:flex-row gap-1 pt-2 flex-1 overflow-hidden">
           <div className="flex-1 flex flex-col h-full overflow-hidden">
             <div className={clsx('h-10 pl-2', 'flex items-center justify-start gap-3')}>
               <div className={clsx(textClass, 'font-bold')}>{t('Request')}</div>
@@ -302,14 +340,14 @@ export const EditorScreen = () => {
                     bracketMatching: true,
                     indentOnInput: true,
                   }}
-                  className={'function flex-grow '}
+                  className={'function flex-grow h-[300px]'}
                   value={request}
                 />
               </div>
             </div>
           </div>
           <div className="flex-1 flex flex-col h-full overflow-hidden">
-            <div className={clsx('h-10 font-bold', 'flex items-center justify-between')}>
+            <div className={clsx('h-10 pl-2 font-bold', 'flex items-center justify-between')}>
               <div className={textClass}>{t('Enforcement Result')}</div>
               <div className="mr-4">
                 <SidePanelChat ref={sidePanelChatRef} />
@@ -337,76 +375,74 @@ export const EditorScreen = () => {
                     bracketMatching: true,
                     indentOnInput: true,
                   }}
-                  className={'cursor-not-allowed flex-grow'}
+                  className={'cursor-not-allowed flex-grow h-[300px]'}
                   value={requestResult}
                 />
               </div>
             </div>
           </div>
         </div>
-        <div className={clsx('pt-2 px-1 flex items-center')}>
-          <button
-            className={clsx(
-              'rounded',
-              'px-2 py-1',
-              'border border-[#453d7d]',
-              'bg-[#efefef]',
-              'text-[#453d7a]',
-              'hover:bg-[#453d7d] hover:text-white',
-              'transition-colors duration-500',
-            )}
-            style={{ marginRight: 8 }}
-            onClick={() => {
-              try {
-                Config.newConfigFromText(modelText);
-                setEcho(<div>Passed</div>);
-              } catch (e) {
-                setEcho(<div>{(e as any).message}</div>);
-              }
-            }}
-          >
-            {t('SYNTAX VALIDATE')}
-          </button>
-          <button
-            className={clsx(
-              'rounded',
-              'px-2 py-1',
-              'border border-[#453d7d]',
-              'text-[#453d7a]',
-              'bg-[#efefef]',
-              'hover:bg-[#453d7d] hover:text-white',
-              'transition-colors duration-500',
-            )}
-            style={{ marginRight: 8 }}
-            onClick={() => {
-              return enforcer({
-                modelKind,
-                model: modelText,
-                policy,
-                customConfig,
-                request,
-                enforceContextData,
-                onResponse: (v) => {
-                  if (isValidElement(v)) {
-                    setEcho(v);
-                  } else if (Array.isArray(v)) {
-                    const formattedResults = v.map((res) => {
-                      if (typeof res === 'object') {
-                        const reasonString = Array.isArray(res.reason) && res.reason.length > 0 ? ` Reason: ${JSON.stringify(res.reason)}` : '';
-                        return `${res.okEx}${reasonString}`;
-                      }
-                      return res;
-                    });
-                    setRequestResult(formattedResults.join('\n'));
-                  }
-                },
-              });
-            }}
-          >
-            {t('RUN THE TEST')}
-          </button>
-          {!share ? (
-            <span>
+        <div className={clsx('pt-2 px-1 flex flex-col sm:flex-row items-start sm:items-center')}>
+          <div className="flex flex-row flex-wrap gap-2 mb-2 sm:mb-0 w-full sm:w-auto">
+            <button
+              className={clsx(
+                'rounded',
+                'px-2 py-1',
+                'border border-[#453d7d]',
+                'bg-[#efefef]',
+                'text-[#453d7a]',
+                'hover:bg-[#453d7d] hover:text-white',
+                'transition-colors duration-500',
+              )}
+              onClick={() => {
+                try {
+                  Config.newConfigFromText(modelText);
+                  setEcho(<div>Passed</div>);
+                } catch (e) {
+                  setEcho(<div>{(e as any).message}</div>);
+                }
+              }}
+            >
+              {t('SYNTAX VALIDATE')}
+            </button>
+            <button
+              className={clsx(
+                'rounded',
+                'px-2 py-1',
+                'border border-[#453d7d]',
+                'text-[#453d7a]',
+                'bg-[#efefef]',
+                'hover:bg-[#453d7d] hover:text-white',
+                'transition-colors duration-500',
+              )}
+              onClick={() => {
+                return enforcer({
+                  modelKind,
+                  model: modelText,
+                  policy,
+                  customConfig,
+                  request,
+                  enforceContextData,
+                  onResponse: (v) => {
+                    if (isValidElement(v)) {
+                      setEcho(v);
+                    } else if (Array.isArray(v)) {
+                      const formattedResults = v.map((res) => {
+                        if (typeof res === 'object') {
+                          const reasonString = Array.isArray(res.reason) && res.reason.length > 0 ? ` Reason: ${JSON.stringify(res.reason)}` : '';
+                          return `${res.okEx}${reasonString}`;
+                        }
+                        return res;
+                      });
+                      setRequestResult(formattedResults.join('\n'));
+                    }
+                  },
+                });
+              }}
+            >
+              {t('RUN THE TEST')}
+            </button>
+            {!share ? (
               <button
                 className={clsx(
                   'rounded',
@@ -417,7 +453,6 @@ export const EditorScreen = () => {
                   'hover:bg-[#453d7d] hover:text-white',
                   'transition-colors duration-500',
                 )}
-                style={{ marginRight: 8 }}
                 onClick={() => {
                   return shareInfo({
                     onResponse: (v) => {
@@ -434,51 +469,52 @@ export const EditorScreen = () => {
               >
                 {t('SHARE')}
               </button>
-            </span>
-          ) : (
-            <button
-              className={clsx(
-                'rounded',
-                'px-2 py-1',
-                'border border-[#453d7d]',
-                'text-[#453d7a]',
-                'bg-[#efefef]',
-                'hover:bg-[#453d7d] hover:text-white',
-                'transition-colors duration-500',
-              )}
-              style={{ marginRight: 8 }}
-              onClick={() => {
-                return copy(
-                  () => {
-                    setShare('');
-                    setEcho(<div>{t('Copied')}</div>);
-                  },
-                  `${window.location.origin + window.location.pathname}#${share}`,
-                );
-              }}
-            >
-              {t('COPY')}
-            </button>
-          )}
-          <div style={{ display: 'inline-block', marginRight: 'auto' }} className={textClass}>
-            {echo}
-          </div>
-          <div className="mr-3">
-            <button
-              onClick={toggleTheme}
-              aria-label={theme !== 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
-              className="theme-toggle-button mr-2"
-            >
-              <img
-                src={theme !== 'dark' ? 'sun.svg' : 'moon.svg'}
-                alt={theme !== 'dark' ? 'Light mode' : 'Dark mode'}
-                className="w-6 h-6 transition-opacity duration-300"
-                style={{
-                  filter: theme === 'dark' ? 'invert(1)' : 'invert(0)',
+            ) : (
+              <button
+                className={clsx(
+                  'rounded',
+                  'px-2 py-1',
+                  'border border-[#453d7d]',
+                  'text-[#453d7a]',
+                  'bg-[#efefef]',
+                  'hover:bg-[#453d7d] hover:text-white',
+                  'transition-colors duration-500',
+                )}
+                onClick={() => {
+                  return copy(
+                    () => {
+                      setShare('');
+                      setEcho(<div>{t('Copied')}</div>);
+                    },
+                    `${window.location.origin + window.location.pathname}#${share}`,
+                  );
                 }}
-              />
-            </button>
-            <LanguageMenu />
+              >
+                {t('COPY')}
+              </button>
+            )}
+          </div>
+
+          <div className="flex flex-row justify-between items-center w-full sm:w-auto sm:ml-auto mt-2 sm:mt-0">
+            <div className={clsx(textClass)}>{echo}</div>
+
+            <div className="flex flex-row items-center ml-auto sm:ml-3">
+              <button
+                onClick={toggleTheme}
+                aria-label={theme !== 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+                className="theme-toggle-button mr-2"
+              >
+                <img
+                  src={theme !== 'dark' ? 'sun.svg' : 'moon.svg'}
+                  alt={theme !== 'dark' ? 'Light mode' : 'Dark mode'}
+                  className="w-6 h-6 transition-opacity duration-300"
+                  style={{
+                    filter: theme === 'dark' ? 'invert(1)' : 'invert(0)',
+                  }}
+                />
+              </button>
+              <LanguageMenu />
+            </div>
           </div>
         </div>
       </div>
diff --git a/app/layout.tsx b/app/layout.tsx
index dc33995..033dd28 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -17,7 +17,7 @@ import './globals.css';
 import { LangProvider } from './context/LangContext';
 
 export const metadata: Metadata = {
-  title: 'casbin-editor',
+  title: 'Casbin Policy Editor',
   description: 'web playground for casbin',
 };
 
diff --git a/app/page.tsx b/app/page.tsx
index 7941c03..2fa0249 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -20,16 +20,15 @@ import { useLang } from '@/app/context/LangContext';
 export default function Home() {
   const { theme } = useLang();
   return (
-    <main className={`flex flex-col h-screen ${theme === 'dark' ? 'bg-customDark' : 'bg-white'}`}>
-      <div className="flex-grow overflow-hidden">
+    <main className={clsx('flex flex-col sm:h-screen', 'min-h-screen sm:min-h-0', theme === 'dark' ? 'bg-customDark' : 'bg-white')}>
+      <div className={clsx('flex-grow', 'overflow-auto sm:overflow-hidden')}>
         <EditorScreen />
       </div>
-      <div className={clsx('bg-[#222222] px-2 py-3 mt-2', 'flex flex-row items-center')}>
-        <a target="_blank" rel="noopener noreferrer" href="https://github.com/casbin/casbin-editor">
+      <div className={clsx('bg-[#222222] px-2 py-3 mt-2', 'flex flex-row items-center justify-between')}>
+        <a target="_blank" rel="noopener noreferrer" href="https://github.com/casbin/casbin-editor" className="mr-2">
           <img alt="GitHub stars" src="https://img.shields.io/github/stars/casbin/casbin-editor?style=social" />
         </a>
-        <div className={'grow'}></div>
-        <span style={{ color: '#FFFFFF', float: 'right', fontSize: 14 }}>Copyright © {new Date().getFullYear()} Casbin contributors.</span>
+        <span className="text-white text-sm">Copyright © {new Date().getFullYear()} Casbin contributors.</span>
       </div>
     </main>
   );