Basic onboading flow (#24)

* removed unused file

* [WIP] Created onboarding form

* Finished basic onboarding flow; added tests

* Improved onboarding language

lib/pinchflat_web/components/layouts/onboarding.html.heex

@@ -0,0 +1,18 @@
+<div class="flex h-screen overflow-hidden">
+  <div class="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
+    <header class="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
+      <div class="flex flex-grow items-center px-4 py-4 shadow-2 md:px-6 2xl:px-11">
+        <div class="flex items-center gap-2 sm:gap-4">
+          <h2 class="text-title-md2 font-bold text-white">Pinchflat</h2>
+        </div>
+      </div>
+    </header>
+
+    <main>
+      <div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
+        <.flash_group flash={@flash} />
+        <%= @inner_content %>
+      </div>
+    </main>
+  </div>
+</div>

lib/pinchflat_web/components/layouts/partials/header.html.heex

@@ -7,7 +7,7 @@
       >
         <.icon name="hero-bars-3" />
       </button>
-      <a class="hidden sm:block flex-shrink-0 lg:hidden" href="#">
+      <a class="hidden sm:block flex-shrink-0 lg:hidden" href="/">
         <h2 class="text-title-md2 font-bold text-white">Pinchflat</h2>
       </a>
     </div>
@@ -22,7 +22,7 @@
             name="q"
             value={@params["q"]}
             placeholder="Type to search..."
-            class="w-full bg-transparent pl-9 pr-4 border-0 focus:ring-0 focus:outline-none xl:w-125"
+            class="w-full bg-transparent pl-9 pr-4 border-0 focus:ring-0 focus:outline-none lg:w-125"
           />
         </form>
       </div>

lib/pinchflat_web/components/layouts/partials/sidebar.html.heex

@@ -4,7 +4,9 @@
   @click.outside="sidebarToggle = false"
 >
   <div class="flex items-center justify-between gap-2 px-6 py-5.5 lg:py-6.5">
-    <h2 class="text-title-md2 font-bold text-white">Pinchflat</h2>
+    <a href="/">
+      <h2 class="text-title-md2 font-bold text-white">Pinchflat</h2>
+    </a>
 
     <button class="block lg:hidden" @click.stop="sidebarToggle = !sidebarToggle">
       <.icon name="hero-arrow-left" class="fill-current" />
@@ -15,6 +17,8 @@
       <div>
         <h3 class="mb-4 ml-4 text-sm font-medium text-bodydark2">MENU</h3>
         <ul class="mb-6 flex flex-col gap-1.5">
+          <.sidebar_item icon="hero-home" text="Home" navigate={~p"/"} />
+
           <.sidebar_item icon="hero-tv" text="Sources" navigate={~p"/sources"} />
 
           <.sidebar_item icon="hero-adjustments-vertical" text="Media Profiles" navigate={~p"/media_profiles"} />

lib/pinchflat_web/components/layouts/root.html.heex

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
-    <.live_title suffix=" · Phoenix Framework">
+    <.live_title>
       <%= assigns[:page_title] || "Pinchflat" %>
     </.live_title>
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />