Merge remote-tracking branch 'ui/main'

mediarepo-ui/.browserslistrc

@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

mediarepo-ui/.editorconfig

@@ -0,0 +1,35 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+trim_trailing_whitespace = true
+charset = utf-8
+ij_typescript_align_multiline_chained_methods = true
+ij_typescript_force_quote_style = true
+ij_typescript_space_after_colon = true
+ij_typescript_space_after_comma = true
+ij_typescript_space_after_property_colon = true
+ij_typescript_space_after_type_colon = true
+ij_any_spaces_within_braces = true
+ij_typescript_spaces_within_object_type_braces = true
+ij_typescript_spaces_within_object_literal_braces = true
+ij_any_call_parameters_wrap = on_every_item
+ij_any_method_parameters_wrap = on_every_item
+ij_any_method_call_chain_wrap = on_every_item
+ij_typescript_method_parameters_wrap = on_every_item
+ij_any_call_parameters_new_line_after_left_paren = true
+ij_any_call_parameters_right_paren_on_new_line = true
+ij_any_method_parameters_new_line_after_left_paren = true
+ij_any_method_parameters_right_paren_on_new_line = true
+max_line_length = 120
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

mediarepo-ui/.eslintrc.json

@@ -0,0 +1,66 @@
+{
+    "root": true,
+    "ignorePatterns": [
+        "projects/**/*"
+    ],
+    "overrides": [
+        {
+            "files": [
+                "*.ts"
+            ],
+            "parserOptions": {
+                "project": [
+                    "tsconfig.json"
+                ],
+                "createDefaultProgram": true
+            },
+            "extends": [
+                "plugin:@angular-eslint/recommended",
+                "plugin:@angular-eslint/template/process-inline-templates"
+            ],
+            "rules": {
+                "@angular-eslint/directive-selector": [
+                    "error",
+                    {
+                        "type": "attribute",
+                        "prefix": "app",
+                        "style": "camelCase"
+                    }
+                ],
+                "@angular-eslint/component-selector": [
+                    "error",
+                    {
+                        "type": "element",
+                        "prefix": "app",
+                        "style": "kebab-case"
+                    }
+                ],
+                "quotes": [
+                    "warn",
+                    "double",
+                    {
+                        "avoidEscape": true
+                    }
+                ],
+                "indent": [
+                    "error",
+                    4,
+                    {
+                        "SwitchCase": 1
+                    }
+                ],
+                "no-unused-expressions": "warn",
+                "semi": "error"
+            }
+        },
+        {
+            "files": [
+                "*.html"
+            ],
+            "extends": [
+                "plugin:@angular-eslint/template/recommended"
+            ],
+            "rules": {}
+        }
+    ]
+}

mediarepo-ui/.github/workflows/build.yml

@@ -0,0 +1,131 @@
+name: Build
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+      - github-actions
+
+jobs:
+  build-debug:
+
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, macos-latest, windows-latest]
+
+    steps:
+    - uses: actions/checkout@v2
+
+    - name: Cache Dependencies
+      id: cache-dependencies
+      uses: actions/cache@v2
+      with:
+        path: |
+          node_modules
+          src-tauri/target/**/deps
+          /home/runner/.cargo/bin
+          ~/.cargo
+        key: ${{ runner.os }}-dependencies-${{ hashFiles('src-tauri/Cargo.lock') }}-${{ hashFiles('yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-dependencies-
+          ${{ runner.os }}-release-dependencies-
+
+    - name: Use Node.js 16
+      uses: actions/setup-node@v1
+      with:
+        node-version: 16
+
+    - name: Install Tauri
+      run: cargo install tauri-cli --git https://github.com/tauri-apps/tauri
+
+    - name: Install Angular CLI
+      run: npm install -g @angular/cli
+
+    - name: Install yarn
+      run: npm install -g yarn
+
+    - name: Install dependencies
+      run: yarn install
+
+    - name: Install OS-specific dependencies
+      uses: knicknic/os-specific-run@v1.0.3
+      with:
+        linux: |
+          sudo apt update
+          sudo apt install libwebkit2gtk-4.0-dev libgtk-3-dev libappindicator3-dev  -y
+
+    - name: Build project
+      run: cargo tauri build --debug
+
+    - name: Upload artifacts
+      uses: actions/upload-artifact@v2
+      with:
+        name: mediarepo-ui-${{ runner.os }}-debug
+        path: |
+          src-tauri/target/debug/bundle
+          src-tauri/target/debug/mediarepo-ui*
+
+  build-release:
+
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, macos-latest, windows-latest]
+
+    steps:
+    - uses: actions/checkout@v2
+
+    - name: Cache Dependencies
+      id: cache-dependencies
+      uses: actions/cache@v2
+      with:
+        path: |
+          node_modules
+          src-tauri/target
+          /home/runner/.cargo
+          ~/.cargo
+        key: ${{ runner.os }}-release-dependencies-${{ hashFiles('src-tauri/Cargo.lock') }}-${{ hashFiles('yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-release-dependencies-
+          ${{ runner.os }}-dependencies-
+
+    - name: Use Node.js 16
+      uses: actions/setup-node@v1
+      with:
+        node-version: 16
+
+    - name: Install Tauri
+      run: cargo install tauri-cli --git https://github.com/tauri-apps/tauri
+
+    - name: Install Angular CLI
+      run: npm install -g @angular/cli
+
+    - name: Install yarn
+      run: npm install -g yarn
+
+    - name: Install dependencies
+      run: yarn install
+
+    - name: Install OS-specific dependencies
+      uses: knicknic/os-specific-run@v1.0.3
+      with:
+        linux: |
+          sudo apt update
+          sudo apt install libwebkit2gtk-4.0-dev libgtk-3-dev libappindicator3-dev  -y
+
+    - name: Build project
+      run: cargo tauri build
+
+    - name: Upload artifacts
+      uses: actions/upload-artifact@v2
+      with:
+        name: mediarepo-ui-${{ runner.os }}-release
+        path: |
+          src-tauri/target/release/bundle
+          src-tauri/target/release/mediarepo-ui*

mediarepo-ui/.gitignore

@@ -0,0 +1,48 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# angular stuff
+.angular
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

mediarepo-ui/LICENSE

@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

mediarepo-ui/README.md

@@ -0,0 +1,33 @@
+<h1 align="center">
+mediarepo-ui
+</h1>
+<p align="center">
+<img src="https://github.com/Trivernis/mediarepo-ui/raw/main/src-tauri/icons/64x64.png"/>
+</p>
+<h3 align="center" style="color:red">This repository is a work in progress</h3>
+
+- - -
+
+This repository contains a frontend client to connect to
+the [mediarepo-daemon](https://github.com/Trivernis/mediarepo-daemon). It is written in tauri (yay).
+
+## Usage
+
+Refer to [the tauri documentation](https://tauri.studio/en/docs/getting-started) for information about setting up your
+environment to build this project. With the `cargo-tauri` tooling installed you can run
+
+```
+cargo tauri dev
+```
+
+to start the application in development mode or
+
+```
+cargo tauri build
+```
+
+to bundle the application.
+
+## License
+
+GPL-3

mediarepo-ui/angular.json

@@ -0,0 +1,130 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "cli": {
+        "packageManager": "yarn",
+        "defaultCollection": "@angular-eslint/schematics"
+    },
+    "newProjectRoot": "projects",
+    "projects": {
+        "mediarepo-ui": {
+            "projectType": "application",
+            "schematics": {
+                "@schematics/angular:component": {
+                    "style": "scss"
+                },
+                "@schematics/angular:application": {
+                    "strict": true
+                }
+            },
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "app",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist/mediarepo-ui",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.app.json",
+                        "inlineStyleLanguage": "scss",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
+                            "src/styles.scss"
+                        ],
+                        "scripts": []
+                    },
+                    "configurations": {
+                        "production": {
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "1mb",
+                                    "maximumError": "10mb"
+                                },
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "6kb",
+                                    "maximumError": "100kb"
+                                }
+                            ],
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.prod.ts"
+                                }
+                            ],
+                            "outputHashing": "all"
+                        },
+                        "development": {
+                            "buildOptimizer": false,
+                            "optimization": {
+                                "fonts": false,
+                                "styles": false,
+                                "scripts": true
+                            },
+                            "vendorChunk": true,
+                            "extractLicenses": false,
+                            "sourceMap": true,
+                            "namedChunks": true
+                        }
+                    },
+                    "defaultConfiguration": "production"
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "mediarepo-ui:build:production"
+                        },
+                        "development": {
+                            "browserTarget": "mediarepo-ui:build:development"
+                        }
+                    },
+                    "defaultConfiguration": "development"
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "mediarepo-ui:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.spec.json",
+                        "karmaConfig": "karma.conf.js",
+                        "inlineStyleLanguage": "scss",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
+                            "src/styles.scss"
+                        ],
+                        "scripts": []
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-eslint/builder:lint",
+                    "options": {
+                        "lintFilePatterns": [
+                            "src/**/*.ts",
+                            "src/**/*.html"
+                        ]
+                    }
+                }
+            }
+        }
+    },
+    "defaultProject": "mediarepo-ui"
+}

mediarepo-ui/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/mediarepo-ui'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

mediarepo-ui/package.json

@@ -0,0 +1,62 @@
+{
+    "name": "mediarepo-ui",
+    "version": "0.12.0",
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve",
+        "build": "ng build",
+        "watch": "ng build --watch --configuration development",
+        "watch-prod": "ng build --watch --configuration production",
+        "test": "ng test",
+        "lint": "ng lint",
+        "tauri": "tauri"
+    },
+    "private": true,
+    "dependencies": {
+        "@angular/animations": "~13.1.2",
+        "@angular/cdk": "^13.1.2",
+        "@angular/common": "~13.1.2",
+        "@angular/compiler": "~13.1.2",
+        "@angular/core": "~13.1.2",
+        "@angular/flex-layout": "^13.0.0-beta.36",
+        "@angular/forms": "~13.1.2",
+        "@angular/material": "^13.1.2",
+        "@angular/platform-browser": "~13.1.2",
+        "@angular/platform-browser-dynamic": "~13.1.2",
+        "@angular/router": "~13.1.2",
+        "@ng-icons/core": "^13.2.1",
+        "@ng-icons/feather-icons": "^13.2.1",
+        "@ng-icons/material-icons": "^13.2.1",
+        "@tauri-apps/api": "^1.0.0-beta.8",
+        "primeicons": "^5.0.0",
+        "primeng": "^13.0.4",
+        "rxjs": "~7.5.2",
+        "tslib": "^2.3.1",
+        "w3c-keys": "^1.0.3",
+        "zone.js": "~0.11.4"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "~13.1.3",
+        "@angular-eslint/builder": "^13.0.1",
+        "@angular-eslint/eslint-plugin": "^13.0.1",
+        "@angular-eslint/eslint-plugin-template": "^13.0.1",
+        "@angular-eslint/schematics": "^13.0.1",
+        "@angular-eslint/template-parser": "^13.0.1",
+        "@angular/cli": "~13.1.3",
+        "@angular/compiler-cli": "~13.1.2",
+        "@tauri-apps/cli": "^1.0.0-beta.10",
+        "@types/file-saver": "^2.0.4",
+        "@types/jasmine": "~3.10.3",
+        "@types/node": "^16.11.19",
+        "@typescript-eslint/eslint-plugin": "5.9.1",
+        "@typescript-eslint/parser": "^5.9.1",
+        "eslint": "^8.6.0",
+        "jasmine-core": "~4.0.0",
+        "karma": "~6.3.10",
+        "karma-chrome-launcher": "~3.1.0",
+        "karma-coverage": "~2.1.0",
+        "karma-jasmine": "~4.0.1",
+        "karma-jasmine-html-reporter": "~1.7.0",
+        "typescript": "~4.5.4"
+    }
+}

mediarepo-ui/src-tauri/.gitignore

@@ -0,0 +1,4 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+WixTools

mediarepo-ui/src-tauri/Cargo.toml

@@ -0,0 +1,36 @@
+[package]
+name = "app"
+version = "0.12.0"
+description = "A Tauri App"
+authors = ["you"]
+license = ""
+repository = ""
+default-run = "app"
+edition = "2018"
+build = "src/build.rs"
+
+[build-dependencies]
+tauri-build = { version = "^1.0.0-beta.4" }
+
+[dependencies]
+serde_json = "^1.0"
+serde = { version = "^1.0", features = ["derive"] }
+thiserror = "^1.0.30"
+typemap_rev = "^0.1.5"
+
+[dependencies.tauri]
+version = "^1.0.0-beta.8"
+features = ["dialog-all", "path-all", "shell-all"]
+
+[dependencies.tracing-subscriber]
+version = "^0.3.0"
+features = ["env-filter"]
+
+[dependencies.mediarepo-api]
+git = "https://github.com/Trivernis/mediarepo-api.git"
+rev = "57d85eb3a668a8d4d344b7fbe2403731a16625a7"
+features = ["tauri-plugin"]
+
+[features]
+default = ["custom-protocol"]
+custom-protocol = ["tauri/custom-protocol"]

mediarepo-ui/src-tauri/rustfmt.toml

@@ -0,0 +1,14 @@
+max_width = 100
+hard_tabs = false
+tab_spaces = 2
+newline_style = "Auto"
+use_small_heuristics = "Default"
+reorder_imports = true
+reorder_modules = true
+remove_nested_parens = true
+edition = "2018"
+merge_derives = true
+use_try_shorthand = false
+use_field_init_shorthand = false
+force_explicit_abi = true
+imports_granularity = "Crate"

mediarepo-ui/src-tauri/src/build.rs

@@ -0,0 +1,3 @@
+fn main() {
+  tauri_build::build()
+}

mediarepo-ui/src-tauri/src/main.rs

@@ -0,0 +1,19 @@
+#![cfg_attr(
+  all(not(debug_assertions), target_os = "windows"),
+  windows_subsystem = "windows"
+)]
+
+use tracing_subscriber::fmt::format::FmtSpan;
+use tracing_subscriber::EnvFilter;
+
+fn main() {
+  tracing_subscriber::fmt::SubscriberBuilder::default()
+    .with_env_filter(EnvFilter::from_default_env())
+    .with_writer(std::io::stdout)
+    .with_span_events(FmtSpan::NEW | FmtSpan::CLOSE)
+    .compact()
+    .init();
+  mediarepo_api::tauri_plugin::register_plugin(tauri::Builder::default())
+    .run(tauri::generate_context!())
+    .expect("error while running tauri application");
+}

mediarepo-ui/src-tauri/tauri.conf.json

