Feature/202403 docs 29

.github/workflows/release-on-tag-netcore-desktop-electron.yml

@@ -258,15 +258,18 @@ jobs:
           body: |
             ## Desktop app versions:
             _When you are not sure pick the Desktop App_
-            - starsky-mac-x64-desktop.dmg - __Starsky Desktop App for Mac OS *10.15* or newer (Intel)__
-            - starsky-win-x64-desktop.exe - __Starsky Desktop App for Windows 10 1607+ or 11 (Intel 64 bits)__
+            - starsky-mac-x64-desktop.dmg - __Starsky Desktop App for Mac OS *12.0* or newer (Intel)__
+            - starsky-win-x64-desktop.exe - __Starsky Desktop App for Windows 10 1607+ or Windows 11 22000+ (Intel 64 bits)__
 
             ## Server versions:
             - starsky-linux-arm.zip - Starsky as Web Application (start from command line) only for Raspberry Pi's
             - starsky-linux-arm64.zip - Starsky as Web Application (start from command line) only for 64 bits Raspberry Pi's 
-            - starsky-osx-x64.zip - Starsky as Web Application (start from command line) only for Intel Mac OS *10.15* or newer
+            - starsky-osx-x64.zip - Starsky as Web Application (start from command line) only for Intel Mac OS *12.0* or newer
             - starsky-osx-arm64.zip - Starsky as Web Application (start from command line) only for Apple Silicon (newer then end of 2020) Mac OS *12* or newer
