Add a folder info label to the workspace dropdown in the Home view and adjust its styling

- translate [Fragment]

Author: robertpiosik

apps/editor/src/views/panel/frontend/Home/Home.module.scss

@@ -118,7 +118,7 @@
     position: relative;
     height: 24px;
     flex: 1;
-    margin-right: 8px;
+    margin-right: 6px;
   }
 
   &__tasks {

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

@@ -48,12 +48,18 @@ type Props = {
 
 export const Home: React.FC<Props> = (props) => {
   const { t } = use_translation()
-  const [active_tab, set_active_tab] = useState<'tasks' | 'checkpoints'>('tasks')
+  const [active_tab, set_active_tab] = useState<'tasks' | 'checkpoints'>(
+    'tasks'
+  )
   const [active_workspace_root, set_active_workspace_root] = useState<string>()
-  const { is_mode_sticky, is_hiding, responses_ref, mode_ref, handle_scroll } = use_sticky_mode()
+  const { is_mode_sticky, is_hiding, responses_ref, mode_ref, handle_scroll } =
+    use_sticky_mode()
 
   const roots = Object.keys(props.tasks)
-  const active_root = active_workspace_root && roots.includes(active_workspace_root) ? active_workspace_root : roots[0]
+  const active_root =
+    active_workspace_root && roots.includes(active_workspace_root)
+      ? active_workspace_root
+      : roots[0]
 
   useEffect(() => {
     const handle_mouse_up = (event: MouseEvent) => {
@@ -165,7 +171,9 @@ export const Home: React.FC<Props> = (props) => {
                 { id: 'checkpoints', label: t('home.checkpoints') }
               ]}
               active_tab={active_tab}
-              on_tab_change={(id) => set_active_tab(id as 'tasks' | 'checkpoints')}
+              on_tab_change={(id) =>
+                set_active_tab(id as 'tasks' | 'checkpoints')
+              }
               actions={
                 active_tab == 'tasks' ? (
                   <>
@@ -178,6 +186,7 @@ export const Home: React.FC<Props> = (props) => {
                           }))}
                           selected_value={active_root!}
                           on_change={(val) => set_active_workspace_root(val)}
+                          info={t('home.folder')}
                         />
                       </div>
                     )}
@@ -188,7 +197,11 @@ export const Home: React.FC<Props> = (props) => {
                         on_click={(e) => {
                           e.stopPropagation()
                           if (active_root) {
-                            handle_add(active_root, props.tasks[active_root], 'top')
+                            handle_add(
+                              active_root,
+                              props.tasks[active_root],
+                              'top'
+                            )
                           }
                         }}
                       />
@@ -249,13 +262,21 @@ export const Home: React.FC<Props> = (props) => {
                           handle_reorder(active_root, new_tasks)
                         }
                         on_change={(updated_task) => {
-                          handle_change(active_root, props.tasks[active_root], updated_task)
+                          handle_change(
+                            active_root,
+                            props.tasks[active_root],
+                            updated_task
+                          )
                         }}
                         on_add={() => {
                           handle_add(active_root, props.tasks[active_root])
                         }}
                         on_add_subtask={(parent_task) => {
-                          handle_add_subtask(active_root, props.tasks[active_root], parent_task)
+                          handle_add_subtask(
+                            active_root,
+                            props.tasks[active_root],
+                            parent_task
+                          )
                         }}
                         on_delete={(timestamp) => {
                           handle_delete(active_root, timestamp)
@@ -277,7 +298,9 @@ export const Home: React.FC<Props> = (props) => {
                   <UiCheckpoints
                     items={props.checkpoints.map((c) => ({
                       id: c.timestamp,
-                      label: t(`command.checkpoints.trigger.${c.trigger}` as any),
+                      label: t(
+                        `command.checkpoints.trigger.${c.trigger}` as any
+                      ),
                       timestamp: c.timestamp,
                       description: c.description,
                       is_starred: c.is_starred,
@@ -315,7 +338,6 @@ export const Home: React.FC<Props> = (props) => {
           </div>
         </div>
       </UiScrollable>
-
     </>
   )
 }

apps/editor/src/views/panel/frontend/i18n/translations/home.ts

@@ -71,6 +71,24 @@ export const home = {
     hu: 'Kattintson szöveg hozzáadásához...',
     bg: 'Кликнете, за да добавите текст...'
   },
+  'home.folder': {
+    en: 'Folder',
+    pl: 'Folder',
+    'zh-cn': '文件夹',
+    ja: 'フォルダー',
+    'zh-tw': '資料夾',
+    de: 'Ordner',
+    es: 'Carpeta',
+    fr: 'Dossier',
+    'pt-br': 'Pasta',
+    ru: 'Папка',
+    ko: '폴더',
+    it: 'Cartella',
+    tr: 'Klasör',
+    cs: 'Složka',
+    hu: 'Mappa',
+    bg: 'Папка'
+  },
   'home.footer.copyright': {
     en: 'Copyright © {year} {link}',
     pl: 'Copyright © {year} {link}',