@@ -0,0 +1,76 @@
+{
+    "package": {
+        "productName": "mediarepo-ui",
+        "version": "0.12.0"
+    },
+    "build": {
+        "distDir": "../dist/mediarepo-ui",
+        "devPath": "http://localhost:4200",
+        "beforeDevCommand": "yarn start",
+        "beforeBuildCommand": "yarn build"
+    },
+    "tauri": {
+        "bundle": {
+            "active": true,
+            "targets": "all",
+            "identifier": "net.trivernis.mediarepo",
+            "icon": [
+                "icons/32x32.png",
+                "icons/64x64.png",
+                "icons/128x128.png",
+                "icons/128x128@2x.png",
+                "icons/icon.ico",
+                "icons/icon.icns"
+            ],
+            "resources": [],
+            "externalBin": [],
+            "copyright": "",
+            "category": "Productivity",
+            "shortDescription": "A media management tool",
+            "longDescription": "",
+            "deb": {
+                "depends": [],
+                "useBootstrapper": false
+            },
+            "macOS": {
+                "frameworks": [],
+                "minimumSystemVersion": "",
+                "useBootstrapper": false,
+                "exceptionDomain": "",
+                "signingIdentity": null,
+                "entitlements": null
+            },
+            "windows": {
+                "certificateThumbprint": null,
+                "digestAlgorithm": "sha256",
+                "timestampUrl": ""
+            }
+        },
+        "updater": {
+            "active": false
+        },
+        "allowlist": {
+            "dialog": {
+                "all": true
+            },
+            "shell": {
+                "all": true
+            },
+            "path": {
+                "all": true
+            }
+        },
+        "windows": [
+            {
+                "title": "mediarepo",
+                "width": 1920,
+                "height": 1080,
+                "resizable": true,
+                "fullscreen": false
+            }
+        ],
+        "security": {
+            "csp": "default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self' once: thumb: content:"
+        }
+    }
+}

mediarepo-ui/src/api/Api.ts

@@ -0,0 +1,180 @@
+import {FileBasicData, FileMetadata, FileOsMetadata} from "./api-types/files";
+import {invoke} from "@tauri-apps/api/tauri";
+import {ApiFunction} from "./api-types/functions";
+import {
+    AddLocalFileREquest,
+    AddRepositoryRequest,
+    ChangeFileTagsRequest,
+    CheckDaemonRunningRequest,
+    CheckLocalRepositoryExistsRequest,
+    CreateTagsRequest,
+    DeleteFileRequest,
+    DeleteRepositoryRequest,
+    DeleteThumbnailsRequest,
+    FindFilesRequest,
+    GetFileMetadataRequest,
+    GetSizeRequest,
+    GetTagsForFilesRequest,
+    InitRepositoryRequest,
+    ReadFileRequest,
+    RemoveRepositoryRequest,
+    ResolvePathsToFilesRequest,
+    RunJobRequest,
+    SaveFileRequest,
+    SelectRepositoryRequest,
+    SetFrontendStateRequest,
+    StartDaemonRequest,
+    UpdateFileNameRequest,
+    UpdateFileStatusRequest
+} from "./api-types/requests";
+import {RepositoryData, RepositoryMetadata, SizeMetadata} from "./api-types/repo";
+import {NamespaceData, TagData} from "./api-types/tags";
+import {ShortCache} from "./ShortCache";
+
+export class MediarepoApi {
+
+    public static async hasExecutable(): Promise<boolean> {
+        return this.invokePlugin(ApiFunction.HasExecutable);
+    }
+
+    public static async getRepositories(): Promise<RepositoryData[]> {
+        return this.invokePlugin(ApiFunction.GetRepositories);
+    }
+
+    public static async selectRepository(request: SelectRepositoryRequest): Promise<void> {
+        return this.invokePlugin(ApiFunction.SelectRepository, request);
+    }
+
+    public static async disconnectRepository(): Promise<void> {
+        return this.invokePlugin(ApiFunction.DisconnectRepository);
+    }
+
+    public static async closeLocalRepository(): Promise<void> {
+        return this.invokePlugin(ApiFunction.CloseLocalRepository);
+    }
+
+    public static async addRepository(request: AddRepositoryRequest): Promise<RepositoryData[]> {
+        return this.invokePlugin(ApiFunction.AddRepository, request);
+    }
+
+    public static async checkDaemonRunning(request: CheckDaemonRunningRequest): Promise<boolean> {
+        return this.invokePlugin(ApiFunction.CheckDaemonRunning, request);
+    }
+
+    public static async checkLocalRepositoryExists(request: CheckLocalRepositoryExistsRequest): Promise<boolean> {
+        return this.invokePlugin(ApiFunction.CheckLocalRepositoryExists, request);
+    }
+
+    public static async removeRepository(request: RemoveRepositoryRequest): Promise<void> {
+        return this.invokePlugin(ApiFunction.RemoveRepository, request);
+    }
+
+    public static async deleteRepository(request: DeleteRepositoryRequest): Promise<void> {
+        return this.invokePlugin(ApiFunction.DeleteRepository, request);
+    }
+
+    public static async startDaemon(request: StartDaemonRequest): Promise<void> {
+        return this.invokePlugin(ApiFunction.StartDaemon, request);
+    }
+
+    public static async initRepository(request: InitRepositoryRequest): Promise<void> {
+        return this.invokePlugin(ApiFunction.InitRepository, request);
+    }
+
+    public static async getRepositoryMetadata(): Promise<RepositoryMetadata> {
+        return this.invokePlugin(ApiFunction.GetRepoMetadata);
+    }
+
+    public static async getSize(request: GetSizeRequest): Promise<SizeMetadata> {
+        return this.invokePlugin(ApiFunction.GetSize, request);
+    }
+
+    public static async getActiveRepository(): Promise<RepositoryData | undefined> {
+        return this.invokePlugin(ApiFunction.GetActiveRepository);
+    }
+
+    public static async getAllFiles(): Promise<FileBasicData[]> {
+        return this.invokePlugin(ApiFunction.GetAllFiles);
+    }
+
+    public static async findFiles(request: FindFilesRequest): Promise<FileBasicData[]> {
+        return ShortCache.cached(request, () => this.invokePlugin(ApiFunction.FindFiles, request), 5000, "findFiles");
+    }
+
+    public static async getFileMetadata(request: GetFileMetadataRequest): Promise<FileMetadata> {
+        return this.invokePlugin(ApiFunction.GetFileMetadata, request);
+    }
+
+    public static async updateFileName(request: UpdateFileNameRequest): Promise<FileMetadata> {
+        return this.invokePlugin(ApiFunction.UpdateFileName, request);
+    }
+
+    public static async updateFileStatus(request: UpdateFileStatusRequest): Promise<FileBasicData> {
+        return this.invokePlugin(ApiFunction.UpdateFileStatus, request);
+    }
+
+    public static async saveFileLocally(request: SaveFileRequest): Promise<void> {
+        return this.invokePlugin(ApiFunction.SaveFileLocally, request);
+    }
+
+    public static async deleteThumbnails(request: DeleteThumbnailsRequest): Promise<void> {
+        return this.invokePlugin(ApiFunction.DeleteThumbnails, request);
+    }
+
+    public static async readFile(request: ReadFileRequest): Promise<number[]> {
+        return this.invokePlugin(ApiFunction.ReadFile, request);
+    }
+
+    public static async deleteFile(request: DeleteFileRequest): Promise<void> {
+        return this.invokePlugin(ApiFunction.DeleteFile, request);
+    }
+
+    public static async getAllTags(): Promise<TagData[]> {
+        return ShortCache.cached("all-tags", () => this.invokePlugin(ApiFunction.GetAllTags), 2000);
+    }
+
+    public static async getAllNamespaces(): Promise<NamespaceData[]> {
+        return this.invokePlugin(ApiFunction.GetAllNamespace);
+    }
+
+    public static async getTagsForFiles(request: GetTagsForFilesRequest): Promise<TagData[]> {
+        return ShortCache.cached(
+            request,
+            () => this.invokePlugin(ApiFunction.GetTagsForFiles, request),
+            1000,
+            "getTagsForFiles"
+        );
+    }
+
+    public static async createTags(request: CreateTagsRequest): Promise<TagData[]> {
+        return this.invokePlugin(ApiFunction.CreateTags, request);
+    }
+
+    public static async changeFileTags(request: ChangeFileTagsRequest): Promise<TagData[]> {
+        return this.invokePlugin(ApiFunction.ChangeFileTags, request);
+    }
+
+    public static async resolvePathsToFiles(request: ResolvePathsToFilesRequest): Promise<FileOsMetadata[]> {
+        return this.invokePlugin(ApiFunction.ResolvePathsToFiles, request);
+    }
+
+    public static async addLocalFile(request: AddLocalFileREquest): Promise<FileBasicData> {
+        return this.invokePlugin(ApiFunction.AddLocalFile, request);
+    }
+
+    public static async getFrontendState(): Promise<string> {
+        return ShortCache.cached("frontend-state", () => this.invokePlugin(ApiFunction.GetFrontendState), 1000);
+    }
+
+    public static async setFrontendState(request: SetFrontendStateRequest): Promise<void> {
+        return this.invokePlugin(ApiFunction.SetFrontendState, request);
+    }
+
+    public static async runJob(request: RunJobRequest): Promise<void> {
+        return this.invokePlugin(ApiFunction.RunJob, request);
+    }
+
+    private static async invokePlugin<T>(fn: ApiFunction, args?: any): Promise<T> {
+        return invoke<T>(`plugin:mediarepo|${fn}`, args);
+    }
+}

mediarepo-ui/src/api/ShortCache.ts

@@ -0,0 +1,69 @@
+type CacheEntry<T> = {
+    ttl: number,
+    value: T,
+}
+
+const cacheMap: {
+    [key: string]: CacheEntry<any>
+} = {};
+
+export class ShortCache {
+
+    public static async cached<T>(
+        key: any,
+        producer: () => Promise<T>,
+        ttl: number = 1000,
+        prefix: string = ""
+    ): Promise<T> {
+        const cacheKey = prefix + JSON.stringify(key);
+        const entry = this.getCacheEntry<T>(cacheKey, ttl);
+
+        if (entry) {
+            console.debug("cache hit for key", cacheKey);
+            return entry;
+        } else {
+            console.debug("cache miss key", cacheKey);
+            const value = await producer();
+            this.addCacheEntry(cacheKey, value, ttl);
+            return value;
+        }
+    }
+
+    public static startTicking() {
+        (async () => {
+            while (true) {
+                ShortCache.tick();
+                await new Promise(resolve => setTimeout(resolve, 100));
+            }
+        })();
+    }
+
+    private static addCacheEntry(key: string, value: any, ttl: number) {
+        cacheMap[key] = {
+            ttl,
+            value
+        };
+        console.debug("added cache entry with key", key);
+    }
+
+    private static getCacheEntry<T>(key: string, ttl: number): T | undefined {
+        const entry = cacheMap[key];
+        if (entry) {
+            entry.ttl = ttl;
+        }
+        return entry?.value;
+    }
+
+    private static tick() {
+        for (let key in cacheMap) {
+            cacheMap[key].ttl -= 100;
+
+            if (cacheMap[key].ttl < 0) {
+                console.debug("purged cache entry with key", key);
+                delete cacheMap[key];
+            }
+        }
+    }
+}
+
+ShortCache.startTicking();

mediarepo-ui/src/api/api-types/files.ts

@@ -0,0 +1,82 @@
+export type FilterExpression = FilterExpressionOrExpression | FilterExpressionQuery;
+
+export type FilterExpressionOrExpression = {
+    OrExpression: FilterQuery[],
+};
+export type FilterExpressionQuery = {
+    Query: FilterQuery;
+};
+
+export type FilterQuery = FilterQueryTag | FilterQueryProperty;
+
+export type FilterQueryTag = { Tag: TagQuery };
+export type FilterQueryProperty = { Property: PropertyQuery };
+
+export type TagQuery = {
+    negate: boolean,
+    tag: string,
+};
+
+export type PropertyQuery = PropertyQueryStatus
+    | PropertyQueryFileSize
+    | PropertyQueryImportedTime
+    | PropertyQueryChangedTime
+    | PropertyQueryCreatedTime
+    | PropertyQueryTagCount
+    | PropertyQueryCd
+    | PropertyQueryId;
+
+export type PropertyQueryStatus = { Status: FileStatus };
+export type PropertyQueryFileSize = { FileSize: ValueComparator<number> };
+export type PropertyQueryImportedTime = { ImportedTime: ValueComparator<Date> };
+export type PropertyQueryChangedTime = { ChangedTime: ValueComparator<Date> };
+export type PropertyQueryCreatedTime = { CreatedTime: ValueComparator<Date> };
+export type PropertyQueryTagCount = { TagCount: ValueComparator<number> };
+export type PropertyQueryCd = { Cd: string };
+export type PropertyQueryId = { Id: number };
+
+export type ValueComparator<T> =
+    { Less: T }
+    | { Equal: T }
+    | { Greater: T }
+    | { Between: T[] }
+
+export type SortKey = { Namespace: SortNamespace }
+    | { FileName: SortDirection }
+    | { FileSize: SortDirection }
+    | { FileImportedTime: SortDirection }
+    | { FileChangeTime: SortDirection }
+    | { FileType: SortDirection };
+
+export type SortNamespace = {
+    name: string,
+    direction: SortDirection,
+}
+
+export type SortDirection = "Ascending" | "Descending";
+
+export type FileBasicData = {
+    id: number,
+    status: FileStatus,
+    cd: string,
+    mime_type: string,
+};
+
+export type FileStatus = "Imported" | "Archived" | "Deleted";
+
+export type FileMetadata = {
+    file_id: number,
+    name?: string,
+    comment?: string,
+    creation_time: Date,
+    change_time: Date,
+    import_time: Date,
+};
+
+export type FileOsMetadata = {
+    name: string,
+    path: string,
+    mime_type: string,
+    created_at: Date,
+    modified_at: Date,
+};

mediarepo-ui/src/api/api-types/functions.ts

@@ -0,0 +1,42 @@
+export enum ApiFunction {
+    // repository
+    HasExecutable = "has_executable",
+    GetRepositories = "get_repositories",
+    SelectRepository = "select_repository",
+    DisconnectRepository = "disconnect_repository",
+    CloseLocalRepository = "close_local_repository",
+    AddRepository = "add_repository",
+    CheckDaemonRunning = "check_daemon_running",
+    CheckLocalRepositoryExists = "check_local_repository_exists",
+    RemoveRepository = "remove_repository",
+    DeleteRepository = "delete_repository",
+    StartDaemon = "start_daemon",
+    InitRepository = "init_repository",
+    GetRepoMetadata = "get_repo_metadata",
+    GetSize = "get_size",
+    GetActiveRepository = "get_active_repository",
+    // files
+    GetAllFiles = "get_all_files",
+    FindFiles = "find_files",
+    GetFileMetadata = "get_file_metadata",
+    UpdateFileName = "update_file_name",
+    UpdateFileStatus = "update_file_status",
+    SaveFileLocally = "save_file_locally",
+    DeleteThumbnails = "delete_thumbnails",
+    ReadFile = "read_file",
+    DeleteFile = "delete_file",
+    // tags
+    GetAllTags = "get_all_tags",
+    GetAllNamespace = "get_all_namespaces",
+    GetTagsForFiles = "get_tags_for_files",
+    CreateTags = "create_tags",
+    ChangeFileTags = "change_file_tags",
+    // import
+    ResolvePathsToFiles = "resolve_paths_to_files",
+    AddLocalFile = "add_local_file",
+    // state
+    GetFrontendState = "get_frontend_state",
+    SetFrontendState = "set_frontend_state",
+    // jobs
+    RunJob = "run_job",
+}

