feat: add native popovers for seen icons

believer · Sep 19, 2024 · 1764a2c · 1764a2c
1 parent 6f35311
commit 1764a2c
Show file tree

Hide file tree

Showing 16 changed files with 361 additions and 34 deletions.
diff --git a/.air.toml b/.air.toml
@@ -19,11 +19,6 @@
   send_interrupt = false
   stop_on_error = false
 
-[proxy]
-  enabled = true
-  proxy_port = 8081
-  app_port = 8080
-
 [log]
   main_only = false
   time = false

diff --git a/components/popover.templ b/components/popover.templ
@@ -0,0 +1,20 @@
+package components
+
+css anchor(name string) {
+	anchor-name: { name };
+}
+
+css anchorPosition(name string) {
+	position-anchor: { name };
+	inset-area: top;
+	position-try-fallbacks: flip-block;
+}
+
+templ Popover(anchorName string, content string) {
+	<button popovertarget={ anchorName } class={ anchor(anchorName),"focus-visible:outline-dashed focus-visible:outline-offset-2 focus-visible:outline-neutral-400 dark:focus-visible:outline-neutral-600 rounded-full" }>
+		{ children... }
+	</button>
+	<div id={ anchorName } popover class={ "text-xs shadow-md text-neutral-700 bg-neutral-200 dark:text-neutral-300 dark:bg-neutral-800 p-2 rounded", anchorPosition(anchorName) }>
+		{ content }
+	</div>
+}
diff --git a/components/popover_templ.go b/components/popover_templ.go
diff --git a/public/styles.css b/public/styles.css
@@ -872,6 +872,10 @@ video {
   stroke: #a3a3a3;
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1186,6 +1190,30 @@ video {
   }
 }
 
+@supports (anchor-name: --myanchor) {
+  [popover] {
+    margin: 0.25rem;
+    display: none;
+    border-style: none;
+    opacity: 0;
+    transition:
+      opacity 500ms,
+      display 500ms allow-discrete,
+      overlay 500ms allow-discrete;
+    &:popover-open {
+      display: block;
+    }
+    &:popover-open {
+      opacity: 1;
+    }
+    &:popover-open {
+      @starting-style {
+        opacity: 0;
+      }
+    }
+  }
+}
+
 .placeholder\:text-neutral-400::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(163 163 163 / var(--tw-text-opacity));
@@ -1416,6 +1444,11 @@ video {
     background-color: rgb(64 64 64 / var(--tw-bg-opacity));
   }
 
+  .dark\:bg-neutral-800 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+  }
+
   .dark\:bg-neutral-900 {
     --tw-bg-opacity: 1;
     background-color: rgb(23 23 23 / var(--tw-bg-opacity));

diff --git a/public/styles.5709e2.css → public/styles.e77e16.css b/public/styles.5709e2.css → public/styles.e77e16.css
@@ -862,6 +862,10 @@ video {
   stroke: #a3a3a3;
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1176,6 +1180,30 @@ video {
   }
 }
 
+@supports (anchor-name: --myanchor) {
+  [popover] {
+    margin: 0.25rem;
+    display: none;
+    border-style: none;
+    opacity: 0;
+    transition:
+      opacity 500ms,
+      display 500ms allow-discrete,
+      overlay 500ms allow-discrete;
+    &:popover-open {
+      display: block;
+    }
+    &:popover-open {
+      opacity: 1;
+    }
+    &:popover-open {
+      @starting-style {
+        opacity: 0;
+      }
+    }
+  }
+}
+
 .placeholder\:text-neutral-400::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(163 163 163 / var(--tw-text-opacity));
@@ -1406,6 +1434,11 @@ video {
     background-color: rgb(64 64 64 / var(--tw-bg-opacity));
   }
 
+  .dark\:bg-neutral-800 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+  }
+
   .dark\:bg-neutral-900 {
     --tw-bg-opacity: 1;
     background-color: rgb(23 23 23 / var(--tw-bg-opacity));

diff --git a/styles.css b/styles.css
@@ -63,3 +63,22 @@
     }
   }
 }
+
+@supports (anchor-name: --myanchor) {
+  [popover] {
+    @apply m-1 border-none hidden opacity-0;
+
+    transition:
+      opacity 500ms,
+      display 500ms allow-discrete,
+      overlay 500ms allow-discrete;
+
+    &:popover-open {
+      @apply block opacity-100;
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+  }
+}
diff --git a/views/genre.templ b/views/genre.templ
@@ -33,7 +33,10 @@ templ Genre(props GenreProps) {
 								<span class="tabular-nums whitespace-nowrap">
 									{ movie.ReleaseDate.Format("2006-01-02") }
 								</span>
-								@Seen(movie.Seen)
+								@Seen(SeenProps{
+									Seen: movie.Seen,
+									ID:   movie.ID,
+								})
 							</span>
 						</li>
 					}

diff --git a/views/genre_templ.go b/views/genre_templ.go
diff --git a/views/layout.templ b/views/layout.templ
@@ -43,7 +43,7 @@ templ Layout(props LayoutProps) {
 			<meta name="twitter:site" content="@rnattochdag"/>
 			<meta name="twitter:creator" content="@rnattochdag"/>
 			<link rel="icon" type="image/png" href="/public/favicon.png"/>
-			<link href="/public/styles.5709e2.css" rel="stylesheet"/>
+			<link href="/public/styles.e77e16.css" rel="stylesheet"/>
 			<link rel="manifest" href="/public/manifest.webmanifest"/>
 			<script src="/public/htmx.2.0.2.min.js"></script>
 			<script src="/public/htmx.head-support.20240912.js"></script>

diff --git a/views/layout_templ.go b/views/layout_templ.go
diff --git a/views/moviesByYear.templ b/views/moviesByYear.templ
@@ -27,7 +27,10 @@ templ MoviesByYear(year string, movies types.Movies) {
 								<span class="tabular-nums whitespace-nowrap">
 									{ movie.ReleaseDate.Format("2006-01-02") }
 								</span>
-								@Seen(movie.Seen)
+								@Seen(SeenProps{
+									Seen: movie.Seen,
+									ID:   movie.ID,
+								})
 							</span>
 						</li>
 					}

diff --git a/views/moviesByYear_templ.go b/views/moviesByYear_templ.go
diff --git a/views/person.templ b/views/person.templ
@@ -27,7 +27,11 @@ templ Credit(title string, data types.PersonMovies, id string) {
 							>
 								{ movie.ReleaseDate.Format("2006") }
 							</a>
-							@Seen(movie.Seen)
+							@Seen(SeenProps{
+								Title: title,
+								Seen:  movie.Seen,
+								ID:    movie.ID,
+							})
 						</span>
 					</li>
 				}