Directory picker & smart grid/single file selection

- Directory picker: you can now open a directory instead of multiple files
- Smart grid/single file selection: the preferred view is now saved in the LocalStorage. The single file selection is the default for vertical devices, and the grid for horizontal devices
- Columns now can be resized also with buttons

Author: dinoosauro

App.razor

@@ -21,7 +21,8 @@
         <FluentButton style="position: absolute; top: 15px; width: fit-content; right: 15px;"
             IconStart="@(new Icons.Regular.Size20.Settings())" Appearance="Appearance.Accent"
             @onclick='() => {showSettings = true;}'></FluentButton>
-        <InputFile multiple="true" id="filePicker" style="display: none;" OnChange="GetFiles">
+        <InputFile directory="@pickFolder" webkitdirectory="@pickFolder" multiple="true" id="filePicker"
+            style="display: none;" OnChange="GetFiles">
         </InputFile>
         <FluentToastProvider MaxToastCount="1" />
         @if (files.Count != 0)
@@ -44,8 +45,8 @@
                         <FluentCheckbox @bind-Value="@updateEverything">Update all the
                             seleted
                             files</FluentCheckbox><br>
-                        <FluentDataGrid ResizableColumns="true" Items="files.AsQueryable<TagInfoContainer>()"
-                            ItemKey="@(file => file.id)">
+                        <FluentDataGrid ResizableColumns="true" ResizeType="DataGridResizeType.Discrete"
+                            Items="files.AsQueryable<TagInfoContainer>()" ItemKey="@(file => file.id)">
                             <TemplateColumn Width="@((100 /(gridSelected.Count + 2)) + "%")" Sortable="false" Title="Actions:">
                                 <div class="flexContainer">
                                     <FluentButton IconStart="@(new Icons.Regular.Size20.Image())" @onclick='@(() => {
@@ -220,7 +221,8 @@
         {
             <FluentCard>
                 <h2>Choose files:</h2>
-                <FluentButton @onclick='() => JS.InvokeVoidAsync("clickInput")'>Choose files</FluentButton><br>
+                <FluentButton @onclick='() => JS.InvokeVoidAsync("clickInput")'>Choose files</FluentButton><br><br>
+                <FluentCheckbox @bind-Value="pickFolder">Choose a directory</FluentCheckbox><br>
                 <p>Don't worry. Everything will be elaborated locally</p>
             </FluentCard>
         }
@@ -336,6 +338,10 @@
     /// </summary>
     private bool showGrid = true;
     /// <summary>
+    /// Pick a directory instead of multiple files
+    /// </summary>
+    private bool pickFolder = false;
+    /// <summary>
     /// A list that contains all the selected tag options
     /// </summary>
     private List<AvailableProperties.PropertiesObject> gridSelected = new List<PropertiesObject>();
@@ -370,6 +376,7 @@
         if (firstRender) // Get the selected theme, and apply it
         {
             fileSystemAvailable = await JS.InvokeAsync<bool>("getFileSystemAvailability");
+            showGrid = await JS.InvokeAsync<bool>("getGridUI");
             await JS.InvokeVoidAsync("updateColor", [await JS.InvokeAsync<string>("getColor")]);
             await JS.InvokeVoidAsync("updateSlider", [(await JS.InvokeAsync<double>("getSliderValue")).ToString()]);
         }

Layout/Settings.razor

@@ -35,7 +35,11 @@
     </label>
     <br>
     <h3>Change metadata view:</h3>
-    <FluentButton @onclick='() => {showGrid = !showGrid; GridUpdate(showGrid);}'>
+    <FluentButton @onclick='async () => {
+        showGrid = !showGrid; 
+        await JS.InvokeVoidAsync("setGridUI", [showGrid]);
+        GridUpdate(showGrid);
+     }'>
         @if (showGrid)
         {
             <p>Switch to "single file" view</p>

wwwroot/css/app.css

@@ -34,7 +34,7 @@ fluent-design-system-provider {
 fluent-select,
 fluent-text-field,
 fluent-text-area,
-fluent-button,
+fluent-button:not(.col-options-button),
 fluent-listbox {
     width: 100%;
     width: -webkit-fill-available;

wwwroot/index.html

@@ -91,9 +91,15 @@ <h1>Welcome to TagLibSharp-Web!</h1>
         */
         function wakeUp() {
 
+        }
+        function getGridUI() {
+            return (localStorage.getItem("TagLibWeb-UseGridUI") ?? (window.innerWidth > window.innerHeight ? "a" : "b")) === "a";
+        }
+        function setGridUI(grid) {
+            localStorage.setItem("TagLibWeb-UseGridUI", grid ? "a" : "b");
         }
         navigator.serviceWorker.register('service-worker.js', { scope: window.location.href.substring(0, window.location.href.lastIndexOf("/") + 1) });
-        const appVersion = "1.0.0";
+        const appVersion = "1.0.1";
         fetch("./updatecode", { cache: "no-store" }).then((res) => res.text().then((text) => { if (text.replace("\n", "") !== appVersion) if (confirm(`There's a new version of TagLibSharp-Web. Do you want to update? [${appVersion} --> ${text.replace("\n", "")}]`)) { caches.delete("taglibsharpweb-cache"); location.reload(true); } }).catch((e) => { console.error(e) })).catch((e) => console.error(e)); // Check if the application code is the same as the current application version and, if not, ask the user to update
     </script>
 </body>

wwwroot/updatecode

@@ -1 +1 @@
-1.0.0
+1.0.1