fix icon & run pnpm format and lint fix (#859)

* fix icon & run pnpm format and lint fix

* format

.prettierignore

@@ -17,4 +17,7 @@ apps/desktop/src/index.tsx
 
 # codegen from rspc -- not supposed to look nice
 /packages/client/src/core.ts
-apps/desktop/src/commands.ts
+apps/desktop/src/commands.ts
+
+.next/
+.contentlayer/

apps/landing/postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+};

apps/landing/src/app/api/[...auth]/authjs-adapter-drizzle-mysql/index.ts

@@ -15,11 +15,11 @@
  *
  * @module @next-auth/drizzle-adapter
  */
-import type { DbClient, Schema } from "./schema";
-import { and, eq } from "drizzle-orm";
-import type { Adapter } from "@auth/core/adapters";
+import type { Adapter } from '@auth/core/adapters';
+import { and, eq } from 'drizzle-orm';
 // @ts-expect-error
-import { v4 as uuid } from "uuid";
+import { v4 as uuid } from 'uuid';
+import type { DbClient, Schema } from './schema';
 
 /**
  * ## Setup
@@ -111,167 +111,165 @@ import { v4 as uuid } from "uuid";
  *
  **/
 export function DrizzleAdapterMySQL(
-  client: DbClient,
-  { users, sessions, verificationTokens, accounts }: Schema
+	client: DbClient,
+	{ users, sessions, verificationTokens, accounts }: Schema
 ): Adapter {
-  return {
-    createUser: async (data) => {
-      const id = uuid();
+	return {
+		createUser: async (data) => {
+			const id = uuid();
 
-      await client.insert(users).values({ ...data, id });
+			await client.insert(users).values({ ...data, id });
 
-      return client
-        .select()
-        .from(users)
-        .where(eq(users.id, id))
-        .then((res) => res[0]);
-    },
-    getUser: async (data) => {
-      return (
-        client
-          .select()
-          .from(users)
-          .where(eq(users.id, data))
-          .then((res) => res[0]) ?? null
-      );
-    },
-    getUserByEmail: async (data) => {
-      return (
-        client
-          .select()
-          .from(users)
-          .where(eq(users.email, data))
-          .then((res) => res[0]) ?? null
-      );
-    },
-    createSession: async (data) => {
-      await client.insert(sessions).values(data);
+			return client
+				.select()
+				.from(users)
+				.where(eq(users.id, id))
+				.then((res) => res[0]);
+		},
+		getUser: async (data) => {
+			return (
+				client
+					.select()
+					.from(users)
+					.where(eq(users.id, data))
+					.then((res) => res[0]) ?? null
+			);
+		},
+		getUserByEmail: async (data) => {
+			return (
+				client
+					.select()
+					.from(users)
+					.where(eq(users.email, data))
+					.then((res) => res[0]) ?? null
+			);
+		},
+		createSession: async (data) => {
+			await client.insert(sessions).values(data);
 
-      return client
-        .select()
-        .from(sessions)
-        .where(eq(sessions.sessionToken, data.sessionToken))
-        .then((res) => res[0]);
-    },
-    getSessionAndUser: async (data) => {
-      return (
-        client
-          .select({
-            session: sessions,
-            user: users,
-          })
-          .from(sessions)
-          .where(eq(sessions.sessionToken, data))
-          .innerJoin(users, eq(users.id, sessions.userId))
-          .then((res) => res[0]) ?? null
-      );
-    },
-    updateUser: async (data) => {
-      if (!data.id) {
-        throw new Error("No user id.");
-      }
+			return client
+				.select()
+				.from(sessions)
+				.where(eq(sessions.sessionToken, data.sessionToken))
+				.then((res) => res[0]);
+		},
+		getSessionAndUser: async (data) => {
+			return (
+				client
+					.select({
+						session: sessions,
+						user: users
+					})
+					.from(sessions)
+					.where(eq(sessions.sessionToken, data))
+					.innerJoin(users, eq(users.id, sessions.userId))
+					.then((res) => res[0]) ?? null
+			);
+		},
+		updateUser: async (data) => {
+			if (!data.id) {
+				throw new Error('No user id.');
+			}
 
-      await client.update(users).set(data).where(eq(users.id, data.id));
+			await client.update(users).set(data).where(eq(users.id, data.id));
 
-      return client
-        .select()
-        .from(users)
-        .where(eq(users.id, data.id))
-        .then((res) => res[0]);
-    },
-    updateSession: async (data) => {
-      await client
-        .update(sessions)
-        .set(data)
-        .where(eq(sessions.sessionToken, data.sessionToken));
+			return client
+				.select()
+				.from(users)
+				.where(eq(users.id, data.id))
+				.then((res) => res[0]);
+		},
+		updateSession: async (data) => {
+			await client
+				.update(sessions)
+				.set(data)
+				.where(eq(sessions.sessionToken, data.sessionToken));
 
-      return client
-        .select()
-        .from(sessions)
-        .where(eq(sessions.sessionToken, data.sessionToken))
-        .then((res) => res[0]);
-    },
-    linkAccount: async (rawAccount) => {
-      await client
-        .insert(accounts)
-        .values(rawAccount)
-        .then((res) => res[0]);
-    },
-    getUserByAccount: async (account) => {
-      const user =
-        (await client
-          .select()
-          .from(users)
-          .innerJoin(
-            accounts,
-            and(
-              eq(accounts.providerAccountId, account.providerAccountId),
-              eq(accounts.provider, account.provider)
-            )
-          )
-          .then((res) => res[0])) ?? null;
+			return client
+				.select()
+				.from(sessions)
+				.where(eq(sessions.sessionToken, data.sessionToken))
+				.then((res) => res[0]);
+		},
+		linkAccount: async (rawAccount) => {
+			await client
+				.insert(accounts)
+				.values(rawAccount)
+				.then((res) => res[0]);
+		},
+		getUserByAccount: async (account) => {
+			const user =
+				(await client
+					.select()
+					.from(users)
+					.innerJoin(
+						accounts,
+						and(
+							eq(accounts.providerAccountId, account.providerAccountId),
+							eq(accounts.provider, account.provider)
+						)
+					)
+					.then((res) => res[0])) ?? null;
 
-      return user?.users;
-    },
-    deleteSession: async (sessionToken) => {
-      await client
-        .delete(sessions)
-        .where(eq(sessions.sessionToken, sessionToken));
-    },
-    createVerificationToken: async (token) => {
-      await client.insert(verificationTokens).values(token);
+			return user?.users;
+		},
+		deleteSession: async (sessionToken) => {
+			await client.delete(sessions).where(eq(sessions.sessionToken, sessionToken));
+		},
+		createVerificationToken: async (token) => {
+			await client.insert(verificationTokens).values(token);
 
-      return client
-        .select()
-        .from(verificationTokens)
-        .where(eq(verificationTokens.identifier, token.identifier))
-        .then((res) => res[0]);
-    },
-    useVerificationToken: async (token) => {
-      try {
-        const deletedToken =
-          (await client
-            .select()
-            .from(verificationTokens)
-            .where(
-              and(
-                eq(verificationTokens.identifier, token.identifier),
-                eq(verificationTokens.token, token.token)
-              )
-            )
-            .then((res) => res[0])) ?? null;
+			return client
+				.select()
+				.from(verificationTokens)
+				.where(eq(verificationTokens.identifier, token.identifier))
+				.then((res) => res[0]);
+		},
+		useVerificationToken: async (token) => {
+			try {
+				const deletedToken =
+					(await client
+						.select()
+						.from(verificationTokens)
+						.where(
+							and(
+								eq(verificationTokens.identifier, token.identifier),
+								eq(verificationTokens.token, token.token)
+							)
+						)
+						.then((res) => res[0])) ?? null;
 
-        await client
-          .delete(verificationTokens)
-          .where(
-            and(
-              eq(verificationTokens.identifier, token.identifier),
-              eq(verificationTokens.token, token.token)
-            )
-          );
+				await client
+					.delete(verificationTokens)
+					.where(
+						and(
+							eq(verificationTokens.identifier, token.identifier),
+							eq(verificationTokens.token, token.token)
+						)
+					);
 
-        return deletedToken;
-      } catch (err) {
-        throw new Error("No verification token found.");
-      }
-    },
-    deleteUser: async (id) => {
-      await client
-        .delete(users)
-        .where(eq(users.id, id))
-        .then((res) => res[0]);
-    },
-    unlinkAccount: async (account) => {
-      await client
-        .delete(accounts)
-        .where(
-          and(
-            eq(accounts.providerAccountId, account.providerAccountId),
-            eq(accounts.provider, account.provider)
-          )
-        );
+				return deletedToken;
+			} catch (err) {
+				throw new Error('No verification token found.');
+			}
+		},
+		deleteUser: async (id) => {
+			await client
+				.delete(users)
+				.where(eq(users.id, id))
+				.then((res) => res[0]);
+		},
+		unlinkAccount: async (account) => {
+			await client
+				.delete(accounts)
+				.where(
+					and(
+						eq(accounts.providerAccountId, account.providerAccountId),
+						eq(accounts.provider, account.provider)
+					)
+				);
 
-      return undefined;
-    },
-  };
+			return undefined;
+		}
+	};
 }

