added better error messages if config secret permission is missing

app/src/ui/components/display/Alert.tsx

@@ -6,16 +6,27 @@ export type AlertProps = ComponentPropsWithoutRef<"div"> & {
    visible?: boolean;
    title?: string;
    message?: ReactNode | string;
+   children?: ReactNode;
 };
 
-const Base: React.FC<AlertProps> = ({ visible = true, title, message, className, ...props }) =>
+const Base: React.FC<AlertProps> = ({
+   visible = true,
+   title,
+   message,
+   className,
+   children,
+   ...props
+}) =>
    visible ? (
       <div
          {...props}
-         className={twMerge("flex flex-row dark:bg-amber-300/20 bg-amber-200 p-4", className)}
+         className={twMerge(
+            "flex flex-row items-center dark:bg-amber-300/20 bg-amber-200 p-4",
+            className
+         )}
       >
          {title && <b className="mr-2">{title}:</b>}
-         {message}
+         {message || children}
       </div>
    ) : null;
 

app/src/ui/components/display/Message.tsx

@@ -1,9 +1,24 @@
+import { IconLockAccessOff } from "@tabler/icons-react";
 import { Empty, type EmptyProps } from "./Empty";
 
 const NotFound = (props: Partial<EmptyProps>) => <Empty title="Not Found" {...props} />;
 const NotAllowed = (props: Partial<EmptyProps>) => <Empty title="Not Allowed" {...props} />;
+const MissingPermission = ({
+   what,
+   ...props
+}: Partial<EmptyProps> & {
+   what?: string;
+}) => (
+   <Empty
+      Icon={IconLockAccessOff}
+      title="Missing Permission"
+      description={`You're not allowed to access ${what ?? "this"}.`}
+      {...props}
+   />
+);
 
 export const Message = {
    NotFound,
-   NotAllowed
+   NotAllowed,
+   MissingPermission
 };