obsidian-plugin/devonthesofa_obsidian-note-status
1
0
Fork 0
mirror of https://github.com/devonthesofa/obsidian-note-status.git synced 2026-07-22 12:30:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: rename groupped to grouped

Browse source
This commit is contained in:
Aleix Soler 2025-07-16 17:52:30 +02:00
parent 200e8b4abd
commit 77442bec67
11 changed files with 101 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
components/GrouppedStatusView/GrouppedStatusView.tsx → components/GroupedStatusView/GroupedStatusView.tsx
View file

@ -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."}

16
components/GrouppedStatusView/components/FileList.tsx → components/GroupedStatusView/components/FileList.tsx
View file

@ -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}{" "}

10
components/GrouppedStatusView/components/FilterSection.tsx → components/GroupedStatusView/components/FilterSection.tsx
View file

@ -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)}
/>

11
components/GrouppedStatusView/components/StatusGroup.tsx → components/GroupedStatusView/components/StatusGroup.tsx
View file

@ -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}

8
components/GrouppedStatusView/components/TagSection.tsx → components/GroupedStatusView/components/TagSection.tsx
View file

@ -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;

2
components/StatusDashboard/StatusDashboard.tsx
View file

@ -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,
});
}}

18
integrations/views/groupped-dashboard-view.tsx → integrations/views/grouped-dashboard-view.tsx
View file

@ -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}

18
integrations/views/groupped-status-view.tsx → integrations/views/grouped-status-view.tsx
View file

@ -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}

6
main.tsx
View file

@ -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(

98
styles/components/groupped-status-view.css → styles/components/grouped-status-view.css
View file

@ -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);
}

2
styles/index.css
View file

@ -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";