Rename some files and start to use context to inject classes

Author: Caleb-T-Owens

app/src/lib/components/Board.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" async="true">
 	import FullviewLoading from './FullviewLoading.svelte';
-	import NewBranchDropZone from './NewBranchDropZone.svelte';
 	import dzenSvg from '$lib/assets/dzen-pc.svg?raw';
 	import { Project } from '$lib/backend/projects';
+	import BranchDropzone from '$lib/components/BranchDropzone.svelte';
 	import BranchLane from '$lib/components/BranchLane.svelte';
 	import Icon from '$lib/components/Icon.svelte';
 	import { cloneWithRotation } from '$lib/dragging/draggable';
@@ -193,7 +193,7 @@
 				</div>
 			</div>
 		{:else}
-			<NewBranchDropZone />
+			<BranchDropzone />
 		{/if}
 	</div>
 {/if}

app/src/lib/components/BranchCard/Dropzones.svelte

@@ -4,9 +4,9 @@
 	import { BranchController } from '$lib/vbranches/branchController';
 	import { filesToOwnership } from '$lib/vbranches/ownership';
 	import { Branch } from '$lib/vbranches/types';
-	import Dropzone from '$lib/components/NewNewDropzone/Dropzone.svelte';
+	import Dropzone from '$lib/components/Dropzone/Dropzone.svelte';
 	import type { Snippet } from 'svelte';
-	import CardOverlay from '$lib/components/NewNewDropzone/CardOverlay.svelte';
+	import CardOverlay from '$lib/components/Dropzone/CardOverlay.svelte';
 
 	const branchController = getContext(BranchController);
 	const branch = getContextStore(Branch);

app/src/lib/components/NewBranchDropZone.svelte renamed to app/src/lib/components/BranchDropzone.svelte

@@ -6,7 +6,7 @@
 	import topSheetSvg from '$lib/assets/new-branch/top-sheet.svg?raw';
 	// import components
 	import Button from '$lib/components/Button.svelte';
-	import Dropzone from '$lib/components/NewNewDropzone/Dropzone.svelte';
+	import Dropzone from '$lib/components/Dropzone/Dropzone.svelte';
 	import { DraggableFile, DraggableHunk } from '$lib/dragging/draggables';
 	import { getContext } from '$lib/utils/context';
 	import { BranchController } from '$lib/vbranches/branchController';

app/src/lib/components/CommitDragItem.svelte

@@ -5,9 +5,9 @@
 	import { BranchController } from '$lib/vbranches/branchController';
 	import { filesToOwnership, filesToSimpleOwnership } from '$lib/vbranches/ownership';
 	import { RemoteCommit, Branch, Commit, LocalFile, RemoteFile } from '$lib/vbranches/types';
-	import Dropzone from '$lib/components/NewNewDropzone/Dropzone.svelte';
+	import Dropzone from '$lib/components/Dropzone/Dropzone.svelte';
 	import type { Snippet } from 'svelte';
-	import CardOverlay from '$lib/components/NewNewDropzone/CardOverlay.svelte';
+	import CardOverlay from '$lib/components/Dropzone/CardOverlay.svelte';
 
 	interface Props {
 		commit: Commit | RemoteCommit;

app/src/lib/components/CommitList.svelte

@@ -4,9 +4,9 @@
 	import { Project } from '$lib/backend/projects';
 	import InsertEmptyCommitAction from '$lib/components/InsertEmptyCommitAction.svelte';
 	import {
-		ReorderDropzoneIndexer,
+		getReorderDropzoneManager,
 		type ReorderDropzone
-	} from '$lib/dragging/reorderDropzoneIndexer';
+	} from '$lib/dragging/reorderDropzoneManager';
 	import { getAvatarTooltip } from '$lib/utils/avatar';
 	import { getContext } from '$lib/utils/context';
 	import { getContextStore } from '$lib/utils/context';
@@ -19,8 +19,8 @@
 	} from '$lib/vbranches/contexts';
 	import { BaseBranch, Branch, Commit, type CommitStatus } from '$lib/vbranches/types';
 	import { goto } from '$app/navigation';
