feat(frontend): add modal component

3 files changed, 54 insertions, 1 deletions

diff --git a/src/frontend/tubo/components/modal.cljs b/src/frontend/tubo/components/modal.cljs
new file mode 100644
index 0000000..fcb8463
--- /dev/null
+++ b/src/frontend/tubo/components/modal.cljs
@@ -0,0 +1,33 @@
+(ns tubo.components.modal
+  (:require
+   [re-frame.core :as rf]
+   [tubo.components.layout :as layout]))
+
+(defn modal-content
+  [title body & extra-buttons]
+  [:div.bg-white.max-h-full.dark:bg-neutral-900.z-20.p-5.rounded.flex.gap-y-5.flex-col.border.border-neutral-300.dark:border-stone-700.flex-auto.shrink-0
+   [:div.flex.justify-between.shrink-0
+    [:h1.text-xl.font-nunito-semibold title]
+    [:button {:on-click #(rf/dispatch [:tubo.events/close-modal])}
+     [:i.fa-solid.fa-close]]]
+   [:div.flex-auto.overflow-y-auto body]
+   [:div.flex.justify-end.gap-x-3.shrink-0
+    (if extra-buttons
+      (map-indexed #(with-meta %2 {:key %1}) extra-buttons)
+      [layout/primary-button "Ok" #(rf/dispatch [:tubo.events/close-modal])])]])
+
+(defn modal-panel
+  [{:keys [child show?]}]
+  [:div.fixed.flex.flex-col.items-center.justify-center.w-full.z-20.top-0
+   {:style {:minHeight "100dvh" :height "100dvh"}}
+   [layout/focus-overlay #(rf/dispatch [:tubo.events/close-modal]) show?]
+   [:div.flex.items-center.justify-center.max-h-full.flex-auto.shrink-0.p-5
+    {:class "w-full sm:w-3/4 md:w-3/5 lg:w-1/2 xl:w-1/3"}
+    child]])
+
+(defn modal
+  []
+  (fn []
+    (let [modal (rf/subscribe [:modal])]
+      (when (:show? @modal)
+        [modal-panel @modal]))))
diff --git a/src/frontend/tubo/events.cljs b/src/frontend/tubo/events.cljs
index afabc3e..0916f65 100644
--- a/src/frontend/tubo/events.cljs
+++ b/src/frontend/tubo/events.cljs
@@ -398,8 +398,23 @@
                   [:dispatch [::fetch-audio-player-stream (:url (first streams))
                               (count (:media-queue db)) (= (count (:media-queue db)) 0)]]))}))
 
+(rf/reg-event-db
+ ::modal
+ (fn [db [_ data]]
+   (assoc db :modal data)))
+
+(rf/reg-event-fx
+ ::close-modal
+ (fn [{:keys [db]} _]
+   {:db (assoc db :modal {:show? false :child nil})
+    ::body-overflow! false}))
+
 (rf/reg-event-fx
- ::add-to-bookmarks
+ ::open-modal
+ (fn [_ [_ child]]
+   {:fx [[:dispatch [::modal {:show? true :child child}]]]
+    ::body-overflow! true}))
+
  [(rf/inject-cofx :store)]
  (fn [{:keys [db store]} [_ bookmark]]
    (when-not (some #(= (:url %) (:url bookmark)) (:bookmarks db))
diff --git a/src/frontend/tubo/subs.cljs b/src/frontend/tubo/subs.cljs
index d30d69c..b2f6ead 100644
--- a/src/frontend/tubo/subs.cljs
+++ b/src/frontend/tubo/subs.cljs
@@ -66,6 +66,11 @@
    (:search-results db)))
 
 (rf/reg-sub
+ :modal
+ (fn [db _]
+   (:modal db)))
+
+(rf/reg-sub
  :stream
  (fn [db _]
    (:stream db)))