docs/company/about/credits.mdx

@@ -13,8 +13,8 @@ Jamie Pine, Brendan Allan, Oscar Beaumont, Ericson Soares, Utku Bakır, Haden Fl
 ## Contributors
 
 <a href="https://github.com/spacedriveapp/spacedrive/graphs/contributors">
-  <img
-    src="https://contrib.rocks/image?repo=spacedriveapp/spacedrive&columns=8&max=40"
-    alt="Avatars of the top contributors the the Spacedrive repository. Follow link for names and data."
-  />
+	<img
+		src="https://contrib.rocks/image?repo=spacedriveapp/spacedrive&columns=8&max=40"
+		alt="Avatars of the top contributors the the Spacedrive repository. Follow link for names and data."
+	/>
 </a>

interface/app/$libraryId/Explorer/OptionsPanel.tsx

@@ -1,10 +1,10 @@
-import { RadixCheckbox, Select, SelectOption, Slider, tw } from '@sd/ui';
 import { z } from 'zod';
+import { RadixCheckbox, Select, SelectOption, Slider, tw } from '@sd/ui';
 import {
 	FilePathSearchOrderingKeys,
+	SortOrder,
 	getExplorerConfigStore,
 	getExplorerStore,
-	SortOrder,
 	useExplorerConfigStore,
 	useExplorerStore
 } from '~/hooks';
