GUI: ダイアログ修正, クリアボタンの追加 (#442)

3点の変更:

- [x] `alert()` の代わりに、Tauriのdialogを利用
- [x] 選択したフォルダにGMLファイルが一つもない時、その時点でダイアログ通知
- [x] 入力, 出力にクリアボタン `(x)` を追加

## `alert()` の代わりに、Tauriのdialogを利用

参考: [dialog | Tauri Apps](https://tauri.app/v1/api/js/dialog/)

レベルを指定できる（info, warning, error）。

だが、見た目はwarningでも変わらない:

<img width="372" alt="image"
src="https://github.com/MIERUNE/PLATEAU-GIS-Converter/assets/595008/10eee21b-1615-4a52-b13c-87aa8509deac">

errorだと少し変わる:

<img width="372" alt="image"
src="https://github.com/MIERUNE/PLATEAU-GIS-Converter/assets/595008/62776c0b-fbab-4976-9eb4-ad22ca396015">

## 選択したフォルダにGMLファイルが一つもない時、その時点でダイアログ通知


![image](https://github.com/MIERUNE/PLATEAU-GIS-Converter/assets/595008/cb43eaea-6651-453d-b72b-5a56cfee99df)

## 入力, 出力にクリアボタン `(x)` を追加

これまで「属性マッピングルール」にはあったが、入力・出力にはなかった。


![image](https://github.com/MIERUNE/PLATEAU-GIS-Converter/assets/595008/2d5fea4a-2376-49d8-8530-0d5cf361407e)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit


- **新機能**
- 選択したフォルダにGMLファイルが見つからない場合、警告メッセージを表示するチェックを追加し、ファイルが存在しない場合は
`inputFolders` をリセットしました。
- `outputPath` 変数を空の文字列にリセットする `clearSelected`
関数を追加しました。UIを更新して、この関数を呼び出して選択した出力パスをクリアするボタンを追加しました。

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { invoke } from '@tauri-apps/api/tauri';
 	import { attachConsole } from 'tauri-plugin-log-api';
+	import { message } from '@tauri-apps/api/dialog';
 
 	import Icon from '@iconify/svelte';
 	import InputSelector from './InputSelector.svelte';
@@ -19,17 +20,12 @@
 
 	async function convertAndSave() {
 		if (!inputPaths) {
-			alert('入力フォルダ/ファイルを選択してください');
-			return;
-		}
-
-		if (inputPaths.length === 0) {
-			alert('選択されたフォルダにGMLファイルがありません');
+			await message('入力フォルダ/ファイルを選択してください', { type: 'warning' });
 			return;
 		}
 
 		if (!outputPath) {
-			alert('出力先を選択してください');
+			await message('出力先を選択してください', { type: 'warning' });
 			return;
 		}
 
@@ -43,9 +39,9 @@
 				epsg,
 				rulesPath
 			});
-			alert(`変換が完了しました。\n'${outputPath}' に出力しました。`);
+			await message(`変換が完了しました。\n'${outputPath}' に出力しました。`, { type: 'info' });
 		} catch (error) {
-			alert(`エラーが発生しました。\n\n${error}`);
+			await message(`エラーが発生しました。\n\n${error}`, { type: 'error' });
 		}
 
 		isRunning = false;

app/src/routes/InputSelector.svelte

@@ -26,6 +26,13 @@
 			const gmlFiles = files.filter((d) => d.name?.endsWith('.gml'));
 			inputPaths = inputPaths.concat(gmlFiles.map((d) => d.path));
 		}
+
+		if (inputPaths.length === 0) {
+			await dialog.message('選択したフォルダにGMLファイルが含まれていません', {
+				type: 'warning'
+			});
+			inputFolders = [];
+		}
 	}
 
 	async function openFileDialog() {
@@ -42,6 +49,11 @@
 		if (!res) return;
 		inputPaths = Array.isArray(res) ? res : [res];
 	}
+
+	function clearSelected() {
+		inputFolders = [];
+		inputPaths = [];
+	}
 </script>
 
 <div>
@@ -94,6 +106,9 @@
 									</ol>
 								</div>
 							</button>
+							<button on:click={clearSelected} class="hover:opacity-75">
+								<Icon icon="material-symbols:cancel" />
+							</button>
 						</div>
 					{/if}
 				{:else if inputPaths.length === 0}
@@ -111,6 +126,9 @@
 								</ol>
 							</div>
 						</button>
+						<button on:click={clearSelected} class="hover:opacity-75">
+							<Icon icon="material-symbols:cancel" />
+						</button>
 					</div>
 				{/if}
 			</div>

app/src/routes/OutputSelector.svelte

@@ -24,6 +24,10 @@
 		filetype;
 		outputPath = '';
 	}
+
+	function clearSelected() {
+		outputPath = '';
+	}
 </script>
 
 <div>
@@ -41,7 +45,12 @@
 			>
 			<div class="text-sm" class:opacity-50={!outputPath}>
 				{#if outputPath}
-					<p><code>{abbreviatePath(outputPath, 40)}</code></p>
+					<div class="flex justify-center items-center gap-1.5">
+						<p><code>{abbreviatePath(outputPath, 40)}</code></p>
+						<button on:click={clearSelected} class="hover:opacity-75">
+							<Icon icon="material-symbols:cancel" />
+						</button>
+					</div>
 				{:else}
 					<p>出力先が選択されていません</p>
 				{/if}