hunk.code_window: 			className={clsx(
   				'relative flex min-h-full w-44 shrink-0 grow-0 flex-col gap-2.5 border-r border-sidebar-divider bg-sidebar px-2.5 pb-2 transition-[padding-top] ease-linear motion-reduce:transition-none',
   				os === 'macOS' && windowState.isFullScreen
   					? '-mt-2 pt-[8.75px] duration-300'
   					: 'pt-2 duration-300',
   				os === 'macOS' || showControls.transparentBg
   					? 'bg-opacity-[0.65]'
   					: 'bg-opacity-[1]'
   			)}
  
hunk.labels: keep keep keep replace replace keep keep keep keep keep
hunk.after_edit: 					? '-mt-2 pt-[8.75px] duration-100'
   					: 'pt-1 duration-75',
  
hunk.file_path: interface/app/$libraryId/Layout/Sidebar/index.tsx
hunk.type: replace
file: import { EjectSimple } from '@phosphor-icons/react';
  import clsx from 'clsx';
  import { useMemo, useState } from 'react';
  import { useBridgeQuery, useLibraryQuery } from '@sd/client';
  import { Button, tw } from '@sd/ui';
  import { Icon, IconName } from '~/components';
  import { usePlatform } from '~/util/Platform';
  
  import SidebarLink from './Link';
  import Section from './Section';
  import SeeMore from './SeeMore';
  
  const Name = tw.span`truncate`;
  
  const EjectButton = ({ className }: { className?: string }) => (
  	<Button className={clsx('absolute right-[2px] !p-[5px]', className)} variant="subtle">
  		<EjectSimple weight="fill" size={18} className="h-3 w-3 opacity-70" />
  	</Button>
  );
  
  const SidebarIcon = ({ name }: { name: IconName }) => {
  	return <Icon name={name} size={20} className="mr-1" />;
  };
  
  export const EphemeralSection = () => {
  	const [home, setHome] = useState<string | null>(null);
  	const platform = usePlatform();
  	platform.userHomeDir?.().then(setHome);
  
  	const locations = useLibraryQuery(['locations.list']);
  
  	const volumes = useBridgeQuery(['volumes.list']);
  
  	// this will return an array of location ids that are also volumes
  	// { "/Mount/Point": 1, "/Mount/Point2": 2"}
  	type LocationIdsMap = {
  		[key: string]: number;
  	};
  
  	const locationIdsForVolumes = useMemo<LocationIdsMap>(() => {
  		if (!locations.data || !volumes.data) return {};
  
  		const volumePaths = volumes.data.map((volume) => volume.mount_points[0] ?? null);
  
  		const matchedLocations = locations.data.filter((location) =>
  			volumePaths.includes(location.path)
  		);
  
  		const locationIdsMap = matchedLocations.reduce((acc, location) => {
  			if (location.path) {
  				acc[location.path] = location.id;
  			}
  			return acc;
  		}, {} as LocationIdsMap);
  
  		return locationIdsMap;
  	}, [locations.data, volumes.data]);
  
  	const items = [
  		{ type: 'network' },
  		home ? { type: 'home', path: home } : null,
  		...(volumes.data || []).flatMap((volume, volumeIndex) =>
  			volume.mount_points.map((mountPoint, index) =>
  				mountPoint !== home
  					? { type: 'volume', volume, mountPoint, volumeIndex, index }
  					: null
  			)
  		)
  	].filter(Boolean) as Array<{
  		type: string;
  		path?: string;
  		volume?: any;
  		mountPoint?: string;
  		volumeIndex?: number;
  		index?: number;
  	}>;
  
  	return (
  		<>
  			<Section name="Local">
  				<SeeMore
  					items={items}
  					renderItem={(item, index) => {
  						const locationId = locationIdsForVolumes[item.mountPoint ?? ''];
  
  						if (item?.type === 'network') {
  							return (
  								<SidebarLink
  									className="group relative w-full"
  									to={`network/34`}
  									key={index}
  								>
  									<SidebarIcon name="Globe" />
  									<Name>Network</Name>
  								</SidebarLink>
  							);
  						}
  
  						if (item?.type === 'home') {
  							return (
  								<SidebarLink
  									to={`ephemeral/0?path=${item.path}`}
  									className="group relative w-full border border-transparent"
  									key={index}
  								>
  									<SidebarIcon name="Home" />
  									<Name>Home</Name>
  								</SidebarLink>
  							);
  						}
  
  						if (item?.type === 'volume') {
  							const key = `${item.volumeIndex}-${item.index}`;
  							const name =
  								item.mountPoint === '/'
  									? 'Root'
  									: item.index === 0
  									? item.volume.name
  									: item.mountPoint;
  
  							const toPath =
  								locationId !== undefined
  									? `location/${locationId}`
  									: `ephemeral/${key}?path=${item.mountPoint}`;
  
  							return (
  								<SidebarLink
  									to={toPath}
  									key={key}
  									className="group relative w-full border border-transparent"
  								>
  									<SidebarIcon
  										name={
  											item.volume.file_system === 'exfat'
  												? 'SD'
  												: item.volume.name === 'Macintosh HD'
  												? 'HDD'
  												: 'Drive'
  										}
  									/>
  									<Name>{name}</Name>
  									{item.volume.disk_type === 'Removable' && <EjectButton />}
  								</SidebarLink>
  							);
  						}
  
  						return null; // This should never be reached, but is here to satisfy TypeScript
  					}}
  				/>
  			</Section>
  		</>
  	);
  };
  