diff --git a/mediarepo-ui/src/app/app.module.ts b/mediarepo-ui/src/app/app.module.ts
index 8f0e901..aab9560 100644
--- a/mediarepo-ui/src/app/app.module.ts
+++ b/mediarepo-ui/src/app/app.module.ts
@@ -48,6 +48,7 @@ import {MatMenuModule} from "@angular/material/menu";
import { ConfirmDialogComponent } from './components/confirm-dialog/confirm-dialog.component';
import { FilesTabSidebarComponent } from './pages/home/files-tab/files-tab-sidebar/files-tab-sidebar.component';
import {MatExpansionModule} from "@angular/material/expansion";
+import { TagItemComponent } from './components/tag-item/tag-item.component';
@NgModule({
declarations: [
@@ -66,6 +67,7 @@ import {MatExpansionModule} from "@angular/material/expansion";
AddRepositoryDialogComponent,
ConfirmDialogComponent,
FilesTabSidebarComponent,
+ TagItemComponent,
],
imports: [
BrowserModule,
diff --git a/mediarepo-ui/src/app/components/tag-item/tag-item.component.html b/mediarepo-ui/src/app/components/tag-item/tag-item.component.html
new file mode 100644
index 0000000..2a540bc
--- /dev/null
+++ b/mediarepo-ui/src/app/components/tag-item/tag-item.component.html
@@ -0,0 +1,4 @@
+
+ {{tag.namespace}}:
+ {{tag.name}}
+
diff --git a/mediarepo-ui/src/app/components/tag-item/tag-item.component.scss b/mediarepo-ui/src/app/components/tag-item/tag-item.component.scss
new file mode 100644
index 0000000..5e91837
--- /dev/null
+++ b/mediarepo-ui/src/app/components/tag-item/tag-item.component.scss
@@ -0,0 +1,10 @@
+.tag-item-wrapper {
+ display: inline;
+ width: 100%;
+ padding: 0.25em;
+}
+
+.tag-item-namespace {
+ margin-right: 0.25em;
+ opacity: 80%;
+}
diff --git a/mediarepo-ui/src/app/components/tag-item/tag-item.component.spec.ts b/mediarepo-ui/src/app/components/tag-item/tag-item.component.spec.ts
new file mode 100644
index 0000000..58b5f2b
--- /dev/null
+++ b/mediarepo-ui/src/app/components/tag-item/tag-item.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TagItemComponent } from './tag-item.component';
+
+describe('TagItemComponent', () => {
+ let component: TagItemComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ TagItemComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TagItemComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/mediarepo-ui/src/app/components/tag-item/tag-item.component.ts b/mediarepo-ui/src/app/components/tag-item/tag-item.component.ts
new file mode 100644
index 0000000..0cc2219
--- /dev/null
+++ b/mediarepo-ui/src/app/components/tag-item/tag-item.component.ts
@@ -0,0 +1,16 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Tag} from "../../models/Tag";
+
+@Component({
+ selector: 'app-tag-item',
+ templateUrl: './tag-item.component.html',
+ styleUrls: ['./tag-item.component.scss']
+})
+export class TagItemComponent {
+
+ @Input() tag!: Tag;
+ @Input() namespaceColor: string | undefined;
+ @Input() tagColor: string | undefined;
+
+ constructor() { }
+}
diff --git a/mediarepo-ui/src/app/pages/home/files-tab/files-tab-sidebar/files-tab-sidebar.component.html b/mediarepo-ui/src/app/pages/home/files-tab/files-tab-sidebar/files-tab-sidebar.component.html
index 50322bd..5a4ecdd 100644
--- a/mediarepo-ui/src/app/pages/home/files-tab/files-tab-sidebar/files-tab-sidebar.component.html
+++ b/mediarepo-ui/src/app/pages/home/files-tab/files-tab-sidebar/files-tab-sidebar.component.html
@@ -1,19 +1,22 @@