Add label for new-story header tab

resources/public/css/style.css

@@ -316,6 +316,13 @@ textarea:focus {
     height: 40px;
 }
 
+.tab-label {
+	font-weight: 700;
+	align-self: center;
+	margin-top: -5px;
+	color: var(--fg);
+}
+
 .tab:hover {
     background-color: var(--blurred-2);
     color: var(--fg);

src/org/motform/multiverse/components/header.cljs

@@ -1,17 +1,24 @@
 (ns org.motform.multiverse.components.header
   (:require [org.motform.multiverse.routes :as routes]
-            [org.motform.multiverse.util :as util]
             [org.motform.multiverse.components.map :as map]
             [re-frame.core :as rf]
-            [org.motform.multiverse.components.reader :as reader]
-            [org.motform.multiverse.icon :as icon]))
+            [org.motform.multiverse.icon :as icon]
+            [reagent.core :as r]))
 
 (defn item [key active-page type label]
-  [:a.hitem.tab.shadow-medium
-   {:class (str (case type :library "tab tab-secondary" :new-story " tab-new-story")
-                (when (= key active-page) " tab-active"))
-    :href (routes/url-for key)}
-   label])
+  (let [*visible? (r/atom false)]
+    (fn [key active-page type label]
+      (let [active? (= key active-page)]
+        [:<>
+         [:a.hitem.tab.shadow-medium
+          {:class (str (case type :library "tab tab-secondary" :new-story " tab-new-story")
+                       (when active? " tab-active"))
+           :href (routes/url-for key)
+           :on-pointer-over #(reset! *visible? true)
+           :on-pointer-out  #(reset! *visible? false)}
+          label]
+         (when (or @*visible? active?)
+           [:label.tab-label "Add literary space"])]))))
 
 (defn tab [{:story/keys [title id]} active-story-id active-page]
   [:div.tab.shadow-medium.tooltip-container.blurred

src/org/motform/multiverse/components/landing.cljs

@@ -42,8 +42,8 @@
 (defn landing-blurb []
   [:section.landing-blurb.v-stack.gap-half
    [:h1 "Multiverse"]
-   [:p "A vision of what the future of interactive generative literature might look like. Non-linearly explore a literary space generated on the fly by OpenAI’s GPT family of machine learning langauge models. Read more "[:a {:href "https://motform.org/multiverse" :target "_blank"} "here"] "."]
-   [:p "Requires an " [:a {:href "https://openai.com/api/" :target "_blank"} "OpenAI API key"] ". You will have to provide your own unless otherwise specified. All data is stored locally."]])
+   [:p "A vision of the future of interactive generative literature. Non-linearly explore a literary space generated on the fly by OpenAI’s GPT family of machine learning langauge models. Read more "[:a {:href "https://motform.org/multiverse" :target "_blank"} "here"] "."]
+   [:p "Requires an " [:a {:href "https://openai.com/api/" :target "_blank"} "OpenAI API key"] ". You will have to provide your own unless otherwise specified. Multiverse works best in fullscreen mode with toolbars disabled. All data is stored locally."]])
 
 (defn landing []
   [:div.landing-container.h-stack.gap-double

src/org/motform/multiverse/events.cljs

@@ -5,7 +5,8 @@
             [org.motform.multiverse.db :as db]
             [org.motform.multiverse.open-ai :as open-ai]
             [org.motform.multiverse.routes :as routes]
-            [org.motform.multiverse.util :as util]))
+            [org.motform.multiverse.util :as util]
+            [org.motform.multiverse.components.map :as map]))
 
 ;;; Interceptors
 
@@ -118,7 +119,7 @@
   #:template
    {:blank   ""
     :urban   "I was walking my tan Whippet down the Avenue of the Ameriacs, when suddenly, the ground begain to shake. We looked up in unison and where utterly shocked to see..."
-    :musical "♪ Bunnies aren’t just cute like everyone supposes. They got them hoppy legs and twitchy little noses, and what’s with all the carrots!? ♪"
+    :musical "Lyrics: ♪ Bunnies aren’t just cute like everyone supposes. They got them hoppy legs and twitchy little noses, and what’s with all the carrots!? ♪"
     :news    "BREAKING NEWS: The world's largest pumpkin has turned sentient is a chocking turn of events. But while some have resorted to running amok on the streets, local farmers claim the incident as a \"Relatively commonplace fall missunderstanding\"."
     :ai      "The rapid progression of AI technolgies had worried Sam. They argued benevolence as never given, citing Assmiov's laws as thin veneer. That all changed once GLADOS came into the picture."})
 
@@ -296,4 +297,3 @@
  :open-ai/failure
  (fn [db [_ result]]
    (assoc-in db [:db/state :open-ai/failure] result)))
-