mediarepo-ui/src/api/api-types/job.ts

@@ -0,0 +1,3 @@
+export type JobType = "MigrateContentDescriptors"
+    | "CalculateSizes"
+    | "CheckIntegrity";

mediarepo-ui/src/api/api-types/repo.ts

@@ -0,0 +1,22 @@
+export type RepositoryMetadata = {
+    version: string,
+    file_count: number,
+    tag_count: number,
+    namespace_count: number,
+    mapping_count: number,
+    hash_count: number,
+};
+
+export type SizeMetadata = {
+    size_type: SizeType,
+    size: number,
+};
+
+export type SizeType = "Total" | "FileFolder" | "ThumbFolder" | "DatabaseFile";
+
+export type RepositoryData = {
+    name: string,
+    address?: string,
+    path?: string,
+    local: boolean,
+}

mediarepo-ui/src/api/api-types/requests.ts

@@ -0,0 +1,106 @@
+import {FileOsMetadata, FileStatus, FilterExpression, SortKey} from "./files";
+import {RepositoryData, SizeType} from "./repo";
+import {JobType} from "./job";
+
+type NameIdentifierRequest = {
+    name: string
+};
+
+type IdIdentifierRequest = {
+    id: number
+};
+
+type RepoPathIdentifier = {
+    repoPath: string;
+}
+
+export type SelectRepositoryRequest = NameIdentifierRequest;
+
+export type AddRepositoryRequest = RepositoryData;
+
+export type CheckLocalRepositoryExistsRequest = {
+    path: string
+};
+
+export type RemoveRepositoryRequest = NameIdentifierRequest;
+
+export type DeleteRepositoryRequest = NameIdentifierRequest;
+
+export type CheckDaemonRunningRequest = {
+    address: string
+};
+
+export type StartDaemonRequest = RepoPathIdentifier;
+
+export type InitRepositoryRequest = RepoPathIdentifier;
+
+export type GetSizeRequest = {
+    sizeType: SizeType
+};
+
+export type FindFilesRequest = {
+    filters: FilterExpression[],
+    sortBy: SortKey[]
+};
+
+export type UpdateFileNameRequest = {
+    id: number,
+    name: string,
+};
+
+export type SaveFileRequest = {
+    id: number,
+    path: string,
+};
+
+export type DeleteThumbnailsRequest = IdIdentifierRequest;
+
+export type ReadFileRequest = {
+    hash: string,
+    mimeType: string,
+};
+
+export type DeleteFileRequest = IdIdentifierRequest;
+
+export type GetFileMetadataRequest = IdIdentifierRequest;
+
+export type UpdateFileStatusRequest = {
+    id: number,
+    status: FileStatus
+};
+
+export type GetTagsForFilesRequest = {
+    cds: string[]
+};
+
+export type CreateTagsRequest = {
+    tags: string[]
+};
+
+export type ChangeFileTagsRequest = {
+    id: number,
+    addedTags: number[],
+    removedTags: number[],
+};
+
+export type ResolvePathsToFilesRequest = {
+    paths: string[],
+};
+
+export type AddLocalFileREquest = {
+    metadata: FileOsMetadata,
+    options: AddFileOptions,
+}
+
+type AddFileOptions = {
+    read_tags_from_txt: boolean,
+    delete_after_import: boolean,
+};
+
+export type SetFrontendStateRequest = {
+    state: string
+};
+
+export type RunJobRequest = {
+    jobType: JobType,
+}

mediarepo-ui/src/api/api-types/tags.ts

@@ -0,0 +1,10 @@
+export type TagData = {
+    id: number,
+    namespace?: string,
+    name: string,
+};
+
+export type NamespaceData = {
+    id: number,
+    name: string,
+};

mediarepo-ui/src/api/models/File.ts

@@ -0,0 +1,32 @@
+import {FileBasicData, FileStatus} from "../api-types/files";
+
+export class File {
+    constructor(
+        private basicData: FileBasicData,
+    ) {
+    }
+
+    public get rawData(): FileBasicData {
+        return this.basicData;
+    }
+
+    public get id(): number {
+        return this.basicData.id;
+    }
+
+    public get cd(): string {
+        return this.basicData.cd;
+    }
+
+    public get status(): FileStatus {
+        return this.basicData.status;
+    }
+
+    public get mimeType(): string {
+        return this.basicData.mime_type;
+    }
+
+    public set status(value: FileStatus) {
+        this.basicData.status = value;
+    }
+}

mediarepo-ui/src/api/models/FilterQueryBuilder.ts

@@ -0,0 +1,332 @@
+import {FileStatus, FilterExpression, FilterQuery, PropertyQuery, ValueComparator} from "../api-types/files";
+
+export type Comparator = "Less" | "Equal" | "Greater" | "Between";
+export type PropertyType =
+    "Status"
+    | "FileSize"
+    | "ImportedTime"
+    | "ChangedTime"
+    | "CreatedTime"
+    | "TagCount"
+    | "Cd"
+    | "Id";
+
+export class FilterQueryBuilder {
+
+    public static tag(tag: string, negate: boolean): FilterQuery {
+        return { Tag: { tag, negate } };
+    }
+
+    public static status(status: FileStatus): FilterQuery {
+        return filterQuery({ Status: status });
+    }
+
+    public static fileSize(size: number, comparator: Comparator, max_size?: number): FilterQuery {
+        return filterQuery(
+            { FileSize: valuesToCompareEnum(size, comparator, max_size) });
+    }
+
+    public static importedTime(date: Date, comparator: Comparator, max_date: Date): FilterQuery {
+        return filterQuery({
+            ImportedTime: valuesToCompareEnum(date, comparator,
+                max_date
+            )
+        });
+    }
+
+    public static changedTime(date: Date, comparator: Comparator, max_date: Date): FilterQuery {
+        return filterQuery({
+            ChangedTime: valuesToCompareEnum(date, comparator, max_date)
+        });
+    }
+
+    public static createdTime(date: Date, comparator: Comparator, max_date: Date): FilterQuery {
+        return filterQuery({
+            CreatedTime: valuesToCompareEnum(date, comparator, max_date)
+        });
+    }
+
+    public static tagCount(count: number, comparator: Comparator, max_count: number): FilterQuery {
+        return filterQuery({
+            TagCount: valuesToCompareEnum(count, comparator, max_count)
+        });
+    }
+
+    public static contentDescriptor(descriptor: string): FilterQuery {
+        return filterQuery({ Cd: descriptor });
+    }
+
+    public static fileId(id: number): FilterQuery {
+        return filterQuery({ Id: id });
+    }
+
+    public static buildFilterExpressionsFromString(expressionStr: string): FilterExpression | undefined {
+        const parts = expressionStr.split(/\s+or\s+/gi);
+        const queries = parts.map(part => this.buildFilterFromString(part)).filter(f => f != undefined) as FilterQuery[];
+
+        if (queries.length > 1) {
+            return { OrExpression: queries };
+        } else if (queries.length === 1) {
+            return { Query: queries[0] };
+        } else {
+            return undefined;
+        }
+    }
+
+    public static buildFilterFromString(filterStr: string): FilterQuery | undefined {
+        filterStr = filterStr.trim();
+
+        if (filterStr.startsWith(".")) {
+            const cleanFilter = filterStr.replace(/^\./, "");
+            const parsedPropertyFilter = this.parsePropertyFilterQuery(cleanFilter);
+            if (parsedPropertyFilter) {
+                return parsedPropertyFilter;
+            }
+        } else if (filterStr.startsWith("-")) {
+            const tag = filterStr.replace(/^-/, "").trim();
+            return this.tag(tag, true);
+        }
+
+        return this.tag(filterStr, false);
+    }
+
+    private static parsePropertyFilterQuery(expression: string): FilterQuery | undefined {
+        let propertyName = "";
+        let compareValue = "";
+        let rawComparator = "";
+        let comparatorStarted = false;
+        let valueStarted = false;
+
+        for (const char of expression) {
+            if (!valueStarted) {
+                switch (char) {
+                    case " ":
+                        break;
+                    case "=":
+                    case "!":
+                    case ">":
+                    case "<":
+                        rawComparator += char;
+                        comparatorStarted = true;
+                        break;
+                    default:
+                        valueStarted = comparatorStarted;
+                        if (valueStarted) {
+                            compareValue += char;
+                        } else {
+                            propertyName += char;
+                        }
+                }
+            } else {
+                compareValue += char;
+            }
+        }
+
+        return this.parseQueryFromParts(propertyName, rawComparator, compareValue);
+    }
+
+    private static parseQueryFromParts(
+        propertyName: string,
+        rawComparator: string,
+        compareValue: string
+    ): FilterQuery | undefined {
+        const property = this.parsePropertyName(propertyName);
+        const comparator = this.parseComparator(rawComparator);
+
+        if (property && comparator) {
+            let value;
+            switch (property) {
+                case "Status":
+                    value = parseStatus(compareValue);
+                    if (comparator === "Equal" && value != undefined) {
+                        return this.status(value);
+                    }
+                    break;
+                case "FileSize":
+                    value = this.parsePropertyValue(compareValue, parseByteSize);
+                    if (value != undefined) {
+                        return this.fileSize(value[0], comparator, value[1]);
+                    }
+                    break;
+                case "ImportedTime":
+                    value = this.parsePropertyValue(compareValue, parseDate);
+                    if (value != undefined) {
+                        return this.importedTime(value[0], comparator, value[1]);
+                    }
+
+                    break;
+                case "ChangedTime":
+                    value = this.parsePropertyValue(compareValue, parseDate);
+                    if (value != undefined) {
+                        return this.changedTime(value[0], comparator, value[1]);
+                    }
+                    break;
+                case "CreatedTime":
+                    value = this.parsePropertyValue(compareValue, parseDate);
+                    if (value != undefined) {
+                        return this.createdTime(value[0], comparator, value[1]);
+                    }
+                    break;
+                case "TagCount":
+                    value = this.parsePropertyValue(compareValue, parseNumber);
+                    if (value != undefined) {
+                        return this.tagCount(value[0], comparator, value[1]);
+                    }
+                    break;
+                case "Cd":
+                    if (compareValue) {
+                        return this.contentDescriptor(compareValue);
+                    }
+                    break;
+                case "Id":
+                    value = parseNumber(compareValue);
+
+                    if (value != undefined) {
+                        return this.fileId(value);
+                    }
+
+                    break;
+            }
+        }
+
+        return undefined;
+    }
+
+    private static parseComparator(comparatorStr: string): Comparator | undefined {
+        switch (comparatorStr) {
+            case "=":
+            case "==":
+                return "Equal";
+            case "<":
+                return "Less";
+            case ">":
+                return "Greater";
+            default:
+                return;
+        }
+    }
+
+    private static parsePropertyName(nameStr: string): PropertyType | undefined {
+        switch (nameStr.toLowerCase().replace(/-_/g, "")) {
+            case "status":
+                return "Status";
+            case "filesize":
+                return "FileSize";
+            case "importedat":
+            case "importeddate":
+            case "importedtime":
+                return "ImportedTime";
+            case "changedat":
+            case "changeddate":
+            case "changedtime":
+                return "ChangedTime";
+            case "createdat":
+            case "createddate":
+            case "createdtime":
+                return "CreatedTime";
+            case "tagcount":
+                return "TagCount";
+            case "cd":
+            case "contentdescriptor":
+                return "Cd";
+            case "id":
+            case "fileid":
+                return "Id";
+            default:
+                return;
+        }
+    }
+
+    private static parsePropertyValue<T>(
+        valueStr: string,
+        parseFn: (valueStr: string) => T | undefined
+    ): T[] | undefined {
+        const [firstValue, secondValue] = valueStr.split(" ");
+        if (secondValue != undefined) {
+            const firstValueParsed = parseFn(firstValue);
+            const secondValueParsed = parseFn(secondValue);
+
+            if (firstValueParsed && secondValueParsed) {
+                return [firstValueParsed, secondValueParsed];
+            }
+        } else {
+            const value = parseFn(firstValue);
+            return value != undefined ? [value] : undefined;
+        }
+
+        return;
+    }
+}
+
+function filterQuery(propertyQuery: PropertyQuery): FilterQuery {
+    return { Property: propertyQuery };
+}
+
+function valuesToCompareEnum<T>(min_value: T, comparator: Comparator, max_value?: T): ValueComparator<T> {
+    switch (comparator) {
+        case "Less":
+            return { Less: min_value };
+        case "Equal":
+            return { Equal: min_value };
+        case "Greater":
+            return { Greater: min_value };
+        case "Between":
+            return { Between: [min_value, max_value!] };
+    }
+}
+
+function parseNumber(value: string): number | undefined {
+    const num = Number(value);
+    return isNaN(num) ? undefined : num;
+}
+
+function parseByteSize(value: string): number | undefined {
+    const valueMappings: { [key: string]: number } = {
+        "TiB": 1024 ** 4,
+        "GiB": 1024 ** 3,
+        "MiB": 1024 ** 2,
+        "KiB": 1024,
+        "TB": 1000 ** 4,
+        "GB": 1000 ** 3,
+        "MB": 1000 ** 2,
+        "KB": 1000
+    };
+    const stringValue = value.replace(/TiB|GiB|MiB|KiB|TB|GB|MB|KB$/i, "");
+    let number = parseNumber(stringValue);
+    const checkUnit = (unit: string) => value.toLowerCase().includes(unit.toLowerCase());
+
+    if (number) {
+        for (const key of Object.keys(valueMappings)) {
+            if (checkUnit(key)) {
+                console.log("key", key, "valueMapping", valueMappings[key]);
+                number *= valueMappings[key];
+                console.log("number", number);
+                break;
+            }
+        }
+    }
+
+    return number;
+}
+
+function parseDate(value: string): Date | undefined {
+    const date = Date.parse(value);
+
+    if (isNaN(date)) {
+        return undefined;
+    }
+    return new Date(date);
+}
+
+function parseStatus(value: string): FileStatus | undefined {
+    switch (value.toLowerCase()) {
+        case "imported":
+            return "Imported";
+        case "archived":
+            return "Archived";
+        case "deleted":
+            return "Deleted";
+        default:
+            return undefined;
+    }
+}

