Implement image filtering by tags

Nekos/Pages/Index.razor

@@ -6,6 +6,7 @@
 @inject Blazored.LocalStorage.ILocalStorageService LocalStorage
 @inject ClipboardService Clipboard
 @inject MessageService Message
+@inject NekosAPI.NET.V3.NekosClient NekosClient
 
 <div class="text-center" id="wrapper" tabindex="0" @onkeydown="KeyDown" @ontouchstart="HandleTouchStart" @ontouchend="HandleTouchEnd" @ref="Div" style="background: var(--bs-gray-700); height: auto;">
     @if (!_showFavorites)
@@ -33,6 +34,7 @@
                         {
                             <button class="btn btn-outline-light btn-lg border rounded-circle mt-auto" type="button" style="margin-left: 10px; height: 56.5px;" @onclick="async () => { if (Image != null) await Clipboard.WriteTextAsync(Image.Value.Image_url); await Message.Success(Copied + await GetAsciiNeko()); }"><i class="far fa-copy"></i></button>
                         }
+                        <button class="btn btn-outline-light btn-lg border rounded-circle mt-auto" type="button" style="margin-left: 10px; height: 56.5px;" @onclick="ToggleTagFilterMenu"><i class="fas fa-filter"></i></button>
                     </div>
                 </div>
                 @if (!Mobile && !_keyBoardUsed)
@@ -135,6 +137,16 @@
 
     private JsConsole _console = null!;
 
+    private bool _showTagFilterMenu;
+
+    private List<string> _selectedTags = new();
+
+    private List<string> _availableTags = new();
+
+    protected override async Task OnInitializedAsync()
+    {
+        _availableTags = await NekosClient.TagsAsync();
+    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -191,7 +203,7 @@
     private async Task LoadImages()
     {
         await _console.LogAsync("Loading new images in queue...");
-        var images = await _nekoClient.ImagesAsync(rating: ["explicit"], tag: [8], is_screenshot:false);
+        var images = await _nekoClient.ImagesAsync(rating: ["explicit"], tag: _selectedTags, is_screenshot:false);
         foreach (var image in images.Items) if (!_images.Any(x => x.Id.Equals(image.Id))) _images.AddLast(image);
         await _console.LogAsync($"Image loading finished. Total images in list: {_images.Count}");
     }
@@ -202,7 +214,7 @@
     /// <param name="e">The keyboard event arguments.</param>
     protected void KeyDown(KeyboardEventArgs e)
     {
-        if (_showFavorites) return;
+        if (_showFavorites || _showTagFilterMenu) return;
         switch (e.Key)
         {
             case "ArrowRight":
@@ -253,19 +265,25 @@
         await LoadImages();
     }
 
+    private void ToggleTagFilterMenu()
+    {
+        _showTagFilterMenu = !_showTagFilterMenu;
+        StateHasChanged();
+    }
+
     //Swipe event
     (TouchPoint ReferencePoint, DateTime StartTime) _startPoint;
 
     void HandleTouchStart(TouchEventArgs t)
     {
-        if (_showFavorites) return;
+        if (_showFavorites || _showTagFilterMenu) return;
         _startPoint.ReferencePoint = t.TargetTouches[0];
         _startPoint.StartTime = DateTime.Now;
     }
 
     void HandleTouchEnd(TouchEventArgs t)
     {
-        if (_showFavorites) return;
+        if (_showFavorites || _showTagFilterMenu) return;
         const double swipeThreshold = 0.4;
         try
         {

Nekos/README.md

@@ -0,0 +1,45 @@
+# Nekos
+[![Deploy to Server](https://github.com/MarkenJaden/Nekos/actions/workflows/deploy.yml/badge.svg)](https://github.com/MarkenJaden/Nekos/actions/workflows/deploy.yml)
+[![CodeFactor](https://www.codefactor.io/repository/github/markenjaden/nekos.lol/badge)](https://www.codefactor.io/repository/github/markenjaden/nekos.lol)
+[![wakatime](https://wakatime.com/badge/user/17f322c9-222a-48b4-9e15-983c41f7aed4/project/d3a3b200-4514-4fa7-a958-9f5914af1406.svg)](https://wakatime.com/badge/user/17f322c9-222a-48b4-9e15-983c41f7aed4/project/d3a3b200-4514-4fa7-a958-9f5914af1406)
+
+#### https://nekos.lol/
+Website providing you with random lewd nsfw neko pics using [NekosAPI.NET](https://github.com/MarkenJaden/NekosAPI.NET)
+
+## Developement
+
+#### I appreciate any contribution to the website! If you have an idea, implement it or ask me to do it! ^^
+
+This website was created using [Blazor Server](https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor) in [.NET 8](https://dotnet.microsoft.com/en-us/download/dotnet/8.0).
+
+### Libraries used
+* [NekosAPI.NET](https://github.com/MarkenJaden/NekosAPI.NET)
+* [Blazored.LocalStorage](https://github.com/Blazored/LocalStorage)
+* [CurrieTechnologies.Razor.Clipboard](https://github.com/Basaingeal/Razor.Clipboard)
+* [AntDesign](https://github.com/ant-design-blazor/ant-design-blazor)
+
+### For the development you need
+* [.NET IDE](https://dotnet.microsoft.com/en-us/platform/tools)
+* [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/6.0)
+
+Clone the repo into your IDE. Make sure that all libraries are downloaded. Now you should already be able to start the website locally.
+
+All the logic is done in [Index.razor](https://github.com/MarkenJaden/Nekos/blob/master/Nekos/Pages/Index.razor) and is not very complicated.
+
+The rest of the application you don't really need to pay attention to, unless you want to add a bigger feature, but with such ambition I assume you have the necessary knowledge.
+
+Once you're happy with your change you can just open a pull request, I'll take a quick look over it, and thanks to GitHub Actions your changes are live on the website just a few minutes later, it's really not hard :)
+
+**If there are any questions you can always reach me via Discord (MarkenJaden#7787) ^^**
+
+## Using the Tag Filtering Feature
+
+The website now includes a feature that allows users to filter images by tags. This feature is accessible through a menu where users can select multiple tags to refine the images displayed. The tags available for selection are fetched using the `TagsAsync()` method from `NekosAPI.NET`, ensuring that users have access to a comprehensive list of tags to choose from.
+
+To use the tag filtering feature, simply click on the tag menu, browse through the list of available tags, and select the ones you wish to apply. You can select multiple tags by clicking on more than one tag. The images displayed on the page will automatically update to only show those that match the selected tags. To clear the selection and view all images again, simply deselect the tags from the menu.
+
+This feature enhances the user experience by providing a more tailored browsing experience, allowing users to easily find images that match their specific interests.
+
+## Legal
+
+I **do not** own or save any of the images displayed. All images are retrieved and displayed using the [Nekos.Fun API](https://nekos.fun/).