Lift update check to root component and display update indicator in header

- when there is a new version, 'back' button in header of main view should have dot in top right corner
- do update checks from Prompt so move the hook to `apps/editor/src/views/prompt/frontend/hooks`
- add 'has update' to main

├── apps
│   └── editor
│       └── src
│           └── views
│               └── prompt
│                   └── frontend
│                       ├── Home
│                       │   └── Home.tsx
│                       ├── Main
│                       │   ├── Main.tsx
│                       │   └── MainView
│                       │       ├── MainView.tsx
│                       │       └── components
│                       │           └── Header
│                       │               ├── Header.module.scss
│                       │               └── Header.tsx
│                       ├── Prompt.tsx
│                       └── hooks
│                           ├── use-alt-pressed.ts
│                           ├── use-api-configuration-editing.ts
│                           ├── use-cli-configuration-editing.ts
│                           ├── use-editor-sync.ts
│                           ├── use-is-landscape.ts
│                           ├── use-modal-manager.ts
│                           ├── use-preview-manager.ts
│                           ├── use-prompt
│                           │   ├── hooks
│                           │   │   └── use-instructions.ts
│                           │   ├── index.ts
│                           │   └── use-prompt.ts
│                           ├── use-recent-donations.ts
│                           ├── use-response-history.ts
│                           ├── use-update-check.ts
│                           └── use-web-configuration-editing.ts
└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── common
                        └── Button
                            ├── Button.module.scss
                            └── Button.tsx

Author: robertpiosik

apps/editor/src/views/prompt/frontend/Home/Home.tsx

@@ -20,7 +20,7 @@ import {
   CliPromptType
 } from '@shared/types/prompt-types'
 import { use_is_landscape } from '../hooks/use-is-landscape'
