style: folders without arrow, hashtag row cut off with an expander

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mindsift-frontend",
-  "version": "0.45.0",
+  "version": "0.45.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mindsift-frontend",
-      "version": "0.45.0",
+      "version": "0.45.1",
       "license": "Unlicense",
       "dependencies": {
         "@fontsource-variable/inter": "5.3.0",

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mindsift-frontend",
   "private": true,
-  "version": "0.45.0",
+  "version": "0.45.1",
   "license": "Unlicense",
   "type": "module",
   "scripts": {

frontend/src/features/triage/TasksView.tsx

@@ -203,6 +203,10 @@ export const TasksView: React.FC<TasksViewProps> = ({
 
   // Hashtag filtering, grouping and sorting state
   const [selectedTag, setSelectedTag] = useState<string | null>(null);
+  // Hashtag row on desktop: whether it is cut off, and whether it is opened up into several lines
+  const tagRowRef = useRef<HTMLDivElement>(null);
+  const [tagsExpanded, setTagsExpanded] = useState(false);
+  const [tagsOverflow, setTagsOverflow] = useState(false);
   const [groupBy, setGroupBy] = useState<'none' | 'tag' | 'status' | 'priority' | 'due'>('none');
   const [sortBy, setSortBy] = useState<'custom' | 'created' | 'due' | 'priority' | 'alpha'>('custom');
 
@@ -491,6 +495,17 @@ export const TasksView: React.FC<TasksViewProps> = ({
     return Array.from(set).sort();
   }, [safeTasks]);
 
+  // Cut off? Measured while the row is one line (on resize and when the tags change)
+  useEffect(() => {
+    const el = tagRowRef.current;
+    if (!el || tagsExpanded) return;
+    const measure = () => setTagsOverflow(el.scrollWidth > el.clientWidth + 1);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [allAvailableTags, tagsExpanded, viewMode]);
+
   // Filtered tasks for List view
   const openTasks = safeTasks.filter((t) => !t.isCompleted);
   const doneTasks = safeTasks.filter((t) => t.isCompleted);
@@ -2055,8 +2070,11 @@ export const TasksView: React.FC<TasksViewProps> = ({
 
       {/* Hashtag Filter & Grouping / Sorting Toolbar (Desktop only - on mobile accessible via Logo Menu Filter & Sort) */}
       <div className="hidden sm:flex flex-wrap items-center justify-between gap-2 pt-1 pb-0.5">
-        {/* Hashtag filter chips */}
-        <div className="flex items-center gap-1.5 overflow-x-auto max-w-full pb-1">
+        {/* Hashtag filter chips: one line, cut off with "…" when too many; "…" opens them all in lines */}
+        <div
+          ref={tagRowRef}
+          className={`flex-1 min-w-0 flex items-center gap-1.5 pb-1 ${tagsExpanded ? 'flex-wrap' : 'overflow-hidden'}`}
+        >
           <span className="text-[11px] font-semibold text-muted flex items-center gap-1 flex-shrink-0">
             <Hash className="w-3 h-3 text-accent" />
             <span>Hashtags:</span>
@@ -2089,7 +2107,25 @@ export const TasksView: React.FC<TasksViewProps> = ({
               </button>
             );
           })}
+          {tagsExpanded && (
+            <button
+              onClick={() => setTagsExpanded(false)}
+              className="h-6 px-2 text-[11px] rounded-pill text-accent hover:underline flex-shrink-0"
+            >
+              Weniger
+            </button>
+          )}
         </div>
+        {!tagsExpanded && tagsOverflow && (
+          <button
+            onClick={() => setTagsExpanded(true)}
+            className="h-6 px-2 -ml-1 mb-1 text-xs rounded-pill border border-border bg-canvas text-muted hover:text-main flex-shrink-0"
+            title="Alle Hashtags zeigen"
+            aria-label="Alle Hashtags zeigen"
+          >
+            …
+          </button>
+        )}
 
         {/* Kanban: manage columns and width (the list view has grouping and sorting above the list) */}
         <div className="flex items-center gap-2 flex-shrink-0 ml-auto">

frontend/src/features/workspace/WorkspaceView.tsx

@@ -164,13 +164,7 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
           }
           className="flex items-center gap-1.5 flex-1 min-w-0 text-left h-full cursor-pointer"
         >
-          {hasContent ? (
-            isExpanded ? (
-              <ChevronDown className="w-3.5 h-3.5 text-faint shrink-0" />
-            ) : (
-              <ChevronRight className="w-3.5 h-3.5 text-faint shrink-0" />
-            )
-          ) : null}
+          {/* No arrow: the open/closed folder icon shows the state, and empty folders line up the same */}
           {isExpanded ? (
             <FolderOpen className="w-3.5 h-3.5 text-accent shrink-0" />
           ) : (
@@ -271,7 +265,7 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
 {...docDropProps(d.id)}
               onMouseDown={(e) => e.shiftKey && e.preventDefault()}
               onClick={(e) => onDocRowClick(e, d.id, () => onSelectDoc(d.id))}
-              style={{ paddingLeft: `${(depth + 1) * 12 + 16}px` }}
+              style={{ paddingLeft: `${(depth + 1) * 12 + 9}px` }}
               className={`w-full flex items-center gap-2 pr-2 py-1.5 min-h-11 sm:min-h-0 rounded-btn text-left text-sm sm:text-xs cursor-pointer border transition-colors ${
                 mergeHoverId === d.id
                   ? 'border-accent bg-accent/15 ring-2 ring-accent/30 text-main'
@@ -289,7 +283,7 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
 
           {!hasContent && (
             <div
-              style={{ paddingLeft: `${(depth + 1) * 12 + 16}px` }}
+              style={{ paddingLeft: `${(depth + 1) * 12 + 9}px` }}
               className="py-1 text-[10px] text-faint italic"
             >
               Leer