mirror of
https://github.com/spacedriveapp/spacedrive.git
synced 2026-10-11 12:14:04 -04:00
Vítor VasconcellosandUtku Bakir
03eb27e91d
* Make Prettier and ESLint work together - Resolve conflicts between Prettier and ESLint regarding indentation and Tailwind rules order - Add `.editorconfig` to standardize basic formatting options across tools and editors - Add `.gitattributes` to hide `pnpm-lock.yaml` in `git diff` output - Include EditorConfig in the recommended extensions for VSCode - Replace some instances of `pnpm exec <command>` with `pnpm <command>` - Remove superfluous Tauri config for Linux * Revert Prettier changes (it was working correctly before) - Update ESLint to read Tailwind config from absolute path - Remove redundant Prettier dependency from subprojects - Specify the source folder for the lint script in subprojects * use mobile's tailwind config with eslint * pnpm format + pnpm lint:fix --------- Co-authored-by: Utku Bakir <74243531+utkubakir@users.noreply.github.com>
83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
import clsx from 'clsx';
|
|
import { ArrowsClockwise } from 'phosphor-react';
|
|
import { Link, NavLink } from 'react-router-dom';
|
|
import { arraysEqual, useLibraryQuery, useOnlineLocations } from '@sd/client';
|
|
import { Folder } from '@sd/ui';
|
|
import { AddLocationButton } from '~/app/$libraryId/settings/library/locations/AddLocationButton';
|
|
import { SubtleButton } from '~/components/SubtleButton';
|
|
import Icon from './Icon';
|
|
import SidebarLink from './Link';
|
|
import Section from './Section';
|
|
|
|
export const LibrarySection = () => {
|
|
const locations = useLibraryQuery(['locations.list'], { keepPreviousData: true });
|
|
const tags = useLibraryQuery(['tags.list'], { keepPreviousData: true });
|
|
const onlineLocations = useOnlineLocations();
|
|
|
|
return (
|
|
<>
|
|
<Section
|
|
name="Locations"
|
|
actionArea={
|
|
<Link to="settings/library/locations">
|
|
<SubtleButton />
|
|
</Link>
|
|
}
|
|
>
|
|
{locations.data?.map((location) => {
|
|
const online = onlineLocations?.some((l) => arraysEqual(location.pub_id, l));
|
|
|
|
return (
|
|
<SidebarLink
|
|
className="group relative w-full"
|
|
to={`location/${location.id}`}
|
|
key={location.id}
|
|
>
|
|
<div className="relative -mt-0.5 mr-1 shrink-0 grow-0">
|
|
<Folder size={18} />
|
|
<div
|
|
className={clsx(
|
|
'absolute right-0 bottom-0.5 h-1.5 w-1.5 rounded-full',
|
|
online ? 'bg-green-500' : 'bg-red-500'
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<span className="truncate">{location.name}</span>
|
|
</SidebarLink>
|
|
);
|
|
})}
|
|
{(locations.data?.length || 0) < 4 && <AddLocationButton className="mt-1" />}
|
|
</Section>
|
|
{!!tags.data?.length && (
|
|
<Section
|
|
name="Tags"
|
|
actionArea={
|
|
<NavLink to="settings/library/tags">
|
|
<SubtleButton />
|
|
</NavLink>
|
|
}
|
|
>
|
|
<div className="mt-1 mb-2">
|
|
{tags.data?.slice(0, 6).map((tag, index) => (
|
|
<SidebarLink key={index} to={`tag/${tag.id}`} className="">
|
|
<div
|
|
className="h-[12px] w-[12px] shrink-0 rounded-full"
|
|
style={{ backgroundColor: tag.color || '#efefef' }}
|
|
/>
|
|
<span className="ml-1.5 truncate text-sm">{tag.name}</span>
|
|
</SidebarLink>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
)}
|
|
<Section name="Debug">
|
|
<SidebarLink to="sync">
|
|
<Icon component={ArrowsClockwise} />
|
|
Sync
|
|
</SidebarLink>
|
|
</Section>
|
|
</>
|
|
);
|
|
};
|