From 77442bec677f98cc2bf12d0bdee20ccacb1f2df9 Mon Sep 17 00:00:00 2001
From: Aleix Soler <aleixsoler64@gmail.com>
Date: Wed, 16 Jul 2025 17:52:30 +0200
Subject: [PATCH] refactor: rename groupped to grouped

---
 .../GroupedStatusView.tsx}                    | 16 +--
 .../components/FileList.tsx                   | 16 +--
 .../components/FilterSection.tsx              | 10 +-
 .../components/StatusGroup.tsx                | 11 +--
 .../components/TagSection.tsx                 |  8 +-
 .../StatusDashboard/StatusDashboard.tsx       |  2 +-
 ...rd-view.tsx => grouped-dashboard-view.tsx} | 18 ++--
 ...tatus-view.tsx => grouped-status-view.tsx} | 18 ++--
 main.tsx                                      |  6 +-
 ...tatus-view.css => grouped-status-view.css} | 98 +++++++++----------
 styles/index.css                              |  2 +-
 11 files changed, 101 insertions(+), 104 deletions(-)
 rename components/{GrouppedStatusView/GrouppedStatusView.tsx => GroupedStatusView/GroupedStatusView.tsx} (95%)
 rename components/{GrouppedStatusView => GroupedStatusView}/components/FileList.tsx (76%)
 rename components/{GrouppedStatusView => GroupedStatusView}/components/FilterSection.tsx (74%)
 rename components/{GrouppedStatusView => GroupedStatusView}/components/StatusGroup.tsx (85%)
 rename components/{GrouppedStatusView => GroupedStatusView}/components/TagSection.tsx (89%)
 rename integrations/views/{groupped-dashboard-view.tsx => grouped-dashboard-view.tsx} (88%)
 rename integrations/views/{groupped-status-view.tsx => grouped-status-view.tsx} (89%)
 rename styles/components/{groupped-status-view.css => grouped-status-view.css} (74%)

diff --git a/components/GrouppedStatusView/GrouppedStatusView.tsx b/components/GroupedStatusView/GroupedStatusView.tsx
similarity index 95%
rename from components/GrouppedStatusView/GrouppedStatusView.tsx
rename to components/GroupedStatusView/GroupedStatusView.tsx
index ea18300..521836a 100644
--- a/components/GrouppedStatusView/GrouppedStatusView.tsx
+++ b/components/GroupedStatusView/GroupedStatusView.tsx
@@ -22,7 +22,7 @@ export type GroupedByStatus = {
 	[frontmatterTag: string]: FilesByStatus;
 };
 