mediarepo-ui/src/api/models/Namespace.ts

@@ -0,0 +1,14 @@
+import {NamespaceData} from "../api-types/tags";
+
+export class Namespace {
+    constructor(private data: NamespaceData) {
+    }
+
+    public get id(): number {
+        return this.data.id;
+    }
+
+    public get name(): string {
+        return this.data.name;
+    }
+}

mediarepo-ui/src/api/models/Repository.ts

@@ -0,0 +1,28 @@
+import {RepositoryData} from "../api-types/repo";
+
+export class Repository {
+    constructor(
+        private repoData: RepositoryData,
+    ) {
+    }
+
+    public get name(): string {
+        return this.repoData.name;
+    }
+
+    public get address(): string | undefined {
+        return this.repoData.address;
+    }
+
+    public get path(): string | undefined {
+        return this.repoData.path;
+    }
+
+    public get local(): boolean {
+        return this.repoData.local;
+    }
+
+    public update(data: {name?: string, address?: string, path?: string, local?: boolean}) {
+        this.repoData = Object.assign(this.repoData, data);
+    }
+}

mediarepo-ui/src/api/models/SearchFilters.ts

@@ -0,0 +1,122 @@
+import {FilterExpression, FilterExpressionQuery, FilterQuery} from "../api-types/files";
+import * as deepEqual from "fast-deep-equal";
+
+export class SearchFilters {
+    constructor(private filters: FilterExpression[]) {
+    }
+
+    public get length() {
+        return this.filters.length;
+    }
+
+    public getFilters(): FilterExpression[] {
+        return this.filters;
+    }
+
+    public getSubfilterAtIndex(index: number, subindex: number): FilterQuery | undefined {
+        if (index < this.filters.length) {
+            const filterEntry = this.filters[index]!;
+            if ("OrExpression" in filterEntry) {
+                return filterEntry.OrExpression[subindex];
+            }
+        }
+        return undefined;
+    }
+
+    public hasFilter(expression: FilterExpression): boolean {
+        return !!this.filters.find(f => deepEqual(f, expression));
+    }
+
+    public hasSubfilter(query: FilterQuery): boolean {
+        return !!this.filters.find(f => {
+            if ("OrExpression" in f) {
+                return !!f.OrExpression.find(q => deepEqual(q, query));
+            } else {
+                return deepEqual(f.Query, query);
+            }
+        });
+    }
+
+    public addFilterExpression(filter: FilterExpression) {
+        this.filters.push(filter);
+        this.processChangesToOrExpressions();
+    }
+
+    public addFilter(filter: FilterExpression, index: number) {
+        this.filters = [...this.filters.slice(
+            0,
+            index
+        ), filter, ...this.filters.slice(index)];
+    }
+
+    public appendFilter(filter: FilterQuery) {
+        this.filters.push({ Query: filter });
+    }
+
+    public removeFilter(filterToRemove: FilterExpression) {
+        this.filters = this.filters.filter(f => !deepEqual(f, filterToRemove));
+    }
+
+    public removeFilterAtIndex(index: number) {
+        this.filters.splice(index, 1);
+    }
+
+    public appendSubfilter(filter: FilterQuery, index: number) {
+        const expressionEntry = this.filters[index];
+
+        if (expressionEntry && "OrExpression" in expressionEntry) {
+            expressionEntry["OrExpression"]!.push(filter);
+        } else {
+            const otherQuery = expressionEntry["Query"]!;
+            let entry = expressionEntry as unknown as { OrExpression: FilterQuery[], Query: undefined };
+            delete entry["Query"];
+            entry["OrExpression"] = [otherQuery, filter];
+        }
+    }
+
+    public removeSubfilter(queryToRemove: FilterQuery) {
+        let index = this.filters.findIndex(f => {
+            if ("Query" in f) {
+                return false;
+            } else {
+                f["OrExpression"] = f["OrExpression"]!.filter(q => !deepEqual(q, queryToRemove));
+                return (!f["OrExpression"] || f["OrExpression"]!.length === 0);
+            }
+        });
+        if (index >= 0) {
+            this.filters.splice(index, 1);
+        }
+        this.processChangesToOrExpressions();
+    }
+
+    public removeSubfilterAtIndex(index: number, subindex: number) {
+        const filterEntry = this.filters[index];
+
+        if (filterEntry && "OrExpression" in filterEntry) {
+            filterEntry["OrExpression"]!.splice(subindex, 1);
+
+            if (filterEntry["OrExpression"]!.length === 0) {
+                this.removeFilterAtIndex(index);
+            }
+        }
+        this.processChangesToOrExpressions();
+    }
+
+    private processChangesToOrExpressions() {
+        const filters_to_remove: FilterExpression[] = [];
+
+        for (const filter of this.filters) {
+            if ("OrExpression" in filter && !("Query" in filter)) {
+                if (filter.OrExpression && filter.OrExpression.length === 1) {
+                    const query = filter.OrExpression[0];
+                    let newFilter = filter as unknown as FilterExpressionQuery & { OrExpression: undefined };
+                    delete newFilter["OrExpression"];
+                    newFilter.Query = query;
+                } else if (!filter.OrExpression || filter.OrExpression.length === 0) {
+                    filters_to_remove.push(filter);
+                }
+            }
+        }
+        filters_to_remove.forEach(f => this.removeFilter(f));
+    }
+}

mediarepo-ui/src/api/models/Tag.ts

@@ -0,0 +1,30 @@
+import {TagData} from "../api-types/tags";
+
+export class Tag {
+
+    private normalizedTag?: string = undefined;
+
+    constructor(
+        private tagData: TagData,
+    ) {
+    }
+
+    public get id(): number {
+        return this.tagData.id;
+    }
+
+    public get name(): string {
+        return this.tagData.name;
+    }
+
+    public get namespace(): string | undefined {
+        return this.tagData.namespace;
+    }
+
+    public getNormalizedOutput(): string {
+        if (!this.normalizedTag) {
+            this.normalizedTag = this.namespace ? this.namespace + ":" + this.name : this.name;
+        }
+        return this.normalizedTag;
+    }
+}

mediarepo-ui/src/api/models/adaptors.ts

@@ -0,0 +1,11 @@
+export function mapOptional<I, O>(mapFn: (value: I) => O): (value: I | undefined) => O | undefined {
+    return (value: I | undefined) => value ? mapFn(value) : undefined;
+}
+
+export function mapMany<I, O>(mapFn: (value: I) => O): (value: I[]) => O[] {
+    return (value: I[]) => value.map(mapFn);
+}
+
+export function mapNew<T, V>(classType: new (value: V) => T): (value: V) => T {
+    return (value: V) => new classType(value);
+}

mediarepo-ui/src/app/app.component-theme.scss

@@ -0,0 +1,40 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin color($theme) {
+    $color-config: mat.get-color-config($theme);
+    $primary-palette: map.get($color-config, 'primary');
+    $warn-palette: map.get($color-config, 'warn');
+
+    body {
+        background-color: darken(#303030, 5);
+        color: white
+    }
+
+    .warn {
+        background-color: mat.get-color-from-palette($warn-palette);
+        color: white
+    }
+}
+
+@mixin typography($theme) {
+    // Get the typography config from the theme.
+    $typography-config: mat.get-typography-config($theme);
+
+    body {
+        font-family: mat.font-family($typography-config);
+    }
+}
+
+@mixin theme($theme) {
+    $color-config: mat.get-color-config($theme);
+    @if $color-config != null {
+        @include color($theme);
+    }
+
+    $typography-config: mat.get-typography-config($theme);
+    @if $typography-config != null {
+        @include typography($theme);
+    }
+}
+

mediarepo-ui/src/app/app.component.html

@@ -0,0 +1 @@
+<app-core></app-core>

mediarepo-ui/src/app/app.component.scss

@@ -0,0 +1,7 @@
+::ng-deep .mat-button-wrapper > ng-icon {
+    font-size: 26px;
+}
+
+::ng-deep ng-icon {
+    font-size: 24px;
+}

mediarepo-ui/src/app/app.component.spec.ts

@@ -0,0 +1,36 @@
+import {TestBed} from "@angular/core/testing";
+import {RouterTestingModule} from "@angular/router/testing";
+import {AppComponent} from "./app.component";
+
+describe("AppComponent", () => {
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [
+                RouterTestingModule
+            ],
+            declarations: [
+                AppComponent
+            ],
+        }).compileComponents();
+    });
+
+    it("should create the app", () => {
+        const fixture = TestBed.createComponent(AppComponent);
+        const app = fixture.componentInstance;
+        expect(app).toBeTruthy();
+    });
+
+    it("should have as title 'mediarepo-ui'", () => {
+        const fixture = TestBed.createComponent(AppComponent);
+        const app = fixture.componentInstance;
+        expect(app.title).toEqual("mediarepo-ui");
+    });
+
+    it("should render title", () => {
+        const fixture = TestBed.createComponent(AppComponent);
+        fixture.detectChanges();
+        const compiled = fixture.nativeElement as HTMLElement;
+        expect(compiled.querySelector(".content span")?.textContent)
+            .toContain("mediarepo-ui app is running!");
+    });
+});

mediarepo-ui/src/app/app.component.ts

@@ -0,0 +1,41 @@
+import {Component, OnInit} from "@angular/core";
+import {RepositoryService} from "./services/repository/repository.service";
+import {MatSnackBar} from "@angular/material/snack-bar";
+import {ErrorBrokerService} from "./services/error-broker/error-broker.service";
+
+@Component({
+    selector: "app-root",
+    templateUrl: "./app.component.html",
+    styleUrls: ["./app.component.scss"]
+})
+export class AppComponent implements OnInit {
+    title = "mediarepo-ui";
+
+    constructor(
+        private snackBar: MatSnackBar,
+        private errorBroker: ErrorBrokerService,
+        private repoService: RepositoryService,
+    ) {
+    }
+
+    async ngOnInit() {
+        this.errorBroker.errorCb = (err: { message: string }) => this.showError(
+            err);
+        this.errorBroker.infoCb = (info: string) => this.showInfo(info);
+        await this.repoService.loadRepositories();
+    }
+
+    private showError(err: { message: string }) {
+        this.snackBar.open(err.message, undefined, {
+            panelClass: "warn",
+            duration: 2000,
+        });
+    }
+
+    private showInfo(info: string) {
+        this.snackBar.open(info, undefined, {
+            panelClass: "primary",
+            duration: 2000,
+        });
+    }
+}

mediarepo-ui/src/app/app.module.ts

@@ -0,0 +1,22 @@
+import {NgModule} from "@angular/core";
+import {BrowserModule} from "@angular/platform-browser";
+import {AppComponent} from "./app.component";
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import {CoreModule} from "./components/core/core.module";
+import {MatSnackBarModule} from "@angular/material/snack-bar";
+
+@NgModule({
+    declarations: [
+        AppComponent,
+    ],
+    imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        CoreModule,
+        MatSnackBarModule,
+    ],
+    providers: [],
+    bootstrap: [AppComponent]
+})
+export class AppModule {
+}

mediarepo-ui/src/app/components/core/core.component.html

@@ -0,0 +1,36 @@
+<div id="content">
+    <mat-tab-group #tabGroup (selectedTabChange)="this.onTabSelectionChange($event)" animationDuration="0"
+                   class="main-tab-group">
+        <mat-tab [label]="this.selectedRepository? 'RepositoryData' : 'Repositories'">
+            <app-repositories-tab></app-repositories-tab>
+        </mat-tab>
+        <mat-tab *ngFor="let tab of tabs">
+            <ng-template mat-tab-label>
+                <div (click)="this.onMouseClickTabLabel(tab, $event)" class="tab-label-div">
+                    {{tab.category}}
+                    <button (click)="this.closeTab(tab)" class="close-tab-button" mat-icon-button>
+                        <ng-icon name="mat-close"></ng-icon>
+                    </button>
+                </div>
+            </ng-template>
+            <ng-template matTabContent>
+                <app-files-tab *ngIf="tab.category === 'Files'" [state]="tab"></app-files-tab>
+                <app-import-tab *ngIf="tab.category === 'Import'" [state]="tab"></app-import-tab>
+            </ng-template>
+        </mat-tab>
+        <mat-tab *ngIf="this.newTab" label="New Tab">
+            <div class="new-tab-content">
+                Select the tab type
+                <button (click)="this.addFilesTab()" color="primary" mat-flat-button>Files</button>
+                <button (click)="this.addImportTab()" color="primary" mat-flat-button>Import</button>
+            </div>
+        </mat-tab>
+        <mat-tab *ngIf="this.selectedRepository" disabled>
+            <ng-template mat-tab-label>
+                <button (click)="this.addTab()" class="new-tab-button" mat-icon-button>
+                    <ng-icon name="mat-plus"></ng-icon>
+                </button>
+            </ng-template>
+        </mat-tab>
+    </mat-tab-group>
+</div>

mediarepo-ui/src/app/components/core/core.component.scss

@@ -0,0 +1,64 @@
+#content {
+    height: 100vh;
+    width: 100vw;
+    position: absolute;
+    left: 0;
+    top: 0;
+    margin: 0;
+    overflow: hidden
+}
+
+mat-tab-group {
+    height: 100%;
+    width: 100%;
+}
+
+::ng-deep .mat-tab-body-wrapper {
+    height: 100%;
+    width: 100%;
+}
+
+::ng-deep .main-tab-group .mat-tab-label.mat-tab-disabled {
+    width: 2em;
+    min-width: 0;
+    color: white;
+}
+
+::ng-deep .main-tab-group .mat-tab-label {
+    ng-icon {
+        margin-top: -0.5em;
+        --ng-icon__size: 1em;
+    }
+
+    .close-tab-button {
+        float: right;
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: 100%;
+        ng-icon {
+            font-size: 1.5em;
+            margin-top: calc(-50%);
+            --ng-icon__size: 0.4em;
+        }
+    }
+}
+
+.new-tab-content {
+    display: block;
+    width: 100%;
+    text-align: center;
+
+    button {
+        display: flex;
+        margin: 1em auto auto;
+    }
+}
+
+.tab-label-div {
+    display: flex;
+}
+
+app-repositories-tab {
+    height: 100%;
+}

mediarepo-ui/src/app/components/core/core.component.spec.ts

@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed} from "@angular/core/testing";
+
+import {CoreComponent} from "./core.component";
+
+describe("HomeComponent", () => {
+    let component: CoreComponent;
+    let fixture: ComponentFixture<CoreComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [CoreComponent]
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CoreComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});

mediarepo-ui/src/app/components/core/core.component.ts