-import { use_update_check } from './hooks/use-update-check'
+import { UpdateInfo } from '../hooks/use-update-check'
 import { UpdateAvailable as UiUpdateAvailable } from '@ui/components/editor/prompt-view/UpdateAvailable'
 
 type Props = {
@@ -36,6 +36,7 @@ type Props = {
   web_prompt_type: WebPromptType
   api_prompt_type: ApiPromptType
   cli_prompt_type: CliPromptType
+  update_info: UpdateInfo
 }
 
 export const Home: React.FC<Props> = (props) => {
@@ -71,8 +72,6 @@ export const Home: React.FC<Props> = (props) => {
     is_disabled: is_landscape
   })
 
-  const update_info = use_update_check(props.version, props.is_active)
-
   const header_targets_ref = useRef<HTMLDivElement>(null)
 
   const discord_label = 'Discord'
@@ -159,27 +158,27 @@ export const Home: React.FC<Props> = (props) => {
     </div>
   )
 
-  const update_section = update_info.is_available ? (
+  const update_section = props.update_info.is_available ? (
     <>
       <div className={styles.inner__update}>
         <UiUpdateAvailable
           on_update={() =>
             post_message(props.vscode, { command: 'UPDATE_EXTENSION' })
           }
           current_version={props.version}
-          latest_version={update_info.latest_version}
+          latest_version={props.update_info.latest_version}
           translations={{
             title: t('home.update.title'),
             button: t('home.update.button'),
-            age: update_info.current_version_age_days ? (
+            age: props.update_info.current_version_age_days ? (
               <Translation
                 id={
-                  update_info.current_version_age_days === 1
+                  props.update_info.current_version_age_days === 1
                     ? 'home.update.age.singular'
                     : 'home.update.age'
                 }
                 components={{
-                  days: update_info.current_version_age_days.toString()
+                  days: props.update_info.current_version_age_days.toString()
                 }}
               />
             ) : undefined,

apps/editor/src/views/prompt/frontend/Main/Main.tsx

@@ -90,6 +90,7 @@ type Props = {
   ) => void
   on_skill_click?: (agent: string, repo: string, skill_name: string) => void
   on_agentic_search: () => void
+  has_update?: boolean
 }
 
 export const Main: React.FC<Props> = (props) => {
@@ -748,6 +749,7 @@ export const Main: React.FC<Props> = (props) => {
       completed_tasks={completed_tasks}
       on_task_completed={handle_task_completed}
       on_clear_completed_tasks={handle_clear_completed_tasks}
+      has_update={props.has_update}
     />
   )
 }

apps/editor/src/views/prompt/frontend/Main/MainView/MainView.tsx

@@ -154,6 +154,7 @@ type Props = {
   completed_tasks: string[]
   on_task_completed: () => void
   on_clear_completed_tasks: () => void
+  has_update?: boolean
 }
 
 const chatbot_to_icon: Record<keyof typeof CHATBOTS, Icon.Variant> = {
@@ -355,6 +356,7 @@ export const MainView: React.FC<Props> = (props) => {
       is_content_scrollable={is_content_scrollable}
       is_api_warning_visible={is_api_warning_visible}
       response_history={props.response_history}
+      has_update={props.has_update || false}
     />
   )
 

apps/editor/src/views/prompt/frontend/Main/MainView/components/Header/Header.module.scss

@@ -39,6 +39,22 @@
 
   &__back {
     display: flex;
+
+    &_wrapper {
+      position: relative;
+      display: flex;
+    }
+  }
+
+  &__update_dot {
+    position: absolute;
+    right: 0;
+    --size: 6px;
+    width: var(--size);
+    height: var(--size);
+    border-radius: 50%;
+    background-color: var(--vscode-button-background);
+    pointer-events: none;
   }
 
   &__types {

apps/editor/src/views/prompt/frontend/Main/MainView/components/Header/Header.tsx

@@ -35,6 +35,7 @@ type Props = {
   is_content_scrollable: boolean
   is_api_warning_visible: boolean
   response_history: ResponseHistoryItem[]
+  has_update: boolean
 }
 
 export const Header: React.FC<Props> = (props) => {
@@ -51,11 +52,14 @@ export const Header: React.FC<Props> = (props) => {
     >
       <div className={styles.header__left}>
         <div className={styles.header__back}>
-          <UiIconButton
-            codicon_icon="chevron-left"
-            on_click={props.on_show_home}
-            title={`${t('header.return')} (Esc)`}
-          />
+          <div className={styles.header__back_wrapper}>
+            <UiIconButton
+              codicon_icon="chevron-left"
+              on_click={props.on_show_home}
+              title={`${t('header.return')} (Esc)`}
+            />
+            {!props.has_update && <div className={styles.header__update_dot} />}
+          </div>
         </div>
 
         <div className={styles.header__types}>

apps/editor/src/views/prompt/frontend/Prompt.tsx

@@ -31,6 +31,7 @@ import { EditApiConfigurationForm } from '@/views/shared/forms/EditApiConfigurat
 import { use_cli_configuration_editing } from './hooks/use-cli-configuration-editing'
 import { EditCliConfigurationForm } from '@/views/shared/forms/EditCliConfigurationForm/EditCliConfigurationForm'
 import { use_translation } from './i18n/use-translation'
+import { use_update_check } from './hooks/use-update-check'
 
 const vscode = acquireVsCodeApi()
 
@@ -165,6 +166,8 @@ export const Prompt = () => {
   const { viewing_donations, set_viewing_donations, ...donations_state } =
     use_recent_donations()
 
+  const update_info = use_update_check(version, true)
+
   if (
     ask_about_context_instructions === undefined ||
     edit_files_instructions === undefined ||
@@ -289,6 +292,7 @@ export const Prompt = () => {
               })}
             >
               <Main
+                has_update={update_info.is_available}
                 api_configurations={api_configurations}
                 set_api_configurations={set_api_configurations}
                 scroll_reset_key={main_view_scroll_reset_key}
@@ -432,6 +436,7 @@ export const Prompt = () => {
                 version={version}
                 is_setup_complete={is_setup_complete}
                 on_donate_click={() => set_viewing_donations(true)}
+                update_info={update_info}
               />
             </div>
           </Layout>

…/frontend/Home/hooks/use-update-check.ts …rompt/frontend/hooks/use-update-check.tsapps/editor/src/views/prompt/frontend/Home/hooks/use-update-check.ts renamed to apps/editor/src/views/prompt/frontend/hooks/use-update-check.ts apps/editor/src/views/prompt/frontend/Home/hooks/use-update-check.ts renamed to apps/editor/src/views/prompt/frontend/hooks/use-update-check.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 
-type UpdateInfo = {
+export type UpdateInfo = {
   is_available: boolean
   latest_version?: string
   current_version_age_days?: number