-export type GrouppedStatusViewProps = {
+export type GroupedStatusViewProps = {
 	getAllFiles: () => FileItem[];
 	processFiles: (files: FileItem[]) => GroupedByStatus;
 	onFileClick: (file: FileItem) => void;
@@ -32,13 +32,13 @@ export type GrouppedStatusViewProps = {
 
 const ITEMS_PER_LOAD = 20;
 
-export const GrouppedStatusView = ({
+export const GroupedStatusView = ({
 	getAllFiles,
 	processFiles,
 	onFileClick,
 	subscribeToEvents,
 	getAvailableStatuses,
-}: GrouppedStatusViewProps) => {
+}: GroupedStatusViewProps) => {
 	const [groupedData, setGroupedData] = useState<GroupedByStatus>({});
 	const [searchFilter, setSearchFilter] = useState("");
 	const [noteNameFilter, setNoteNameFilter] = useState("");
@@ -206,8 +206,8 @@ export const GrouppedStatusView = ({
 
 	if (isLoading) {
 		return (
-			<div className="groupped-status-view">
-				<div className="groupped-status-loading">
+			<div className="">
+				<div className="grouped-status-loading">
 					Loading statuses...
 				</div>
 			</div>
@@ -215,7 +215,7 @@ export const GrouppedStatusView = ({
 	}
 
 	return (
-		<div className="groupped-status-view">
+		<div className="">
 			<FilterSection
 				searchFilter={searchFilter}
 				noteNameFilter={noteNameFilter}
@@ -223,7 +223,7 @@ export const GrouppedStatusView = ({
 				onNoteNameFilterChange={setNoteNameFilter}
 			/>
 
-			<div className="groupped-status-content">
+			<div className="grouped-status-content">
 				{Object.entries(filteredData).map(([tag, statusGroups]) => {
 					const tagKey = `tag-${tag}`;
 					const isTagExpanded = expandedGroups.has(tagKey);
@@ -247,7 +247,7 @@ export const GrouppedStatusView = ({
 				})}
 
 				{Object.keys(filteredData).length === 0 && (
-					<div className="groupped-status-empty">
+					<div className="grouped-status-empty">
 						{searchFilter
 							? "No files match your search."
 							: "No statuses found."}
diff --git a/components/GrouppedStatusView/components/FileList.tsx b/components/GroupedStatusView/components/FileList.tsx
similarity index 76%
rename from components/GrouppedStatusView/components/FileList.tsx
rename to components/GroupedStatusView/components/FileList.tsx
index 3b66dcd..d5c3f41 100644
--- a/components/GrouppedStatusView/components/FileList.tsx
+++ b/components/GroupedStatusView/components/FileList.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { FileItem } from "../GrouppedStatusView";
+import { FileItem } from "../GroupedStatusView";
 
 interface FileListProps {
 	files: FileItem[];
@@ -44,27 +44,27 @@ export const FileList = ({
 	);
 
 	return (
-		<div className="groupped-status-files">
-			<div className="groupped-status-files-list" onScroll={handleScroll}>
+		<div className="grouped-status-files">
+			<div className="grouped-status-files-list" onScroll={handleScroll}>
 				{visibleFiles.map((file) => (
 					<div
 						key={file.id}
-						className="groupped-status-file-item"
+						className="grouped-status-file-item"
 						onClick={() => handleFileClick(file)}
 					>
-						<span className="groupped-status-file-name">
+						<span className="grouped-status-file-name">
 							{file.name}
 						</span>
-						<span className="groupped-status-file-path">
+						<span className="grouped-status-file-path">
 							{file.path}
 						</span>
 					</div>
 				))}
 
 				{hasMoreItems && (
-					<div className="groupped-status-load-more">
+					<div className="grouped-status-load-more">
 						<button
-							className="groupped-status-load-btn"
+							className="grouped-status-load-btn"
 							onClick={handleLoadMore}
 						>
 							Load more... ({files.length - loadedCount}{" "}
diff --git a/components/GrouppedStatusView/components/FilterSection.tsx b/components/GroupedStatusView/components/FilterSection.tsx
similarity index 74%
rename from components/GrouppedStatusView/components/FilterSection.tsx
rename to components/GroupedStatusView/components/FilterSection.tsx
index 0790fd2..5ca2523 100644
--- a/components/GrouppedStatusView/components/FilterSection.tsx
+++ b/components/GroupedStatusView/components/FilterSection.tsx
@@ -15,18 +15,18 @@ export const FilterSection = ({
 	onNoteNameFilterChange,
 }: FilterSectionProps) => {
 	return (
-		<div className="groupped-status-header">
-			<h3 className="groupped-status-title">Status Groups</h3>
-			<div className="groupped-status-filters">
+		<div className="grouped-status-header">
+			<h3 className="grouped-status-title">Status Groups</h3>
+			<div className="grouped-status-filters">
 				<SearchFilter
 					value={searchFilter}
 					onFilterChange={onSearchFilterChange}
 				/>
-				<div className="groupped-status-note-filter">
+				<div className="grouped-status-note-filter">
 					<input
 						type="text"
 						placeholder="Filter by note name..."
-						className="groupped-status-note-input"
+						className="grouped-status-note-input"
 						value={noteNameFilter}
 						onChange={(e) => onNoteNameFilterChange(e.target.value)}
 					/>
diff --git a/components/GrouppedStatusView/components/StatusGroup.tsx b/components/GroupedStatusView/components/StatusGroup.tsx
similarity index 85%
rename from components/GrouppedStatusView/components/StatusGroup.tsx
rename to components/GroupedStatusView/components/StatusGroup.tsx
index a36c481..b5ac851 100644
--- a/components/GrouppedStatusView/components/StatusGroup.tsx
+++ b/components/GroupedStatusView/components/StatusGroup.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { StatusBadge } from "@/components/atoms/StatusBadge";
 import { CollapsibleCounter } from "@/components/atoms/CollapsibleCounter";
-import { FileItem, StatusItem } from "../GrouppedStatusView";
+import { FileItem, StatusItem } from "../GroupedStatusView";
 import { FileList } from "./FileList";
 import { NoteStatus } from "@/types/noteStatus";
 
@@ -41,17 +41,14 @@ export const StatusGroup = ({
 	}, [onToggle]);
 
 	return (
-		<div className="groupped-status-group">
-			<div
-				className="groupped-status-group-header"
-				onClick={handleToggle}
-			>
+		<div className="grouped-status-group">
+			<div className="grouped-status-group-header" onClick={handleToggle}>
 				<StatusBadge
 					status={
 						{ ...status, icon: status.icon || "" } as NoteStatus
 					}
 				/>
-				<div className="groupped-status-group-info">
+				<div className="grouped-status-group-info">
 					<CollapsibleCounter
 						count={files.length}
 						isCollapsed={!isExpanded}
diff --git a/components/GrouppedStatusView/components/TagSection.tsx b/components/GroupedStatusView/components/TagSection.tsx
similarity index 89%
rename from components/GrouppedStatusView/components/TagSection.tsx
rename to components/GroupedStatusView/components/TagSection.tsx
index 2940dd9..aa0d089 100644
--- a/components/GrouppedStatusView/components/TagSection.tsx
+++ b/components/GroupedStatusView/components/TagSection.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { GroupLabel } from "@/components/atoms/GroupLabel";
 import { CollapsibleCounter } from "@/components/atoms/CollapsibleCounter";
-import { FilesByStatus, FileItem, StatusItem } from "../GrouppedStatusView";
+import { FilesByStatus, FileItem, StatusItem } from "../GroupedStatusView";
 import { StatusGroup } from "./StatusGroup";
 
 interface TagSectionProps {
@@ -52,8 +52,8 @@ export const TagSection = ({
 	);
 
 	return (
-		<div className="groupped-status-tag-section">
-			<div className="groupped-status-tag-header" onClick={handleToggle}>
+		<div className="grouped-status-tag-section">
+			<div className="grouped-status-tag-header" onClick={handleToggle}>
 				<GroupLabel name={tag} />
 				<CollapsibleCounter
 					count={totalFilesInTag}
@@ -63,7 +63,7 @@ export const TagSection = ({
 			</div>
 
 			{isExpanded && (
-				<div className="groupped-status-tag-content">
+				<div className="grouped-status-tag-content">
 					{Object.entries(statusGroups).map(([statusName, files]) => {
 						if (files.length === 0) return null;
 
diff --git a/components/StatusDashboard/StatusDashboard.tsx b/components/StatusDashboard/StatusDashboard.tsx
index 5b79619..67dd083 100644
--- a/components/StatusDashboard/StatusDashboard.tsx
+++ b/components/StatusDashboard/StatusDashboard.tsx
@@ -394,7 +394,7 @@ export const StatusDashboard = () => {
 								const leaf =
 									BaseNoteStatusService.app.workspace.getLeaf();
 								leaf.setViewState({
-									type: "groupped-status-view",
+									type: "grouped-status-view",
 									active: true,
 								});
 							}}
diff --git a/integrations/views/groupped-dashboard-view.tsx b/integrations/views/grouped-dashboard-view.tsx
similarity index 88%
rename from integrations/views/groupped-dashboard-view.tsx
rename to integrations/views/grouped-dashboard-view.tsx
index de1bd84..08a9100 100644
--- a/integrations/views/groupped-dashboard-view.tsx
+++ b/integrations/views/grouped-dashboard-view.tsx
@@ -1,12 +1,12 @@
 import { ItemView, WorkspaceLeaf, TFile } from "obsidian";
 import { Root, createRoot } from "react-dom/client";
-import { GrouppedStatusView as GrouppedStatusViewComponent } from "@/components/GrouppedStatusView/GrouppedStatusView";
+import { GroupedStatusView as GroupedStatusViewComponent } from "@/components/GroupedStatusView/GroupedStatusView";
 import { BaseNoteStatusService } from "@/core/noteStatusService";
 import eventBus from "@/core/eventBus";
 import settingsService from "@/core/settingsService";
 import { NoteStatus } from "@/types/noteStatus";
 
-export const VIEW_TYPE_GROUPPED_DASHBOARD = "groupped-dashboard-view";
+export const VIEW_TYPE_GROUPED_DASHBOARD = "grouped-dashboard-view";
 
 interface FileItem {
 	id: string;
@@ -28,7 +28,7 @@ interface GroupedByStatus {
 	[frontmatterTag: string]: FilesByStatus;
 }
 
-export class GrouppedDashboardView extends ItemView {
+export class GroupedDashboardView extends ItemView {
 	root: Root | null = null;
 
 	constructor(leaf: WorkspaceLeaf) {
@@ -36,11 +36,11 @@ export class GrouppedDashboardView extends ItemView {
 	}
 
 	getViewType() {
-		return VIEW_TYPE_GROUPPED_DASHBOARD;
+		return VIEW_TYPE_GROUPED_DASHBOARD;
 	}
 
 	getDisplayText() {
-		return "Groupped Status Dashboard";
+		return "Grouped Status Dashboard";
 	}
 
 	getIcon() {
@@ -130,7 +130,7 @@ export class GrouppedDashboardView extends ItemView {
 		eventBus.subscribe(
 			"frontmatter-manually-changed",
 			onDataChange,
-			"groupped-dashboard-view-subscription",
+			"grouped-dashboard-view-subscription",
 		);
 		const unsubscribeActiveFile = BaseNoteStatusService.app.workspace.on(
 			"active-leaf-change",
@@ -140,7 +140,7 @@ export class GrouppedDashboardView extends ItemView {
 		return () => {
 			eventBus.unsubscribe(
 				"frontmatter-manually-changed",
-				"groupped-dashboard-view-subscription",
+				"grouped-dashboard-view-subscription",
 			);
 			BaseNoteStatusService.app.workspace.offref(unsubscribeActiveFile);
 		};
@@ -149,11 +149,11 @@ export class GrouppedDashboardView extends ItemView {
 	async onOpen() {
 		const container = this.containerEl.children[1];
 		container.empty();
-		container.addClass("groupped-dashboard-view-container");
+		container.addClass("grouped-dashboard-view-container");
 
 		this.root = createRoot(container);
 		this.root.render(
-			<GrouppedStatusViewComponent
+			<GroupedStatusViewComponent
 				getAllFiles={this.getAllFiles}
 				processFiles={this.processFiles}
 				onFileClick={this.handleFileClick}
diff --git a/integrations/views/groupped-status-view.tsx b/integrations/views/grouped-status-view.tsx
similarity index 89%
rename from integrations/views/groupped-status-view.tsx
rename to integrations/views/grouped-status-view.tsx
index 8be4c90..a90fc34 100644
--- a/integrations/views/groupped-status-view.tsx
+++ b/integrations/views/grouped-status-view.tsx
@@ -3,17 +3,17 @@ import { Root, createRoot } from "react-dom/client";
 import {
 	FileItem,
 	GroupedByStatus,
-	GrouppedStatusView as GrouppedStatusViewComponent,
+	GroupedStatusView as GroupedStatusViewComponent,
 	StatusItem,
-} from "@/components/GrouppedStatusView/GrouppedStatusView";
+} from "@/components/GroupedStatusView/GroupedStatusView";
 import { BaseNoteStatusService } from "@/core/noteStatusService";
 import eventBus from "@/core/eventBus";
 import settingsService from "@/core/settingsService";
 import { NoteStatus } from "@/types/noteStatus";
 
-export const VIEW_TYPE_EXAMPLE = "groupped-status-view";
+export const VIEW_TYPE_EXAMPLE = "grouped-status-view";
 
-export class GrouppedStatusView extends ItemView {
+export class GroupedStatusView extends ItemView {
 	root: Root | null = null;
 
 	constructor(leaf: WorkspaceLeaf) {
@@ -25,7 +25,7 @@ export class GrouppedStatusView extends ItemView {
 	}
 
 	getDisplayText() {
-		return "Groupped Status View";
+		return "Grouped Status View";
 	}
 
 	getIcon() {
@@ -115,7 +115,7 @@ export class GrouppedStatusView extends ItemView {
 		eventBus.subscribe(
 			"frontmatter-manually-changed",
 			onDataChange,
-			"groupped-status-view-subscription",
+			"grouped-status-view-subscription",
 		);
 		const unsubscribeActiveFile = BaseNoteStatusService.app.workspace.on(
 			"active-leaf-change",
@@ -125,7 +125,7 @@ export class GrouppedStatusView extends ItemView {
 		return () => {
 			eventBus.unsubscribe(
 				"frontmatter-manually-changed",
-				"groupped-status-view-subscription",
+				"grouped-status-view-subscription",
 			);
 			BaseNoteStatusService.app.workspace.offref(unsubscribeActiveFile);
 		};
@@ -134,11 +134,11 @@ export class GrouppedStatusView extends ItemView {
 	async onOpen() {
 		const container = this.containerEl.children[1];
 		container.empty();
-		container.addClass("groupped-status-view-container");
+		container.addClass("grouped-status-view-container");
 
 		this.root = createRoot(container);
 		this.root.render(
-			<GrouppedStatusViewComponent
+			<GroupedStatusViewComponent
 				getAllFiles={this.getAllFiles}
 				processFiles={this.processFiles}
 				onFileClick={this.handleFileClick}
diff --git a/main.tsx b/main.tsx
index d492d16..50fcbd8 100644
--- a/main.tsx
+++ b/main.tsx
@@ -9,9 +9,9 @@ import ContextMenuIntegration from "./integrations/context-menu/contextMenuInteg
 import { FileExplorerIntegration } from "./integrations/file-explorer/file-explorer-integration";
 import { CommandsIntegration } from "./integrations/commands/commandsIntegration";
 import {
-	GrouppedStatusView,
+	GroupedStatusView,
 	VIEW_TYPE_EXAMPLE,
-} from "./integrations/views/groupped-status-view";
+} from "./integrations/views/grouped-status-view";
 import {
 	StatusDashboardView,
 	VIEW_TYPE_STATUS_DASHBOARD,
@@ -39,7 +39,7 @@ export default class NoteStatusPlugin extends Plugin {
 
 		this.registerView(
 			VIEW_TYPE_EXAMPLE,
-			(leaf) => new GrouppedStatusView(leaf),
+			(leaf) => new GroupedStatusView(leaf),
 		);
 
 		this.registerView(
diff --git a/styles/components/groupped-status-view.css b/styles/components/grouped-status-view.css
similarity index 74%
rename from styles/components/groupped-status-view.css
rename to styles/components/grouped-status-view.css
index 146356a..7c78662 100644
--- a/styles/components/groupped-status-view.css
+++ b/styles/components/grouped-status-view.css
@@ -1,34 +1,34 @@
-.groupped-status-view-container {
+.grouped-status-view-container {
 	height: 100%;
 	overflow: hidden;
 }
 
-.groupped-status-view {
+.grouped-status-view {
 	height: 100%;
 	display: flex;
 	flex-direction: column;
 	background-color: var(--background-primary);
 }
 
-.groupped-status-header {
+.grouped-status-header {
 	padding: var(--size-4-2) var(--size-4-3);
 	border-bottom: 1px solid var(--background-modifier-border);
 	background-color: var(--background-secondary);
 	flex-shrink: 0;
 }
 
-.groupped-status-filters {
+.grouped-status-filters {
 	display: flex;
 	flex-direction: column;
 	gap: var(--size-4-2);
 }
 
-.groupped-status-note-filter {
+.grouped-status-note-filter {
 	display: flex;
 	flex-direction: column;
 }
 
-.groupped-status-note-input {
+.grouped-status-note-input {
 	width: 100%;
 	padding: var(--size-2-1) var(--size-2-3);
 	border: 1px solid var(--background-modifier-border);
@@ -39,39 +39,39 @@
 	transition: border-color var(--anim-duration-fast) var(--anim-motion-smooth);
 }
 
-.groupped-status-note-input:focus {
+.grouped-status-note-input:focus {
 	outline: none;
 	border-color: var(--interactive-accent);
 	box-shadow: 0 0 0 2px var(--interactive-accent-hover);
 }
 
-.groupped-status-note-input::placeholder {
+.grouped-status-note-input::placeholder {
 	color: var(--text-muted);
 }
 
-.groupped-status-title {
+.grouped-status-title {
 	margin: 0 0 var(--size-4-2) 0;
 	font-size: var(--font-ui-large);
 	font-weight: var(--font-weight-semibold);
 	color: var(--text-normal);
 }
 
-.groupped-status-content {
+.grouped-status-content {
 	flex: 1;
 	overflow-y: auto;
 	padding: var(--size-4-2);
 	max-height: calc(100vh - 120px);
 }
 
-.groupped-status-tag-section {
+.grouped-status-tag-section {
 	margin-bottom: var(--size-4-4);
 }
 
-.groupped-status-tag-section:last-child {
+.grouped-status-tag-section:last-child {
 	margin-bottom: 0;
 }
 
-.groupped-status-tag-header {
+.grouped-status-tag-header {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -85,15 +85,15 @@
 	margin-bottom: var(--size-4-2);
 }
 
-.groupped-status-tag-header:hover {
+.grouped-status-tag-header:hover {
 	background-color: var(--background-modifier-hover);
 }
 
-.groupped-status-tag-content {
+.grouped-status-tag-content {
 	padding-left: var(--size-4-2);
 }
 
-.groupped-status-group {
+.grouped-status-group {
 	margin-bottom: var(--size-4-2);
 	border: 1px solid var(--background-modifier-border);
 	border-radius: var(--radius-m);
@@ -101,7 +101,7 @@
 	overflow: hidden;
 }
 
-.groupped-status-group-header {
+.grouped-status-group-header {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -112,31 +112,31 @@
 	border-bottom: 1px solid transparent;
 }
 
-.groupped-status-group-header:hover {
+.grouped-status-group-header:hover {
 	background-color: var(--background-modifier-hover);
 }
 
-.groupped-status-group-header:active {
+.grouped-status-group-header:active {
 	background-color: var(--background-modifier-active);
 }
 
-.groupped-status-group-info {
+.grouped-status-group-info {
 	display: flex;
 	align-items: center;
 	gap: var(--size-2-1);
 }
 
-.groupped-status-files {
+.grouped-status-files {
 	border-top: 1px solid var(--background-modifier-border);
 	background-color: var(--background-secondary);
 }
 
-.groupped-status-files-list {
+.grouped-status-files-list {
 	max-height: 300px;
 	overflow-y: auto;
 }
 
-.groupped-status-file-item {
+.grouped-status-file-item {
 	display: flex;
 	flex-direction: column;
 	padding: var(--size-2-3) var(--size-4-3);
@@ -146,32 +146,32 @@
 	border-bottom: 1px solid var(--background-modifier-border-hover);
 }
 
-.groupped-status-file-item:last-child {
+.grouped-status-file-item:last-child {
 	border-bottom: none;
 }
 
-.groupped-status-file-item:hover {
+.grouped-status-file-item:hover {
 	background-color: var(--background-modifier-hover);
 }
 
-.groupped-status-file-item:active {
+.grouped-status-file-item:active {
 	background-color: var(--background-modifier-active);
 }
 
-.groupped-status-file-name {
+.grouped-status-file-name {
 	font-weight: var(--font-weight-medium);
 	color: var(--text-normal);
 	margin-bottom: var(--size-2-1);
 	font-size: var(--font-ui-medium);
 }
 
-.groupped-status-file-path {
+.grouped-status-file-path {
 	font-size: var(--font-ui-small);
 	color: var(--text-muted);
 	opacity: 0.8;
 }
 
-.groupped-status-loading {
+.grouped-status-loading {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -180,7 +180,7 @@
 	color: var(--text-muted);
 }
 
-.groupped-status-empty {
+.grouped-status-empty {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -192,64 +192,64 @@
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-	.groupped-status-header {
+	.grouped-status-header {
 		padding: var(--size-4-1) var(--size-4-2);
 	}
 
-	.groupped-status-content {
+	.grouped-status-content {
 		padding: var(--size-4-1);
 	}
 
-	.groupped-status-group-header {
+	.grouped-status-group-header {
 		padding: var(--size-4-1) var(--size-4-2);
 	}
 
-	.groupped-status-file-item {
+	.grouped-status-file-item {
 		padding: var(--size-2-2) var(--size-4-2);
 	}
 }
 
 /* Dark theme adjustments */
-.theme-dark .groupped-status-view {
+.theme-dark .grouped-status-view {
 	border-color: var(--background-modifier-border);
 }
 
-.theme-dark .groupped-status-group {
+.theme-dark .grouped-status-group {
 	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 /* Light theme adjustments */
-.theme-light .groupped-status-group {
+.theme-light .grouped-status-group {
 	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 
 /* Scrollbar styling for consistency with Obsidian */
-.groupped-status-content::-webkit-scrollbar {
+.grouped-status-content::-webkit-scrollbar {
 	width: var(--scrollbar-width);
 }
 
-.groupped-status-content::-webkit-scrollbar-track {
+.grouped-status-content::-webkit-scrollbar-track {
 	background: var(--background-secondary);
 }
 
-.groupped-status-content::-webkit-scrollbar-thumb {
+.grouped-status-content::-webkit-scrollbar-thumb {
 	background: var(--scrollbar-thumb-bg);
 	border-radius: var(--radius-s);
 }
 
-.groupped-status-content::-webkit-scrollbar-thumb:hover {
+.grouped-status-content::-webkit-scrollbar-thumb:hover {
 	background: var(--scrollbar-thumb-bg-hover);
 }
 
 /* Infinite scroll styles */
-.groupped-status-load-more {
+.grouped-status-load-more {
 	display: flex;
 	justify-content: center;
 	padding: var(--size-4-2);
 	border-top: 1px solid var(--background-modifier-border-hover);
 }
 
-.groupped-status-load-btn {
+.grouped-status-load-btn {
 	padding: var(--size-2-2) var(--size-4-2);
 	border: 1px solid var(--background-modifier-border);
 	border-radius: var(--radius-s);
@@ -261,30 +261,30 @@
 	font-weight: var(--font-weight-medium);
 }
 
-.groupped-status-load-btn:hover {
+.grouped-status-load-btn:hover {
 	background-color: var(--interactive-hover);
 	transform: translateY(-1px);
 }
 
-.groupped-status-load-btn:active {
+.grouped-status-load-btn:active {
 	background-color: var(--interactive-active);
 	transform: translateY(0);
 }
 
 /* File list scrollbar styling */
-.groupped-status-files-list::-webkit-scrollbar {
+.grouped-status-files-list::-webkit-scrollbar {
 	width: var(--scrollbar-width);
 }
 
-.groupped-status-files-list::-webkit-scrollbar-track {
+.grouped-status-files-list::-webkit-scrollbar-track {
 	background: var(--background-secondary);
 }
 
-.groupped-status-files-list::-webkit-scrollbar-thumb {
+.grouped-status-files-list::-webkit-scrollbar-thumb {
 	background: var(--scrollbar-thumb-bg);
 	border-radius: var(--radius-s);
 }
 
-.groupped-status-files-list::-webkit-scrollbar-thumb:hover {
+.grouped-status-files-list::-webkit-scrollbar-thumb:hover {
 	background: var(--scrollbar-thumb-bg-hover);
 }
diff --git a/styles/index.css b/styles/index.css
index c00f08f..2f3fe1f 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -18,5 +18,5 @@
 @import "components/group-label.css";
 @import "components/file-explorer-icon.css";
 @import "components/status-file-info-popup.css";
-@import "components/groupped-status-view.css";
+@import "components/grouped-status-view.css";
 @import "components/status-dashboard.css";