wip: small changes + custom anchor element

docs/dev_notes.md

@@ -79,12 +79,12 @@ Processo:
     - [x][2d] useBackendApi hook - wrapper around fetch with optional toast management
     - [x][2h] server controls
     - [x][1h] server scheduled restarts (legacy style)
-    - [ ][3d] "your account" modal
+    - [x][3d] "your account" modal
         - [x] if isTempPassword change message and disallows closing before changing the password
-        - [ ] give the chance to change modifiers
+        - [x] give the chance to change modifiers
         - [x] remove legacy header + change password code
         - [x] admin manager should open "my account" when trying to edit self
-        - [ ] maybe separate the backend routes
+        - [x] maybe separate the backend routes
     - [ ][3d] playerlist
     - [ ][1d] add the new logos to shell+auth pages
 - [ ][3h] playerlist click opens legacy player modal (`iframe.contentWindow.postMessage("openModal", ???);`)
@@ -99,14 +99,14 @@ Processo:
     - [ ] flow to refresh the page if invalidated auth
 - [ ][2d] full setup flow (legacy)
 - [ ][1d] full deployer flow (legacy)
-- [ ][1d] NEW PAGE: Dashboard
+- [ ][3d] NEW PAGE: Dashboard
     - [ ] warning for txadmin updates
     - [ ] warning for fxserver update
     - [ ] warning for dev builds of txadmin
     - [ ] warning for top servers
 - [ ][1d] NEW PAGEs: Console log + Action log
-- [ ][2d] NEW PAGE: Live console
-- [ ][2d] NEW PAGE: Players
+- [ ][3d] NEW PAGE: Live console
+- [ ][3d] NEW PAGE: Players
 - [ ][1d] NEW PAGE: History
 
 - [x][2d] light/dark theme
@@ -261,8 +261,8 @@ https://www.npmjs.com/package/node-schedule
 
 ### New UI stuff
 https://www.tremor.so/blocks/landing-zone <<< boa inspiração de componentes
+https://stacksorted.com/
 https://auto-animate.formkit.com
-https://tanstack.com/virtual/v3
 
 maybe xtate for complex states like setup/deployer
 
@@ -709,6 +709,8 @@ ps.: need to also include the external events reporting thing
 
 
 ### Admin ACE sync:
+NOTE: Dec/2023 - why even bother?! Current system works, and we can exports the player permissions via state bags or whatever
+
 On server start, or admins permission change:
 - write a `txData/<profile>/txAcePerms.cfg` with:
     - remove_ace/remove_principal to wipe old permissions (would need something like `remove_ace identifier.xxx:xx txadmin.* any`)

panel/src/components/PromptDialog.tsx

@@ -57,7 +57,6 @@ export default function PromptDialog() {
                         ref={inputRef}
                         placeholder={dialogState.placeholder}
                         autoComplete="off"
-                        className="placeholder:opacity-50"
                         required={dialogState.required}
                     />
                     <DialogFooter className="gap-2 flex-col">

panel/src/components/TxAnchor.tsx

@@ -0,0 +1,32 @@
+import { cn, openExternalLink } from "@/lib/utils";
+import { ExternalLinkIcon } from "lucide-react";
+import { useLocation } from "wouter";
+
+export default function TxAnchor({ children, href, className, rel, ...rest }: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+    const setLocation = useLocation()[1];
+    const isExternal = href?.startsWith('http');
+    const onClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+        if (!href) return;
+        e.preventDefault();
+        if (isExternal) {
+            openExternalLink(href);
+        } else {
+            setLocation(href ?? '/');
+        }
+    }
+    return (
+        <a
+            {...rest}
+            rel={rel ?? 'noopener noreferrer'}
+            href={href}
+            className={cn("text-accent no-underline hover:underline ml-1 mr-0 cursor-pointer", className)}
+            onClick={onClick}
+        >
+            {children}
+            {isExternal &&
+                <ExternalLinkIcon
+                    className="inline ml-1 mb-1 h-5 [.text-sm_&]:h-4 [.text-sm_&]:ml-0"
+                />}
+        </a>
+    );
+}

panel/src/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 placeholder:opacity-50",
           className
         )}
         ref={ref}

panel/src/lib/utils.ts

@@ -1,5 +1,5 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 import humanizeDuration from '@/lib/humanizeDuration';
 import { io } from "socket.io-client";