fix

frontend/src/static/js/components/management-table/ManageItemList-filters.scss

@@ -156,9 +156,13 @@
 
       &.active button,
       button:hover {
-        color: inherit;
+        color: var(--default-theme-color);
         opacity: 1;
       }
+
+      &.active button {
+        font-weight: 600;
+      }
     }
 
     &.mi-filter-options-horizontal {
@@ -182,12 +186,16 @@
           opacity: 1;
 
           &:hover {
-            background-color: var(--header-circle-button-bg-active-color);
+            background-color: var(--default-theme-color);
+            color: white;
+            opacity: 0.9;
           }
         }
 
         &.active button {
-          background-color: var(--header-circle-button-bg-active-color);
+          background-color: var(--default-theme-color);
+          color: white;
+          font-weight: 600;
         }
       }
     }

frontend/src/static/js/components/profile-page/ProfilePagesHeader.js

@@ -372,19 +372,43 @@ class NavMenuInlineTabs extends React.PureComponent {
             </li>
             {this.props.onToggleFiltersClick && ['media', 'shared_by_me', 'shared_with_me'].includes(this.props.type) ? (
               <li className="media-filters-toggle">
-                <span style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} onClick={this.props.onToggleFiltersClick} title={translateString('Filters')}>
+                <span style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', position: 'relative' }} onClick={this.props.onToggleFiltersClick} title={translateString('Filters')}>
                   <CircleIconButton buttonShadow={false}>
                     <i className="material-icons">filter_list</i>
                   </CircleIconButton>
+                  {this.props.hasActiveFilters ? (
+                    <span style={{
+                      position: 'absolute',
+                      top: '8px',
+                      right: '8px',
+                      width: '8px',
+                      height: '8px',
+                      borderRadius: '50%',
+                      backgroundColor: 'var(--default-theme-color)',
+                      border: '2px solid white',
+                    }}></span>
+                  ) : null}
                 </span>
               </li>
             ) : null}
             {this.props.onToggleTagsClick && ['media', 'shared_by_me', 'shared_with_me'].includes(this.props.type) ? (
               <li className="media-tags-toggle">
-                <span style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} onClick={this.props.onToggleTagsClick} title={translateString('Tags')}>
+                <span style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', position: 'relative' }} onClick={this.props.onToggleTagsClick} title={translateString('Tags')}>
                   <CircleIconButton buttonShadow={false}>
                     <i className="material-icons">local_offer</i>
                   </CircleIconButton>
+                  {this.props.hasActiveTags ? (
+                    <span style={{
+                      position: 'absolute',
+                      top: '8px',
+                      right: '8px',
+                      width: '8px',
+                      height: '8px',
+                      borderRadius: '50%',
+                      backgroundColor: 'var(--default-theme-color)',
+                      border: '2px solid white',
+                    }}></span>
+                  ) : null}
                 </span>
               </li>
             ) : null}
@@ -412,6 +436,8 @@ NavMenuInlineTabs.propTypes = {
   onToggleFiltersClick: PropTypes.func,
   onToggleTagsClick: PropTypes.func,
   onToggleSortingClick: PropTypes.func,
+  hasActiveFilters: PropTypes.bool,
+  hasActiveTags: PropTypes.bool,
 };
 
 function AddBannerButton(props) {
@@ -635,6 +661,8 @@ export default function ProfilePagesHeader(props) {
           onToggleFiltersClick={props.onToggleFiltersClick}
           onToggleTagsClick={props.onToggleTagsClick}
           onToggleSortingClick={props.onToggleSortingClick}
+          hasActiveFilters={props.hasActiveFilters}
+          hasActiveTags={props.hasActiveTags}
         />
       </div>
     </div>
@@ -648,6 +676,8 @@ ProfilePagesHeader.propTypes = {
   onToggleFiltersClick: PropTypes.func,
   onToggleTagsClick: PropTypes.func,
   onToggleSortingClick: PropTypes.func,
+  hasActiveFilters: PropTypes.bool,
+  hasActiveTags: PropTypes.bool,
 };
 
 ProfilePagesHeader.defaultProps = {

frontend/src/static/js/components/search-filters/ProfileMediaFilters.jsx

@@ -72,8 +72,8 @@ export function ProfileMediaFilters(props) {
       upload_date: uploadDateFilter,
       duration: durationFilter,
       publish_state: publishStateFilter,
-      sort_by: sortByFilter,
-      tag: tagFilter,
+      sort_by: props.selectedSort || sortByFilter,
+      tag: props.selectedTag || tagFilter,
     };
 
     switch (ev.currentTarget.getAttribute('filter')) {
@@ -180,6 +180,8 @@ ProfileMediaFilters.propTypes = {
   hidden: PropTypes.bool,
   tags: PropTypes.array,
   onFiltersUpdate: PropTypes.func.isRequired,
+  selectedTag: PropTypes.string,
+  selectedSort: PropTypes.string,
 };
 
 ProfileMediaFilters.defaultProps = {

frontend/src/static/js/pages/ProfileMediaPage.js

@@ -875,6 +875,23 @@ export class ProfileMediaPage extends Page {
 
     const isMediaAuthor = authorData && authorData.username === MemberContext._currentValue.username;
 
+    // Check if any filters are active (excluding default sort and tags)
+    const hasActiveFilters = this.state.filterArgs && (
+      this.state.filterArgs.includes('media_type=') ||
+      this.state.filterArgs.includes('upload_date=') ||
+      this.state.filterArgs.includes('duration=') ||
+      this.state.filterArgs.includes('publish_state=')
+    );
+
+    const hasActiveTags = this.state.selectedTag && this.state.selectedTag !== 'all';
+
+    console.log('Filter Debug:', {
+      filterArgs: this.state.filterArgs,
+      selectedTag: this.state.selectedTag,
+      hasActiveFilters,
+      hasActiveTags
+    });
+
     return [
       this.state.author ? (
         <ProfilePagesHeader
@@ -885,6 +902,8 @@ export class ProfileMediaPage extends Page {
           onToggleFiltersClick={this.onToggleFiltersClick}
           onToggleTagsClick={this.onToggleTagsClick}
           onToggleSortingClick={this.onToggleSortingClick}
+          hasActiveFilters={hasActiveFilters}
+          hasActiveTags={hasActiveTags}
         />
       ) : null,
       this.state.author ? (
@@ -899,7 +918,7 @@ export class ProfileMediaPage extends Page {
             onSelectAll={this.handleSelectAll}
             onDeselectAll={this.handleDeselectAll}
           >
-            <ProfileMediaFilters hidden={this.state.hiddenFilters} tags={this.state.availableTags} onFiltersUpdate={this.onFiltersUpdate} />
+            <ProfileMediaFilters hidden={this.state.hiddenFilters} tags={this.state.availableTags} onFiltersUpdate={this.onFiltersUpdate} selectedTag={this.state.selectedTag} selectedSort={this.state.selectedSort} />
             <ProfileMediaTags hidden={this.state.hiddenTags} tags={this.state.availableTags} onTagSelect={this.onTagSelect} />
             <ProfileMediaSorting hidden={this.state.hiddenSorting} onSortSelect={this.onSortSelect} />
             <LazyLoadItemListAsync