Perspective Landing: always show "Find Definition"

Fix a bug where on the perspective landing page, when the namespace had
a readme, there would be no button to open the finder.

Author: hojberg

src/PerspectiveLanding.elm

@@ -15,6 +15,7 @@ import RemoteData exposing (RemoteData(..))
 import UI
 import UI.Button as Button exposing (Button)
 import UI.Icon as Icon
+import UI.Toolbar as Toolbar
 
 
 type alias Model =
@@ -114,7 +115,7 @@ viewEmptyStateCodebase : AppContext -> Html Msg
 viewEmptyStateCodebase appContext =
     let
         button =
-            Button.iconThenLabel Find Icon.search "Find Definitions"
+            Button.iconThenLabel Find Icon.search "Find Definition"
                 |> Button.primaryMono
                 |> Button.medium
     in
@@ -168,17 +169,28 @@ view env model =
                     viewLoading
 
                 Success (Namespace _ _ { readme }) ->
-                    case readme of
-                        Just r ->
-                            container
-                                [ div [ class "perspective-landing-readme" ]
-                                    [ header [] [ Icon.view Icon.doc, text "README" ]
-                                    , Readme.view OpenReference ToggleDocFold model r
-                                    ]
-                                ]
-
-                        Nothing ->
-                            viewEmptyStateNamespace fqn
+                    let
+                        content =
+                            case readme of
+                                Just r ->
+                                    container
+                                        [ div [ class "perspective-landing-readme" ]
+                                            [ header [ class "title" ] [ Icon.view Icon.doc, text "README" ]
+                                            , Readme.view OpenReference ToggleDocFold model r
+                                            ]
+                                        ]
+
+                                Nothing ->
+                                    viewEmptyStateNamespace fqn
+                    in
+                    div []
+                        [ Button.iconThenLabel Find Icon.search "Find Definition"
+                            |> Button.small
+                            |> Button.view
+                            |> Toolbar.toolbar
+                            |> Toolbar.view
+                        , content
+                        ]
 
                 Failure error ->
                     viewError fqn (Api.errorToString error)

src/UI/Toolbar.elm

@@ -0,0 +1,19 @@
+module UI.Toolbar exposing (..)
+
+import Html exposing (Html, header)
+import Html.Attributes exposing (class)
+
+
+type alias Toolbar msg =
+    { content : Html msg
+    }
+
+
+toolbar : Html msg -> Toolbar msg
+toolbar =
+    Toolbar
+
+
+view : Toolbar msg -> Html msg
+view { content } =
+    header [ class "toolbar" ] [ content ]

src/Workspace.elm

@@ -18,7 +18,7 @@ import Env exposing (Env)
 import FullyQualifiedName exposing (FQN)
 import Hash
 import HashQualified as HQ
-import Html exposing (Html, article, div, header, section)
+import Html exposing (Html, article, div, section)
 import Html.Attributes exposing (class, id)
 import Http
 import KeyboardShortcut exposing (KeyboardShortcut(..))
@@ -28,6 +28,7 @@ import Perspective exposing (Perspective)
 import Task
 import UI.Button as Button
 import UI.Icon as Icon
+import UI.Toolbar as Toolbar
 import Workspace.WorkspaceItem as WorkspaceItem exposing (Item, WorkspaceItem)
 import Workspace.WorkspaceItems as WorkspaceItems exposing (WorkspaceItems)
 
@@ -499,10 +500,11 @@ view model =
 
         WorkspaceItems.WorkspaceItems _ ->
             article [ id "workspace" ]
-                [ header
-                    [ id "workspace-toolbar" ]
-                    [ Button.iconThenLabel Find Icon.search "Find Definition" |> Button.small |> Button.view
-                    ]
+                [ Button.iconThenLabel Find Icon.search "Find Definition"
+                    |> Button.small
+                    |> Button.view
+                    |> Toolbar.toolbar
+                    |> Toolbar.view
                 , section
                     [ id "workspace-content" ]
                     [ section [ class "definitions-pane" ] (viewWorkspaceItems model.workspaceItems) ]

src/css/elements.css

@@ -179,3 +179,4 @@ p {
 @import "./elements/fully-qualified-name.css";
 @import "./elements/card.css";
 @import "./elements/hashvatar.css";
+@import "./elements/toolbar.css";

src/css/elements/toolbar.css

@@ -0,0 +1,15 @@
+.toolbar {
+  height: var(--toolbar-height);
+  padding-left: 2.625rem;
+  padding-right: 1rem;
+  font-size: var(--font-size-medium);
+  background: var(--color-main-bg);
+  border-bottom: 1px solid var(--color-main-border);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.toolbar .right {
+  margin-left: auto;
+}

src/css/main.css

@@ -6,6 +6,7 @@
   --main-sidebar-collapsed-width: 4.5rem;
   --main-content-width: 45.5rem;
   --border-radius-base: 0.25rem;
+  --toolbar-height: 3.5rem;
 
   /* -- Layers ------------------------------------------------------------- */
   --layer-beneath: 0;

src/css/perspective-landing.css

@@ -146,13 +146,14 @@
   justify-content: flex-end;
 }
 
-.perspective-landing-readme header {
+.perspective-landing-readme header.title {
   font-size: var(--font-size-medium);
   font-weight: bold;
   height: 1.5rem;
   line-height: 1;
   display: flex;
   flex-direction: row;
+  align-items: center;
 }
 
 .perspective-landing-readme header .icon {

src/css/workspace.css

@@ -6,31 +6,12 @@
   background: var(--color-workspace-bg);
   color: var(--color-workspace-fg);
 
-  --workspace-toolbar-height: 3.5rem;
   --workspace-content-width: var(--main-content-width);
 }
 
-#workspace-toolbar {
-  height: var(--workspace-toolbar-height);
-  padding-left: 2.625rem;
-  padding-right: 1rem;
-  font-size: var(--font-size-medium);
-  background: var(--color-workspace-item-bg);
-  border-bottom: 1px solid var(--color-workspace-border);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-#workspace-toolbar .right {
-  margin-left: auto;
-}
-
 #workspace-content {
   overflow: auto;
-  height: calc(
-    calc(100vh - var(--workspace-toolbar-height)) - var(--app-header-height)
-  );
+  height: calc(calc(100vh - var(--toolbar-height)) - var(--app-header-height));
   padding-top: 2rem;
   scroll-behavior: smooth;
   scrollbar-width: auto;