Merge pull request #19 from pierreyoda/website-changelog

✨ Website: changelog page

Author: pierreyoda

src/app.rs

@@ -57,6 +57,10 @@ impl<'a> AppContext<'a> {
         self.history
     }
 
+    pub fn get_history_mut(&mut self) -> &mut AppHistory {
+        self.history
+    }
+
     pub fn get_inputs(&self) -> &InputsController {
         self.inputs
     }

src/ui/components/resume_list.rs

@@ -15,7 +15,7 @@ use crate::{
     api::{HnClient, types::HnItemIdScalar},
     app::{
         AppContext,
-        history::{ResumeItemHistoryData, SynchronizedHistoryItem},
+        history::{HistoryPersistCommand, ResumeItemHistoryData, SynchronizedHistoryItem},
     },
     errors::Result,
     ui::{
@@ -39,7 +39,7 @@ impl ItemWithId<HnItemIdScalar> for ResumeItemHistoryData {
 
 #[derive(Debug)]
 pub struct ResumeList {
-    initialized: bool,
+    loaded: bool,
     list_cutoff: usize,
     /// The Item selected in the list, waiting to be fetched.
     ///
@@ -52,7 +52,7 @@ pub struct ResumeList {
 impl Default for ResumeList {
     fn default() -> Self {
         Self {
-            initialized: false,
+            loaded: false,
             list_cutoff: RESUME_SCREEN_MAX_DISPLAYED_ITEMS,
             pending_selected_item_id: None,
             list_state: CustomListState::with_items(vec![]),
@@ -69,7 +69,7 @@ impl UiComponent for ResumeList {
     }
 
     fn before_unmount(&mut self) {
-        self.initialized = false;
+        self.loaded = false;
         self.pending_selected_item_id = None;
     }
 
@@ -78,11 +78,11 @@ impl UiComponent for ResumeList {
         _elapsed_ticks: UiTickScalar,
         _ctx: &AppContext,
     ) -> Result<bool> {
-        Ok(!self.initialized || self.pending_selected_item_id.is_some())
+        Ok(!self.loaded || self.pending_selected_item_id.is_some())
     }
 
     async fn update(&mut self, client: &mut HnClient, ctx: &mut AppContext) -> Result<()> {
-        if !self.initialized {
+        if !self.loaded {
             let resume_items: Vec<_> = ctx
                 .get_history()
                 .restored_resume_items()
@@ -94,7 +94,7 @@ impl UiComponent for ResumeList {
             if !self.list_state.is_empty() && self.list_state.selected().is_none() {
                 self.list_state.select(Some(0));
             }
-            self.initialized = true;
+            self.loaded = true;
         }
 
         if let Some(item_id) = self.pending_selected_item_id.take() {
@@ -143,7 +143,14 @@ impl UiComponent for ResumeList {
             true
         } else if let Some(selected_index) = selected {
             let selected_item_id = self.list_state.get_items()[selected_index].get_id();
-            if inputs.is_active(&ApplicationAction::OpenHackerNewsLink)
+            if inputs.is_active(&ApplicationAction::ResumeClearEntry) {
+                ctx.get_history_mut()
+                    .persist(&[HistoryPersistCommand::ResumeRemove {
+                        item_id: selected_item_id,
+                    }]);
+                self.loaded = false;
+                true
+            } else if inputs.is_active(&ApplicationAction::OpenHackerNewsLink)
                 // the external URL of a stored Item, if any, is unknown until it is
                 // fetched: both link actions can only open its Hacker News page here
                 || inputs.is_active(&ApplicationAction::OpenExternalOrHackerNewsLink)

src/ui/handlers.rs

@@ -117,6 +117,8 @@ pub enum ApplicationAction {
     ToggleFocusResults,
     // settings screen
     SettingsToggleControl,
+    // resume screen
+    ResumeClearEntry,
 }
 
 impl ApplicationAction {
@@ -169,6 +171,8 @@ impl ApplicationAction {
             ToggleFocusResults => inputs.key == Key::Enter,
             // settings screen
             SettingsToggleControl => inputs.key == Key::Tab,
+            // resume screen
+            ResumeClearEntry => inputs.key == Key::Char('c'),
         }
     }
 

src/ui/helper.rs

@@ -189,8 +189,8 @@ impl ContextualHelper {
 
     fn render_resume_page_help(&self, f: &mut RenderFrame, inside: Rect) {
         let widgets = vec![
-            HelpWidget::Text("⬆️  / i or ⬇️  / k to navigate".into()),
-            HelpWidget::KeyReminder('⬅', "go back".into(), Key::Escape),
+            HelpWidget::KeyReminder('c', "delete entry".into(), Key::Char('c')),
+            HelpWidget::KeyReminder('🎯', "go to item".into(), Key::Enter),
         ];
         Self::render_widgets(f, inside, &widgets);
     }

src/ui/screens/home.rs

@@ -43,7 +43,7 @@ impl HomeScreen {
             section,
             breakpoints: Breakpoints::new("home_screen", &[20, 65, 15])
                 .breakpoint(25, &[10, 80, 10])
-                .breakpoint(45, &[5, 88, 7]),
+                .breakpoint(45, &[8, 85, 7]),
         }
     }
 }

src/ui/screens/resume.rs

@@ -36,7 +36,7 @@ impl ResumeScreen {
         Self {
             breakpoints: Breakpoints::new("resume_screen", &[20, 80])
                 .breakpoint(25, &[10, 90])
-                .breakpoint(45, &[5, 95]),
+                .breakpoint(45, &[8, 92]),
         }
     }
 }

website/src/lib/Header.svelte

@@ -14,15 +14,16 @@
       <h1 class="hidden">hncli</h1>
     </a>
   </nav>
-  <div class="flex items-center sm:pr-12 sm:justify-around pt-4 sm:pt-0">
+  <div class="flex flex-col sm:flex-row items-center sm:pr-12 sm:justify-around pt-4 sm:pt-0 gap-6 md:gap-12">
+    <a href={resolve("/changelog")} class="text-4xl sm:text-3xl font-medium text-white"> Changelog </a>
     <ExternalLink
       href="https://www.newstackwhodis.com/blog/?tag=Rust"
       underline={false}
       red={false}
-      extraClass="mr-6 no-underline text-4xl sm:text-3xl font-medium">Blog</ExternalLink
+      extraClass="no-underline text-4xl sm:text-3xl font-medium">Blog</ExternalLink
     >
     <ExternalLink href="https://github.com/pierreyoda/hncli" red={false} extraClass="cursor-pointer">
-      <img alt="GitHub logo" src={GitHubLogo} class="w-10 h-10 ml-3 md:ml-6 hover:opacity-80" />
+      <img alt="GitHub logo" src={GitHubLogo} class="w-10 h-10 hover:opacity-80" />
     </ExternalLink>
   </div>
 </header>

website/src/lib/assets/hncli-v0.5-resume.png

@@ -0,0 +1,64 @@
+<script module lang="ts">
+  export type ChangelogEntryProps = {
+    /** Format: "0.5.0" */
+    tag: string;
+    subtitle?: string;
+    changes?: readonly string[];
+  } & ({
+    media: "image";
+    imageSrc: string;
+    imageAlt: string;
+   } | {
+    media: "video";
+    videoSrc: string;
+   });
+</script>
+
+<script lang="ts">
+  import { resolve } from "$app/paths";
+
+  const { tag, subtitle, changes, ...props }: ChangelogEntryProps = $props();
+</script>
+
+<article class="entry">
+  <div class="title">
+    <a href={resolve(`/changelog#${tag}`)} class="link">
+      #
+    </a>
+    <h2 class="tag" id={tag}>v{tag}</h2>
+  </div>
+  {#if subtitle}
+    <h3 class="subtitle">{subtitle}</h3>
+  {/if}
+  {#if props.media === "image"}
+    <img class="media" alt={props.imageAlt} src={props.imageSrc} />
+  {:else}
+    <video class="media" src={props.videoSrc} autoplay muted playsinline loop></video>
+  {/if}
+  {#if (changes?.length ?? 0) > 0}
+    <ul class="list-disc text-left">
+      {#each changes as change (change)}
+        <li>{change}</li>
+      {/each}
+    </ul>
+  {/if}
+</article>
+
+<style lang="postcss">
+  @reference "tailwindcss";
+
+  .entry {
+    @apply flex flex-col items-center gap-2 py-6 text-center text-white;
+
+    .title {
+      @apply flex items-center gap-2;
+      @apply font-mono text-2xl font-semibold tracking-tight;
+      .link {
+        @apply text-gray-300 hover:text-gray-500 transition-colors duration-500;
+      }
+    }
+    .media {
+      @apply h-auto w-180;
+    }
+  }
+</style>

website/src/lib/content/ChangelogEntry.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { resolve } from "$app/paths";
+
   import ExternalLink from "$lib/ExternalLink.svelte";
 </script>
 
@@ -11,13 +13,19 @@
   <p class="mt-6 text-lg text-gray-600 font-medium">
     Convenient, fast, and will run well on most computers, even old ones.
   </p>
-  <p class="text-xl font-medium tracking-tight text-gray-700 mt-4">
+  <p class="flex flex-col text-xl font-medium tracking-tight text-gray-700 mt-4 gap-4">
     <ExternalLink
       extraClass="no-underline mt-4"
       href="https://www.newstackwhodis.com/blog/hncli-1-concept#an-hacker-news-terminal-ui-concept-and-road-to-release"
     >
       Concept, vision and UX</ExternalLink
     >
+    <a
+      href={resolve("/changelog")}
+      class="font-semibold transition-colors duration-400 ease-in-out text-hncli-dark-red hover:text-hncli-dark-red/60 underline"
+    >
+      Changelog
+    </a>
   </p>
 </section>