Merge pull request #151 from rambit-systems/push-ompzuvxrwwvq

Incremental UI Push #31

Author: johnbchron

crates/site-app/src/components.rs

@@ -1,3 +1,4 @@
+mod copy_button;
 mod create_button;
 mod data_table;
 pub mod form_layout;
@@ -10,6 +11,7 @@ mod refetch_while_focused;
 mod store_path;
 
 pub use self::{
-  create_button::*, data_table::*, icons::*, input_field::*, item_links::*,
-  navbar::*, popover::*, refetch_while_focused::*, store_path::*,
+  copy_button::*, create_button::*, data_table::*, icons::*, input_field::*,
+  item_links::*, navbar::*, popover::*, refetch_while_focused::*,
+  store_path::*,
 };

crates/site-app/src/components/copy_button.rs

@@ -0,0 +1,20 @@
+use leptos::prelude::*;
+
+use crate::components::DocumentDuplicateHeroIcon;
+
+#[island]
+pub fn CopyButton(copy_content: String) -> impl IntoView {
+  let copy_content = Signal::stored(copy_content);
+
+  let on_click = move |_| {
+    #[cfg(feature = "hydrate")]
+    (leptos_use::use_clipboard().copy)(&copy_content())
+  };
+
+  const CLASS: &str = "cursor-pointer stroke-[2.0] stroke-base-11/50 \
+                       hover:stroke-base-11/75 transition-colors";
+
+  view! {
+    <DocumentDuplicateHeroIcon on:click={on_click} {..} class=CLASS />
+  }
+}

crates/site-app/src/components/icons.rs

@@ -47,6 +47,15 @@ pub fn ChevronDownHeroIcon() -> impl IntoView {
   }
 }
 
