feat(ui): ✨ add config table (#104)

* refactor(ui): ♻️ update configuration type

remove syncthingBaseUrl to url property object
add url object w/ separation btw protocol/ip address/port
update the settings tab view in accordance
for entering each part of the url object and update it in realtime

BREAKING CHANGE: this changes the SyncthingConfiguration type.

* fix(mobile): 🐛 update requestEndpoint to support mobile

update requestEndpoint method to support mobile
by changing the localhost address to its corresponding ip address

* feat(ui): 🚧 add config table

* feat(ui): ✨ add configuration item component

new component for displaying configuration information from Syncthing.
This will be used to recreate the official Syncthing GUI.

* refactor(ui): ♻️ update obsidian lucide icon component

add all props to be manipulated outside of the component.
It could be used to add styles, classes, etc
to the div element that wraps the SVG.

* feat(ui): ✨ add configuration modal

add syncthing configuration modal to reproduce the Syncthing GUI

* feat(ui): ✨ update configuration table A LOT

- update configuration item for adding more customization
- create folder item and remote item,
respectively components for folders and remote devices.
- update obsidian lucide icon component with default style
- add configuration item data type inside component/types.ts
These changes are static ! Let's now add some dynamic data !

* feat(controllers): ✨ add network calls to get folders/devices

add the API calls to the configuration table so we have dynamic data.
This is awesome ! Now, we have to shape the data in each component.

TODO: refactor models and entities.
They are not 100% accurate to the Syncthing APIs

* feat(ui): 💄 update configuration table ui

update folder and remote items to have dynamic data.
update configuration item and table to handle dynamic data.

* refactor(dev): 🚧 working on type safety

making functions to dynamically check the type of unknown received json.
(when creating models/entities)
Also trying to make it statically typed.

* refactor(ui): ♻️ update configuration table

refactor types and use of slots inside of the table cells.
might be overcomplicated for what it does.
also should use Svelte stores
for common values such as folders and devices.

* refactor(ui): ♻️ full refactor of syncthing configuration view

refactoring all remote and folder items
inside of the configuration item component.
Also refactoring the configuration table to use the configuration item
give relevant data.

* refactor(controllers): 🚧 update requestEndpoint

to follow redirect on HTTPS

* feat(ui): ✨ add warning message on configuration view

for next release, to warn that the configuration view isn't fully implemented yet.

src/components/configuration_table.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+	import { Notice } from "obsidian";
+	import { SyncthingDevice, SyncthingFolder } from "src/models/entities";
+	import { ConfigurationModal } from "src/views/configuration_modal";
+	import { onMount } from "svelte";
+	import ConfigurationItem from "./configuration_item.svelte";
+	import FolderItem from "./folder_item.svelte";
+	import ObsidianLucideIcon from "./obsidian_lucide_icon.svelte";
+	import RemoteItem from "./remote_item.svelte";
+	import WarningMessage from "./warning_message.svelte";
+
+	export let parent: ConfigurationModal;
+	parent.titleEl.setText("Syncthing Configuration");
+	parent.titleEl.style.textAlign = "center";
+
+	let syncthingBaseUrl = `${parent.plugin.settings.configuration.url?.protocol}://${parent.plugin.settings.configuration.url?.ip_address}:${parent.plugin.settings.configuration.url?.port}/`;
+	console.log(syncthingBaseUrl);
+	// TODO: refactor this to use Svelte stores.
+	let folders: SyncthingFolder[] = [];
+	let devices: SyncthingDevice[] = [];
+	let thisDevice: SyncthingDevice | undefined = undefined;
+	onMount(async () => {
+		folders = await parent.plugin.syncthingController.getFolders();
+		devices = await parent.plugin.syncthingController.getDevices();
+		thisDevice = devices.first();
+		console.log("Folders: ", folders);
+		console.log("Devices: ", devices);
+	});
+</script>
+
+<WarningMessage
+	message="The following configuration is not fully implemented yet. Some data aren't real-time and some controls are not implemented yet. It is mainly to reproduce the Syncthing GUI and then, real-time data and controls will be added."
+/>
+
+<div class="left">
+	<div class="folder">
+		<h2>Folders ({folders.length})</h2>
+		{#each folders as folder}
+			<FolderItem {folder} />
+		{/each}
+		<div class="controls">
+			<button
+				on:click={async (event) => {
+					new Notice("Not implemented yet!");
+				}}
+			>
+				<ObsidianLucideIcon name="pause" />
+				<span>Pause All</span>
+			</button>
+			<button
+				on:click={async (event) => {
+					new Notice("Not implemented yet!");
+				}}
+			>
+				<ObsidianLucideIcon name="refresh-cw" />
+				<span>Rescan All</span>
+			</button>
+			<button
+				on:click={async (event) => {
+					new Notice("Not implemented yet!");
+				}}
+			>
+				<ObsidianLucideIcon name="plus" />
+				<span>Add Folder</span>
+			</button>
+		</div>
+	</div>
+</div>
+<div class="right">
+	<div class="mydevice">
+		<h2>This Device</h2>
+		<ConfigurationItem isThisDevice device={thisDevice} />
+	</div>
+	<div class="remote">
+		<h2>
+			Remote Devices ({devices.filter((value) => value !== thisDevice)
+				.length})
+		</h2>
+		{#each devices.filter((value) => value !== thisDevice) as device}
+			<RemoteItem {device} />
+		{/each}
+		<div class="controls">
+			<button
+				on:click={async (event) => {
+					new Notice("Not implemented yet!");
+				}}
+			>
+				<ObsidianLucideIcon name="pause" />
+				<span>Pause All</span>
+			</button>
+			<button
+				on:click={async (event) => {
+					new Notice("Not implemented yet!");
+				}}
+			>
+				<ObsidianLucideIcon name="info" />
+				<span>Recent Changes</span>
+			</button>
+			<button
+				on:click={async (event) => {
+					new Notice("Not implemented yet!");
+				}}
+			>
+				<ObsidianLucideIcon name="plus" />
+				<span>Add Remote Device</span>
+			</button>
+		</div>
+	</div>
+</div>
+
+<style>
+	.left {
+		float: left;
+		width: 50%;
+	}
+	.right {
+		float: right;
+		width: 50%;
+	}
+	.folder,
+	.mydevice,
+	.remote {
+		width: 100%;
+	}
+	.controls {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		margin: 1em 0;
+	}
+	.controls button {
+		gap: 0.5em;
+		margin: 0 0.5em;
+	}
+</style>

src/components/folder_item.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { Notice } from "obsidian";
+	import { SyncthingFolder } from "src/models/entities";
+	import ConfigurationItem from "./configuration_item.svelte";
+	import ObsidianLucideIcon from "./obsidian_lucide_icon.svelte";
+	export let folder: SyncthingFolder = {
+		id: "folder ID",
+		label: "folder label",
+		path: "folder path",
+		type: "sendreceive",
+		devices: [
+			{ deviceID: "device 1", encryptionPassword: "", introducedBy: "" },
+			{ deviceID: "device 2", encryptionPassword: "", introducedBy: "" },
+		],
+		filesystemType: "filesystem type",
+		maxConflicts: 0,
+	};
+</script>
+
+<!-- TODO: refactor this inside of the ConfigurationItem component to use Svelte stores. -->
+<ConfigurationItem {folder} device={undefined}>
+	<svelte:fragment slot="title">
+		<ObsidianLucideIcon name="folder" />
+		<span>{folder.label}</span>
+		<span style="flex: 1 0 auto; text-align: end;">Unshared</span>
+	</svelte:fragment>
+
+	<div slot="footer" class="footer">
+		<button
+			on:click={async (event) => {
+				new Notice("Not implemented yet!");
+			}}
+		>
+			<ObsidianLucideIcon name="pause" />
+			<span>Pause</span>
+		</button>
+		<button
+			on:click={async (event) => {
+				new Notice("Not implemented yet!");
+			}}
+		>
+			<ObsidianLucideIcon name="history" />
+			<span>Versions</span>
+		</button>
+		<button
+			on:click={async (event) => {
+				new Notice("Not implemented yet!");
+			}}
+		>
+			<ObsidianLucideIcon name="refresh-cw" />
+			<span>Rescan</span>
+		</button>
+		<button
+			on:click={async (event) => {
+				new Notice("Not implemented yet!");
+			}}
+		>
+			<ObsidianLucideIcon name="pencil" />
+			<span>Edit</span>
+		</button>
+	</div>
+</ConfigurationItem>
+
+<style>
+	.footer {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.5rem;
+		margin: 1em 0 0 0;
+	}
+	.footer button {
+		gap: 0.5rem;
+	}
+</style>

src/components/obsidian_lucide_icon.svelte

@@ -11,4 +11,4 @@
 	});
 </script>
 
-<div bind:this={element} />
+<div bind:this={element} {...$$restProps} style="display: flex;" />

src/components/remote_item.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { Notice } from "obsidian";
+	import { SyncthingDevice } from "src/models/entities";
+	import ConfigurationItem from "./configuration_item.svelte";
+	import ObsidianLucideIcon from "./obsidian_lucide_icon.svelte";
+	export let device: SyncthingDevice = {
+		address: ["dynamic"],
+		deviceID: "device ID",
+		introducedBy: "introduced by",
+		name: "device name",
+		ignoredFolders: [],
+		paused: false,
+	};
+</script>
+
+<!-- TODO: refactor this inside of the ConfigurationItem component to use Svelte stores. -->
+<ConfigurationItem {device} folder={undefined}>
+	<svelte:fragment slot="title">
+		<div style="display: flex;gap: 0.5em">
+			<ObsidianLucideIcon name="hard-drive" />
+			<span>{device.name ?? device.deviceID}</span>
+		</div>
+		<div
+			style="display: flex; gap:0.5em;flex: 1 0 auto; justify-content: end;"
+		>
+			<span>Disconnected</span>
+			<ObsidianLucideIcon name="wifi-off" />
+		</div>
+	</svelte:fragment>
+
+	<div slot="footer" class="footer">
+		<button
+			on:click={async (event) => {
+				new Notice("Not implemented yet!");
+			}}
+		>
+			<ObsidianLucideIcon name="pause" />
+			<span>Pause</span>
+		</button>
+		<button
+			on:click={async (event) => {
+				new Notice("Not implemented yet!");
+			}}
+		>
+			<ObsidianLucideIcon name="pencil" />
+			<span>Edit</span>
+		</button>
+	</div>
+</ConfigurationItem>
+
+<style>
+	.footer {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.5rem;
+		margin: 1em 0 0 0;
+	}
+	.footer button {
+		gap: 0.5rem;
+	}
+</style>