[ENG-1699] Pin Job manager (#2264)

* wip

* minor cleanup

* Update Popover.tsx

* remove prop

interface/app/$libraryId/Layout/Sidebar/JobManager/index.tsx

@@ -1,4 +1,4 @@
-import { Check, Trash, X } from '@phosphor-icons/react';
+import { Check, PushPin, Trash, X } from '@phosphor-icons/react';
 import { useQueryClient } from '@tanstack/react-query';
 import dayjs from 'dayjs';
 import { useState } from 'react';
@@ -11,6 +11,7 @@ import {
 import { Button, PopoverClose, toast, Tooltip } from '@sd/ui';
 import { useIsDark, useLocale } from '~/hooks';
 
+import { getSidebarStore, useSidebarStore } from '../store';
 import IsRunningJob from './IsRunningJob';
 import JobGroup from './JobGroup';
 
@@ -46,6 +47,7 @@ function sortJobData(jobs: IJobGroup[]) {
 export function JobManager() {
 	const queryClient = useQueryClient();
 	const [toggleConfirmation, setToggleConfirmation] = useState(false);
+	const store = useSidebarStore();
 
 	const jobGroups = useLibraryQuery(['jobs.reports']);
 
@@ -79,7 +81,17 @@ export function JobManager() {
 	return (
 		<div className="h-full overflow-hidden pb-10">
 			<div className="z-20 flex h-9 w-full items-center rounded-t-md border-b border-app-line/50 bg-app-button/30 px-2">
-				<span className=" ml-1.5 font-medium">{t('recent_jobs')}</span>
+				<Tooltip label={t('pin')}>
+					<Button
+						onClick={() => {
+							getSidebarStore().pinJobManager = !store.pinJobManager;
+						}}
+						size="icon"
+					>
+						<PushPin weight={store.pinJobManager ? 'fill' : 'regular'} size={16} />
+					</Button>
+				</Tooltip>
+				<span className="ml-1 font-medium ">{t('recent_jobs')}</span>
 				<div className="grow" />
 				{toggleConfirmation ? (
 					<div className="flex h-[85%] w-fit items-center justify-center gap-2 rounded-md border border-app-line bg-app/40 px-2">
@@ -103,14 +115,18 @@ export function JobManager() {
 						size="icon"
 					>
 						<Tooltip label={t('clear_finished_jobs')}>
-							<Trash className="size-4" />
+							<Trash size={16} />
 						</Tooltip>
 					</Button>
 				)}
 				<PopoverClose asChild>
-					<Button className="opacity-70" size="icon">
+					<Button
+						onClick={() => (getSidebarStore().pinJobManager = false)}
+						className="opacity-70"
+						size="icon"
+					>
 						<Tooltip label={t('close')}>
-							<X className="size-4" />
+							<X size={16} />
 						</Tooltip>
 					</Button>
 				</PopoverClose>

interface/app/$libraryId/Layout/Sidebar/SidebarLayout/Footer.tsx

@@ -10,19 +10,22 @@ import {
 } from '@sd/client';
 import { Button, ButtonLink, Popover, Tooltip, usePopover } from '@sd/ui';
 import { useKeysMatcher, useLocale, useShortcut } from '~/hooks';
+import { useRoutingContext } from '~/RoutingContext';
 import { usePlatform } from '~/util/Platform';
 
 import DebugPopover from '../DebugPopover';
 import { IsRunningJob, JobManager } from '../JobManager';
+import { useSidebarStore } from '../store';
 import FeedbackButton from './FeedbackButton';
 
 export default () => {
 	const { library } = useClientContext();
+	const { visible } = useRoutingContext();
+	const { t } = useLocale();
 	const debugState = useDebugState();
 	const navigate = useNavigate();
 	const symbols = useKeysMatcher(['Meta', 'Shift']);
-
-	const { t } = useLocale();
+	const store = useSidebarStore();
 
 	useShortcut('navToSettings', (e) => {
 		e.stopPropagation();
@@ -74,7 +77,10 @@ export default () => {
 					</ButtonLink>
 					<JobManagerContextProvider>
 						<Popover
-							popover={jobManagerPopover}
+							popover={{
+								...jobManagerPopover,
+								open: jobManagerPopover.open || (store.pinJobManager && visible)
+							}}
 							trigger={
 								<Button
 									id="job-manager-button"

interface/app/$libraryId/Layout/Sidebar/store.ts

@@ -0,0 +1,11 @@
+import { proxy, useSnapshot } from "valtio";
+
+//This store is being used
+//to record the state of the sidebar for specific behaviours i.e pinning
+
+const store = proxy({
+	pinJobManager: false as boolean,
+});
+
+export const useSidebarStore = () => useSnapshot(store);
+export const getSidebarStore = () => store;

interface/app/$libraryId/TopBar/index.tsx

@@ -165,9 +165,7 @@ function useTabKeybinds(props: { addTab(): void; removeTab(index: number): void
 
 	useShortcut('newTab', (e) => {
 		if (!visible) return;
-
 		e.stopPropagation();
-
 		props.addTab();
 	});
 

interface/locales/by/common.json

@@ -450,5 +450,6 @@
 	"go_to_tag": "Ir para marcação",
 	"no_labels": "Sem etiquetas",
 	"search_for_files_and_actions": "Pesquisar por arquivos e ações...",
-	"toggle_command_palette": "Alternar paleta de comandos"
+	"toggle_command_palette": "Alternar paleta de comandos",
+	"pin": "шпілька"
 }

interface/locales/de/common.json

@@ -450,5 +450,6 @@
 	"go_to_tag": "Gehe zum Markieren",
 	"no_labels": "Keine Etiketten",
 	"search_for_files_and_actions": "Nach Dateien und Aktionen suchen...",
-	"toggle_command_palette": "Befehlspalette umschalten"
+	"toggle_command_palette": "Befehlspalette umschalten",
+	"pin": "Stift"
 }

interface/locales/en/common.json

@@ -450,5 +450,6 @@
 	"your_account": "Your account",
 	"your_account_description": "Spacedrive account and information.",
 	"your_local_network": "Your Local Network",
-	"your_privacy": "Your Privacy"
+	"your_privacy": "Your Privacy",
+	"pin": "Pin"
 }

interface/locales/es/common.json

@@ -450,5 +450,6 @@
 	"go_to_tag": "Ir a la etiqueta",
 	"no_labels": "Sin etiquetas",
 	"search_for_files_and_actions": "Buscar archivos y acciones...",
-	"toggle_command_palette": "Alternar paleta de comandos"
+	"toggle_command_palette": "Alternar paleta de comandos",
+	"pin": "Alfiler"
 }

interface/locales/fr/common.json

@@ -450,5 +450,6 @@
 	"go_to_tag": "Aller au tag",
 	"no_labels": "Pas d'étiquettes",
 	"search_for_files_and_actions": "Rechercher des fichiers et des actions...",
-	"toggle_command_palette": "Basculer la palette de commandes"
+	"toggle_command_palette": "Basculer la palette de commandes",
+	"pin": "Épingle"
 }

interface/locales/it/common.json

@@ -450,5 +450,6 @@
 	"update_downloaded": "Aggiornamento scaricato. Riavvia Spacedrive per eseguire l'installazione",
 	"updated_successfully": "Aggiornato con successo, sei sulla versione {{version}}",
 	"version": "Versione {{versione}}",
-	"view_changes": "Visualizza modifiche"
+	"view_changes": "Visualizza modifiche",
+	"pin": "Spillo"
 }

interface/locales/ja/common.json

@@ -450,5 +450,6 @@
 	"go_to_tag": "タグに移動",
 	"no_labels": "ラベルなし",
 	"search_for_files_and_actions": "ファイルとアクションを検索します...",
-	"toggle_command_palette": "コマンドパレットの切り替え"
+	"toggle_command_palette": "コマンドパレットの切り替え",
+	"pin": "ピン"
 }

interface/locales/nl/common.json

@@ -450,5 +450,6 @@
 	"go_to_tag": "Ga naar taggen",
 	"no_labels": "Geen etiketten",
 	"search_for_files_and_actions": "Zoeken naar bestanden en acties...",
-	"toggle_command_palette": "Schakel het opdrachtpalet in of uit"
+	"toggle_command_palette": "Schakel het opdrachtpalet in of uit",
+	"pin": "Pin"
 }

interface/locales/ru/common.json

@@ -450,5 +450,6 @@
 	"go_to_tag": "Перейти к тегу",
 	"no_labels": "Нет ярлыков",
 	"search_for_files_and_actions": "Поиск файлов и действий...",
-	"toggle_command_palette": "Переключить палитру команд"
+	"toggle_command_palette": "Переключить палитру команд",
+	"pin": "приколоть"
 }

interface/locales/tr/common.json

@@ -450,5 +450,6 @@
 	"go_to_tag": "Etikete git",
 	"no_labels": "Etiket yok",
 	"search_for_files_and_actions": "Dosyaları ve eylemleri arayın...",
-	"toggle_command_palette": "Komut paletini değiştir"
+	"toggle_command_palette": "Komut paletini değiştir",
+	"pin": "Toplu iğne"
 }

interface/locales/zh-CN/common.json

@@ -450,5 +450,6 @@
 	"go_to_tag": "转到标签",
 	"no_labels": "无标签",
 	"search_for_files_and_actions": "搜索文件和操作...",
-	"toggle_command_palette": "切换命令面板"
+	"toggle_command_palette": "切换命令面板",
+	"pin": "别针"
 }

interface/locales/zh-TW/common.json

@@ -450,5 +450,6 @@
 	"go_to_tag": "轉到標籤",
 	"no_labels": "無標籤",
 	"search_for_files_and_actions": "搜尋文件和操作...",
-	"toggle_command_palette": "切換命令面板"
+	"toggle_command_palette": "切換命令面板",
+	"pin": "別針"
 }

packages/ui/src/Popover.tsx

@@ -47,7 +47,7 @@ export const Popover = ({ popover, trigger, children, disabled, className, ...pr
 	}, [setOpen]);
 
 	return (
-		<Radix.Root open={popover.open} onOpenChange={popover.setOpen}>
+		<Radix.Root open={popover.open} onOpenChange={setOpen}>
 			<Radix.Trigger ref={triggerRef} disabled={disabled} asChild>
 				{trigger}
 			</Radix.Trigger>
@@ -64,7 +64,7 @@ export const Popover = ({ popover, trigger, children, disabled, className, ...pr
 						'bg-app-overlay',
 						'border border-app-line',
 						'shadow-2xl',
-						'animate-in fade-in',
+						'radix-state-closed:animate-out radix-state-closed:fade-out-0',
 						className
 					)}
 					{...props}