Change docs and CI scripts to use pnpm tauri command (#1421)

* Change docs and CI scripts to use `pnpm tauri` command
 - Fix documentation and some scripts to use the new tauri subcommand following https://github.com/spacedriveapp/spacedrive/pull/1411 changes
 - Format/Lint some files

* Document new envvar to lauch devtools alongside the desktop app

.github/actions/setup-pnpm/action.yml

@@ -27,7 +27,7 @@ runs:
     - name: Install pnpm deps
       shell: ${{ runner.os == 'Windows' && 'powershell' || 'bash' }}
       env:
-          NODE_ENV: debug
-          GITHUB_TOKEN: ${{ inputs.token }}
-          IGNORE_POSTINSTALL: ${{ inputs.ignorePostInstall }}
+        NODE_ENV: debug
+        GITHUB_TOKEN: ${{ inputs.token }}
+        IGNORE_POSTINSTALL: ${{ inputs.ignorePostInstall }}
       run: pnpm i --frozen-lockfile

.github/workflows/release.yml

@@ -95,7 +95,7 @@ jobs:
 
       - name: Build
         run: |
-          pnpm desktop build --ci -v --target ${{ matrix.settings.target }} --bundles ${{ matrix.settings.bundles }}
+          pnpm tauri build --ci -v --target ${{ matrix.settings.target }} --bundles ${{ matrix.settings.bundles }}
         env:
           TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
           TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}

CONTRIBUTING.md

@@ -48,10 +48,16 @@ To make changes locally, follow these steps:
 
 To quickly run only the desktop app after `prep`, you can use:
 
-- `pnpm desktop dev`
+- `pnpm tauri dev`
 
-  If necessary, react-devtools can be launched using `pnpm dlx react-devtools`.
-  However, it must be executed before starting the desktop app for it to connect.
+  If necessary, the webview devtools can be opened automatically by passing the following environment variable before starting the desktop app:
+
+	- \[Bash]: `export SD_DEVTOOLS=1`
+
+	- \[Powershell]: `$env:SD_DEVTOOLS=1`
+
+	Also, the react-devtools can be launched using `pnpm dlx react-devtools`.
+  However, it must be executed before starting the desktop app for it qto connect.
 
 To run the web app:
 

docs/developers/prerequisites/environment-setup.mdx

@@ -43,7 +43,7 @@ This project uses [Cargo](https://doc.rust-lang.org/cargo/getting-started/instal
 
 ## Running apps
 
-- **Desktop:** `pnpm desktop dev`
+- **Desktop:** `pnpm tauri dev`
 - **Landing:** `pnpm landing dev`
 - **Server:** `DATA_DIR=/path/to/library cargo run -p sdcore`
 - **Webapp:** `pnpm web dev`

package.json

@@ -22,7 +22,7 @@
 		"storybook": "pnpm --filter @sd/storybook -- ",
 		"prisma": "cd core && cargo prisma",
 		"dev:web": "turbo run dev --filter @sd/web --filter @sd/server",
-		"bootstrap:desktop": "cargo clean && ./scripts/setup.sh && pnpm i && pnpm prep && pnpm desktop dev",
+		"bootstrap:desktop": "cargo clean && ./scripts/setup.sh && pnpm i && pnpm prep && pnpm tauri dev",
 		"codegen": "cargo test -p sd-core api::tests::test_and_export_rspc_bindings -- --exact",
 		"typecheck": "pnpm -r typecheck",
 		"lint": "turbo run lint",

packages/client/src/hooks/useExplorerLayoutStore.ts

@@ -1,9 +1,10 @@
-import { valtioPersist } from "../lib";
 import { useSnapshot } from 'valtio';
 
+import { valtioPersist } from '../lib';
+
 const explorerLayoutStore = valtioPersist('sd-explorer-layout', {
-	showPathBar: true,
-})
+	showPathBar: true
+});
 
 export function useExplorerLayoutStore() {
 	return useSnapshot(explorerLayoutStore);

packages/ui/src/Button.tsx

@@ -55,7 +55,7 @@ export const styles = cva(
 					'border-app-line hover:border-app-line focus:ring-1 focus:ring-accent'
 				],
 				accent: [
-					'bg-accent border-accent border text-white shadow-md shadow-app-shade/10 hover:bg-accent-faint focus:outline-none',
+					'border border-accent bg-accent text-white shadow-md shadow-app-shade/10 hover:bg-accent-faint focus:outline-none',
 					'focus:ring-1 focus:ring-accent focus:ring-offset-2 focus:ring-offset-app-selected'
 				],
 				colored: ['text-white shadow-sm hover:bg-opacity-90 active:bg-opacity-100'],

packages/ui/src/ContextMenu.tsx

@@ -86,7 +86,7 @@ const SubMenu = ({
 
 const contextMenuItemStyles = cva(
 	[
-		'flex min-h-[26px] max-h-fit items-center space-x-2 overflow-hidden rounded px-2',
+		'flex max-h-fit min-h-[26px] items-center space-x-2 overflow-hidden rounded px-2',
 		'text-sm text-menu-ink',
 		'group-radix-highlighted:text-white',
 		'group-radix-disabled:pointer-events-none group-radix-disabled:text-menu-ink/50',

packages/ui/src/Switch.tsx

@@ -12,7 +12,7 @@ const switchStyles = cva(
 	[
 		'relative inline-flex shrink-0 transition',
 		'items-center rounded-full p-1',
-		'bg-app-line radix-state-checked:bg-accent focus:outline-none focus:ring-1 focus:ring-accent focus:ring-offset-2 focus:ring-offset-app-selected'
+		'bg-app-line focus:outline-none focus:ring-1 focus:ring-accent focus:ring-offset-2 focus:ring-offset-app-selected radix-state-checked:bg-accent'
 	],
 	{
 		variants: {

scripts/deps.mjs

@@ -143,15 +143,11 @@ export async function downloadFFMpeg(machineId, framework, branches) {
 		if (!ffmpegSuffix.test(artifact.name)) continue;
 		try {
 			const data = await getGhArtifactContent(SPACEDRIVE_REPO, artifact.id);
-			await extractTo(
-				data,
-				framework,
-				{
-					chmod: 0o600,
-					recursive: true,
-					overwrite: true
-				}
-			);
+			await extractTo(data, framework, {
+				chmod: 0o600,
+				recursive: true,
+				overwrite: true
+			});
 			found = true;
 			break;
 		} catch (error) {

scripts/github.mjs

@@ -43,7 +43,7 @@ async function getCache(resource, headers) {
 	let header;
 
 	// Don't cache in CI
-	if (env.CI === 'true') return null
+	if (env.CI === 'true') return null;
 
 	if (headers)
 		resource += Array.from(headers.entries())
@@ -87,7 +87,7 @@ async function setCache(response, resource, cachedData, headers) {
 	const data = Buffer.from(await response.arrayBuffer());
 
 	// Don't cache in CI
-	if (env.CI === 'true') return data
+	if (env.CI === 'true') return data;
 
 	const etag = response.headers.get('ETag') || undefined;
 	const modifiedSince = response.headers.get('Last-Modified') || undefined;