-            - starsky-win-x64.zip - Starsky as Web Application (start from command line) only for Windows 10 1607+ or 11 (Intel 64 bits)
+            - starsky-win-x64.zip - Starsky as Web Application (start from command line) only for Windows 10 1607+ or 11 22000+ (Intel 64 bits)
+
+            ## Getting started
+            [Read about the first steps](https://docs.qdraw.nl/docs/getting-started/first-steps)
 
             ## Changelog
             [There is an changelog to see the recent changes](https://docs.qdraw.nl/docs/advanced-options/history/#${{ steps.get_tag_name.outputs.VERSION }})

documentation/docs/developer-guide/api/readme.md

@@ -23,16 +23,17 @@ This document is auto generated
 | __/api/allowed-types/thumb__                      | GET   | Check if IsExtensionThumbnailSupported                                          |
 | __/api/env__                                      | GET   | Show the runtime settings (dont allow AllowAnonymous)                           |
 | __/api/env__                                      | POST  | Show the runtime settings (dont allow AllowAnonymous)                           |
+| _Parameters: Verbose, StorageFolder, UseSystemTrash, UseLocalDesktop, DefaultDesktopEditor, DesktopCollectionsOpen                        _ |
 | __/api/env/features__                             | GET   | Show features that used in the frontend app / menu                              |
 | __/api/cache/list__                               | GET   | Get Database Cache (only the cache)                                             |
 | __/api/remove-cache__                             | GET   | Delete Database Cache (only the cache)                                          |
 | __/api/remove-cache__                             | POST  | Delete Database Cache (only the cache)                                          |
 | __/api/delete__                                   | DELETE| Remove files from the disk, but the file must contain the !delete! (TrashKeyw...|
 | _Parameters: f (subPaths, separated by dot comma), collections (true is to update files with the same name before                         _ |
 | _ the extenstion)                                                                                                                         _ |
-| __/api/desktop-editor/open__                      | GET   | Open a file in the default editor or a specific editor on the desktop           |
+| __/api/desktop-editor/open__                      | POST  | Open a file in the default editor or a specific editor on the desktop           |
 | _Parameters: f (single or multiple subPaths), collections (to combine files with the same name before the extension)                      _ |
-| __/api/desktop-editor/amount-confirmation__       | GET   | Check the amount of files to open before                                        |
+| __/api/desktop-editor/amount-confirmation__       | POST  | Check the amount of files to open before                                        |
 | __/api/disk/mkdir__                               | POST  | Make a directory (-p)                                                           |
 | __/api/disk/rename__                              | POST  | Rename file/folder and update it in the database                                |
 | _Parameters: f (from subPath), to (to subPath), collections (is collections bool), currentStatus (default is to not                       _ |
@@ -107,5 +108,6 @@ This document is auto generated
 | __/api/thumbnail/zoom/\{f\}@\{z\}__               | GET   | Get zoomed in image by fileHash.At the moment this is the source image          |
 | __/api/thumbnail-generation__                     | POST  | Create thumbnails for a folder in the background                                |
 | __/api/trash/move-to-trash__                      | POST  | Move a file to the trash                                                        |
+| __/api/trash/detect-to-use-system-trash__         | GET   | Is the system trash supportedUsed in End2End tests to enable or disable the t...|
 | __/api/upload__                                   | POST  | Upload to specific folder (does not check if already has been imported)Use th...|
 | __/api/upload-sidecar__                           | POST  | Upload sidecar file to specific folder (does not check if already has been im...|

documentation/docs/features/bulk-editing.md

@@ -14,7 +14,7 @@ Press select and Labels and select the images you want to update.
 When you selected an image you can update the metadata.
 You can update the following metadata:
 
-- Tags
+- Tags *(Comma seperated)*
 - Info
 - Title
 - ColorClass (the color label of the image)
@@ -25,11 +25,21 @@ via the API you could also update other metadata like:
 - Software
 - etc.
 
+The following image shows the bulk editing feature in action:
+
+- So press 'Select' and select the images you want to update:
+- Press 'Labels' and update the metadata you want to update.
+
+![Bulk edit select](../assets/features-bulk-editing-select.jpg)
+
 # Replace the metadata in the fields: tags, info or title
 
 You can search and replace the metadata in the fields: tags, info or title.
 Is easy to undo typos or update the metadata.
 
+> Note: Tags are comma separated and unique.
+> So when you add a tag that already exists, it will not be added.
+
 # Open files
 
 When using the application as desktop mode you can batch open files with your favorite editor.

documentation/docs/getting-started/first-steps.md

@@ -4,14 +4,57 @@ sidebar_position: 3
 
 # First steps
 
-Once the initial setup is complete, there are only two more steps before you can start browsing your pictures:
+Welcome to the first steps of your journey with Starsky!
 
-> > Configure your library and advanced settings according to your individual preferences. <br />
-> > Choose whether you want to index your originals directly, leaving all file and folder names unchanged, or use the optional import feature, which automatically removes duplicates, gives files a unique name, and sorts them by year and month.
+## Setting Storage Folder
 
-If you want to use folders that already exist on your computer, make sure you configured them as originals respectively import folders during setup.
+- Once you have installed Starsky, you can start it by opening the Starsky application.
+- Go to Preferences and change the Storage Folder's path to the location where you want to store
+  your pictures.
+- Press Command + Shift + K on Mac OS and Ctrl + Shift + K on Windows to go to Preferences.
+- This looks like this:
 
-To add new pictures, you can either copy them to the originals or import folder or upload them using a browser, 
-which will automatically import them once uploaded.
+![Storage Folder Assets](../assets/getting-started-first-steps-storage-folder.jpg)
 
-Then start indexing or importing, depending on which strategy you have chosen.
+> Note: AppSettings can only be edited by Administrators, the first user is by default Administrator
+
+> Note: When using an environment variable, the path is not editable in the UI
+
+When using as server mode: [see account management for more info](../features/accountmanagement.md)
+
+## Run re-sync
+
+- After setting the Storage Folder, you can run a re-sync to update the view with the new location.
+- Go to the Home screen
+- Press More on the right top
+- Click Synchronize manually
+- This looks like this:
+
+![Manual Sync](../assets/getting-started-first-steps-manual-sync.jpg)
+
+- Press Synchronize current directory manually
+
+![Manual Sync](../assets/getting-started-first-steps-manual-sync-2.jpg)
+
+- Wait until the sync is finished
+
+## Importing photos
+
+- After the sync is finished, you can start importing photos.
+- Go to the Home screen
+- In menu click on Import
+- This looks like this:
+
+![Import](../assets/getting-started-first-steps-import.jpg)
+
+The default structure is `/yyyy/MM/yyyy_MM_dd/yyyyMMdd_HHmmss_{filenamebase}.ext` and the photos are
+placed in the correct folder.
+So a picture that has been taken at `Saturday, 3 February 2024 10:10:29` will be placed
+in `2024/02/2024_02_03` and will be named: `20240203_101029_DSC07624.jpg` the base name of the file
+is `DSC07624` and the extension is `jpg`.
+
+Read more about [Import here](../features/import.md)
+
+## Search
+
+Learn more about search [Search here](../features/search.md)

history.md

@@ -52,7 +52,8 @@ Semantic Versioning 2.0.0 is from version 0.1.6+
 - [x] (Added) _Back-end_ Add role to info api (PR #1381)
 - [x] (Added) _Front-end_ Add settings for Open File (PR #1381)
 - [x] (Added) _Back-end_ rename starsky core to starsky.project.web (PR #1381)
-- [x] (Changed) _Back-end_ Keep /api/trash/detect-to-use-system-trash although its rm here (PR #1381)
+- [x] (Changed) _Back-end_ Keep /api/trash/detect-to-use-system-trash although its rm here and re
+  added (PR #1381)
 - [x] (Removed) _Back-end_ Remove verbose option in UI (setting is hidden now) (PR #1381)
 - [x] (Added) _Front-end_ German translations (PR #1381)
 - [x] (Added) _Front-end_ command + shift + k go to settings now (PR #1381)
@@ -62,6 +63,12 @@ Semantic Versioning 2.0.0 is from version 0.1.6+
 - [x] (Added) _Front-end_ Add warning when opening a lot pictures at one: "Do you really want to
   edit all of the selected photos?" (PR #1381)
 - [x] (Changed) _Front-end_ isRelativeUrl check for redirect (PR #1419)
+- [x] (Breaking changes) _App_ System requirements for Windows and Mac OS are changed see release
+  notes (PR #1422)
+- [x] (Fixed) _Front-end_ Add Tooltip to explain that tags are comma separated (PR #1422) (Issue
+  #1405)
+- [x] (Fixed) _Docs_ Make getting started more clear (PR #1422) (Issue #1403)
+- [x] (Fixed) _Front-end_ Add link to docs page for storage folder (PR #1422) (Issue #1404)
 
 ## version 0.6.0-beta.1 - 2024-02-18 {#v0.6.0-beta.1}
 

starsky-tools/mock/api/env/index.json

@@ -33,6 +33,9 @@
   "addSwagger": false,
   "addSwaggerExport": false,
   "addLegacyOverwrite": false,
+  "storageFolderAllowEdit": true,
+  "defaultDesktopEditor": [],
+  "useLocalDesktop": true,
   "webFtp": "warning: The field is not empty but for security reasons it is not shown",
   "publishProfiles": [
     {

starsky/starsky/clientapp/.vscode/settings.json

@@ -7,5 +7,8 @@
   },
   "[jsonc]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

starsky/starsky/clientapp/clientapp.code-workspace

@@ -1,33 +1,30 @@
 {
-	"folders": [
-		{
-			"path": "."
-		}
-	],
-	"settings": {
-		"editor.codeActionsOnSave": {
+  "folders": [
+    {
+      "path": "."
+    }
+  ],
+  "settings": {
+    "editor.codeActionsOnSave": {
       "source.organizeImports": "explicit",
       "source.fixAll": "explicit",
       "source.fixAll.eslint": "explicit"
     },
-		"editor.formatOnPaste": true,
-		"editor.tabSize": 2,
-		"editor.detectIndentation": false,
-		"editor.insertSpaces": true,
-		"html.format.wrapLineLength": 100,
-		"html.format.wrapAttributes": "force-aligned",
-		"html.format.contentUnformatted": "pre,code,textarea, span",
-		"html.format.endWithNewline": true,
-		"javascript.preferences.quoteStyle": "double",
-		"javascript.updateImportsOnFileMove.enabled": "always",
-		"jest.disabledWorkspaceFolders": [
-			"node_modules",
-			"mock",
-			"history.md"
-		],
-		"typescript.preferences.quoteStyle": "double",
-		"typescript.updateImportsOnFileMove.enabled": "always",
-		"typescript.tsdk": "clientapp/node_modules/typescript/lib",
-		"editor.formatOnSave": true,
-	}
-}
+    "editor.formatOnPaste": true,
+    "editor.tabSize": 2,
+    "editor.detectIndentation": false,
+    "editor.insertSpaces": true,
+    "html.format.wrapLineLength": 100,
+    "html.format.wrapAttributes": "force-aligned",
+    "html.format.contentUnformatted": "pre,code,textarea, span",
+    "html.format.endWithNewline": true,
+    "javascript.preferences.quoteStyle": "double",
+    "javascript.updateImportsOnFileMove.enabled": "always",
+    "jest.disabledWorkspaceFolders": ["node_modules", "mock", "history.md"],
+    "typescript.preferences.quoteStyle": "double",
+    "typescript.updateImportsOnFileMove.enabled": "always",
+    "typescript.tsdk": "clientapp/node_modules/typescript/lib",
+    "editor.formatOnSave": true,
+    "testing.openTesting": "neverOpen"
+  }
+}

starsky/starsky/clientapp/src/components/atoms/tooltip/tooltip.spec.tsx

@@ -0,0 +1,59 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import Tooltip from "./tooltip";
+
+describe("Tooltip component", () => {
+  it("renders tooltip text on hover", () => {
+    const text = "This is a tooltip";
+    const component = render(
+      <Tooltip text={text} left={false}>
+        Hover me
+      </Tooltip>
+    );
+
+    // Tooltip should not be visible initially
+    expect(screen.queryByTestId("tooltip")).toBeFalsy();
+
+    // Hover over the button to display the tooltip
+    fireEvent.mouseEnter(screen.getByText("Hover me"));
+
+    // Tooltip should now be visible
+    expect(screen.getByTestId("tooltip")).toBeTruthy();
+    expect(screen.getByText(text)).toBeTruthy();
+
+    // Move mouse away to hide the tooltip
+    fireEvent.mouseLeave(screen.getByText("Hover me"));
+    expect(screen.queryByTestId("tooltip")).toBeFalsy();
+    component.unmount();
+  });
+
+  describe("click behavior", () => {
+    it("renders tooltip text on click", () => {
+      const text = "This is a tooltip";
+      const component = render(
+        <Tooltip text={text} left={false}>
+          Click me
+        </Tooltip>
+      );
+
+      const test = component.container.innerHTML;
+      console.log(test);
+
+      // Tooltip should not be visible initially
+      expect(screen.queryByTestId("tooltip")).toBeFalsy();
+
+      // Click on the button to display the tooltip
+      fireEvent.click(screen.getByText("Click me"));
+
+      // Tooltip should now be visible
+      expect(screen.queryByTestId("tooltip")).toBeTruthy();
+      expect(screen.getByText(text)).toBeTruthy();
+
+      // Click on the button again to hide the tooltip
+      fireEvent.click(screen.getByText("Click me"));
+
+      expect(screen.queryByTestId("tooltip")).toBeFalsy();
+
+      component.unmount();
+    });
+  });
+});

starsky/starsky/clientapp/src/components/atoms/tooltip/tooltip.stories.tsx

@@ -0,0 +1,20 @@
+import Tooltip from "./tooltip";
+
+export default {
+  title: "components/atoms/tooltip"
+};
+
+export const Default = () => {
+  return (
+    <>
+      <br />
+      <div style={{ padding: 50 }}>
+        <Tooltip left={true} text="Comma seperated info">
+          <span className="info--small"></span>
+        </Tooltip>
+      </div>
+    </>
+  );
+};
+
+Default.storyName = "default";

starsky/starsky/clientapp/src/components/atoms/tooltip/tooltip.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+
+interface TooltipProps {
+  text: string;
+  children?: React.ReactNode;
+  left: boolean;
+}
+
+const Tooltip: React.FC<TooltipProps> = ({ text, children, left }) => {
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  const handleMouseEnter = () => {
+    setShowTooltip((prevState) => !prevState);
+  };
+
+  const handleMouseLeave = () => {
+    setShowTooltip(false);
+  };
+
+  return (
+    <button
+      className={left ? "tooltip-container left" : "tooltip-container"}
+      onMouseEnter={handleMouseEnter}
+      onClick={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {children}
+      {showTooltip && (
+        <span data-test="tooltip" className="tooltip">
+          {text}
+        </span>
+      )}
+    </button>
+  );
+};
+
+export default Tooltip;