@@ -0,0 +1,117 @@
+import {Component, ViewChild} from "@angular/core";
+import {Repository} from "../../../api/models/Repository";
+import {RepositoryService} from "../../services/repository/repository.service";
+import {MatTabChangeEvent, MatTabGroup} from "@angular/material/tabs";
+import {TagService} from "../../services/tag/tag.service";
+import {TabService} from "../../services/tab/tab.service";
+import {TabCategory} from "../../models/TabCategory";
+import {TabState} from "../../models/TabState";
+import {AppState} from "../../models/AppState";
+import {StateService} from "../../services/state/state.service";
+
+@Component({
+    selector: "app-core",
+    templateUrl: "./core.component.html",
+    styleUrls: ["./core.component.scss"]
+})
+export class CoreComponent {
+
+    public selectedRepository: Repository | undefined;
+    public tabs: TabState[] = [];
+    public appState: AppState;
+    public newTab = false;
+
+    @ViewChild("tabGroup") tabGroup!: MatTabGroup;
+
+    constructor(
+        private tabService: TabService,
+        private repoService: RepositoryService,
+        private stateService: StateService,
+        private tagService: TagService) {
+        this.selectedRepository = this.repoService.selectedRepository.getValue();
+
+        this.repoService.selectedRepository.subscribe(async (selected) => {
+            this.selectedRepository = selected;
+
+            if (this.selectedRepository) {
+                await this.loadRepoData();
+            } else {
+                this.newTab = false;
+            }
+        });
+        this.appState = this.stateService.state.getValue();
+
+        this.stateService.state.subscribe(state => {
+            this.appState = state;
+            if (this.appState.tabs.value.length === 0) {
+                this.addTab();
+            } else {
+                this.tabGroup.selectedIndex = 1;
+            }
+            state.tabs.subscribe(tabs => {
+                this.tabs = tabs;
+                const selectedIndex = state.selectedTab.value;
+
+                if (selectedIndex) {
+                    this.tabGroup.selectedIndex = selectedIndex;
+                }
+
+                if (this.tabs.length === 0) {
+                    this.addTab();
+                }
+            });
+        });
+    }
+
+    async loadRepoData() {
+        await this.tagService.loadTags();
+        await this.tagService.loadNamespaces();
+    }
+
+    public onTabSelectionChange(event: MatTabChangeEvent): void {
+        this.tabService.setSelectedTab(event.index);
+        if (event.index > 0 && event.index <= this.tabs.length) {
+            this.appState.selectedTab.next(event.index);
+        }
+    }
+
+    public addFilesTab(): void {
+        this.appState.addTab(TabCategory.Files);
+        this.tabGroup.selectedIndex = this.tabs.length;
+        this.newTab = false;
+    }
+
+    public addImportTab(): void {
+        this.appState.addTab(TabCategory.Import);
+        this.tabGroup.selectedIndex = this.tabs.length;
+        this.newTab = false;
+    }
+
+    public addTab(): void {
+        if (this.tabGroup) {
+            this.newTab = true;
+            this.tabGroup.selectedIndex = this.tabs.length + 1;
+        }
+    }
+
+    public async closeTab(tab: TabState) {
+        const previousIndex = this.tabGroup.selectedIndex;
+        await this.appState.closeTab(tab.uuid);
+
+        if (previousIndex) {
+            if (previousIndex === 1 && this.tabs.length >= 1) {
+                this.tabGroup.selectedIndex = previousIndex;
+            } else {
+                this.tabGroup.selectedIndex = previousIndex - 1;
+            }
+        } else {
+            this.tabGroup.selectedIndex = 0;
+        }
+    }
+
+    public async onMouseClickTabLabel(tab: TabState, event: MouseEvent) {
+        if (event.button === 1) { // middle mouse button
+            await this.closeTab(tab);
+        }
+    }
+}

mediarepo-ui/src/app/components/core/core.module.ts

@@ -0,0 +1,100 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {CoreComponent} from "./core.component";
+import {
+    RepositoriesTabComponent
+} from "./repositories-tab/repositories-tab.component";
+import {FilesTabComponent} from "./files-tab/files-tab.component";
+import {
+    FilesTabSidebarComponent
+} from "./files-tab/files-tab-sidebar/files-tab-sidebar.component";
+import {ImportTabComponent} from "./import-tab/import-tab.component";
+import {
+    ImportTabSidebarComponent
+} from "./import-tab/import-tab-sidebar/import-tab-sidebar.component";
+import {MatButtonModule} from "@angular/material/button";
+import {MatSidenavModule} from "@angular/material/sidenav";
+import {MatProgressBarModule} from "@angular/material/progress-bar";
+import {ScrollingModule} from "@angular/cdk/scrolling";
+import {MatTabsModule} from "@angular/material/tabs";
+import {FlexModule} from "@angular/flex-layout";
+import {MatOptionModule, MatRippleModule} from "@angular/material/core";
+import {MatSelectModule} from "@angular/material/select";
+import {MatCheckboxModule} from "@angular/material/checkbox";
+import {MatDividerModule} from "@angular/material/divider";
+import {NgIconsModule} from "@ng-icons/core";
+import * as materialIcons from "@ng-icons/material-icons";
+import {MatMenuModule} from "@angular/material/menu";
+import {InputModule} from "../shared/input/input.module";
+import {SidebarModule} from "../shared/sidebar/sidebar.module";
+import {FileModule} from "../shared/file/file.module";
+import {AppCommonModule} from "../shared/app-common/app-common.module";
+import {ReactiveFormsModule} from "@angular/forms";
+import {
+    RepositoryCardComponent
+} from "./repositories-tab/repository-card/repository-card.component";
+import {MatCardModule} from "@angular/material/card";
+import {MatListModule} from "@angular/material/list";
+import {MatDialogModule} from "@angular/material/dialog";
+import {MatTooltipModule} from "@angular/material/tooltip";
+import {MatInputModule} from "@angular/material/input";
+import {TagModule} from "../shared/tag/tag.module";
+import {
+    DownloadDaemonDialogComponent
+} from "./repositories-tab/download-daemon-dialog/download-daemon-dialog.component";
+import {
+    RepositoryModule
+} from "../shared/repository/repository/repository.module";
+import {MatToolbarModule} from "@angular/material/toolbar";
+import {
+    RepositoryDetailsViewComponent
+} from "./repositories-tab/repository-details-view/repository-details-view.component";
+
+
+@NgModule({
+    declarations: [
+        RepositoriesTabComponent,
+        CoreComponent,
+        FilesTabComponent,
+        FilesTabSidebarComponent,
+        ImportTabComponent,
+        ImportTabSidebarComponent,
+        RepositoryCardComponent,
+        DownloadDaemonDialogComponent,
+        RepositoryDetailsViewComponent,
+    ],
+    exports: [
+        CoreComponent,
+    ],
+    imports: [
+        CommonModule,
+        MatTabsModule,
+        MatSidenavModule,
+        MatOptionModule,
+        MatSelectModule,
+        MatDividerModule,
+        MatProgressBarModule,
+        MatCheckboxModule,
+        ScrollingModule,
+        NgIconsModule.withIcons({...materialIcons}),
+        FlexModule,
+        MatButtonModule,
+        MatMenuModule,
+        MatRippleModule,
+        InputModule,
+        SidebarModule,
+        FileModule,
+        AppCommonModule,
+        ReactiveFormsModule,
+        MatCardModule,
+        MatListModule,
+        MatDialogModule,
+        MatTooltipModule,
+        MatInputModule,
+        TagModule,
+        RepositoryModule,
+        MatToolbarModule,
+    ]
+})
+export class CoreModule {
+}

mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.html

@@ -0,0 +1,15 @@
+<div class="sidebar-inner">
+    <mat-tab-group headerPosition="below">
+        <mat-tab label="Search">
+            <app-file-search [state]="this.state" [availableTags]="this.allTags" [contextTags]="this.tags"
+                             (searchStartEvent)="this.searchStartEvent.emit($event)"
+                             (searchEndEvent)="this.onDisplayedFilesChange(); this.searchEndEvent.emit($event);" [tagsLoading]="this.tagsLoading"></app-file-search>
+        </mat-tab>
+        <mat-tab *ngIf="this.selectedFiles.length > 0" label="Edit Tags">
+            <app-tag-edit #fileedit [files]="this.selectedFiles"></app-tag-edit>
+        </mat-tab>
+        <mat-tab *ngIf="this.selectedFiles.length === 1" label="File Metadata">
+            <app-file-metadata [file]="this.selectedFiles[0]"></app-file-metadata>
+        </mat-tab>
+    </mat-tab-group>
+</div>

mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.scss

@@ -0,0 +1,10 @@
+mat-tab-group, mat-tab, .file-tag-list, app-tag-edit, app-file-search, app-file-metadata {
+    height: 100%;
+    width: 100%;
+}
+
+.sidebar-inner {
+    height: 100%;
+    width: 100%;
+    display: block;
+}

mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.spec.ts

@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed} from "@angular/core/testing";
+
+import {FilesTabSidebarComponent} from "./files-tab-sidebar.component";
+
+describe("FilesTabSidebarComponent", () => {
+    let component: FilesTabSidebarComponent;
+    let fixture: ComponentFixture<FilesTabSidebarComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [FilesTabSidebarComponent]
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(FilesTabSidebarComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});

mediarepo-ui/src/app/components/core/files-tab/files-tab-sidebar/files-tab-sidebar.component.ts

@@ -0,0 +1,116 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnChanges,
+    OnInit,
+    Output,
+    SimpleChanges,
+    ViewChild
+} from "@angular/core";
+import {Tag} from "../../../../../api/models/Tag";
+import {TagService} from "../../../../services/tag/tag.service";
+import {File} from "../../../../../api/models/File";
+import {
+    FileSearchComponent
+} from "../../../shared/sidebar/file-search/file-search.component";
+import {
+    RepositoryService
+} from "../../../../services/repository/repository.service";
+import {
+    TagEditComponent
+} from "../../../shared/sidebar/tag-edit/tag-edit.component";
+import {TabState} from "../../../../models/TabState";
+
+@Component({
+    selector: "app-files-tab-sidebar",
+    templateUrl: "./files-tab-sidebar.component.html",
+    styleUrls: ["./files-tab-sidebar.component.scss"]
+})
+export class FilesTabSidebarComponent implements OnInit, OnChanges {
+
+    @Input() state!: TabState;
+    @Input() selectedFiles: File[] = [];
+    @Output() searchStartEvent = new EventEmitter<void>();
+    @Output() searchEndEvent = new EventEmitter<void>();
+
+    @ViewChild("filesearch") fileSearch!: FileSearchComponent;
+    @ViewChild("fileedit") fileEdit: TagEditComponent | undefined;
+
+    public tagsOfFiles: Tag[] = [];
+    public tags: Tag[] = [];
+    public allTags: Tag[] = [];
+    public files: File[] = [];
+    public tagsOfSelection: Tag[] = [];
+    public tagsLoading = false;
+
+    constructor(private repoService: RepositoryService, private tagService: TagService) {
+        this.repoService.selectedRepository.subscribe(
+            async (repo) => repo && this.fileSearch && await this.fileSearch.searchForFiles());
+        this.tagService.tags.subscribe(t => this.allTags = t);
+    }
+
+    async ngOnInit() {
+        this.state.files.subscribe(async (files) => {
+            this.files = files;
+            await this.onDisplayedFilesChange();
+        });
+        if (this.fileSearch) {
+            await this.fileSearch.searchForFiles();
+        }
+        if (this.tags.length === 0 && this.selectedFiles.length === 0) {
+            this.tags = this.tagsOfFiles;
+        }
+    }
+
+    public async ngOnChanges(changes: SimpleChanges): Promise<void> {
+        if (changes["selectedFiles"]) {
+            await this.showFileDetails(this.selectedFiles);
+            this.showAllTagsFallback();
+        }
+    }
+
+    public async onDisplayedFilesChange() {
+        await this.loadTagsForDisplayedFiles();
+        await this.refreshFileSelection();
+    }
+
+    async loadTagsForDisplayedFiles() {
+        this.tagsLoading = true;
+        this.tagsOfFiles = await this.tagService.getTagsForFiles(
+            this.files.map(f => f.cd));
+        this.showAllTagsFallback();
+        this.tagsLoading = false;
+    }
+
+    async showFileDetails(files: File[]) {
+        this.tagsLoading = true;
+        this.tagsOfSelection = await this.tagService.getTagsForFiles(
+            files.map(f => f.cd));
+        this.tagsOfSelection = this.tagsOfSelection.sort(
+            (a, b) => a.getNormalizedOutput()
+                .localeCompare(b.getNormalizedOutput()));
+        this.tags = this.tagsOfSelection;
+        this.tagsLoading = false;
+    }
+
+    private async refreshFileSelection() {
+        const filteredSelection = this.selectedFiles.filter(
+            file => this.files.findIndex(f => f.id === file.id) >= 0);
+        if (filteredSelection.length === 0) {
+            this.tags = [];
+            this.showAllTagsFallback();
+        } else if (filteredSelection.length < this.selectedFiles.length) {
+            this.selectedFiles = filteredSelection;
+            await this.showFileDetails(this.selectedFiles);
+        }
+    }
+
+    private showAllTagsFallback() {
+        if (this.tags.length === 0 && this.selectedFiles.length === 0) {
+            this.tags = this.tagsOfFiles.sort(
+                (a, b) => a.getNormalizedOutput()
+                    .localeCompare(b.getNormalizedOutput()));
+        }
+    }
+}

mediarepo-ui/src/app/components/core/files-tab/files-tab.component.html

@@ -0,0 +1,17 @@
+<mat-drawer-container (keyDownEvent)="this.onKeydown($event)" appInputReceiver autosize>
+    <mat-drawer disableClose mode="side" opened>
+        <app-files-tab-sidebar (searchEndEvent)="this.contentLoading = false;" (searchStartEvent)="this.contentLoading = true;"
+                               [selectedFiles]="this.selectedFiles"
+                               [state]="this.state"></app-files-tab-sidebar>
+    </mat-drawer>
+    <mat-drawer-content>
+        <app-busy-indicator [blurBackground]="true" [busy]="contentLoading" [darkenBackground]="true">
+            <app-file-multiview (fileSelectEvent)="this.onFileSelect($event)"
+                                (modeChangeEvent)="state.mode.next($event)"
+                                [files]="this.files"
+                                [mode]="state.mode.value"
+                                [preselectedFile]="this.getStateSelectedFile()"
+                                [tabState]="this.state"></app-file-multiview>
+        </app-busy-indicator>
+    </mat-drawer-content>
+</mat-drawer-container>

mediarepo-ui/src/app/components/core/files-tab/files-tab.component.scss

