Zip から変換するUIの調整 (#742)

<!-- Close or Related Issues -->
Close #0

### What I did
<!-- Please describe the motivation behind this PR and the changes it
introduces. -->
- ステップ削除
- ズームレベルによる変化の調整
- UIの細かな調整

### Notes
<!-- If manual testing is required, please describe the procedure. -->

Author: NEKOYASAN

.github/workflows/test_app.yml renamed to .github/workflows/test.yml

@@ -1,4 +1,4 @@
-name: Test Tauri App
+name: Test App & Library
 
 on:
   push:
@@ -10,8 +10,13 @@ on:
     paths:
       - "app/**"
       - ".github/**"
+      - "nusamai/**"
+      - "nusamai-*/**"
+      - "demo/**"
+      - "docs/**"
+      - "*"
 
-env: 
+env:
   CARGO_TERM_COLOR: always
 
 permissions:
@@ -41,7 +46,7 @@ jobs:
       - name: Make Tauri build destination
         run: mkdir -p app/build
       - name: Test
-        run: cargo llvm-cov --package app --lcov --output-path lcov.info --all-features
+        run: cargo llvm-cov --workspace --lcov --output-path lcov.info --all-features
       - name: Upload coverage reports to Codecov
         uses: codecov/codecov-action@v5
         env:

.github/workflows/test_libs.yml

@@ -13,14 +13,14 @@
 	<div class="flex flex-col gap-2">
 		{#each sinkOptionKeys as key (key)}
 			{#if isIntegerParameter(sinkParameters.items[key].parameter)}
-				<div class="flex gap-2 w-80">
-					<label for={key} class="w-3/4 pointer-events-none"
+				<div class="flex w-80 gap-2">
+					<label for={key} class="pointer-events-none w-3/4"
 						>{sinkParameters.items[key].label}</label
 					>
 					<select
 						bind:value={sinkParameters.items[key].parameter.Integer.value}
 						id={key}
-						class="w-1/4 border-2 border-gray-300 px-2 rounded-md cursor-pointer"
+						class="w-1/4 cursor-pointer rounded-md border-2 border-gray-300 px-2"
 					>
 						{#if sinkParameters.items[key].parameter.Integer.min !== undefined && sinkParameters.items[key].parameter.Integer.max !== undefined}
 							{#each createRangeArray(sinkParameters.items[key].parameter.Integer.min, sinkParameters.items[key].parameter.Integer.max) as value (value)}
@@ -41,23 +41,23 @@
 								/>
 							</div> -->
 			{:else if isBooleanParameter(sinkParameters.items[key].parameter)}
-				<div class="flex gap-2 w-80 items-center">
-					<label for={key} class="w-3/4 pointer-events-none"
+				<div class="flex w-80 items-center gap-2">
+					<label for={key} class="pointer-events-none w-3/4"
 						>{sinkParameters.items[key].label}</label
 					>
-					<div class="relative inline-block w-10 h-6 rounded-full cursor-pointer ml-auto">
+					<div class="relative ml-auto inline-block h-6 w-10 cursor-pointer rounded-full">
 						<input
 							bind:checked={sinkParameters.items[key].parameter.Boolean.value}
 							id={key}
 							type="checkbox"
-							class="absolute w-10 h-6 transition-colors duration-300 rounded-full appearance-none cursor-pointer peer bg-gray-200 checked:bg-accent1 peer-checked:before:bg-accent1"
+							class="peer absolute h-6 w-10 cursor-pointer appearance-none rounded-full bg-gray-200 transition-colors duration-300 peer-checked:before:bg-accent1 checked:bg-accent1"
 						/>
 						<label
 							for={key}
-							class="before:content[''] absolute top-2/4 -left-1 h-6 w-6 -translate-y-2/4 cursor-pointer rounded-full border border-blue-gray-100 bg-white shadow-md transition-all duration-300 peer-checked:translate-x-full"
+							class="before:content[''] border-blue-gray-100 absolute top-2/4 -left-1 h-6 w-6 -translate-y-2/4 cursor-pointer rounded-full border bg-white shadow-md transition-all duration-300 peer-checked:translate-x-full"
 						>
 							<div
-								class="inline-block p-5 rounded-full top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4"
+								class="top-2/4 left-2/4 inline-block -translate-x-2/4 -translate-y-2/4 rounded-full p-5"
 							></div>
 						</label>
 					</div>

app/src/lib/components/SinkOptions.svelte

@@ -7,33 +7,33 @@
 {#if transformerSettings && transformerSettings.configs.length > 0}
 	{#each transformerSettings.configs as config (config.key)}
 		{#if isBooleanConfig(config.parameter)}
-			<div class="flex gap-2 w-80 items-center">
-				<label for={config.key} class="w-3/4 pointer-events-none">
+			<div class="flex w-80 items-center gap-2">
+				<label for={config.key} class="pointer-events-none w-3/4">
 					{config.label}
 				</label>
-				<div class="relative inline-block w-10 h-6 rounded-full cursor-pointer ml-auto">
+				<div class="relative ml-auto inline-block h-6 w-10 cursor-pointer rounded-full">
 					<input
 						bind:checked={config.parameter.Boolean}
 						id={config.key}
 						type="checkbox"
-						class="absolute w-10 h-6 transition-colors duration-300 rounded-full appearance-none cursor-pointer peer bg-gray-200 checked:bg-accent1 peer-checked:before:bg-accent1"
+						class="peer absolute h-6 w-10 cursor-pointer appearance-none rounded-full bg-gray-200 transition-colors duration-300 peer-checked:before:bg-accent1 checked:bg-accent1"
 					/>
 					<label
 						for={config.key}
-						class="before:content[''] absolute top-2/4 -left-1 h-6 w-6 -translate-y-2/4 cursor-pointer rounded-full border border-blue-gray-100 bg-white shadow-md transition-all duration-300 peer-checked:translate-x-full"
+						class="before:content[''] border-blue-gray-100 absolute top-2/4 -left-1 h-6 w-6 -translate-y-2/4 cursor-pointer rounded-full border bg-white shadow-md transition-all duration-300 peer-checked:translate-x-full"
 					>
 						<div
-							class="inline-block p-5 rounded-full top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4"
+							class="top-2/4 left-2/4 inline-block -translate-x-2/4 -translate-y-2/4 rounded-full p-5"
 						></div>
 					</label>
 				</div>
 			</div>
 		{:else if isSelectionConfig(config.parameter)}
-			<div class="flex gap-2 w-80">
-				<label for={config.key} class="w-2/4 pointer-events-none">{config.label}</label>
+			<div class="flex w-80 gap-2">
+				<label for={config.key} class="pointer-events-none w-2/4">{config.label}</label>
 				<select
 					id={config.key}
-					class="w-2/4 border-2 border-gray-300 px-2 rounded-md cursor-pointer"
+					class="w-2/4 cursor-pointer rounded-md border-2 border-gray-300 px-2"
 					bind:value={config.parameter.Selection.selected_value}
 				>
 					{#each config.parameter.Selection.options as option, index (index)}

app/src/lib/components/TransformerOptions.svelte

@@ -99,14 +99,14 @@
 				<button
 					type="button"
 					data-active={isFolderMode ? '' : undefined}
-					class="data-active:pointer-events-none data-active:bg-accent1 relative inline-flex items-center gap-1 rounded-l-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+					class="relative inline-flex items-center gap-1 rounded-l-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-10 data-active:pointer-events-none data-active:bg-accent1"
 					onclick={() => (isFolderMode = true)}
 					><Icon icon="material-symbols:folder" />フォルダ選択</button
 				>
 				<button
 					type="button"
 					data-active={!isFolderMode ? '' : undefined}
-					class="data-active:pointer-events-none data-active:bg-accent1 relative -ml-px inline-flex items-center gap-1 rounded-r-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+					class="relative -ml-px inline-flex items-center gap-1 rounded-r-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-10 data-active:pointer-events-none data-active:bg-accent1"
 					onclick={() => (isFolderMode = false)}><Icon icon="ph:files" />ファイル選択</button
 				>
 			</span>
@@ -115,7 +115,7 @@
 		<div class="flex items-center gap-3">
 			<button
 				onclick={isFolderMode ? openDirectoryDialog : openFileDialog}
-				class="bg-accent1 rounded-sm px-4 py-0.5 font-semibold shadow-sm hover:opacity-75"
+				class="rounded-sm bg-accent1 px-4 py-0.5 font-semibold shadow-sm hover:opacity-75"
 				>選択</button
 			>
 			<div class="text-sm">

app/src/routes/InputSelector.svelte

@@ -45,40 +45,40 @@
 	});
 </script>
 
-<div class="flex flex-col gap-4 p-12 place-items-center">
-	<p class="text-white text-center font-semibold text-2xl">変換中 &hellip;</p>
-	<div class="flex justify-center [&>div]:bg-white [&>div]">
-		<div class="animate-loading-pulse-[-0.24s] bg-white h-4 w-4 rounded-full m-2"></div>
-		<div class="animate-loading-pulse-[-0.12s] bg-white h-4 w-4 rounded-full m-2"></div>
-		<div class="animate-loading-pulse-[0s] bg-white h-4 w-4 rounded-full m-2"></div>
+<div class="flex flex-col place-items-center gap-4 p-12">
+	<p class="text-center text-2xl font-semibold text-white">変換中 &hellip;</p>
+	<div class="[&>div] flex justify-center [&>div]:bg-white">
+		<div class="m-2 h-4 w-4 rounded-full bg-white animate-loading-pulse-[-0.24s]"></div>
+		<div class="m-2 h-4 w-4 rounded-full bg-white animate-loading-pulse-[-0.12s]"></div>
+		<div class="m-2 h-4 w-4 rounded-full bg-white animate-loading-pulse-[0s]"></div>
 	</div>
 
 	<div
-		class="my-5 w-full h-96 max-h-96 bg-slate-900/70 text-slate-300 text-xs font-mono p-1 rounded-sm"
+		class="my-5 h-96 max-h-96 w-full rounded-sm bg-slate-900/70 p-1 font-mono text-xs text-slate-300"
 	>
-		<div class="w-full h-full">
+		<div class="h-full w-full">
 			<VirtualScroll bind:this={logView} data={items} key="id">
 				{#snippet children({ data }: { data: Item })}
 					<div>
 						{#if data.level === 'ERROR'}
 							<span
-								class="inline-flex items-center rounded-md bg-red-400/10 px-1 py-0.5 text-xs font-medium text-red-400 ring-1 ring-inset ring-red-400/20"
+								class="inline-flex items-center rounded-md bg-red-400/10 px-1 py-0.5 text-xs font-medium text-red-400 ring-1 ring-red-400/20 ring-inset"
 								>ERROR</span
 							>
 						{:else if data.level === 'WARN'}
 							<span
-								class="inline-flex items-center rounded-md bg-yellow-400/10 px-1 py-0.5 text-xs font-medium text-yellow-500 ring-1 ring-inset ring-yellow-400/20"
+								class="inline-flex items-center rounded-md bg-yellow-400/10 px-1 py-0.5 text-xs font-medium text-yellow-500 ring-1 ring-yellow-400/20 ring-inset"
 								>WARN</span
 							>
 						{:else if data.level === 'INFO'}
 							<span
-								class="inline-flex items-center rounded-md bg-blue-400/10 px-1 py-0.5 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-400/30"
+								class="inline-flex items-center rounded-md bg-blue-400/10 px-1 py-0.5 text-xs font-medium text-blue-400 ring-1 ring-blue-400/30 ring-inset"
 								>INFO</span
 							>
 						{/if}
 
 						<span
-							class="inline-flex items-center rounded-md bg-gray-400/10 px-1 py-0.5 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-400/20"
+							class="inline-flex items-center rounded-md bg-gray-400/10 px-1 py-0.5 text-xs font-medium text-gray-400 ring-1 ring-gray-400/20 ring-inset"
 							>{data.source}</span
 						>
 
@@ -96,7 +96,7 @@
 	<div>
 		<button
 			onclick={cancelConversion}
-			class="bg-red-300 flex items-center font-bold py-1.5 pl-3 pr-5 rounded-full gap-1 shawdow-2xl hover:bg-red-400"
+			class="shawdow-2xl flex items-center gap-1 rounded-full bg-red-300 py-1.5 pr-5 pl-3 font-bold hover:bg-red-400"
 		>
 			<Icon class="text-lg" icon="ic:baseline-cancel" />
 			キャンセル

app/src/routes/LoadingAnimation.svelte

@@ -4,7 +4,6 @@
 	import type { SinkParameters } from '$lib/sinkparams';
 	import type { TransformerSettings } from '$lib/transformer';
 	import type { MeshcodeData } from './utils';
-	import MeshSelectStepSidePanel from './MeshSelectStepSidePanel.svelte';
 	import FeatureTypeSelectStepSidePanel from './FeatureTypeSelectStepSidePanel.svelte';
 	import ConvertStepSidePanel from './ConvertStepSidePanel.svelte';
 	import MapPanel from './MapPanel.svelte';
@@ -15,7 +14,7 @@
 	let selectedMeshes: string[] = $state([]);
 
 	// New UI flow state
-	let currentStep: 'meshSelect' | 'featureTypeSelect' | 'convert' = $state('meshSelect');
+	let currentStep: 'featureTypeSelect' | 'convert' = $state('featureTypeSelect');
 	let selectedFeatureTypes: string[] = $state([]);
 
 	// Conversion settings
@@ -30,7 +29,7 @@
 		inputPaths = [];
 		meshcodeData = null;
 		selectedMeshes = [];
-		currentStep = 'meshSelect';
+		currentStep = 'featureTypeSelect';
 		selectedFeatureTypes = [];
 	}
 </script>
@@ -48,26 +47,13 @@
 
 		<TabNavigation />
 
-		{#if currentStep === 'meshSelect' || !meshcodeData}
-			<MeshSelectStepSidePanel
-				bind:meshcodeData
+		{#if currentStep === 'featureTypeSelect' || !meshcodeData}
+			<FeatureTypeSelectStepSidePanel
+				bind:selectedFeatureTypes
 				bind:selectedMeshes
 				bind:inputPaths
+				bind:meshcodeData
 				{clearAll}
-				onClickNext={() => {
-					if (selectedMeshes.length === 0) return;
-					currentStep = 'featureTypeSelect';
-				}}
-			/>
-		{:else if currentStep === 'featureTypeSelect'}
-			<FeatureTypeSelectStepSidePanel
-				bind:selectedFeatureTypes
-				{selectedMeshes}
-				{meshcodeData}
-				onclickBack={() => {
-					currentStep = 'meshSelect';
-					selectedFeatureTypes = [];
-				}}
 				onclickNext={() => {
 					if (selectedFeatureTypes.length === 0) return;
 					currentStep = 'convert';