[ENG-1067] Update phosphor to new package & update sort imports (#1330)

* ianvs > trivago

* @phosphor-icons/react > phosphor-react

.prettierrc.js

@@ -11,16 +11,19 @@ module.exports = {
 	quoteProps: 'consistent',
 	importOrder: [
 		// external packages
-		'^([A-Za-z]|@[^s/])',
+		'<THIRD_PARTY_MODULES>',
 		// spacedrive packages
 		'^@sd/(interface|client|ui)(/.*)?$',
-		// this package
+		// internal packages
+		'^@/',
 		'^~/',
+		'',
 		// relative
-		'^\\.'
+		'^[../]',
+		'^[./]'
 	],
-	importOrderSortSpecifiers: true,
-	importOrderParserPlugins: ['importAssertions', 'typescript', 'jsx'],
-	plugins: ['@trivago/prettier-plugin-sort-imports', 'prettier-plugin-tailwindcss'],
-	tailwindConfig: './packages/ui/tailwind.config.js'
+	importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'],
+	importOrderTypeScriptVersion: '4.4.0',
+	tailwindConfig: './packages/ui/tailwind.config.js',
+	plugins: ['@ianvs/prettier-plugin-sort-imports', 'prettier-plugin-tailwindcss']
 };

.vscode/settings.json

@@ -26,7 +26,7 @@
 		"tailwindcss",
 		"tanstack",
 		"titlebar",
-		"trivago",
+		"ianvs",
 		"tsparticles",
 		"unlisten",
 		"upsert",

apps/desktop/src/App.tsx

@@ -14,11 +14,13 @@ import {
 	OperatingSystem,
 	Platform,
 	PlatformProvider,
-	SpacedriveInterface,
-	routes
+	routes,
+	SpacedriveInterface
 } from '@sd/interface';
 import { getSpacedropState } from '@sd/interface/hooks/useSpacedropState';
+
 import '@sd/ui/style';
+
 import * as commands from './commands';
 
 // TODO: Bring this back once upstream is fixed up.

apps/desktop/vite.config.ts

@@ -1,5 +1,6 @@
 import { sentryVitePlugin } from '@sentry/vite-plugin';
-import { Plugin, defineConfig, loadEnv, mergeConfig } from 'vite';
+import { defineConfig, loadEnv, mergeConfig, Plugin } from 'vite';
+
 import baseConfig from '../../packages/config/vite';
 
 const devtoolsPlugin: Plugin = {

apps/landing/drizzle.config.ts

@@ -1,4 +1,5 @@
 import 'dotenv/config';
+
 import { Config } from 'drizzle-kit';
 
 // TODO: Using t3 env is too damn hard, thanks JS bs

apps/landing/package.json

@@ -11,6 +11,7 @@
 	},
 	"dependencies": {
 		"@aws-sdk/client-ses": "^3.337.0",
+		"@phosphor-icons/react": "^2.0.10",
 		"@planetscale/database": "^1.7.0",
 		"@react-three/drei": "^9.78.1",
 		"@react-three/fiber": "^8.13.4",
@@ -26,7 +27,6 @@
 		"md5": "^2.3.0",
 		"next": "13.4.3",
 		"next-contentlayer": "^0.3.2",
-		"phosphor-react": "^1.4.1",
 		"react": "18.2.0",
 		"react-burger-menu": "^3.0.9",
 		"react-dom": "^18.2.0",

apps/landing/src/app/api/feedback/route.ts

@@ -1,5 +1,6 @@
 import { NextRequest } from 'next/server';
 import { z } from 'zod';
+
 import { env } from '~/env';
 
 export const runtime = 'edge';

apps/landing/src/app/api/releases/[version]/[target]/[arch]/route.ts

@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server';
 import { z } from 'zod';
+
 import { env } from '~/env';
 
 const version = z.union([z.literal('stable'), z.literal('alpha')]);

apps/landing/src/app/api/waitlist/route.ts

@@ -1,5 +1,6 @@
 import type { NextRequest } from 'next/server';
 import { z } from 'zod';
+
 import { sendEmail } from '~/server/aws';
 import { db, eq, waitlistTable } from '~/server/db';
 import { welcomeTemplate } from './welcomeEmail';

apps/landing/src/components/DocsLayout.tsx

@@ -1,8 +1,9 @@
 import Link from 'next/link';
-import { CaretRight, List, X } from 'phosphor-react';
+import { CaretRight, List, X } from '@phosphor-icons/react';
 import { PropsWithChildren, useState } from 'react';
 import { slide as Menu } from 'react-burger-menu';
 import { Button } from '@sd/ui';
+
 import { DocsNavigation } from '~/utils/contentlayer';
 import { toTitleCase } from '~/utils/util';
 import DocsSidebar from './DocsSidebar';

apps/landing/src/components/DocsSidebar.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import Link from 'next/link';
 import { SearchInput } from '@sd/ui';
+
 import { DocsNavigation, iconConfig } from '~/utils/contentlayer';
 import { toTitleCase } from '~/utils/util';
 

apps/landing/src/components/NavBar.tsx

@@ -4,9 +4,10 @@ import clsx from 'clsx';
 import Image from 'next/image';
 import Link from 'next/link';
 import { NextRouter, useRouter } from 'next/router';
-import { Book, Chat, DotsThreeVertical, MapPin, User } from 'phosphor-react';
+import { Book, Chat, DotsThreeVertical, MapPin, User } from '@phosphor-icons/react';
 import { PropsWithChildren, useEffect, useState } from 'react';
 import { Button, Dropdown } from '@sd/ui';
+
 import { positions } from '~/pages/careers';
 import { getWindow } from '~/utils/util';
 

apps/landing/src/components/Space.tsx

@@ -1,7 +1,7 @@
 import { PointMaterial, Points, Trail } from '@react-three/drei';
 import { Canvas, useFrame } from '@react-three/fiber';
 import { inSphere as randomInSphere } from 'maath/random';
-import { type FunctionComponent, useRef, useState } from 'react';
+import { useRef, useState, type FunctionComponent } from 'react';
 import { Color, type Mesh } from 'three';
 
 const Stars = (props: any) => {

apps/landing/src/components/mdx/Notice.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import MarkdownToJsx from 'markdown-to-jsx';
-import { Fire, Info } from 'phosphor-react';
+import { Fire, Info } from '@phosphor-icons/react';
 
 type NoticeProps = {
 	title?: string;

apps/landing/src/components/mdx/index.tsx

@@ -1,4 +1,5 @@
 import NextImage, { ImageProps } from 'next/image';
+
 import Notice from './Notice';
 
 const Image = (props: ImageProps) => <NextImage {...props} />;

apps/landing/src/pages/404.tsx

@@ -1,7 +1,8 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import { SmileyXEyes } from 'phosphor-react';
+import { SmileyXEyes } from '@phosphor-icons/react';
 import { Button } from '@sd/ui';
+
 import Markdown from '~/components/Markdown';
 import PageWrapper from '~/components/PageWrapper';
 

apps/landing/src/pages/_app.tsx

@@ -1,6 +1,7 @@
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import Script from 'next/script';
+
 import '@sd/ui/style';
 import '~/styles/prism.css';
 import '~/styles/style.scss';

apps/landing/src/pages/blog/[slug].tsx

@@ -3,9 +3,10 @@ import { InferGetStaticPropsType } from 'next';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 import Head from 'next/head';
 import Image from 'next/image';
+
 import { BlogTag } from '~/components/BlogTag';
-import PageWrapper from '~/components/PageWrapper';
 import { BlogMDXComponents } from '~/components/mdx';
+import PageWrapper from '~/components/PageWrapper';
 
 export async function getStaticPaths() {
 	const paths = allPosts.map((post) => post.url);

apps/landing/src/pages/blog/index.tsx

@@ -3,6 +3,7 @@ import { InferGetStaticPropsType } from 'next';
 import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
+
 import { BlogTag } from '~/components/BlogTag';
 import PageWrapper from '~/components/PageWrapper';
 

apps/landing/src/pages/careers.tsx

@@ -9,9 +9,10 @@ import {
 	Smiley,
 	Star,
 	TrendUp
-} from 'phosphor-react';
+} from '@phosphor-icons/react';
 import { useRef } from 'react';
 import { Button } from '@sd/ui';
+
 import PageWrapper from '~/components/PageWrapper';
 
 interface PositionPosting {

apps/landing/src/pages/docs/[...slug].tsx

@@ -1,15 +1,16 @@
-import { Github } from '@sd/assets/svgs/brands';
 import { allDocs } from '@contentlayer/generated';
+import { Github } from '@sd/assets/svgs/brands';
 import { InferGetStaticPropsType } from 'next';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 import Head from 'next/head';
 import Link from 'next/link';
-import { CaretRight } from 'phosphor-react';
+import { CaretRight } from '@phosphor-icons/react';
 import { PropsWithChildren } from 'react';
+
 import DocsLayout from '~/components/DocsLayout';
 import Markdown from '~/components/Markdown';
-import PageWrapper from '~/components/PageWrapper';
 import { DocMDXComponents } from '~/components/mdx';
+import PageWrapper from '~/components/PageWrapper';
 import { getDocsNavigation } from '~/utils/contentlayer';
 import { toTitleCase } from '~/utils/util';
 

apps/landing/src/pages/docs/index.tsx

@@ -2,6 +2,7 @@ import { allDocs } from '@contentlayer/generated';
 import { InferGetStaticPropsType } from 'next';
 import Head from 'next/head';
 import Link from 'next/link';
+
 import DocsLayout from '~/components/DocsLayout';
 import Markdown from '~/components/Markdown';
 import PageWrapper from '~/components/PageWrapper';

apps/landing/src/pages/index.tsx

@@ -4,6 +4,7 @@ import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
+
 import AppImage from '~/components/AppImage';
 import HomeCTA from '~/components/HomeCTA';
 import NewBanner from '~/components/NewBanner';

apps/landing/src/pages/roadmap.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import Head from 'next/head';
 import Link from 'next/link';
 import { Fragment } from 'react';
+
 import PageWrapper from '~/components/PageWrapper';
 
 const items = [

apps/landing/src/pages/team.tsx

@@ -1,6 +1,7 @@
 import Head from 'next/head';
 import Link from 'next/link';
-import { ArrowRight } from 'phosphor-react';
+import { ArrowRight } from '@phosphor-icons/react';
+
 import Markdown from '~/components/Markdown';
 import PageWrapper from '~/components/PageWrapper';
 import { TeamMember, TeamMemberProps } from '~/components/TeamMember';

apps/landing/src/server/aws.ts

@@ -1,4 +1,5 @@
-import { SESClient, SendEmailCommand } from '@aws-sdk/client-ses';
+import { SendEmailCommand, SESClient } from '@aws-sdk/client-ses';
+
 import { env } from '~/env';
 
 export const ses = new SESClient({

apps/landing/src/server/db.ts

@@ -1,6 +1,7 @@
 import { connect } from '@planetscale/database';
 import { mysqlTable, serial, timestamp, varchar } from 'drizzle-orm/mysql-core';
 import { drizzle } from 'drizzle-orm/planetscale-serverless';
+
 import { env } from '~/env';
 
 export { and, eq, or, type InferModel } from 'drizzle-orm';

apps/landing/src/utils/contentlayer.ts

@@ -1,5 +1,6 @@
 import { Doc, DocumentTypes } from '@contentlayer/generated';
-import { Circle, Cube, Icon, Sparkle, Star } from 'phosphor-react';
+import { Circle, Cube, Icon, Sparkle, Star } from '@phosphor-icons/react';
+
 import { toTitleCase } from './util';
 
 type DocsCategory = {

apps/mobile/index.js

@@ -1,4 +1,5 @@
 import { registerRootComponent } from 'expo';
+
 import { AppWrapper } from './src/main';
 
 registerRootComponent(AppWrapper);

apps/mobile/src/App.tsx

@@ -18,17 +18,18 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { useSnapshot } from 'valtio';
 import {
 	ClientContextProvider,
+	initPlausible,
 	LibraryContextProvider,
 	NotificationContextProvider,
 	P2PContextProvider,
 	RspcProvider,
-	initPlausible,
 	useClientContext,
 	useInvalidateQuery,
 	usePlausibleEvent,
 	usePlausiblePageViewMonitor,
 	usePlausiblePingMonitor
 } from '@sd/client';
+
 import { GlobalModals } from './components/modal/GlobalModals';
 import { useTheme } from './hooks/useTheme';
 import { changeTwTheme, tw } from './lib/tailwind';

apps/mobile/src/components/animation/ProgressBar.tsx

@@ -1,6 +1,7 @@
 import { MotiView } from 'moti';
 import { memo } from 'react';
 import { View } from 'react-native';
+
 import { tw } from '~/lib/tailwind';
 
 type ProgressBarProps = {

apps/mobile/src/components/animation/layout.tsx

@@ -7,6 +7,7 @@ import Animated, {
 	useSharedValue,
 	withTiming
 } from 'react-native-reanimated';
+
 import Layout from '~/constants/Layout';
 
 type MotiViewProps = PropsWithChildren<ViewProps>;

apps/mobile/src/components/drawer/DrawerContent.tsx

@@ -1,10 +1,11 @@
-import { AppLogo } from '@sd/assets/images';
 import { DrawerContentScrollView } from '@react-navigation/drawer';
 import { DrawerContentComponentProps } from '@react-navigation/drawer/lib/typescript/src/types';
+import { AppLogo } from '@sd/assets/images';
 import { CheckCircle, Gear } from 'phosphor-react-native';
 import { useRef } from 'react';
 import { Image, Platform, Pressable, Text, View } from 'react-native';
 import { JobManagerContextProvider, useLibraryQuery } from '@sd/client';
+
 import Layout from '~/constants/Layout';
 import { tw, twStyle } from '~/lib/tailwind';
 import { getStackNameFromState } from '~/utils/nav';

apps/mobile/src/components/drawer/DrawerLibraryManager.tsx

@@ -5,6 +5,7 @@ import { CaretRight, Gear, Lock, Plus } from 'phosphor-react-native';
 import { useEffect, useRef, useState } from 'react';
 import { Alert, Pressable, Text, View } from 'react-native';
 import { useClientContext } from '@sd/client';
+
 import { tw, twStyle } from '~/lib/tailwind';
 import { currentLibraryStore } from '~/utils/nav';
 import { AnimatedHeight } from '../animation/layout';

apps/mobile/src/components/drawer/DrawerLocations.tsx

@@ -3,6 +3,7 @@ import { useNavigation } from '@react-navigation/native';
 import { useRef } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { useLibraryQuery } from '@sd/client';
+
 import { ModalRef } from '~/components/layout/Modal';
 import { tw, twStyle } from '~/lib/tailwind';
 import FolderIcon from '../icons/FolderIcon';

apps/mobile/src/components/drawer/DrawerTags.tsx

@@ -3,6 +3,7 @@ import { useNavigation } from '@react-navigation/native';
 import { useRef } from 'react';
 import { ColorValue, Pressable, Text, View } from 'react-native';
 import { useLibraryQuery } from '@sd/client';
+
 import { ModalRef } from '~/components/layout/Modal';
 import { tw, twStyle } from '~/lib/tailwind';
 import CollapsibleView from '../layout/CollapsibleView';

apps/mobile/src/components/explorer/Explorer.tsx

@@ -1,9 +1,10 @@
-import { FlashList } from '@shopify/flash-list';
 import { useNavigation } from '@react-navigation/native';
+import { FlashList } from '@shopify/flash-list';
 import { Rows, SquaresFour } from 'phosphor-react-native';
 import { useState } from 'react';
 import { Pressable, View } from 'react-native';
-import { type ExplorerItem, isPath } from '@sd/client';
+import { isPath, type ExplorerItem } from '@sd/client';
+
 import SortByMenu from '~/components/menu/SortByMenu';
 import Layout from '~/constants/Layout';
 import { tw } from '~/lib/tailwind';

apps/mobile/src/components/explorer/FileItem.tsx

@@ -1,5 +1,6 @@
 import { Text, View } from 'react-native';
 import { ExplorerItem, getItemFilePath } from '@sd/client';
+
 import Layout from '~/constants/Layout';
 import { tw, twStyle } from '~/lib/tailwind';
 import { getExplorerStore } from '~/stores/explorerStore';

apps/mobile/src/components/explorer/FileRow.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import { ExplorerItem, getItemFilePath } from '@sd/client';
+
 import { tw, twStyle } from '~/lib/tailwind';
 import { getExplorerStore } from '~/stores/explorerStore';
 import FileThumb from './FileThumb';

apps/mobile/src/components/explorer/FileThumb.tsx

@@ -1,14 +1,15 @@
 import { getIcon } from '@sd/assets/util';
-import { type PropsWithChildren, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useState, type PropsWithChildren } from 'react';
 import { Image, View } from 'react-native';
 import { DocumentDirectoryPath } from 'react-native-fs';
 import {
-	type ExplorerItem,
 	getExplorerItemData,
 	getItemFilePath,
 	getItemLocation,
-	isDarkTheme
+	isDarkTheme,
+	type ExplorerItem
 } from '@sd/client';
+
 import { flattenThumbnailKey, useExplorerStore } from '~/stores/explorerStore';
 import { tw } from '../../lib/tailwind';
 

apps/mobile/src/components/explorer/sections/InfoTagPills.tsx

@@ -8,6 +8,7 @@ import {
 	isPath,
 	useLibraryQuery
 } from '@sd/client';
+
 import { InfoPill, PlaceholderPill } from '~/components/primitive/InfoPill';
 import { tw, twStyle } from '~/lib/tailwind';
 

apps/mobile/src/components/form/ColorPicker.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import WheelColorPicker from 'react-native-wheel-color-picker';
+
 import { tw } from '~/lib/tailwind';
 
 type ColorPickerProps = {

apps/mobile/src/components/form/Input.tsx

@@ -1,8 +1,9 @@
 import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { Eye, EyeSlash } from 'phosphor-react-native';
 import { useState } from 'react';
 import { Pressable, TextInputProps as RNTextInputProps, TextInput, View } from 'react-native';
+
 import { tw, twStyle } from '~/lib/tailwind';
 
 const input = cva(['rounded-md border text-sm leading-tight shadow-sm'], {

apps/mobile/src/components/form/Switch.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import { Switch as RNSwitch, SwitchProps, Text, View } from 'react-native';
+
 import { tw } from '~/lib/tailwind';
 
 export const Switch: FC<SwitchProps> = ({ ...props }) => {

apps/mobile/src/components/header/Header.tsx

@@ -5,6 +5,7 @@ import { MotiView } from 'moti';
 import { List } from 'phosphor-react-native';
 import { Pressable, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
 import { tw, twStyle } from '~/lib/tailwind';
 
 // Default header with search bar and button to open drawer

apps/mobile/src/components/job/Job.tsx

@@ -11,6 +11,7 @@ import {
 import { memo } from 'react';
 import { View, ViewStyle } from 'react-native';
 import { JobProgressEvent, JobReport, useJobInfo } from '@sd/client';
+
 import { tw } from '~/lib/tailwind';
 import { ProgressBar } from '../animation/ProgressBar';
 import JobContainer from './JobContainer';

apps/mobile/src/components/job/JobContainer.tsx

@@ -2,6 +2,7 @@ import { Icon } from 'phosphor-react-native';
 import { Fragment } from 'react';
 import { Image, Text, View, ViewStyle } from 'react-native';
 import { TextItems } from '@sd/client';
+
 import { styled, tw, twStyle } from '~/lib/tailwind';
 
 type JobContainerProps = {

apps/mobile/src/components/job/JobGroup.tsx

@@ -5,17 +5,18 @@ import { useMemo, useState } from 'react';
 import { Animated, Pressable, View } from 'react-native';
 import { Swipeable } from 'react-native-gesture-handler';
 import {
+	getJobNiceActionName,
+	getTotalTasks,
 	JobGroup,
 	JobProgressEvent,
 	JobReport,
-	getJobNiceActionName,
-	getTotalTasks,
 	useLibraryMutation,
 	useTotalElapsedTimeText
 } from '@sd/client';
+
 import { tw } from '~/lib/tailwind';
-import { ProgressBar } from '../animation/ProgressBar';
 import { AnimatedHeight } from '../animation/layout';
+import { ProgressBar } from '../animation/ProgressBar';
 import { Button } from '../primitive/Button';
 import Job from './Job';
 import JobContainer from './JobContainer';

apps/mobile/src/components/key/PasswordMeter.tsx

@@ -1,5 +1,6 @@
 import { Text, View, ViewStyle } from 'react-native';
 import { getPasswordStrength } from '@sd/client';
+
 import { tw, twStyle } from '~/lib/tailwind';
 
 // NOTE: Lazy load this component.

apps/mobile/src/components/layout/Card.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, ViewProps } from 'react-native';
+
 import { twStyle } from '~/lib/tailwind';
 
 type CardProps = {

apps/mobile/src/components/layout/CollapsibleView.tsx

@@ -2,6 +2,7 @@ import { MotiView } from 'moti';
 import { CaretRight } from 'phosphor-react-native';
 import { PropsWithChildren, useReducer } from 'react';
 import { Pressable, StyleProp, Text, TextStyle, View, ViewStyle } from 'react-native';
+
 import { tw } from '~/lib/tailwind';
 import { AnimatedHeight } from '../animation/layout';
 

apps/mobile/src/components/layout/Modal.tsx

@@ -9,8 +9,9 @@ import {
 	BottomSheetScrollView
 } from '@gorhom/bottom-sheet';
 import { X } from 'phosphor-react-native';
-import { ReactNode, forwardRef } from 'react';
+import { forwardRef, ReactNode } from 'react';
 import { Pressable, Text, View } from 'react-native';
+
 import useForwardedRef from '~/hooks/useForwardedRef';
 import { tw } from '~/lib/tailwind';
 import { Button } from '../primitive/Button';

apps/mobile/src/components/menu/SortByMenu.tsx

@@ -1,6 +1,7 @@
 import { ArrowDown, ArrowUp } from 'phosphor-react-native';
 import { useState } from 'react';
 import { Text, View } from 'react-native';
+
 import { Menu, MenuItem } from '~/components/primitive/Menu';
 import { tw } from '~/lib/tailwind';
 

apps/mobile/src/components/modal/CreateLibraryModal.tsx

@@ -2,6 +2,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { forwardRef, useState } from 'react';
 import { Text, View } from 'react-native';
 import { useBridgeMutation, usePlausibleEvent } from '@sd/client';
+
 import { ModalInput } from '~/components/form/Input';
 import { Modal, ModalRef } from '~/components/layout/Modal';
 import { Button } from '~/components/primitive/Button';

apps/mobile/src/components/modal/ImportModal.tsx

@@ -2,6 +2,7 @@ import { forwardRef, useCallback } from 'react';
 import { Alert, Text, View } from 'react-native';
 import DocumentPicker from 'react-native-document-picker';
 import { useLibraryMutation } from '@sd/client';
+
 import { Modal, ModalRef } from '~/components/layout/Modal';
 import { Button } from '~/components/primitive/Button';
 import useForwardedRef from '~/hooks/useForwardedRef';

apps/mobile/src/components/modal/confirmModals/DeleteLibraryModal.tsx

@@ -1,6 +1,7 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { useRef } from 'react';
 import { useBridgeMutation, usePlausibleEvent } from '@sd/client';
+
 import { ConfirmModal, ModalRef } from '~/components/layout/Modal';
 
 type Props = {

apps/mobile/src/components/modal/confirmModals/DeleteLocationModal.tsx

@@ -1,5 +1,6 @@
 import { useRef } from 'react';
 import { useLibraryMutation, usePlausibleEvent } from '@sd/client';
+
 import { ConfirmModal, ModalRef } from '~/components/layout/Modal';
 
 type Props = {

apps/mobile/src/components/modal/confirmModals/DeleteTagModal.tsx

@@ -1,5 +1,6 @@
 import { useRef } from 'react';
 import { useLibraryMutation, usePlausibleEvent } from '@sd/client';
+
 import { ConfirmModal, ModalRef } from '~/components/layout/Modal';
 
 type Props = {

apps/mobile/src/components/modal/inspector/ActionsModal.tsx

@@ -13,6 +13,7 @@ import {
 import { PropsWithChildren, useRef } from 'react';
 import { Pressable, Text, View, ViewStyle } from 'react-native';
 import { byteSize, getItemFilePath, getItemObject } from '@sd/client';
+
 import FileThumb from '~/components/explorer/FileThumb';
 import FavoriteButton from '~/components/explorer/sections/FavoriteButton';
 import InfoTagPills from '~/components/explorer/sections/InfoTagPills';

apps/mobile/src/components/modal/inspector/FileInfoModal.tsx

@@ -11,15 +11,16 @@ import {
 import { forwardRef } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import {
-	type ExplorerItem,
 	byteSize,
 	getItemFilePath,
 	getItemObject,
-	useLibraryQuery
+	useLibraryQuery,
+	type ExplorerItem
 } from '@sd/client';
+
 import FileThumb from '~/components/explorer/FileThumb';
 import InfoTagPills from '~/components/explorer/sections/InfoTagPills';
-import { Modal, type ModalRef, ModalScrollView } from '~/components/layout/Modal';
+import { Modal, ModalScrollView, type ModalRef } from '~/components/layout/Modal';
 import { Divider } from '~/components/primitive/Divider';
 import useForwardedRef from '~/hooks/useForwardedRef';
 import { tw } from '~/lib/tailwind';

apps/mobile/src/components/modal/job/JobManagerModal.tsx

@@ -1,6 +1,7 @@
 import { forwardRef, useMemo } from 'react';
 import { FlatList, Text, View } from 'react-native';
 import { useBridgeQuery, useJobProgress } from '@sd/client';
+
 import JobGroup from '~/components/job/JobGroup';
 import { Modal, ModalRef } from '~/components/layout/Modal';
 import { tw } from '~/lib/tailwind';

apps/mobile/src/components/modal/tag/CreateTagModal.tsx

@@ -3,6 +3,7 @@ import { forwardRef, useEffect, useState } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import ColorPicker from 'react-native-wheel-color-picker';
 import { useLibraryMutation, usePlausibleEvent } from '@sd/client';
+
 import { FadeInAnimation } from '~/components/animation/layout';
 import { ModalInput } from '~/components/form/Input';
 import { Modal, ModalRef } from '~/components/layout/Modal';

apps/mobile/src/components/modal/tag/UpdateTagModal.tsx

@@ -2,6 +2,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { forwardRef, useEffect, useState } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { Tag, useLibraryMutation } from '@sd/client';
+
 import { FadeInAnimation } from '~/components/animation/layout';
 import ColorPicker from '~/components/form/ColorPicker';
 import { Input } from '~/components/form/Input';

apps/mobile/src/components/overview/OverviewStats.tsx

@@ -1,7 +1,8 @@
 import { FC, useEffect, useState } from 'react';
 import { ScrollView, Text, View } from 'react-native';
 import RNFS from 'react-native-fs';
-import { Statistics, byteSize, useLibraryQuery } from '@sd/client';
+import { byteSize, Statistics, useLibraryQuery } from '@sd/client';
+
 import useCounter from '~/hooks/useCounter';
 import { tw, twStyle } from '~/lib/tailwind';
 

apps/mobile/src/components/primitive/Button.tsx

@@ -1,7 +1,8 @@
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva, VariantProps } from 'class-variance-authority';
 import { MotiPressable, MotiPressableProps } from 'moti/interactions';
 import { FC, useMemo } from 'react';
 import { Pressable, PressableProps, View, ViewProps } from 'react-native';
+
 import { twStyle } from '~/lib/tailwind';
 
 const button = cva(['items-center justify-center rounded-md border shadow-sm'], {

apps/mobile/src/components/primitive/Divider.tsx

@@ -1,4 +1,5 @@
 import { View } from 'react-native';
+
 import { styled } from '~/lib/tailwind';
 
 export const Divider = styled(View, 'bg-app-line my-1 h-[1px] w-full');

apps/mobile/src/components/primitive/InfoPill.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Text, TextStyle, View, ViewStyle } from 'react-native';
+
 import { twStyle } from '~/lib/tailwind';
 
 type Props = {

apps/mobile/src/components/primitive/Menu.tsx

@@ -8,6 +8,7 @@ import {
 	Menu as PMenu,
 	renderers
 } from 'react-native-popup-menu';
+
 import { tw } from '~/lib/tailwind';
 
 type MenuProps = {

apps/mobile/src/components/settings/SettingsContainer.tsx

@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { Text, View } from 'react-native';
+
 import { styled, tw } from '~/lib/tailwind';
 
 type SettingsContainerProps = PropsWithChildren<{

apps/mobile/src/components/settings/SettingsItem.tsx

@@ -1,5 +1,6 @@
 import { CaretRight, Icon } from 'phosphor-react-native';
 import { Pressable, Text, View, ViewStyle } from 'react-native';
+
 import { tw, twStyle } from '~/lib/tailwind';
 
 type SettingsItemProps = {

apps/mobile/src/hooks/useTheme.ts

@@ -3,6 +3,7 @@ import { Appearance, NativeEventSubscription } from 'react-native';
 import { useDeviceContext } from 'twrnc';
 import { subscribe } from 'valtio';
 import { getThemeStore } from '@sd/client';
+
 import { changeTwTheme, tw } from '~/lib/tailwind';
 
 export function useTheme() {

apps/mobile/src/lib/tailwind.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentType, ElementType, createElement, forwardRef } from 'react';
+import { Component, ComponentType, createElement, ElementType, forwardRef } from 'react';
 import { create } from 'twrnc';
 import { Themes } from '@sd/client';
 

apps/mobile/src/main.tsx

@@ -1,9 +1,11 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
+
 import 'event-target-polyfill';
+
 import * as SplashScreen from 'expo-splash-screen';
-import { Suspense, lazy } from 'react';
-import { Platform } from 'react-native';
-import { Dimensions } from 'react-native';
+import { lazy, Suspense } from 'react';
+import { Dimensions, Platform } from 'react-native';
+
 import { reactNativeLink } from './lib/rspcReactNativeTransport';
 
 // Enable the splash screen

apps/mobile/src/navigation/DrawerNavigator.tsx

@@ -1,6 +1,7 @@
-import { DrawerScreenProps, createDrawerNavigator } from '@react-navigation/drawer';
+import { createDrawerNavigator, DrawerScreenProps } from '@react-navigation/drawer';
 import { CompositeScreenProps, NavigatorScreenParams } from '@react-navigation/native';
 import { StackScreenProps } from '@react-navigation/stack';
+
 import DrawerContent from '~/components/drawer/DrawerContent';
 import { tw } from '~/lib/tailwind';
 import type { RootStackParamList } from '.';

apps/mobile/src/navigation/LinkingConfiguration.ts

@@ -1,5 +1,6 @@
 import { LinkingOptions } from '@react-navigation/native';
 import * as Linking from 'expo-linking';
+
 import { RootStackParamList } from '.';
 
 /**

apps/mobile/src/navigation/OnboardingNavigator.tsx

@@ -1,9 +1,10 @@
-import { StackScreenProps, createStackNavigator } from '@react-navigation/stack';
+import { createStackNavigator, StackScreenProps } from '@react-navigation/stack';
+
+import { OnboardingContext, useContextValue } from '~/screens/onboarding/context';
 import CreatingLibraryScreen from '~/screens/onboarding/CreatingLibrary';
 import GetStartedScreen from '~/screens/onboarding/GetStarted';
 import NewLibraryScreen from '~/screens/onboarding/NewLibrary';
 import PrivacyScreen from '~/screens/onboarding/Privacy';
-import { OnboardingContext, useContextValue } from '~/screens/onboarding/context';
 
 const OnboardingStack = createStackNavigator<OnboardingStackParamList>();
 

apps/mobile/src/navigation/SettingsNavigator.tsx

@@ -1,6 +1,6 @@
-import { StackScreenProps, createStackNavigator } from '@react-navigation/stack';
+import { createStackNavigator, StackScreenProps } from '@react-navigation/stack';
+
 import { tw } from '~/lib/tailwind';
-import SettingsScreen from '~/screens/settings/Settings';
 import AppearanceSettingsScreen from '~/screens/settings/client/AppearanceSettings';
 import ExtensionsSettingsScreen from '~/screens/settings/client/ExtensionsSettings';
 import GeneralSettingsScreen from '~/screens/settings/client/GeneralSettings';
@@ -15,6 +15,7 @@ import LibraryGeneralSettingsScreen from '~/screens/settings/library/LibraryGene
 import LocationSettingsScreen from '~/screens/settings/library/LocationSettings';
 import NodesSettingsScreen from '~/screens/settings/library/NodesSettings';
 import TagsSettingsScreen from '~/screens/settings/library/TagsSettings';
+import SettingsScreen from '~/screens/settings/Settings';
 
 const SettingsStack = createStackNavigator<SettingsStackParamList>();
 

apps/mobile/src/navigation/SharedScreens.tsx

@@ -4,6 +4,7 @@ import {
 	StackNavigationOptions,
 	StackScreenProps
 } from '@react-navigation/stack';
+
 import LocationScreen from '~/screens/Location';
 import TagScreen from '~/screens/Tag';
 

apps/mobile/src/navigation/TabNavigator.tsx

@@ -1,6 +1,7 @@
 import { BottomTabScreenProps, createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { CompositeScreenProps, NavigatorScreenParams } from '@react-navigation/native';
 import { Broadcast, CirclesFour, Planet } from 'phosphor-react-native';
+
 import { tw } from '~/lib/tailwind';
 import type { HomeDrawerScreenProps } from './DrawerNavigator';
 import OverviewStack, { OverviewStackParamList } from './tabs/OverviewStack';

apps/mobile/src/navigation/index.tsx

@@ -1,5 +1,6 @@
 import { NavigatorScreenParams } from '@react-navigation/native';
-import { StackScreenProps, createStackNavigator } from '@react-navigation/stack';
+import { createStackNavigator, StackScreenProps } from '@react-navigation/stack';
+
 import { tw } from '~/lib/tailwind';
 import NotFoundScreen from '~/screens/NotFound';
 import SearchScreen from '~/screens/Search';

apps/mobile/src/navigation/tabs/OverviewStack.tsx

@@ -1,5 +1,6 @@
 import { CompositeScreenProps } from '@react-navigation/native';
-import { StackScreenProps, createStackNavigator } from '@react-navigation/stack';
+import { createStackNavigator, StackScreenProps } from '@react-navigation/stack';
+
 import Header from '~/components/header/Header';
 import { tw } from '~/lib/tailwind';
 import OverviewScreen from '../../screens/Overview';

apps/mobile/src/navigation/tabs/SpacedropStack.tsx

@@ -1,5 +1,6 @@
 import { CompositeScreenProps } from '@react-navigation/native';
-import { StackScreenProps, createStackNavigator } from '@react-navigation/stack';
+import { createStackNavigator, StackScreenProps } from '@react-navigation/stack';
+
 import Header from '~/components/header/Header';
 import { tw } from '~/lib/tailwind';
 import SpacedropScreen from '~/screens/Spacedrop';

apps/mobile/src/navigation/tabs/SpacesStack.tsx

@@ -1,5 +1,6 @@
 import { CompositeScreenProps } from '@react-navigation/native';
-import { StackScreenProps, createStackNavigator } from '@react-navigation/stack';
+import { createStackNavigator, StackScreenProps } from '@react-navigation/stack';
+
 import Header from '~/components/header/Header';
 import { tw } from '~/lib/tailwind';
 import SpacesScreen from '../../screens/Spaces';

apps/mobile/src/screens/Location.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useLibraryQuery } from '@sd/client';
+
 import Explorer from '~/components/explorer/Explorer';
 import { SharedScreenProps } from '~/navigation/SharedScreens';
 import { getExplorerStore } from '~/stores/explorerStore';

apps/mobile/src/screens/NotFound.tsx

@@ -1,4 +1,5 @@
 import { Text, TouchableOpacity, View } from 'react-native';
+
 import { tw } from '~/lib/tailwind';
 import { RootStackScreenProps } from '~/navigation';
 

apps/mobile/src/screens/Overview.tsx

@@ -1,4 +1,5 @@
 import { View } from 'react-native';
+
 import VirtualizedListWrapper from '~/components/layout/VirtualizedListWrapper';
 import OverviewStats from '~/components/overview/OverviewStats';
 import { tw } from '~/lib/tailwind';

apps/mobile/src/screens/Search.tsx

@@ -3,6 +3,7 @@ import { Suspense, useDeferredValue, useMemo, useState } from 'react';
 import { ActivityIndicator, Pressable, Text, TextInput, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { getExplorerItemData, useLibraryQuery } from '@sd/client';
+
 import Explorer from '~/components/explorer/Explorer';
 import { tw, twStyle } from '~/lib/tailwind';
 import { RootStackScreenProps } from '~/navigation';

apps/mobile/src/screens/Spacedrop.tsx

@@ -1,7 +1,8 @@
-import { GoogleDrive, Mega, iCloud } from '@sd/assets/images';
+import { GoogleDrive, iCloud, Mega } from '@sd/assets/images';
 import { DeviceMobile, Icon, Laptop, User } from 'phosphor-react-native';
 import { Alert, Image, ImageSourcePropType, Pressable, ScrollView, Text, View } from 'react-native';
 import { Polygon, Svg } from 'react-native-svg';
+
 import { InfoPill } from '~/components/primitive/InfoPill';
 import { tw, twStyle } from '~/lib/tailwind';
 import { SpacedropStackScreenProps } from '~/navigation/tabs/SpacedropStack';

apps/mobile/src/screens/Spaces.tsx

@@ -1,4 +1,5 @@
 import { Text, View } from 'react-native';
+
 import { tw } from '~/lib/tailwind';
 import { SpacesStackScreenProps } from '~/navigation/tabs/SpacesStack';
 

apps/mobile/src/screens/Tag.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useLibraryQuery } from '@sd/client';
+
 import Explorer from '~/components/explorer/Explorer';
 import { SharedScreenProps } from '~/navigation/SharedScreens';
 

apps/mobile/src/screens/onboarding/CreatingLibrary.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Text } from 'react-native';
+
 import { PulseAnimation } from '~/components/animation/lottie';
 import { tw } from '~/lib/tailwind';
 import { OnboardingContainer, OnboardingDescription, OnboardingTitle } from './GetStarted';

apps/mobile/src/screens/onboarding/GetStarted.tsx

@@ -1,10 +1,11 @@
-import { AppLogo, BloomOne } from '@sd/assets/images';
 import { useNavigation, useRoute } from '@react-navigation/native';
+import { AppLogo, BloomOne } from '@sd/assets/images';
 import { MotiView } from 'moti';
 import { CaretLeft } from 'phosphor-react-native';
 import { Image, KeyboardAvoidingView, Platform, Pressable, Text, View } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
 import { FadeInUpAnimation, LogoAnimation } from '~/components/animation/layout';
 import { AnimatedButton } from '~/components/primitive/Button';
 import { styled, tw, twStyle } from '~/lib/tailwind';

apps/mobile/src/screens/onboarding/NewLibrary.tsx

@@ -1,12 +1,13 @@
 import { Database } from '@sd/assets/icons';
 import { Controller } from 'react-hook-form';
 import { Alert, Image, Text, View } from 'react-native';
+
 import { Input } from '~/components/form/Input';
 import { Button } from '~/components/primitive/Button';
 import { tw } from '~/lib/tailwind';
 import { OnboardingStackScreenProps } from '~/navigation/OnboardingNavigator';
-import { OnboardingContainer, OnboardingDescription, OnboardingTitle } from './GetStarted';
 import { useOnboardingContext } from './context';
+import { OnboardingContainer, OnboardingDescription, OnboardingTitle } from './GetStarted';
 
 const NewLibraryScreen = ({ navigation }: OnboardingStackScreenProps<'NewLibrary'>) => {
 	const form = useOnboardingContext().forms.useForm('NewLibrary');

apps/mobile/src/screens/onboarding/Privacy.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { Controller } from 'react-hook-form';
 import { Pressable, Text, View, ViewStyle } from 'react-native';
+
 import { Button } from '~/components/primitive/Button';
 import { tw, twStyle } from '~/lib/tailwind';
 import { OnboardingStackScreenProps } from '~/navigation/OnboardingNavigator';
-import { OnboardingContainer, OnboardingDescription, OnboardingTitle } from './GetStarted';
 import { useOnboardingContext } from './context';
+import { OnboardingContainer, OnboardingDescription, OnboardingTitle } from './GetStarted';
 
 type RadioButtonProps = {
 	title: string;

apps/mobile/src/screens/onboarding/context.tsx

@@ -13,6 +13,7 @@ import {
 	useOnboardingStore,
 	usePlausibleEvent
 } from '@sd/client';
+
 import { OnboardingStackScreenProps } from '~/navigation/OnboardingNavigator';
 import { currentLibraryStore } from '~/utils/nav';
 

apps/mobile/src/screens/settings/Settings.tsx

@@ -15,6 +15,7 @@ import {
 import React from 'react';
 import { SectionList, Text, TouchableWithoutFeedback, View } from 'react-native';
 import { DebugState, useDebugState, useDebugStateEnabler } from '@sd/client';
+
 import { SettingsItem, SettingsItemDivider } from '~/components/settings/SettingsItem';
 import { tw, twStyle } from '~/lib/tailwind';
 import { SettingsStackParamList, SettingsStackScreenProps } from '~/navigation/SettingsNavigator';

apps/mobile/src/screens/settings/client/AppearanceSettings.tsx

@@ -2,6 +2,7 @@ import { CheckCircle } from 'phosphor-react-native';
 import React, { useState } from 'react';
 import { ColorValue, Pressable, ScrollView, Text, View, ViewStyle } from 'react-native';
 import { Themes, useThemeStore } from '@sd/client';
+
 import { SettingsTitle } from '~/components/settings/SettingsContainer';
 import Colors from '~/constants/style/Colors';
 import { tw, twStyle } from '~/lib/tailwind';

apps/mobile/src/screens/settings/client/ExtensionsSettings.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Text, View } from 'react-native';
+
 import { tw } from '~/lib/tailwind';
 import { SettingsStackScreenProps } from '~/navigation/SettingsNavigator';
 

apps/mobile/src/screens/settings/client/GeneralSettings.tsx

@@ -1,5 +1,6 @@
 import { Text, View } from 'react-native';
 import { useBridgeQuery, useDebugState } from '@sd/client';
+
 import { Input } from '~/components/form/Input';
 import Card from '~/components/layout/Card';
 import { Divider } from '~/components/primitive/Divider';

apps/mobile/src/screens/settings/client/LibrarySettings.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useRef } from 'react';
 import { Animated, FlatList, Text, View } from 'react-native';
 import { Swipeable } from 'react-native-gesture-handler';
 import { LibraryConfigWrapped, useBridgeQuery } from '@sd/client';
+
 import { ModalRef } from '~/components/layout/Modal';
 import DeleteLibraryModal from '~/components/modal/confirmModals/DeleteLibraryModal';
 import { AnimatedButton, FakeButton } from '~/components/primitive/Button';