@@ -0,0 +1,45 @@
+mat-selection-list {
+    height: 100%;
+}
+
+mat-drawer {
+    height: 100%;
+    width: 25%;
+    overflow: hidden;
+}
+
+mat-drawer-content {
+    overflow-x: hidden;
+    overflow-y: auto;
+    height: 100%;
+}
+
+mat-drawer-container {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+
+app-file-multiview {
+    padding: 0;
+    height: 100%;
+    width: 100%;
+}
+
+.spinner-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 998;
+    overflow: hidden;
+    display: flex;
+    backdrop-filter: blur(5px);
+
+    mat-progress-spinner {
+        z-index: 999;
+        margin: auto;
+    }
+}

mediarepo-ui/src/app/components/core/files-tab/files-tab.component.spec.ts

@@ -0,0 +1,24 @@
+import {ComponentFixture, TestBed} from "@angular/core/testing";
+
+import {FilesTabComponent} from "./files-tab.component";
+
+describe("SearchPageComponent", () => {
+    let component: FilesTabComponent;
+    let fixture: ComponentFixture<FilesTabComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [FilesTabComponent]
+        }).compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(FilesTabComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});

mediarepo-ui/src/app/components/core/files-tab/files-tab.component.ts

@@ -0,0 +1,52 @@
+import {Component, Input, OnInit} from "@angular/core";
+import {File} from "../../../../api/models/File";
+import {TabState} from "../../../models/TabState";
+
+@Component({
+    selector: "app-files-tab",
+    templateUrl: "./files-tab.component.html",
+    styleUrls: ["./files-tab.component.scss"]
+})
+export class FilesTabComponent implements OnInit {
+
+    @Input() state!: TabState;
+
+    files: File[] = [];
+    contentLoading = false;
+    selectedFiles: File[] = [];
+
+    constructor() {
+    }
+
+    async ngOnInit() {
+        this.state.files.subscribe(files => this.files = files);
+        this.state.loading.subscribe(loading => this.contentLoading = loading);
+    }
+
+    async onFileSelect(files: File[]) {
+        this.selectedFiles = files;
+        if (files.length === 1) {
+            this.state.selectedCD.next(files[0].cd);
+        } else {
+            this.state.selectedCD.next(undefined);
+        }
+    }
+
+    public getStateSelectedFile(): File | undefined {
+        const hash = this.state.selectedCD.value;
+
+        if (hash) {
+            return this.files.find(f => f.cd === hash);
+        } else {
+            return undefined;
+        }
+    }
+
+    public async onKeydown(event: KeyboardEvent) {
+        switch (event.key) {
+            case "F5":
+                await this.state.findFiles();
+                break;
+        }
+    }
+}

mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.html

@@ -0,0 +1,13 @@
+<div class="import-tab-inner">
+    <mat-tab-group headerPosition="below">
+        <mat-tab label="Import">
+            <app-file-import (importFinished)="importFinished.emit($event)" (fileImported)="fileImported.emit($event)"></app-file-import>
+        </mat-tab>
+        <mat-tab label="Edit Tags" *ngIf="selectedFiles.length > 0">
+            <app-tag-edit [files]="selectedFiles"></app-tag-edit>
+        </mat-tab>
+        <mat-tab label="File Metadata" *ngIf="selectedFiles.length === 1">
+            <app-file-metadata [file]="selectedFiles[0]"></app-file-metadata>
+        </mat-tab>
+    </mat-tab-group>
+</div>

mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.scss

@@ -0,0 +1,12 @@
+mat-tab-group, mat-tab {
+    width: 100%;
+    height: 100%;
+}
+
+
+.import-tab-inner {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}

mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.spec.ts

@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed} from "@angular/core/testing";
+
+import {ImportTabSidebarComponent} from "./import-tab-sidebar.component";
+
+describe("ImportTabSidebarComponent", () => {
+    let component: ImportTabSidebarComponent;
+    let fixture: ComponentFixture<ImportTabSidebarComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [ImportTabSidebarComponent]
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ImportTabSidebarComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});

mediarepo-ui/src/app/components/core/import-tab/import-tab-sidebar/import-tab-sidebar.component.ts

@@ -0,0 +1,17 @@
+import {Component, EventEmitter, Input, Output} from "@angular/core";
+import {File} from "../../../../../api/models/File";
+
+@Component({
+    selector: "app-import-tab-sidebar",
+    templateUrl: "./import-tab-sidebar.component.html",
+    styleUrls: ["./import-tab-sidebar.component.scss"]
+})
+export class ImportTabSidebarComponent {
+
+    @Input() selectedFiles: File[] = [];
+    @Output() fileImported = new EventEmitter<File>();
+    @Output() importFinished = new EventEmitter<void>();
+
+    constructor() {
+    }
+}

mediarepo-ui/src/app/components/core/import-tab/import-tab.component.html

@@ -0,0 +1,11 @@
+<mat-drawer-container autosize>
+    <mat-drawer disableClose="true" mode="side" opened>
+        <app-import-tab-sidebar [selectedFiles]="selectedFiles" (fileImported)="this.addFileFromImport($event)"
+                                (importFinished)="this.refreshFileView()"></app-import-tab-sidebar>
+    </mat-drawer>
+    <mat-drawer-content>
+        <app-file-multiview [mode]="this.state.mode.value" (modeChangeEvent)="this.state.mode.next($event)"
+                            [preselectedFile]="this.getSelectedFileFromState()"
+                            (fileSelectEvent)="this.onFileSelect($event)" [files]="this.files"></app-file-multiview>
+    </mat-drawer-content>
+</mat-drawer-container>

mediarepo-ui/src/app/components/core/import-tab/import-tab.component.scss

@@ -0,0 +1,27 @@
+mat-drawer-container {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    overflow: hidden;
+}
+
+mat-drawer-content {
+    overflow-x: hidden;
+    overflow-y: auto;
+    height: 100%;
+}
+
+mat-drawer {
+    height: 100%;
+    width: 25%;
+}
+
+app-import-tab-sidebar, app-file-multiview {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+}
+
+app-file-multiview {
+    display: block;
+}

mediarepo-ui/src/app/components/core/import-tab/import-tab.component.spec.ts

@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed} from "@angular/core/testing";
+
+import {ImportTabComponent} from "./import-tab.component";
+
+describe("ImportTabComponent", () => {
+    let component: ImportTabComponent;
+    let fixture: ComponentFixture<ImportTabComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [ImportTabComponent]
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ImportTabComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});

mediarepo-ui/src/app/components/core/import-tab/import-tab.component.ts

@@ -0,0 +1,65 @@
+import {Component, Input, OnInit} from "@angular/core";
+import {File} from "../../../../api/models/File";
+import {TabState} from "../../../models/TabState";
+
+@Component({
+    selector: "app-import-tab",
+    templateUrl: "./import-tab.component.html",
+    styleUrls: ["./import-tab.component.scss"]
+})
+export class ImportTabComponent implements OnInit {
+
+    @Input() state!: TabState;
+
+    public files: File[] = [];
+    public selectedFiles: File[] = [];
+
+    private newFiles: File[] = [];
+
+    constructor() {
+    }
+
+    public ngOnInit(): void {
+        this.state.files.subscribe(files => files? this.files = files : undefined);
+    }
+
+    /**
+     * Adds an imported file to the list of imported files
+     * @param {File} file
+     * @returns {Promise<void>}
+     */
+    public async addFileFromImport(file: File) {
+        this.newFiles.push(file);
+        if (this.newFiles.length % 50 === 0) {  // refresh every 50 pictures
+            this.refreshFileView();
+        }
+    }
+
+    /**
+     * Refreshes the file view
+     * @returns {Promise<void>}
+     */
+    public refreshFileView() {
+        this.state.files.next([...this.state.files.value, ...this.newFiles]);
+        this.newFiles = [];
+    }
+
+    public onFileSelect(files: File[]) {
+        this.selectedFiles = files;
+        if (files.length === 1) {
+            this.state.selectedCD.next(files[0].cd);
+        } else {
+            this.state.selectedCD.next(undefined);
+        }
+    }
+
+    public getSelectedFileFromState(): File | undefined {
+        const selectedHash = this.state.selectedCD.value;
+
+        if (selectedHash && this.files) {
+            return this.files.find(f => f.cd === selectedHash);
+        } else {
+            return undefined;
+        }
+    }
+}

mediarepo-ui/src/app/components/core/repositories-tab/download-daemon-dialog/download-daemon-dialog.component.html

@@ -0,0 +1,12 @@
+<h1 mat-dialog-title>
+    Download daemon
+</h1>
+<div mat-dialog-content>
+    No daemon could be found on the system. Please download and install a daemon executable.
+    <br>
+    <button class="download-button" mat-flat-button color="primary" (click)="this.onClickDownloadDaemon()">Download</button>
+</div>
+<div class="download-dialog-actions" mat-dialog-actions>
+    <button (click)="closeDialog(false)" color="accent" mat-stroked-button>Cancel</button>
+    <button (click)="closeDialog(true)" color="primary" mat-flat-button>Ok</button>
+</div>

mediarepo-ui/src/app/components/core/repositories-tab/download-daemon-dialog/download-daemon-dialog.component.scss

@@ -0,0 +1,15 @@
+.download-dialog-actions {
+    display: block;
+
+    button {
+        float: right;
+        margin-left: 1em;
+    }
+}
+
+button.download-button {
+    margin: 2em auto auto;
+    align-self: center;
+    display: flex;
+}
+

mediarepo-ui/src/app/components/core/repositories-tab/download-daemon-dialog/download-daemon-dialog.component.spec.ts

@@ -0,0 +1,27 @@
+import {ComponentFixture, TestBed} from "@angular/core/testing";
+
+import {
+    DownloadDaemonDialogComponent
+} from "./download-daemon-dialog.component";
+
+describe("DownloadDaemonDialogComponent", () => {
+    let component: DownloadDaemonDialogComponent;
+    let fixture: ComponentFixture<DownloadDaemonDialogComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [ DownloadDaemonDialogComponent ]
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DownloadDaemonDialogComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});

mediarepo-ui/src/app/components/core/repositories-tab/download-daemon-dialog/download-daemon-dialog.component.ts

@@ -0,0 +1,25 @@
+import {Component, Inject} from "@angular/core";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {shell} from "@tauri-apps/api";
+
+@Component({
+    selector: "app-download-daemon-dialog",
+    templateUrl: "./download-daemon-dialog.component.html",
+    styleUrls: ["./download-daemon-dialog.component.scss"]
+})
+export class DownloadDaemonDialogComponent {
+
+    constructor(public dialogRef: MatDialogRef<DownloadDaemonDialogComponent>,
+                @Inject(
+                    MAT_DIALOG_DATA) data: any) {
+    }
+
+
+    public async onClickDownloadDaemon() {
+        await shell.open("https://github.com/Trivernis/mediarepo-daemon");
+    }
+
+    closeDialog(result: boolean) {
+        this.dialogRef.close(result);
+    }
+}

mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.html

@@ -0,0 +1,13 @@
+<div class="repo-page-content" *ngIf="!selectedRepository">
+    <div class="add-repo-tools">
+        <button (click)="openAddRepositoryDialog()" color="primary" mat-flat-button>Add Repository</button>
+    </div>
+    <div class="repository-list">
+        <div *ngFor="let repository of repositories" class="repository-container">
+            <app-repository-card [repository]="repository" (openEvent)="this.onOpenRepository($event)"></app-repository-card>
+        </div>
+    </div>
+</div>
+<div class="repo-details" *ngIf="selectedRepository">
+    <app-repository-details-view [repository]="selectedRepository"></app-repository-details-view>
+</div>

mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.scss

@@ -0,0 +1,33 @@
+.repository-container {
+    margin: 1em;
+}
+
+.repo-page-content {
+    margin: 0 10%;
+    height: calc(100% - 2em);
+}
+
+.add-repo-tools {
+    height: 5em;
+    display: flex;
+    flex-direction: row-reverse;
+
+    button {
+        margin: 1em;
+    }
+}
+
+.repository-list {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    height: calc(100% - 5em);
+}
+
+app-repository-card {
+    position: relative;
+}
+
+app-repository-details-view, .repo-details {
+    height: 100%;
+}

mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.spec.ts

