feat(core): fix up file server

feat(frontend): fix up notification to look like Clidey

core/src/auth/auth.go

@@ -1,6 +1,7 @@
 package auth
 
 import (
+	"bytes"
 	"context"
 	"encoding/base64"
 	"encoding/json"
@@ -42,7 +43,6 @@ func AuthMiddleware(next http.Handler) http.Handler {
 		}
 
 		r.Body = http.MaxBytesReader(w, r.Body, maxRequestBodySize)
-
 		body, err := readRequestBody(r)
 		if err != nil {
 			if err.Error() == "http: request body too large" {
@@ -53,6 +53,8 @@ func AuthMiddleware(next http.Handler) http.Handler {
 			return
 		}
 
+		// this is to ensure that it can be re-read by the GraphQL layer
+		r.Body = io.NopCloser(bytes.NewBuffer(body))
 		if isAllowed(r, body) {
 			next.ServeHTTP(w, r)
 			return

core/src/router/file_server.go

@@ -5,6 +5,8 @@ import (
 	"io"
 	"io/fs"
 	"net/http"
+	"path"
+	"strings"
 
 	"github.com/clidey/whodb/core/src/log"
 	"github.com/go-chi/chi/v5"
@@ -13,32 +15,37 @@ import (
 func fileServer(r chi.Router, staticFiles embed.FS) {
 	staticFS, err := fs.Sub(staticFiles, "build")
 	if err != nil {
-		log.Logger.Fatal(err)
+		log.Logger.Fatal("Failed to create sub filesystem:", err)
 	}
 
 	fs := http.FileServer(http.FS(staticFS))
 
-	r.Handle("/static/*", fs)
-	r.Handle("/images/*", fs)
-	r.Handle("/asset-manifest.json", fs)
-	r.Handle("/manifest.json", fs)
-	r.Handle("/robots.txt", fs)
-
-	r.NotFound(func(w http.ResponseWriter, r *http.Request) {
-		file, err := staticFS.Open("index.html")
-		if err != nil {
-			http.Error(w, "index.html not found", http.StatusInternalServerError)
-			return
-		}
-		defer file.Close()
-
-		data, err := io.ReadAll(file)
-		if err != nil {
-			http.Error(w, "index.html read error", http.StatusInternalServerError)
-			return
+	r.Handle("/*", http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		if hasExtension(r.URL.Path) {
+			fs.ServeHTTP(w, r)
+		} else {
+			file, err := staticFS.Open("index.html")
+			if err != nil {
+				http.Error(w, "index.html not found", http.StatusNotFound)
+				log.Logger.Error("Failed to open index.html:", err)
+				return
+			}
+			defer file.Close()
+
+			data, err := io.ReadAll(file)
+			if err != nil {
+				http.Error(w, "Failed to read index.html", http.StatusInternalServerError)
+				log.Logger.Error("Failed to read index.html:", err)
+				return
+			}
+
+			w.Header().Set("Content-Type", "text/html")
+			w.Write(data)
 		}
+	}))
+}
 
-		w.Header().Set("Content-Type", "text/html")
-		w.Write(data)
-	})
+func hasExtension(pathFile string) bool {
+	ext := strings.ToLower(path.Ext(pathFile))
+	return ext != ""
 }

frontend/src/components/notifications.tsx

@@ -26,16 +26,16 @@ const Notification: FC<INotificationProps> = ({ notification }) => {
   }, [dispatch, notification]);
 
   return (
-    <div className="relative px-4 py-6 text-sm grid grid-col-[1fr_auto] gap-2 overflow-hidden h-auto">
+    <div className="relative px-4 py-2 text-sm grid grid-col-[1fr_auto] gap-2 overflow-hidden h-auto">
       <p className="dark:text-neutral-300">{notification.message}</p>
       <div className="flex justify-end items-center">
         <button
           type="button"
-          className="z-100 rounded-full transition-all hover:scale-110"
+          className="z-[100] rounded-full transition-all hover:scale-110"
           onClick={handleRemove}
         >
           {cloneElement(Icons.Cancel, {
-            className: "w-6 h-6 stroke-neutral-800 dark:stroke-neutral-300",
+            className: "w-6 h-6 stroke-neutral-800 dark:stroke-neutral-500",
           })}
         </button>
       </div>
@@ -49,18 +49,18 @@ export const Notifications: FC<INotificationsProps> = () => {
   const notifications = useAppSelector((state) => state.common.notifications);
 
   return (
-    <div className="fixed z-[100] w-auto top-8 bottom-8 m-[0_auto] left-8 right-8 flex flex-col gap-2 items-end xs:items-center pointer-events-none">
+    <div className="fixed z-[100] w-auto top-8 bottom-8 m-[0_auto] left-8 right-8 flex flex-col gap-2 items-end justify-end xs:items-center pointer-events-none">
       <AnimatePresence mode="sync">
         <motion.ul className="flex flex-col gap-4">
           {notifications.map((notification) => (
             <motion.li
               key={notification.id}
               layout
-              className={classNames("bg-white dark:bg-white/15 dark:backdrop-blur-lg box-border overflow-hidden w-[40ch] sm:width-full shadow-lg rounded-xl border border-gray-200 dark:border-white/5 pointer-events-auto border-r-8", {
-                  "border-r-gray-400 dark:border-r-gray-200": notification.intent === "default",
-                  "border-r-red-400 dark:border-r-red-200": notification.intent === "error",
-                  "border-r-orange-400 dark:border-r-orange-200": notification.intent === "warning",
-                  "border-r-green-400 dark:border-r-green-200": notification.intent === "success",
+              className={classNames("bg-white bg-white/10 backdrop-blur-lg box-border overflow-hidden w-[30ch] sm:width-full shadow-lg rounded-2xl border border-neutral-200 dark:border-neutral-200/5 pointer-events-auto border-r-[20px]", {
+                  "border-r-neutral-400 dark:border-r-neutral-600": notification.intent === "default",
+                  "border-r-red-400 dark:border-r-red-600": notification.intent === "error",
+                  "border-r-orange-400 dark:border-r-orange-600": notification.intent === "warning",
+                  "border-r-green-400 dark:border-r-green-600": notification.intent === "success",
               })}
               initial={{ opacity: 0, y: 50, scale: 0.3 }}
               animate={{ opacity: 1, y: 0, scale: 1 }}