refactor: introduce empty placeholder

apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss

@@ -163,6 +163,20 @@ $inner-padding: 1rem;
   animation: animloader 1s ease-in infinite;
 }
 
+.empty {
+  background-color: $black-10;
+  text-align: center;
+  color: $muted-gray;
+  
+  td {    
+    padding: 2rem;
+  }
+
+  button {
+    margin-top: 1rem;
+  }
+}
+
 @keyframes animloader {
   0% {
     transform: scale(0);

apps/client/src/features/app-settings/panel-utils/PanelUtils.tsx

@@ -1,4 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
+import { Button } from '@chakra-ui/react';
+import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
 
 import { cx } from '../../../common/utils/styleUtils';
 
@@ -52,8 +54,21 @@ export function Table({ className, children }: { className?: string; children: R
   );
 }
 
-export function ListGroup({ children }: { children: ReactNode }) {
+export function TableEmpty({ handleClick }: { handleClick: () => void }) {
-  return <ul className={style.listGroup}>{children}</ul>;
+  return (
+    <tr className={style.empty}>
+      <td colSpan={99}>
+        <div>No data yet</div>
+        <Button onClick={handleClick} variant='ontime-subtle' rightIcon={<IoAdd />} size='sm'>
+          New
+        </Button>
+      </td>
+    </tr>
+  );
+}
+
+export function ListGroup({ className, children }: { className?: string; children: ReactNode }) {
+  return <ul className={cx([style.listGroup, className])}>{children}</ul>;
 }
 
 export function ListItem({ children }: { children: ReactNode }) {

apps/client/src/features/app-settings/panel/feature-settings-panel/UrlPresetsForm.tsx

@@ -149,6 +149,7 @@ export default function UrlPresetsForm() {
               </tr>
             </thead>
             <tbody>
+              {fields.length === 0 && <Panel.TableEmpty handleClick={addNew} />}
               {fields.map((preset, index) => {
                 const maybeAliasError = errors.data?.[index]?.alias?.message;
                 const maybeUrlError = errors.data?.[index]?.pathAndParams?.message;