-	import Dropzone from '$lib/components/NewNewDropzone/Dropzone.svelte';
-	import LineOverlay from '$lib/components/NewNewDropzone/LineOverlay.svelte';
+	import Dropzone from '$lib/components/Dropzone/Dropzone.svelte';
+	import LineOverlay from '$lib/components/Dropzone/LineOverlay.svelte';
 
 	export let isUnapplied: boolean;
 
@@ -33,6 +33,8 @@
 	const project = getContext(Project);
 	const branchController = getContext(BranchController);
 
+	const ReorderDropzoneManager = getReorderDropzoneManager();
+
 	// Force the "base" commit lines to update when $branch updates.
 	let tsKey: number | undefined;
 	$: {
@@ -48,7 +50,7 @@
 	$: hasIntegratedCommits = $integratedCommits.length > 0;
 	$: hasRemoteCommits = $remoteCommits.length > 0;
 	$: hasShadowedCommits = $localCommits.some((c) => c.relatedTo);
-	$: reorderDropzoneIndexer = new ReorderDropzoneIndexer(
+	$: reorderDropzoneManager = new ReorderDropzoneManager(
 		[...$localCommits, ...$remoteCommits],
 		$branch,
 		branchController
@@ -170,7 +172,7 @@
 		<!-- LOCAL COMMITS -->
 		{#if $localCommits.length > 0}
 			{@render reorderDropzone(
-				reorderDropzoneIndexer.topDropzone,
+				reorderDropzoneManager.topDropzone,
 				getReorderDropzoneOffset({ isFirst: true })
 			)}
 			{#each $localCommits as commit, idx (commit.id)}
@@ -208,7 +210,7 @@
 				</CommitCard>
 
 				{@render reorderDropzone(
-					reorderDropzoneIndexer.dropzoneBelowCommit(commit.id),
+					reorderDropzoneManager.dropzoneBelowCommit(commit.id),
 					getReorderDropzoneOffset({
 						isLast: $remoteCommits.length === 0 && idx + 1 === $localCommits.length,
 						isMiddle: $remoteCommits.length > 0 && idx + 1 === $localCommits.length
@@ -255,7 +257,7 @@
 					</svelte:fragment>
 				</CommitCard>
 				{@render reorderDropzone(
-					reorderDropzoneIndexer.dropzoneBelowCommit(commit.id),
+					reorderDropzoneManager.dropzoneBelowCommit(commit.id),
 					getReorderDropzoneOffset({
 						isLast: idx + 1 === $remoteCommits.length
 					})

app/src/lib/components/NewNewDropzone/CardOverlay.svelte renamed to app/src/lib/components/Dropzone/CardOverlay.svelte

@@ -8,18 +8,6 @@ export interface DropzoneConfiguration {
 	onHoverEnd: () => void;
 	target: string;
 }
-
-const defaultDropzoneOptions: DropzoneConfiguration = {
-	disabled: false,
-	accepts: (data) => data === 'default',
-	onDrop: () => {},
-	onActivationStart: () => {},
-	onActivationEnd: () => {},
-	onHoverStart: () => {},
-	onHoverEnd: () => {},
-	target: '.dropzone-target'
-};
-
 export class Dropzone {
 	private active: boolean = false;
 
@@ -70,9 +58,10 @@ export class Dropzone {
 	}
 
 	unregister() {
-		// Mark as no longer active
+		// Mark as no longer active and ensure its not stuck in the hover state
 		this.active = false;
 		this.configuration.onActivationEnd();
+		this.configuration.onHoverEnd();
 
 		// Unregister listeners
 		if (this.registeredOnDrop) {
@@ -109,27 +98,26 @@ export class Dropzone {
 
 export const dropzoneRegistry = new Map<HTMLElement, Dropzone>();
 
-export function dropzone(node: HTMLElement, opts: Partial<DropzoneConfiguration> | undefined) {
-	function setup(opts: Partial<DropzoneConfiguration> | undefined) {
-		const configuration = { ...defaultDropzoneOptions, ...opts };
-
-		if (configuration.disabled) return;
+export function dropzone(node: HTMLElement, opts: DropzoneConfiguration) {
+	function setup(opts: DropzoneConfiguration) {
+		if (opts.disabled) return;
 
 		if (dropzoneRegistry.has(node)) {
 			clean();
 		}
 
-		dropzoneRegistry.set(node, new Dropzone(configuration, node));
+		dropzoneRegistry.set(node, new Dropzone(opts, node));
 	}
 
 	function clean() {
+		dropzoneRegistry.get(node)?.unregister();
 		dropzoneRegistry.delete(node);
 	}
 
 	setup(opts);
 
 	return {
-		update(opts: Partial<DropzoneConfiguration> | undefined) {
+		update(opts: DropzoneConfiguration) {
 			clean();
 			setup(opts);
 		},

app/src/lib/components/NewNewDropzone/Dropzone.svelte renamed to app/src/lib/components/Dropzone/Dropzone.svelte

@@ -1,4 +1,5 @@
 import { DraggableCommit } from '$lib/dragging/draggables';
+import { buildConstructorStore } from '$lib/utils/context';
 import type { BranchController } from '$lib/vbranches/branchController';
 import type { Branch, Commit } from '$lib/vbranches/types';
 
@@ -23,7 +24,7 @@ export class ReorderDropzone {
 	constructor(
 		private branch: Branch,
 		private index: number,
-		private indexer: ReorderDropzoneIndexer,
+		private indexer: ReorderDropzoneManager,
 		private branchController: BranchController
 	) {}
 
@@ -45,7 +46,7 @@ export class ReorderDropzone {
 	}
 }
 
-export class ReorderDropzoneIndexer {
+export class ReorderDropzoneManager {
 	private dropzoneIndexes = new Map<string, number>();
 	private commitIndexes = new Map<string, number>();
 
@@ -107,3 +108,6 @@ export class ReorderDropzoneIndexer {
 		}
 	}
 }
+
+export const [getReorderDropzoneManager, setReorderDropzoneManager] =
+	buildConstructorStore<typeof ReorderDropzoneManager>('ReorderDropzoneManager');

app/src/lib/components/NewNewDropzone/LineOverlay.svelte renamed to app/src/lib/components/Dropzone/LineOverlay.svelte

@@ -100,3 +100,20 @@ export function getContextStoreBySymbol<T, S extends Readable<T> = Readable<T>>(
 	if (!instance) throw new Error(`no instance of \`Readable<${key.toString()}[]>\` in context`);
 	return instance;
 }
+
+export function buildConstructorStore<T extends Class>(
+	name: string
+): [() => T, (constructor: T) => void] {
+	const identifier = Symbol(name);
+
+	return [
+		() => {
+			const constructor = svelteGetContext<T | undefined>(identifier);
+			if (!constructor) throw new Error(`no constructor in context \`${name}\``);
+			return constructor;
+		},
+		(constructor: T) => {
+			setContext(identifier, constructor);
+		}
+	];
+}

app/src/lib/dragging/dropzone.ts

@@ -13,6 +13,10 @@
 	import GlobalSettingsMenuAction from '$lib/components/GlobalSettingsMenuAction.svelte';
 	import PromptModal from '$lib/components/PromptModal.svelte';
 	import ShareIssueModal from '$lib/components/ShareIssueModal.svelte';
+	import {
+		ReorderDropzoneManager,
+		setReorderDropzoneManager
+	} from '$lib/dragging/reorderDropzoneManager';
 	import { GitHubService } from '$lib/github/service';
 	import ToastController from '$lib/notifications/ToastController.svelte';
 	import { RemotesService } from '$lib/remotes/service';
@@ -47,6 +51,7 @@
 	setContext(User, data.userService.user);
 	setContext(RemotesService, data.remotesService);
 	setContext(AIPromptService, data.aiPromptService);
+	setReorderDropzoneManager(ReorderDropzoneManager);
 
 	let shareIssueModal: ShareIssueModal;
 

app/src/lib/dragging/reorderDropzoneIndexer.ts renamed to app/src/lib/dragging/reorderDropzoneManager.ts

@@ -14,6 +14,7 @@ import { mockTauri } from '$lib/testing/index';
 import lscache from 'lscache';
 import { BehaviorSubject, config } from 'rxjs';
 import { env } from '$env/dynamic/public';
+import { ReorderDropzoneManager } from '$lib/dragging/reorderDropzoneManager';
 
 // call on startup so we don't accumulate old items
 lscache.flushExpired();