Improve location list item layout (#2270)

* Improve location list item layout

* remove unused import

interface/app/$libraryId/settings/library/locations/ListItem.tsx

@@ -1,6 +1,6 @@
 import { Repeat, Trash } from '@phosphor-icons/react';
 import clsx from 'clsx';
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router';
 import {
 	arraysEqual,
@@ -11,7 +11,7 @@ import {
 } from '@sd/client';
 import { Button, buttonStyles, Card, dialogManager, Tooltip } from '@sd/ui';
 import { Icon } from '~/components';
-import { useIsTextTruncated, useLocale } from '~/hooks';
+import { useLocale } from '~/hooks';
 
 import DeleteDialog from './DeleteDialog';
 
@@ -22,8 +22,6 @@ interface Props {
 export default ({ location }: Props) => {
 	const navigate = useNavigate();
 	const [hide, setHide] = useState(false);
-	const sizeRef = useRef<HTMLSpanElement>(null);
-	const isSizeTruncated = useIsTextTruncated(sizeRef);
 
 	const { t } = useLocale();
 
@@ -57,62 +55,24 @@ export default ({ location }: Props) => {
 			</div>
 			<div className="flex grow" />
 			<div className="flex h-[45px] w-full max-w-fit space-x-2 p-2">
-				<Button
-					variant="gray"
-					className="!p-1.5"
-					onClick={(e: { stopPropagation: () => void }) => {
-						e.stopPropagation();
-						dialogManager.create((dp) => (
-							<DeleteDialog
-								{...dp}
-								onSuccess={() => setHide(true)}
-								locationId={location.id}
-							/>
-						));
-					}}
-				>
-					<Tooltip label={t('delete_location')}>
-						<Trash className="size-4" />
-					</Tooltip>
-				</Button>
-				<Button
-					variant="gray"
-					className="!p-1.5"
-					onClick={(e: { stopPropagation: () => void }) => {
-						e.stopPropagation();
-						// this should cause a lite directory rescan, but this will do for now, so the button does something useful
-						fullRescan.mutate({ location_id: location.id, reidentify_objects: false });
-					}}
-				>
-					<Tooltip label={t('rescan_location')}>
-						<Repeat className="size-4" />
-					</Tooltip>
-				</Button>
-				<Tooltip
-					position="top"
-					label={
-						isSizeTruncated
-							? `${byteSize(location.size_in_bytes).value}
-							${byteSize(location.size_in_bytes).unit}`
-							: null
-					}
-				>
-					<Button
+				<Tooltip position="top" label={t('size')}>
+					<div
+						className={buttonStyles({
+							variant: 'gray',
+							className: 'pointer-events-none'
+						})}
 						onClick={(e: { stopPropagation: () => void }) => {
 							e.stopPropagation();
 						}}
-						variant="gray"
-						className="pointer-events-none flex w-[66px]"
 					>
-						<span ref={sizeRef} className="max-w-[34px] truncate text-xs text-ink-dull">
+						<span className="max-w-[34px] truncate text-xs text-ink-dull">
 							{byteSize(location.size_in_bytes).value}
 						</span>
 						<span className="ml-px text-[10px] text-ink-dull/60">
 							{byteSize(location.size_in_bytes).unit}
 						</span>
-					</Button>
+					</div>
 				</Tooltip>
-
 				{/* This is a fake button, do not add disabled prop pls */}
 				<Tooltip
 					position="top"
@@ -127,7 +87,7 @@ export default ({ location }: Props) => {
 					<div
 						className={buttonStyles({
 							variant: 'gray',
-							className: 'pointer-events-none flex !px-2 !py-1.5'
+							className: 'pointer-events-none flex'
 						})}
 					>
 						<div
@@ -141,6 +101,40 @@ export default ({ location }: Props) => {
 						</span>
 					</div>
 				</Tooltip>
+				<Tooltip position="top" label={t('delete')}>
+					<Button
+						variant="gray"
+						className="h-full !p-1.5"
+						onClick={(e: { stopPropagation: () => void }) => {
+							e.stopPropagation();
+							dialogManager.create((dp) => (
+								<DeleteDialog
+									{...dp}
+									onSuccess={() => setHide(true)}
+									locationId={location.id}
+								/>
+							));
+						}}
+					>
+						<Trash className="size-4" />
+					</Button>
+				</Tooltip>
+				<Tooltip position="top" label={t('rescan')}>
+					<Button
+						variant="gray"
+						className="h-full !p-1.5"
+						onClick={(e: { stopPropagation: () => void }) => {
+							e.stopPropagation();
+							// this should cause a lite directory rescan, but this will do for now, so the button does something useful
+							fullRescan.mutate({
+								location_id: location.id,
+								reidentify_objects: false
+							});
+						}}
+					>
+						<Repeat className="size-4" />
+					</Button>
+				</Tooltip>
 				{/* <Button variant="gray" className="!p-1.5">
 					<CogIcon className="w-4 h-4" />
 				</Button> */}

interface/locales/by/common.json

@@ -451,5 +451,6 @@
   "no_labels": "Sem etiquetas",
   "search_for_files_and_actions": "Pesquisar por arquivos e ações...",
   "toggle_command_palette": "Alternar paleta de comandos",
-	"pin": "шпілька"
+  "pin": "шпілька",
+  "rescan": "паўторнае сканаванне"
 }

interface/locales/de/common.json

@@ -451,5 +451,6 @@
   "no_labels": "Keine Etiketten",
   "search_for_files_and_actions": "Nach Dateien und Aktionen suchen...",
   "toggle_command_palette": "Befehlspalette umschalten",
-	"pin": "Stift"
+  "pin": "Stift",
+  "rescan": "Erneut scannen"
 }

interface/locales/en/common.json

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

interface/locales/es/common.json

@@ -451,5 +451,6 @@
   "no_labels": "Sin etiquetas",
   "search_for_files_and_actions": "Buscar archivos y acciones...",
   "toggle_command_palette": "Alternar paleta de comandos",
-	"pin": "Alfiler"
+  "pin": "Alfiler",
+  "rescan": "Volver a escanear"
 }

interface/locales/fr/common.json

@@ -451,5 +451,6 @@
   "no_labels": "Pas d'étiquettes",
   "search_for_files_and_actions": "Rechercher des fichiers et des actions...",
   "toggle_command_palette": "Basculer la palette de commandes",
-	"pin": "Épingle"
+  "pin": "Épingle",
+  "rescan": "Nouvelle analyse"
 }

interface/locales/it/common.json

@@ -451,5 +451,6 @@
   "updated_successfully": "Aggiornato con successo, sei sulla versione {{version}}",
   "version": "Versione {{versione}}",
   "view_changes": "Visualizza modifiche",
-	"pin": "Spillo"
+  "pin": "Spillo",
+  "rescan": "Nuova scansione"
 }

interface/locales/ja/common.json

@@ -451,5 +451,6 @@
   "no_labels": "ラベルなし",
   "search_for_files_and_actions": "ファイルとアクションを検索します...",
   "toggle_command_palette": "コマンドパレットの切り替え",
-	"pin": "ピン"
+  "pin": "ピン",
+  "rescan": "再スキャン"
 }

interface/locales/nl/common.json

@@ -451,5 +451,6 @@
   "no_labels": "Geen etiketten",
   "search_for_files_and_actions": "Zoeken naar bestanden en acties...",
   "toggle_command_palette": "Schakel het opdrachtpalet in of uit",
-	"pin": "Pin"
+  "pin": "Pin",
+  "rescan": "Opnieuw scannen"
 }

interface/locales/ru/common.json

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

interface/locales/tr/common.json

@@ -451,5 +451,6 @@
   "no_labels": "Etiket yok",
   "search_for_files_and_actions": "Dosyaları ve eylemleri arayın...",
   "toggle_command_palette": "Komut paletini değiştir",
-	"pin": "Toplu iğne"
+  "pin": "Toplu iğne",
+  "rescan": "Yeniden tara"
 }

interface/locales/zh-CN/common.json

@@ -451,5 +451,6 @@
   "no_labels": "无标签",
   "search_for_files_and_actions": "搜索文件和操作...",
   "toggle_command_palette": "切换命令面板",
-	"pin": "别针"
+  "pin": "别针",
+  "rescan": "重新扫描"
 }

interface/locales/zh-TW/common.json

@@ -451,5 +451,6 @@
   "no_labels": "無標籤",
   "search_for_files_and_actions": "搜尋文件和操作...",
   "toggle_command_palette": "切換命令面板",
-	"pin": "別針"
+  "pin": "別針",
+  "rescan": "重新掃描"
 }