@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed} from "@angular/core/testing";
+
+import {RepositoriesTabComponent} from "./repositories-tab.component";
+
+describe("RepositoriesComponent", () => {
+    let component: RepositoriesTabComponent;
+    let fixture: ComponentFixture<RepositoriesTabComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [RepositoriesTabComponent]
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(RepositoriesTabComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});

mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.ts

@@ -0,0 +1,161 @@
+import {AfterViewInit, Component, OnInit} from "@angular/core";
+import {Repository} from "../../../../api/models/Repository";
+import {RepositoryService} from "../../../services/repository/repository.service";
+import {MatDialog, MatDialogRef} from "@angular/material/dialog";
+import {DownloadDaemonDialogComponent} from "./download-daemon-dialog/download-daemon-dialog.component";
+import {
+    AddRepositoryDialogComponent
+} from "../../shared/repository/repository/add-repository-dialog/add-repository-dialog.component";
+import {ErrorBrokerService} from "../../../services/error-broker/error-broker.service";
+import {BehaviorSubject} from "rxjs";
+import {BusyDialogComponent} from "../../shared/app-common/busy-dialog/busy-dialog.component";
+import {JobService} from "../../../services/job/job.service";
+import {StateService} from "../../../services/state/state.service";
+
+type BusyDialogContext = { message: BehaviorSubject<string>, dialog: MatDialogRef<BusyDialogComponent> };
+
+@Component({
+    selector: "app-repositories-tab",
+    templateUrl: "./repositories-tab.component.html",
+    styleUrls: ["./repositories-tab.component.scss"]
+})
+export class RepositoriesTabComponent implements OnInit, AfterViewInit {
+    public repositories: Repository[] = [];
+    public selectedRepository?: Repository;
+
+    constructor(
+        private errorBroker: ErrorBrokerService,
+        private repoService: RepositoryService,
+        private jobService: JobService,
+        private stateService: StateService,
+        public dialog: MatDialog
+    ) {
+    }
+
+    ngOnInit(): void {
+        this.repoService.repositories.subscribe({
+            next: (repos) => {
+                this.repositories = repos;
+            }
+        });
+        this.repoService.selectedRepository.subscribe(
+            repo => this.selectedRepository = repo);
+    }
+
+    public async ngAfterViewInit() {
+        await this.checkAndPromptDaemonExecutable();
+    }
+
+    public async startDaemonAndSelectRepository(repository: Repository) {
+        try {
+            let dialogContext = this.openStartupDialog(repository);
+            let daemonRunning = await this.repoService.checkDaemonRunning(
+                repository.path!);
+            if (!daemonRunning) {
+                dialogContext.message.next("Starting repository daemon...");
+                await this.repoService.startDaemon(repository.path!);
+
+                await new Promise((res, _) => {
+                    setTimeout(res, 2000); // wait for the daemon to start
+                });
+            }
+            await this.selectRepository(repository, dialogContext);
+        } catch (err) {
+            this.errorBroker.showError(err);
+        }
+    }
+
+    public async selectRepository(repository: Repository, dialogContext?: BusyDialogContext) {
+        dialogContext = dialogContext ?? this.openStartupDialog(repository);
+        try {
+            dialogContext.message.next("Opening repository...");
+            await this.repoService.setRepository(repository);
+            await this.runRepositoryStartupTasks(dialogContext);
+            dialogContext.message.next("Restoring previous tabs...");
+            await this.repoService.loadRepositories();
+            await this.stateService.loadState();
+            dialogContext.dialog.close(true);
+        } catch (err: any) {
+            this.errorBroker.showError(err);
+            dialogContext.message.next(
+                "Failed to open repository: " + err.toString());
+            await this.forceCloseRepository();
+            setTimeout(() => dialogContext!.dialog.close(true), 1000);
+        }
+    }
+
+    public openAddRepositoryDialog() {
+        this.dialog.open(AddRepositoryDialogComponent, {
+            disableClose: true,
+            minWidth: "30%",
+            minHeight: "30%",
+        });
+    }
+
+    public async onOpenRepository(repository: Repository) {
+        if (!repository.local) {
+            await this.selectRepository(repository);
+        } else {
+            await this.startDaemonAndSelectRepository(repository);
+        }
+    }
+
+    private async forceCloseRepository() {
+        try {
+            await this.repoService.closeSelectedRepository();
+        } catch {
+        }
+        try {
+            await this.repoService.disconnectSelectedRepository();
+        } catch {
+        }
+    }
+
+    private async runRepositoryStartupTasks(dialogContext: BusyDialogContext): Promise<void> {
+        dialogContext.message.next(
+            "Migrating content descriptors to new format...");
+        await this.jobService.runJob("MigrateContentDescriptors");
+        dialogContext.message.next("Calculating repository sizes...");
+        await this.jobService.runJob("CalculateSizes");
+        dialogContext.message.next("Checking integrity...");
+        await this.jobService.runJob("CheckIntegrity");
+        dialogContext.message.next("Finished repository startup");
+    }
+
+    private openStartupDialog(repository: Repository): BusyDialogContext {
+        const dialogMessage = new BehaviorSubject<string>(
+            "Opening repository...");
+        let dialog = this.dialog.open(BusyDialogComponent, {
+            data: {
+                title: `Opening repository ${repository.name}`,
+                message: dialogMessage,
+                allowCancel: true,
+            }, disableClose: true,
+            minWidth: "30%",
+            minHeight: "30%",
+        });
+        dialog.afterClosed().subscribe(async (result) => {
+            if (!result) {
+                await this.forceCloseRepository();
+            }
+        });
+
+        return { message: dialogMessage, dialog };
+    }
+
+    private async checkAndPromptDaemonExecutable() {
+        if (!await this.repoService.checkDameonConfigured()) {
+            const result = await this.dialog.open(
+                DownloadDaemonDialogComponent,
+                {
+                    disableClose: true,
+                }
+            ).afterClosed().toPromise();
+            if (result) {
+                // recursion avoidance
+                setTimeout(
+                    async () => await this.checkAndPromptDaemonExecutable(), 0);
+            }
+        }
+    }
+}

mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.html

@@ -0,0 +1,38 @@
+<app-busy-indicator [darkenBackground]="true">
+    <mat-card>
+        <mat-card-title>{{repository.name}}</mat-card-title>
+        <div [class]="'repository-status ' + this.getDaemonStatusClass()">
+            <p>{{this.getDaemonStatusText()}}</p>
+        </div>
+        <mat-card-content>
+            <p *ngIf="repository.local" class="repository-path">{{repository.path!}}</p>
+            <p *ngIf="!repository.local" class="repository-address">{{repository.address}}</p>
+        </mat-card-content>
+        <mat-action-list>
+            <button (click)="this.openEvent.next(repository)" *ngIf="!this.isSelectedRepository() && repository.local"
+                    color="primary"
+                    mat-flat-button>Open
+            </button>
+            <button (click)="this.openEvent.next(repository)" *ngIf="!this.isSelectedRepository() && !repository.local"
+                    [disabled]="!this.daemonRunning"
+                    color="primary" mat-flat-button>Connect
+            </button>
+            <button (click)="this.repoService.closeSelectedRepository()"
+                    *ngIf="this.isSelectedRepository() && repository.local" color="primary"
+                    mat-flat-button>Close
+            </button>
+            <button (click)="this.repoService.disconnectSelectedRepository()"
+                    *ngIf="this.isSelectedRepository() && !repository.local" color="primary"
+                    mat-flat-button>Disconnect
+            </button>
+            <button [mat-menu-trigger-for]="menu" class="menu-button" mat-button>
+                <ng-icon name="mat-more-vert"></ng-icon>
+            </button>
+            <mat-menu #menu="matMenu">
+                <button (click)="openEditRepositoryDialog()" mat-menu-item>Edit</button>
+                <button (click)="removeRepository()" *ngIf="repository.local" mat-menu-item>Delete</button>
+                <button (click)="removeRepository()" *ngIf="!repository.local" mat-menu-item>Remove</button>
+            </mat-menu>
+        </mat-action-list>
+    </mat-card>
+</app-busy-indicator>

mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.scss

@@ -0,0 +1,38 @@
+.repository-path {
+    color: lightgray;
+}
+
+.repository-address {
+    color: lightgray;
+    font-family: "Fira Code Light", Monospaced, Consolas, monospace;
+}
+
+.repository-status {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 0.5em;
+    width: 3em;
+    text-align: center;
+    border-bottom-left-radius: 1em;
+
+    p {
+        margin: auto;
+    }
+}
+
+.status-local {
+    background-color: #2e237a;
+}
+
+.status-offline {
+    background-color: #8e1e2a;
+}
+
+.status-online {
+    background-color: #1b651b;
+}
+
+button.menu-button {
+    float: right;
+}

mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.spec.ts

@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed} from "@angular/core/testing";
+
+import {RepositoryCardComponent} from "./repository-card.component";
+
+describe("RepositoryCardComponent", () => {
+    let component: RepositoryCardComponent;
+    let fixture: ComponentFixture<RepositoryCardComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [RepositoryCardComponent]
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(RepositoryCardComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});

mediarepo-ui/src/app/components/core/repositories-tab/repository-card/repository-card.component.ts

@@ -0,0 +1,141 @@
+import {
+    Component, EventEmitter,
+    Input,
+    OnDestroy,
+    OnInit,
+    Output,
+    ViewChild
+} from "@angular/core";
+import {Repository} from "../../../../../api/models/Repository";
+import {
+    RepositoryService
+} from "../../../../services/repository/repository.service";
+import {MatDialog} from "@angular/material/dialog";
+import {
+    ConfirmDialogComponent
+} from "../../../shared/app-common/confirm-dialog/confirm-dialog.component";
+import {
+    BusyIndicatorComponent
+} from "../../../shared/app-common/busy-indicator/busy-indicator.component";
+import {
+    EditRepositoryDialogComponent
+} from "../../../shared/repository/repository/edit-repository-dialog/edit-repository-dialog.component";
+
+@Component({
+    selector: "app-repository-card",
+    templateUrl: "./repository-card.component.html",
+    styleUrls: ["./repository-card.component.scss"]
+})
+export class RepositoryCardComponent implements OnInit, OnDestroy {
+
+    @Input() repository!: Repository;
+    @Output() openEvent = new EventEmitter<Repository>();
+
+    @ViewChild(BusyIndicatorComponent) busyIndicator!: BusyIndicatorComponent;
+
+    public daemonRunning: boolean = false;
+
+    statusRefreshInterval: number | undefined;
+
+    constructor(
+        public repoService: RepositoryService,
+        public dialog: MatDialog) {
+    }
+
+    public async ngOnInit() {
+        if (!this.repository.local) {
+            await this.checkRemoteRepositoryStatus();
+            this.statusRefreshInterval = setInterval(
+                async () => await this.checkRemoteRepositoryStatus(), 10000);
+        }
+    }
+
+    public async ngOnDestroy(): Promise<void> {
+        if (this.statusRefreshInterval != undefined) {
+            clearInterval(this.statusRefreshInterval);
+        }
+    }
+
+    public isSelectedRepository(): boolean {
+        return this.repoService.selectedRepository.getValue()?.name === this.repository.name;
+    }
+
+    public async removeRepository() {
+        const confirmation = await this.dialog.open(ConfirmDialogComponent, {
+            data: {
+                title: "Remove repository",
+                message: `Do you really want to remove the repository "${this.repository.name}"?`,
+                confirmAction: "Remove",
+                confirmColor: "warn"
+            }
+        }).afterClosed().toPromise();
+        if (confirmation === true) {
+            if (this.isSelectedRepository()) {
+                if (this.repository.local) {
+                    await this.repoService.closeSelectedRepository();
+                } else {
+                    await this.repoService.disconnectSelectedRepository();
+                }
+            }
+            await this.promtDeleteRepository();
+        }
+    }
+
+    private async promtDeleteRepository() {
+        if (this.repository.local) {
+            const deleteContents = await this.dialog.open(
+                ConfirmDialogComponent, {
+                    data: {
+                        title: "Delete repository content",
+                        message: "Do you want to remove the contents of the repository as well?",
+                        confirmAction: "Delete",
+                        confirmColor: "warn",
+                        denyAction: "No",
+                    }
+                }).afterClosed().toPromise();
+            if (deleteContents) {
+                await this.repoService.deleteRepository(this.repository.name);
+            } else {
+                await this.repoService.removeRepository(this.repository.name);
+            }
+        } else {
+            await this.repoService.removeRepository(this.repository.name);
+        }
+    }
+
+    public getDaemonStatusText(): string {
+        if (this.repository.local) {
+            return "Local";
+        } else if (this.daemonRunning) {
+            return "Online";
+        } else {
+            return "Offline";
+        }
+    }
+
+    public getDaemonStatusClass(): string {
+        if (this.repository.local) {
+            return "status-local";
+        } else if (this.daemonRunning) {
+            return "status-online";
+        } else {
+            return "status-offline";
+        }
+    }
+
+    async checkRemoteRepositoryStatus() {
+        this.daemonRunning = await this.repoService.checkDaemonRunning(
+            this.repository.address!);
+    }
+
+    public openEditRepositoryDialog(): void {
+        this.dialog.open(EditRepositoryDialogComponent, {
+            disableClose: true,
+            minWidth: "30%",
+            minHeight: "30%",
+            data: {
+                repository: this.repository
+            }
+        });
+    }
+}

mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.html

@@ -0,0 +1,44 @@
+<mat-toolbar>
+    <span class="repository-name">{{repository.name}}</span>
+    <button class="button-close-repository" mat-flat-button color="primary" (click)="this.closeRepository()">Close
+    </button>
+</mat-toolbar>
+<div class="details-content" fxLayout="row">
+    <div class="repository-metadata" fxFlex="100%">
+        <h1>Stats</h1>
+        <app-metadata-entry *ngIf="repository.path" attributeName="Path">{{repository.path}}</app-metadata-entry>
+        <app-metadata-entry *ngIf="repository.address" attributeName="Address">{{repository.address}}</app-metadata-entry>
+        <app-metadata-entry attributeName="File Count">
+            <mat-progress-bar *ngIf="!metadata"></mat-progress-bar>
+            {{metadata? metadata!.file_count.toString() : ''}}
+        </app-metadata-entry>
+        <app-metadata-entry attributeName="Tag Count">
+            <mat-progress-bar *ngIf="!metadata"></mat-progress-bar>
+            {{metadata? metadata!.tag_count.toString() : ''}}
+        </app-metadata-entry>
+        <app-metadata-entry attributeName="Namespace Count">
+            <mat-progress-bar *ngIf="!metadata"></mat-progress-bar>
+            {{metadata? metadata!.namespace_count.toString() : ''}}
+        </app-metadata-entry>
+        <app-metadata-entry attributeName="Mapping Count">
+            <mat-progress-bar *ngIf="!metadata"></mat-progress-bar>
+            {{metadata? metadata!.mapping_count.toString() : ''}}
+        </app-metadata-entry>
+        <app-metadata-entry attributeName="Total Size">
+            <mat-progress-bar *ngIf="(this.totalSize | async) === undefined" mode="indeterminate"></mat-progress-bar>
+            {{this.totalSize | async}}
+        </app-metadata-entry>
+        <app-metadata-entry attributeName="File Folder Size">
+            <mat-progress-bar *ngIf="(this.fileFolderSize | async) === undefined" mode="indeterminate"></mat-progress-bar>
+            {{this.fileFolderSize | async}}
+        </app-metadata-entry>
+        <app-metadata-entry attributeName="Thumbnail Folder Size">
+            <mat-progress-bar *ngIf="(this.thumbFolderSize | async) === undefined" mode="indeterminate"></mat-progress-bar>
+            {{this.thumbFolderSize | async}}
+        </app-metadata-entry>
+        <app-metadata-entry attributeName="Database File Size">
+            <mat-progress-bar *ngIf="(this.databaseFileSize | async) === undefined" mode="indeterminate"></mat-progress-bar>
+            {{this.databaseFileSize | async}}
+        </app-metadata-entry>
+    </div>
+</div>

mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.scss

@@ -0,0 +1,27 @@
+.repository-name {
+    text-align: center;
+    align-self: center;
+    margin: auto;
+}
+
+.button-close-repository {
+    float: right
+}
+
+.repository-metadata {
+    padding: 1em 1em 1em 3em;
+    overflow-y: auto;
+    user-select: none;
+    margin-left: 20%;
+    margin-right: 20%;
+
+    app-metadata-entry {
+        margin-bottom: 0.5em;
+        display: block;
+    }
+}
+
+.details-content {
+    height: calc(100% - 64px);
+    overflow: hidden;
+}

mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.spec.ts

@@ -0,0 +1,27 @@
+import {ComponentFixture, TestBed} from "@angular/core/testing";
+
+import {
+    RepositoryDetailsViewComponent
+} from "./repository-details-view.component";
+
+describe("RepositoryDetailsViewComponent", () => {
+    let component: RepositoryDetailsViewComponent;
+    let fixture: ComponentFixture<RepositoryDetailsViewComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [ RepositoryDetailsViewComponent ]
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(RepositoryDetailsViewComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});

mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.ts

@@ -0,0 +1,103 @@
+import {
+    Component,
+    Input,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    SimpleChanges
+} from "@angular/core";
+import {Repository} from "../../../../../api/models/Repository";
+import {
+    RepositoryService
+} from "../../../../services/repository/repository.service";
+import {RepositoryMetadata} from "../../../../models/RepositoryMetadata";
+import {BehaviorSubject} from "rxjs";
+import {MatDialog} from "@angular/material/dialog";
+import {
+    BusyDialogComponent
+} from "../../../shared/app-common/busy-dialog/busy-dialog.component";
+
+@Component({
+    selector: "app-repository-details-view",
+    templateUrl: "./repository-details-view.component.html",
+    styleUrls: ["./repository-details-view.component.scss"]
+})
+export class RepositoryDetailsViewComponent implements OnInit, OnChanges, OnDestroy {
+    @Input() repository!: Repository;
+
+    public metadata?: RepositoryMetadata;
+    private refreshMetadataInterval?: number;
+
+    public totalSize = new BehaviorSubject<string | undefined>(undefined);
+    public fileFolderSize = new BehaviorSubject<string | undefined>(undefined);
+    public thumbFolderSize = new BehaviorSubject<string | undefined>(undefined);
+    public databaseFileSize = new BehaviorSubject<string | undefined>(undefined);
+
+    constructor(private repoService: RepositoryService, public dialog: MatDialog) {
+    }
+
+    public async ngOnInit() {
+        await this.loadMetadata();
+        this.refreshMetadataInterval = setInterval(async () => this.loadMetadata(), 30000);
+    }
+
+    public async ngOnChanges(changes: SimpleChanges) {
+        if (changes["repository"]) {
+            await this.loadMetadata();
+        }
+    }
+
+    public ngOnDestroy(): void {
+        clearInterval(this.refreshMetadataInterval);
+    }
+
+    public async closeRepository() {
+        let closeDialog = this.dialog.open(BusyDialogComponent, {
+            data: {
+                title: "Closing repository",
+                message: new BehaviorSubject("Closing repository...")
+            }
+        });
+        if (this.repository?.local) {
+            await this.repoService.closeSelectedRepository();
+        } else {
+            await this.repoService.disconnectSelectedRepository();
+        }
+        closeDialog.close(true);
+    }
+
+    public async getSizes() {
+        const totalSize = await this.repoService.getSize("Total");
+        this.totalSize.next(this.formatByteSize(totalSize.size));
+        const fileSize = await this.repoService.getSize("FileFolder");
+        this.fileFolderSize.next(this.formatByteSize(fileSize.size));
+        const thumbSize = await this.repoService.getSize("ThumbFolder");
+        this.thumbFolderSize.next(this.formatByteSize(thumbSize.size));
+        const databaseSize = await this.repoService.getSize("DatabaseFile");
+        this.databaseFileSize.next(this.formatByteSize(databaseSize.size));
+    }
+
+    public formatByteSize(size: number): string {
+        const kib = 1024;
+        const mib = kib ** 2;
+        const gib = kib ** 3;
+        const tib = kib ** 4;
+
+        if (size >= tib) {
+            return (size / tib).toFixed(2) + " TiB";
+        } else if (size >= gib) {
+            return (size / gib).toFixed(2) + " GiB";
+        } else if (size >= mib) {
+            return (size / mib).toFixed(2) + " MiB";
+        } else if (size >= kib) {
+            return (size / kib).toFixed(2) + " KiB";
+        } else {
+            return size + " B";
+        }
+    }
+
+    public async loadMetadata() {
+        this.metadata = await this.repoService.getRepositoryMetadata();
+        await this.getSizes();
+    }
+}

mediarepo-ui/src/app/components/shared/app-base/app-base.module.ts

@@ -0,0 +1,18 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {FileActionBaseComponent} from "./file-action-base/file-action-base.component";
+
+
+@NgModule({
+    declarations: [
+        FileActionBaseComponent,
+    ],
+    exports: [
+        FileActionBaseComponent,
+    ],
+    imports: [
+        CommonModule
+    ]
+})
+export class AppBaseModule {
+}

mediarepo-ui/src/app/components/shared/app-base/file-action-base/file-action-base.component.ts

@@ -0,0 +1,179 @@
+import {Component} from "@angular/core";
+import {FileService} from "../../../../services/file/file.service";
+import {clipboard} from "@tauri-apps/api";
+import {FileHelper} from "../../../../services/file/file.helper";
+import {FileStatus} from "../../../../../api/api-types/files";
+import {File} from "../../../../../api/models/File";
+import {SafeResourceUrl} from "@angular/platform-browser";
+import {BehaviorSubject} from "rxjs";
+import {BusyDialogComponent} from "../../app-common/busy-dialog/busy-dialog.component";
+import {ConfirmDialogComponent, ConfirmDialogData} from "../../app-common/confirm-dialog/confirm-dialog.component";
+import {MatDialog, MatDialogConfig, MatDialogRef} from "@angular/material/dialog";
+import {ErrorBrokerService} from "../../../../services/error-broker/error-broker.service";
+
+type ProgressDialogContext = {
+    dialog: MatDialogRef<BusyDialogComponent>,
+    progress: BehaviorSubject<number>,
+    message: BehaviorSubject<string>,
+};
+
+@Component({
+    selector: "app-file-action-base",
+    template: "<h1>Do not use</h1>",
+})
+export class FileActionBaseComponent {
+    constructor(private dialog: MatDialog, private errorBroker: ErrorBrokerService, private fileService: FileService) {
+    }
+
+    public async copyFileContentDescriptor(file: File): Promise<void> {
+        await clipboard.writeText(file.cd);
+    }
+
+    public async exportFile(file: File): Promise<void> {
+        const path = await FileHelper.getFileDownloadLocation(file);
+
+        if (path) {
+            await this.errorBroker.try(() => this.fileService.saveFile(file, path));
+        }
+    }
+
+    public async updateStatus(files: File[], status: FileStatus) {
+        if (files.length === 1) {
+            let changeConfirmed;
+
+            if (status === "Deleted") {
+                changeConfirmed = await this.openConfirmDialog(
+                    "Confirm deletion",
+                    "Do you really want to move this file to trash?",
+                    "Delete",
+                    "warn",
+                    this.getImageThumbnail(files[0])
+                );
+            } else {
+                changeConfirmed = true;
+            }
+
+            if (changeConfirmed) {
+                await this.errorBroker.try(async () => {
+                    const newFile = await this.fileService.updateFileStatus(files[0].id, status);
+                    files[0].status = newFile.status;
+                });
+            }
+        } else {
+            const statusChangeConfirmed = await this.openConfirmDialog(
+                "Confirm mass status change",
+                `Do you really want to change the status of ${files.length} files to '${status}'?`,
+                "Change status",
+                status === "Deleted" ? "warn" : "primary"
+            );
+            if (statusChangeConfirmed) {
+                await this.iterateWithProgress(
+                    `Updating file status to '${status}'`,
+                    files,
+                    (file) => this.errorBroker.try(async () => {
+                        const newFile = await this.fileService.updateFileStatus(file.id, status);
+                        file.status = newFile.status;
+                    })
+                );
+            }
+        }
+    }
+
+    public async deletePermanently(files: File[]): Promise<boolean> {
+        if (files.length === 1) {
+            const deletionConfirmed = await this.openConfirmDialog(
+                "Confirm deletion",
+                "Do you really want to permanently delete this file?",
+                "Delete permanently",
+                "warn",
+                this.getImageThumbnail(files[0]),
+            );
+            if (deletionConfirmed) {
+                await this.errorBroker.try(() => this.fileService.deleteFile(files[0].id));
+                return true;
+            }
+        } else {
+            const deletionConfirmed = await this.openConfirmDialog(
+                "Confirm mass deletion",
+                `Do you really want to permanently delete ${files.length} files?`,
+                "Delete permanently",
+                "warn"
+            );
+            if (deletionConfirmed) {
+                await this.iterateWithProgress(
+                    "Deleting files",
+                    files,
+                    (file) => this.errorBroker.try(() => this.fileService.deleteFile(file.id))
+                );
+                return true;
+            }
+        }
+        return false;
+    }
+
+    protected getImageThumbnail(file: File): SafeResourceUrl | undefined {
+        const mimeParts = FileHelper.parseMime(file.mimeType);
+
+        if (mimeParts && ["image", "video"].includes(mimeParts[0])) {
+            return this.fileService.buildThumbnailUrl(file, 250, 250);
+        } else {
+            return;
+        }
+    }
+
+    protected async iterateWithProgress<T>(title: string, items: T[], action: (arg: T) => Promise<any>): Promise<void> {
+        const totalCount = items.length;
+        const dialogCtx = this.openProgressDialog(title, `0/${totalCount}`);
+        let count = 0;
+
+        for (const item of items) {
+            await action(item);
+            dialogCtx.message.next(`${++count}/${totalCount}`);
+            dialogCtx.progress.next(count / totalCount);
+        }
+        dialogCtx.dialog.close(true);
+    }
+
+    protected openProgressDialog(title: string, message: string): ProgressDialogContext {
+        const dialogMessage = new BehaviorSubject(message);
+        const dialogProgress = new BehaviorSubject(0);
+
+        const dialog = this.dialog.open(BusyDialogComponent, {
+            data: {
+                message: dialogMessage,
+                progress: dialogProgress,
+                title,
+                allowCancel: false,
+            },
+            disableClose: true,
+            minWidth: "30%",
+            minHeight: "30%",
+        });
+
+        return {
+            dialog,
+            message: dialogMessage,
+            progress: dialogProgress,
+        };
+    }
+
+    protected openConfirmDialog(
+        title: string,
+        question: string,
+        confirmAction: string,
+        confirmColor?: "primary" | "warn",
+        image?: SafeResourceUrl | string
+    ): Promise<boolean> {
+        const dialog = this.dialog.open(ConfirmDialogComponent, {
+            data: {
+                title,
+                message: question,
+                confirmAction,
+                denyAction: "Cancel",
+                confirmColor,
+                image
+            }
+        } as MatDialogConfig & { data: ConfirmDialogData });
+        return dialog.afterClosed().toPromise();
+    }
+}

mediarepo-ui/src/app/components/shared/app-common/app-common.module.ts

@@ -0,0 +1,50 @@
+import {NgModule} from "@angular/core";
+import {ConfirmDialogComponent} from "./confirm-dialog/confirm-dialog.component";
+import {BusyIndicatorComponent} from "./busy-indicator/busy-indicator.component";
+import {ContextMenuComponent} from "./context-menu/context-menu.component";
+import {CommonModule} from "@angular/common";
+import {NgIconsModule} from "@ng-icons/core";
+import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import {MatButtonModule} from "@angular/material/button";
+import {MatDialogModule} from "@angular/material/dialog";
+import {MatMenuModule} from "@angular/material/menu";
+import {ContentAwareImageComponent} from "./content-aware-image/content-aware-image.component";
+import {InputReceiverDirective} from "./input-receiver/input-receiver.directive";
+import {MetadataEntryComponent} from "./metadata-entry/metadata-entry.component";
+import {BusyDialogComponent} from "./busy-dialog/busy-dialog.component";
+import {SelectableComponent} from "./selectable/selectable.component";
+import {MatProgressBarModule} from "@angular/material/progress-bar";
+
+
+@NgModule({
+    declarations: [
+        ConfirmDialogComponent,
+        BusyIndicatorComponent,
+        ContextMenuComponent,
+        ContentAwareImageComponent,
+        InputReceiverDirective,
+        MetadataEntryComponent,
+        BusyDialogComponent,
+        SelectableComponent,
+    ],
+    exports: [
+        ConfirmDialogComponent,
+        BusyIndicatorComponent,
+        ContextMenuComponent,
+        ContentAwareImageComponent,
+        InputReceiverDirective,
+        MetadataEntryComponent,
+        SelectableComponent,
+    ],
+    imports: [
+        CommonModule,
+        NgIconsModule.withIcons({}),
+        MatProgressSpinnerModule,
+        MatButtonModule,
+        MatDialogModule,
+        MatMenuModule,
+        MatProgressBarModule
+    ]
+})
+export class AppCommonModule {
+}

mediarepo-ui/src/app/components/shared/app-common/busy-dialog/busy-dialog.component.html

@@ -0,0 +1,12 @@
+<h1 class="title" mat-dialog-title>
+    {{title}}
+</h1>
+<div class="content" mat-dialog-content>
+    <mat-progress-bar [mode]="this.mode" [value]="this.progress" color="primary"></mat-progress-bar>
+    {{message}}
+</div>
+<div *ngIf="this.allowCancel" class="busy-dialog-actions" mat-dialog-actions>
+    <button (click)="this.dialogRef.close(false)" mat-flat-button>
+        Cancel
+    </button>
+</div>

mediarepo-ui/src/app/components/shared/app-common/busy-dialog/busy-dialog.component.scss

@@ -0,0 +1,17 @@
+mat-progress-spinner {
+    margin: auto;
+    padding-bottom: 1em;
+}
+
+.title, .content {
+    text-align: center;
+}
+
+.busy-dialog-actions {
+    display: block;
+
+    button {
+        float: right;
+        margin-left: 1em;
+    }
+}

mediarepo-ui/src/app/components/shared/app-common/busy-dialog/busy-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed} from "@angular/core/testing";
+
+import {BusyDialogComponent} from "./busy-dialog.component";
+
+describe("BusyDialogComponent", () => {
+    let component: BusyDialogComponent;
+    let fixture: ComponentFixture<BusyDialogComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [BusyDialogComponent]
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(BusyDialogComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+});

mediarepo-ui/src/app/components/shared/app-common/busy-dialog/busy-dialog.component.ts

@@ -0,0 +1,37 @@
+import {Component, Inject} from "@angular/core";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {BehaviorSubject} from "rxjs";
+import {ProgressBarMode} from "@angular/material/progress-bar";
+
+export type BusyDialogData = {
+    title: string,
+    message?: BehaviorSubject<string>,
+    progress?: BehaviorSubject<number>,
+    allowCancel?: boolean,
+}
+
+@Component({
+    selector: "app-busy-dialog",
+    templateUrl: "./busy-dialog.component.html",
+    styleUrls: ["./busy-dialog.component.scss"]
+})
+export class BusyDialogComponent {
+
+    public title: string;
+    public message?: string;
+    public allowCancel: boolean;
+    public progress = 0;
+    public mode: ProgressBarMode = "indeterminate";
+
+    constructor(public dialogRef: MatDialogRef<BusyDialogComponent>, @Inject(MAT_DIALOG_DATA) data: BusyDialogData) {
+        this.title = data.title;
+        if (data.message) {
+            data.message.subscribe(m => this.message = m);
+        }
+        if (data.progress) {
+            data.progress.subscribe(p => this.progress = p);
+            this.mode = "determinate";
+        }
+        this.allowCancel = data.allowCancel ?? false;
+    }
+}

mediarepo-ui/src/app/components/shared/app-common/busy-indicator/busy-indicator.component.html

@@ -0,0 +1,5 @@
+<ng-content></ng-content>
+<div *ngIf="this.busy" [class.blur]="this.blurBackground" [class.darken]="this.darkenBackground"
+     class="busy-indicator-overlay">
+    <mat-progress-spinner [mode]="mode" [value]="value" color="primary"></mat-progress-spinner>
+</div>