changed cards on movie search

internal/view/component/search/movies_results.templ

@@ -5,9 +5,11 @@ import "git.haelnorr.com/h/golib/tmdb"
 
 templ MovieResults(movies *tmdb.ResultMovies, image *tmdb.Image) {
 	for _, movie := range movies.Results {
-		<div
+		<a
+			href={ templ.SafeURL(fmt.Sprintf("/movie/%v", movie.ID)) }
 			class="bg-surface0 p-4 rounded-lg shadow-lg flex 
-            items-start space-x-4"
+            items-start space-x-4 cursor-pointer transition-all 
+            hover:outline hover:outline-green hover:shadow-xl hover:scale-105"
 		>
 			<img
 				src={ movie.GetPoster(image, "w92") }
@@ -18,17 +20,15 @@ templ MovieResults(movies *tmdb.ResultMovies, image *tmdb.Image) {
 				onerror="this.onerror=null; setFallbackColor(this);"
 			/>
 			<script>
-    function setFallbackColor(img) {
+				function setFallbackColor(img) {
-      const baseColor = getComputedStyle(document.documentElement).
+					const baseColor = getComputedStyle(document.documentElement)
-        getPropertyValue('--base').trim();
+						.getPropertyValue("--base")
-      img.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='144'%3E%3Crect width='100%' height='100%' fill='${baseColor}'/%3E%3C/svg%3E`;
+						.trim();
-    }
+					img.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='144'%3E%3Crect width='100%' height='100%' fill='${baseColor}'/%3E%3C/svg%3E`;
-  </script>
+				}
+			</script>
 			<div>
-				<a
+				<h3 class="text-xl font-semibold">{ movie.Title } { movie.ReleaseYear() }</h3>
-					href={ templ.SafeURL(fmt.Sprintf("/movie/%v", movie.ID)) }
-					class="text-xl font-semibold transition hover:text-green"
-				>{ movie.Title } { movie.ReleaseYear() }</a>
 				<p class="text-subtext0">
 					Released:
 					<span class="font-medium">{ movie.ReleaseDate }</span>
@@ -39,6 +39,6 @@ templ MovieResults(movies *tmdb.ResultMovies, image *tmdb.Image) {
 				</p>
 				<p class="text-subtext0">{ movie.Overview }</p>
 			</div>
-		</div>
+		</a>
 	}
 }

internal/view/page/movie_search.templ

@@ -14,7 +14,7 @@ templ Movies() {
 						name="search"
 						type="text"
 						placeholder="Search movies..."
-						class="flex-grow p-2 border rounded-lg  
+						class="grow p-2 border rounded-lg  
                         bg-mantle border-surface2 shadow-sm
                         focus:outline-none focus:ring-2 focus:ring-blue"
 					/>
@@ -24,7 +24,7 @@ templ Movies() {
                         hover:cursor-pointer hover:bg-green/75"
 					>Search</button>
 				</div>
-				<div id="search-movies-results" class="space-y-4"></div>
+				<div id="search-movies-results" class="space-y-4 pt-4"></div>
 			</form>
 		</div>
 	}

pkg/contexts/keys.go

@@ -5,8 +5,3 @@ type contextKey string
 func (c contextKey) String() string {
 	return "projectreshoot context key " + string(c)
 }
-
-var (
-	contextKeyAuthorizedUser = contextKey("auth-user")
-	contextKeyRequestTime    = contextKey("req-time")
-)

pkg/contexts/request_timer.go

@@ -1,21 +0,0 @@
-package contexts
-
-import (
-	"context"
-	"errors"
-	"time"
-)
-
-// Set the start time of the request
-func SetStart(ctx context.Context, time time.Time) context.Context {
-	return context.WithValue(ctx, contextKeyRequestTime, time)
-}
-
-// Get the start time of the request
-func GetStartTime(ctx context.Context) (time.Time, error) {
-	start, ok := ctx.Value(contextKeyRequestTime).(time.Time)
-	if !ok {
-		return time.Time{}, errors.New("Failed to get start time of request")
-	}
-	return start, nil
-}

pkg/embedfs/files/css/output.css

@@ -273,6 +273,9 @@
   .ms-3 {
     margin-inline-start: calc(var(--spacing) * 3);
   }
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
+  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -446,12 +449,21 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
   .flex-grow {
     flex-grow: 1;
   }
+  .grow {
+    flex-grow: 1;
+  }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .translate-x-0 {
     --tw-translate-x: calc(var(--spacing) * 0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -463,6 +475,12 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .resize {
+    resize: both;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -695,6 +713,9 @@
   .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
   .pt-9 {
     padding-top: calc(var(--spacing) * 9);
   }
@@ -831,6 +852,10 @@
       --tw-shadow-color: color-mix(in oklab, var(--color-black) var(--tw-shadow-alpha), transparent);
     }
   }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -903,6 +928,16 @@
       border-color: var(--overlay1);
     }
   }
+  .hover\:scale-105 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-scale-x: 105%;
+        --tw-scale-y: 105%;
+        --tw-scale-z: 105%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
   .hover\:cursor-pointer {
     &:hover {
       @media (hover: hover) {
@@ -1036,6 +1071,29 @@
       }
     }
   }
+  .hover\:shadow-xl {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
+  .hover\:outline {
+    &:hover {
+      @media (hover: hover) {
+        outline-style: var(--tw-outline-style);
+        outline-width: 1px;
+      }
+    }
+  }
+  .hover\:outline-green {
+    &:hover {
+      @media (hover: hover) {
+        outline-color: var(--green);
+      }
+    }
+  }
   .focus\:border-blue {
     &:focus {
       border-color: var(--blue);
@@ -1572,6 +1630,11 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
@@ -1585,6 +1648,21 @@
   initial-value: "";
   inherits: false;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
@@ -1617,9 +1695,13 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
     }
   }
 }