+#[component]
+pub fn DocumentDuplicateHeroIcon() -> impl IntoView {
+  view! {
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" />
+    </svg>
+  }
+}
+
 #[component]
 pub fn EnvelopeHeroIcon() -> impl IntoView {
   view! {

crates/site-app/src/hooks/entry_hook.rs

@@ -6,8 +6,8 @@ use crate::resources::entry::entry_query_scope;
 
 #[derive(Clone)]
 pub struct EntryHook {
-  _key:     Callback<(), RecordId<Entry>>,
-  resource: Resource<Result<Option<Entry>, ServerFnError>>,
+  _key:          Callback<(), RecordId<Entry>>,
+  self_resource: Resource<Result<Option<Entry>, ServerFnError>>,
 }
 
 impl EntryHook {
@@ -16,17 +16,19 @@ impl EntryHook {
     key: impl Fn() -> RecordId<Entry> + Copy + Send + Sync + 'static,
   ) -> Self {
     let client = expect_context::<QueryClient>();
-    let resource = client.resource(entry_query_scope(), key);
+    let self_resource = client.resource(entry_query_scope(), key);
 
     Self {
       _key: Callback::new(move |_| key()),
-      resource,
+      self_resource,
     }
   }
 
-  pub fn all(&self) -> AsyncDerived<Result<Option<Entry>, ServerFnError>> {
+  pub fn intrensic(
+    &self,
+  ) -> AsyncDerived<Result<Option<Entry>, ServerFnError>> {
     AsyncDerived::new({
-      let resource = self.resource;
+      let resource = self.self_resource;
       move || async move { resource.await }
     })
   }

crates/site-app/src/pages/entry.rs

@@ -1,8 +1,16 @@
 use leptos::prelude::*;
+use leptos_fetch::QueryClient;
 use leptos_router::hooks::use_params_map;
-use models::{dvf::RecordId, Entry};
+use models::{
+  dvf::{RecordId, Visibility},
+  Cache, Entry, PvCache, StorePath,
+};
 
-use crate::{hooks::EntryHook, pages::UnauthorizedPage};
+use crate::{
+  components::{CacheItemLink, CopyButton, LockClosedHeroIcon},
+  hooks::EntryHook,
+  pages::UnauthorizedPage,
+};
 
 #[component]
 pub fn EntryPage() -> impl IntoView {
@@ -13,25 +21,201 @@ pub fn EntryPage() -> impl IntoView {
     .parse::<RecordId<_>>()
     .ok();
 
-  requested_entry
-    .map(|e| view! { <EntryTile id=e /> }.into_any())
-    .unwrap_or(view! { <UnauthorizedPage /> }.into_any())
+  let Some(requested_entry) = requested_entry else {
+    return view! { <UnauthorizedPage /> }.into_any();
+  };
+
+  let entry_hook = EntryHook::new(move || requested_entry);
+  let intrensic = entry_hook.intrensic();
+  let intrensic_suspend = move || {
+    Suspend::new(async move {
+      match intrensic.await {
+        Ok(Some(entry)) => view! { <EntryInner entry=entry /> }.into_any(),
+        Ok(None) => view! { <MissingEntryPage /> }.into_any(),
+        Err(_) => view! { <ErrorEntryPage /> }.into_any(),
+      }
+    })
+  };
+
+  view! {
+    <Suspense fallback=|| ()>{ intrensic_suspend }</Suspense>
+  }
+  .into_any()
+}
+
+#[component]
+fn EntryInner(entry: Entry) -> impl IntoView {
+  view! {
+    <div class="flex flex-col gap-4">
+      <TitleTile store_path={entry.store_path.clone()} />
+      <div class="grid gap-4 grid-flow-col">
+        <StorePathTile store_path={entry.store_path.clone()} />
+        <CachesTile entry={entry.clone()} />
+      </div>
+    </div>
+  }
+}
+
+#[component]
+fn TitleTile(store_path: StorePath<String>) -> impl IntoView {
+  let path = store_path.to_absolute_path();
+  view! {
+    <div class="p-6 elevation-flat flex flex-row gap-2 items-center">
+      <p class="text-base-12 text-xl">
+        { path.clone() }
+      </p>
+      <CopyButton copy_content={path} {..} class="size-6" />
+    </div>
+  }
+}
+
+#[component]
+fn StorePathTile(store_path: StorePath<String>) -> impl IntoView {
+  let string = store_path.to_string();
+  let separator_index =
+    string.find('-').expect("no separator found in store path");
+  let (digest, _) = string.split_at(separator_index);
+  let name = store_path.name().clone();
+
+  const KEY_CLASS: &str = "place-self-end";
+  const VALUE_CLASS: &str = "text-base-12 font-medium";
+
+  let value_element = move |s: &str| {
+    view! {
+      <div class="flex flex-row gap-2 items-center">
+        <p class=VALUE_CLASS>{ s }</p>
+        <CopyButton
+          copy_content={s.to_string()}
+          {..} class="size-4"
+        />
+      </div>
+    }
+  };
+
+  view! {
+    <div class="p-6 elevation-flat flex flex-col gap-4">
+      <p class="subtitle">
+        "Store Path Breakdown"
+      </p>
+      <div class="grid gap-x-4 gap-y-1 grid-cols-[repeat(2,auto)]">
+        <p class=KEY_CLASS>"Prefix"</p>
+        { value_element("/nix/store/") }
+        <p class=KEY_CLASS>"Digest"</p>
+        { value_element(digest) }
+        <p class=KEY_CLASS>"Name"</p>
+        { value_element(&name) }
+      </div>
+    </div>
+  }
 }
 
 #[component]
-fn EntryTile(id: RecordId<Entry>) -> impl IntoView {
-  let entry_hook = EntryHook::new(move || id);
-  let all = entry_hook.all();
-  let all_suspend =
-    move || Suspend::new(async move { format!("{:#?}", all.await) });
+fn CachesTile(entry: Entry) -> impl IntoView {
+  let caches = Signal::stored(entry.caches.clone());
+  let store_path = Signal::stored(entry.store_path);
+  view! {
+    <div class="p-6 elevation-flat flex flex-col gap-4">
+      <p class="subtitle">
+        "Resident Caches"
+      </p>
+
+      <table class="table">
+        <thead>
+          <th>"Name"</th>
+          <th>"Download Url"</th>
+          <th>"Visibility"</th>
+        </thead>
+        <tbody class="animate-fade-in min-h-10">
+          <For each=caches key=|r| *r children=move |r| view! {
+            <CachesTileRow store_path=store_path cache_id=r />
+          } />
+        </tbody>
+      </table>
+    </div>
+  }
+}
+
+#[component]
+fn CachesTileRow(
+  store_path: Signal<StorePath<String>>,
+  cache_id: RecordId<Cache>,
+) -> impl IntoView {
+  let query_client = expect_context::<QueryClient>();
+
+  let query_scope = crate::resources::cache::cache_query_scope();
+  let resource = query_client.resource(query_scope, move || cache_id);
+
+  let suspend = move || {
+    Suspend::new(async move {
+      match resource.await {
+        Ok(Some(c)) => {
+          view! { <CachesTileDataRow cache=c store_path=store_path /> }
+            .into_any()
+        }
+        Ok(None) => None::<()>.into_any(),
+        Err(e) => format!("Error: {e}").into_any(),
+      }
+    })
+  };
 
   view! {
-    <div class="elevation-flat p-4 flex flex-col gap-4">
-      <p class="title">"Entry"</p>
+    <Transition fallback=|| ()>{ suspend }</Transition>
+  }
+}
+
+#[component]
+fn CachesTileDataRow(
+  store_path: Signal<StorePath<String>>,
+  cache: PvCache,
+) -> impl IntoView {
+  let download_url = format!(
+    "/api/v1/c/{cache_name}/download/{store_path}",
+    cache_name = cache.name,
+    store_path = store_path(),
+  );
+  let vis_icon =
+    matches!(cache.visibility, Visibility::Private).then_some(view! {
+      <LockClosedHeroIcon {..} class="size-4 stroke-base-11/75 stroke-[2.0]" />
+    });
 
-      <div class="bg-base-2 rounded border-[1.5px] border-base-6 p-4 overflow-x-auto"><pre>
-        <Suspense fallback=|| ()>{ all_suspend }</Suspense>
-      </pre></div>
+  view! {
+    <tr>
+      <th scope="row">
+        <CacheItemLink id=cache.id extra_class="text-link-primary"/>
+      </th>
+      <td>
+        <a href={download_url} class="text-link text-link-primary">"Download"</a>
+      </td>
+      <td class="flex flex-row items-center gap-1">
+        { cache.visibility.to_string() }
+        { vis_icon }
+      </td>
+    </tr>
+  }
+}
+
+#[component]
+fn MissingEntryPage() -> impl IntoView {
+  view! {
+    <div class="p-6 elevation-flat flex flex-col gap-4 items-center">
+      <p class="title">
+        "( ˶°ㅁ°) !!"
+        " We don't have that entry"
+      </p>
+      <p>"Looks like we don't have that entry! Try uploading it through the CLI."</p>
+    </div>
+  }
+}
+
+#[component]
+fn ErrorEntryPage() -> impl IntoView {
+  view! {
+    <div class="p-6 elevation-flat flex flex-col gap-4 items-center">
+      <p class="title">
+        "ヽ(°〇°)ﾉ"
+        " Something went wrong"
+      </p>
+      <p>"Looks like something went wrong when finding your entry. We apologize!"</p>
     </div>
   }
 }

crates/site-app/style/src/main.css

@@ -50,6 +50,16 @@
   --form-grid-cols: calc(48 * var(--spacing)) minmax(0, 1fr)
 }
 
+:root {
+  font-size: 85%;
+}
+
+@media (min-width: 40rem) {
+  :root {
+    font-size: inherit;
+  }
+}
+
 @utility grid-cols-form {
   grid-template-columns: var(--form-grid-cols);
 }

crates/site-app/style/src/typography.css

@@ -3,4 +3,8 @@
   .title {
     @apply font-display text-3xl font-semibold tracking-tight text-base-12;
   }
+
+  .subtitle {
+    @apply text-xl font-semibold tracking-tight text-base-12;
+  }
 }