@@ -13,13 +13,13 @@ const Heading = tw.div`text-ink-dull text-xs font-semibold`;
 const Subheading = tw.div`text-ink-dull mb-1 text-xs font-medium`;
 
 const sortOptions: Record<FilePathSearchOrderingKeys, string> = {
-	none: 'None',
-	name: 'Name',
-	sizeInBytes: 'Size',
-	dateCreated: 'Date created',
-	dateModified: 'Date modified',
-	dateIndexed: 'Date indexed',
-	"object.dateAccessed": "Date accessed"
+	'none': 'None',
+	'name': 'Name',
+	'sizeInBytes': 'Size',
+	'dateCreated': 'Date created',
+	'dateModified': 'Date modified',
+	'dateIndexed': 'Date indexed',
+	'object.dateAccessed': 'Date accessed'
 };
 
 export default () => {
@@ -78,11 +78,15 @@ export default () => {
 						size="sm"
 						className="w-full"
 						onChange={(value) =>
-							(getExplorerStore().orderByDirection = value as z.infer<typeof SortOrder>)
+							(getExplorerStore().orderByDirection = value as z.infer<
+								typeof SortOrder
+							>)
 						}
 					>
-						{SortOrder.options.map(o => (
-							<SelectOption key={o.value} value={o.value}>{o.value}</SelectOption>
+						{SortOrder.options.map((o) => (
+							<SelectOption key={o.value} value={o.value}>
+								{o.value}
+							</SelectOption>
 						))}
 					</Select>
 				</div>

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

@@ -152,10 +152,10 @@ function Job({ job, clearJob, className, isGroup }: JobProps) {
 						)}
 					/>
 				</div>
-				<div className="flex flex-col w-full">
+				<div className="flex w-full flex-col">
 					<div className="flex items-center">
 						<div className="truncate">
-							<span className="font-semibold truncate">{niceData.name}</span>
+							<span className="truncate font-semibold">{niceData.name}</span>
 							<p className="mb-[5px] mt-[2px] flex gap-1 truncate text-ink-faint">
 								{job.status === 'Queued' && <p>{job.status}:</p>}
 								{niceData.subtext}
@@ -165,7 +165,7 @@ function Job({ job, clearJob, className, isGroup }: JobProps) {
 							<div className="flex gap-1 truncate text-ink-faint"></div>
 						</div>
 						<div className="grow" />
-						<div className="flex flex-row space-x-2 ml-7">
+						<div className="ml-7 flex flex-row space-x-2">
 							{/* {job.status === 'Running' && (
 						<Button size="icon">
 							<Tooltip label="Coming Soon">

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

@@ -51,7 +51,7 @@ function JobGroup({ data, clearJob }: JobGroupProps) {
 					size="icon"
 				>
 					<Tooltip label="Remove">
-						<X className="w-4 h-4 cursor-pointer" />
+						<X className="h-4 w-4 cursor-pointer" />
 					</Tooltip>
 				</Button>
 			)}
@@ -67,10 +67,10 @@ function JobGroup({ data, clearJob }: JobGroupProps) {
 						src={Folder}
 						className={clsx('relative left-[-2px] top-2 z-10 mr-3 h-6 w-6')}
 					/>
-					<div className="flex flex-col w-full">
+					<div className="flex w-full flex-col">
 						<div className="flex items-center">
 							<div className="truncate">
-								<p className="font-semibold truncate">
+								<p className="truncate font-semibold">
 									{allJobsCompleted
 										? `Added location "${
 												data.metadata.init.location.name || ''

interface/app/$libraryId/Layout/Sidebar/LibrarySection.tsx

@@ -2,8 +2,8 @@ import { Laptop } from '@sd/assets/icons';
 import clsx from 'clsx';
 import { Link, NavLink } from 'react-router-dom';
 import { arraysEqual, useBridgeQuery, useLibraryQuery, useOnlineLocations } from '@sd/client';
-import { Folder } from '@sd/ui';
 import { AddLocationButton } from '~/app/$libraryId/settings/library/locations/AddLocationButton';
+import { Folder } from '~/components/Folder';
 import { SubtleButton } from '~/components/SubtleButton';
 import SidebarLink from './Link';
 import Section from './Section';

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

@@ -1,6 +1,6 @@
-import { Tooltip } from '@sd/ui';
 import { ArrowLeft, ArrowRight } from 'phosphor-react';
 import { useNavigate } from 'react-router';
+import { Tooltip } from '@sd/ui';
 import { useSearchStore } from '~/hooks';
 import TopBarButton from './TopBarButton';
 
@@ -13,22 +13,22 @@ export const NavigationButtons = () => {
 		<div data-tauri-drag-region className="flex">
 			<Tooltip label="Navigate back">
 				<TopBarButton
-					rounding='left'
+					rounding="left"
 					// className="text-[14px] text-ink-dull"
 					onClick={() => navigate(-1)}
 					disabled={isFocused || idx === 0}
 				>
-					<ArrowLeft size={14} className='m-[4px]' weight="bold" />
+					<ArrowLeft size={14} className="m-[4px]" weight="bold" />
 				</TopBarButton>
 			</Tooltip>
 			<Tooltip label="Navigate forward">
 				<TopBarButton
-					rounding='right'
+					rounding="right"
 					// className="text-[14px] text-ink-dull"
 					onClick={() => navigate(1)}
 					disabled={isFocused || idx === history.length - 1}
 				>
-					<ArrowRight size={14} className='m-[4px]' weight="bold" />
+					<ArrowRight size={14} className="m-[4px]" weight="bold" />
 				</TopBarButton>
 			</Tooltip>
 		</div>

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

@@ -27,7 +27,7 @@ export default () => {
 
 	const searchPath = useResolvedPath('search');
 
-	const [value, setValue] = useState(searchParams.search ?? "");
+	const [value, setValue] = useState(searchParams.search ?? '');
 
 	const updateParams = useDebouncedCallback((value: string) => {
 		startTransition(() =>

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

@@ -57,10 +57,10 @@ export default ({ options }: TopBarChildrenProps) => {
 							const roundingCondition = individual
 								? 'both'
 								: index === 0
-									? 'left'
-									: index === group.length - 1
-										? 'right'
-										: 'none';
+								? 'left'
+								: index === group.length - 1
+								? 'right'
+								: 'none';
 							return (
 								<div
 									data-tauri-drag-region

interface/app/$libraryId/location/$id.tsx

@@ -8,7 +8,7 @@ import {
 	useLibraryQuery,
 	useRspcLibraryContext
 } from '@sd/client';
-import { Folder } from '@sd/ui';
+import { Folder } from '~/components/Folder';
 import {
 	getExplorerStore,
 	useExplorerStore,
@@ -51,7 +51,7 @@ export const Component = () => {
 			<TopBarPortal
 				left={
 					<>
-						<Folder size={22} className="-mt-[1px] ml-3 mr-2 inline-block" />
+						<Folder size={22} className="ml-3 mr-2 mt-[-1px] inline-block" />
 						<span className="text-sm font-medium">
 							{path ? getLastSectionOfPath(path) : location.data?.name}
 						</span>

interface/app/$libraryId/search.tsx

@@ -3,8 +3,8 @@ import { Suspense, memo, useDeferredValue, useEffect, useMemo } from 'react';
 import { z } from 'zod';
 import { useLibraryQuery } from '@sd/client';
 import {
-	getExplorerStore,
 	SortOrder,
+	getExplorerStore,
 	useExplorerStore,
 	useExplorerTopBarOptions,
 	useZodSearchParams
@@ -17,7 +17,7 @@ import TopBarOptions from './TopBar/TopBarOptions';
 export const SEARCH_PARAMS = z.object({
 	search: z.string().optional(),
 	take: z.coerce.number().optional(),
-	order: z.union([z.object({ name: SortOrder }), z.object({ name: SortOrder })]).optional(),
+	order: z.union([z.object({ name: SortOrder }), z.object({ name: SortOrder })]).optional()
 });
 
 export type SearchArgs = z.infer<typeof SEARCH_PARAMS>;
@@ -30,12 +30,15 @@ const ExplorerStuff = memo((props: { args: SearchArgs }) => {
 	const { search, ...args } = props.args;
 
 	const query = useLibraryQuery(
-		['search.paths', {
-			...args,
-			filter: {
-				search
-			},
-		}],
+		[
+			'search.paths',
+			{
+				...args,
+				filter: {
+					search
+				}
+			}
+		],
 		{
 			suspense: true,
 			enabled: !!search
@@ -80,9 +83,7 @@ const ExplorerStuff = memo((props: { args: SearchArgs }) => {
 						<MagnifyingGlass size={110} className="mb-5 text-ink-faint" opacity={0.3} />
 					)}
 					<p className="text-xs text-ink-faint">
-						{search
-							? `No results found for "${search}"`
-							: 'Search for files...'}
+						{search ? `No results found for "${search}"` : 'Search for files...'}
 					</p>
 				</div>
 			)}

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

@@ -3,7 +3,8 @@ import { Repeat, Trash } from 'phosphor-react';
 import { useState } from 'react';
 import { useNavigate } from 'react-router';
 import { Location, Node, arraysEqual, useLibraryMutation, useOnlineLocations } from '@sd/client';
-import { Button, Card, Folder, Tooltip, dialogManager } from '@sd/ui';
+import { Button, Card, Tooltip, dialogManager } from '@sd/ui';
+import { Folder } from '~/components/Folder';
 import DeleteDialog from './DeleteDialog';
 
 interface Props {

interface/components/Folder.tsx

@@ -1,5 +1,5 @@
-import { ReactComponent as folderWhiteSvg } from '@sd/assets/svgs/folder-white.svg';
-import { ReactComponent as folderSvg } from '@sd/assets/svgs/folder.svg';
+import folderWhiteSvg from '@sd/assets/svgs/folder-white.svg';
+import folderSvg from '@sd/assets/svgs/folder.svg';
 
 interface FolderProps {
 	/**
@@ -21,7 +21,13 @@ interface FolderProps {
 export function Folder(props: FolderProps) {
 	const { size = 24 } = props;
 
-	const Icon = props.white ? folderWhiteSvg : folderSvg;
-
-	return <Icon className={props.className} width={size} height={size} />;
+	return (
+		<img
+			className={props.className}
+			width={size}
+			height={size}
+			src={props.white ? folderWhiteSvg : folderSvg}
+			alt="Folder icon"
+		/>
+	);
 }

interface/hooks/useExplorerStore.tsx

@@ -1,7 +1,7 @@
 import { proxy, useSnapshot } from 'valtio';
+import { z } from 'zod';
 import { ExplorerItem, FilePathSearchOrdering, ObjectSearchOrdering } from '@sd/client';
 import { resetStore } from '@sd/client';
-import { z } from "zod"
 
 type Join<K, P> = K extends string | number
 	? P extends string | number
@@ -26,7 +26,7 @@ export type CutCopyType = 'Cut' | 'Copy';
 export type FilePathSearchOrderingKeys = UnionKeys<FilePathSearchOrdering> | 'none';
 export type ObjectSearchOrderingKyes = UnionKeys<ObjectSearchOrdering> | 'none';
 
-export const SortOrder = z.union([z.literal("Asc"), z.literal("Desc")])
+export const SortOrder = z.union([z.literal('Asc'), z.literal('Desc')]);
 
 const state = {
 	locationId: null as number | null,

interface/hooks/useExplorerTopBarOptions.tsx

@@ -10,11 +10,11 @@ import {
 	SquaresFour,
 	Tag
 } from 'phosphor-react';
+import { useLibraryMutation } from '@sd/client';
 import OptionsPanel from '~/app/$libraryId/Explorer/OptionsPanel';
 import { TOP_BAR_ICON_STYLE, ToolOption } from '~/app/$libraryId/TopBar/TopBarOptions';
 import { KeyManager } from '../app/$libraryId/KeyManager';
 import { getExplorerStore, useExplorerStore } from './useExplorerStore';
-import { useLibraryMutation } from '@sd/client';
 
 export const useExplorerTopBarOptions = () => {
 	const explorerStore = useExplorerStore();
@@ -100,7 +100,7 @@ export const useExplorerTopBarOptions = () => {
 			toolTipLabel: 'Reload',
 			onClick: () => {
 				if (explorerStore.locationId) {
-					reload.mutate({ location_id: explorerStore.locationId, sub_path: '' })
+					reload.mutate({ location_id: explorerStore.locationId, sub_path: '' });
 				}
 			},
 			icon: <ArrowClockwise className={TOP_BAR_ICON_STYLE} />,

packages/ui/src/index.ts

@@ -21,4 +21,3 @@ export * from './Slider';
 export * from './Divider';
 export * from './Shortcut';
 export * from './ProgressBar';
-export * from './Folder';