Unverified Commit 3407134f authored by Alireza Heidari's avatar Alireza Heidari
Browse files

Refactors history card highlighting to use prop-based approach 

Replaces CSS class-based highlighting with a dedicated highlighted prop for better component encapsulation and maintainability.

Removes hardcoded styling logic from the parent component and moves the highlighting responsibility to the card component itself.
parent e7830bc9

client/src/components/History/HistoryCard.vue

+9 −0
Original line number Diff line number Diff line
@@ -100,6 +100,13 @@ interface Props { 
     * @default false

     */

    clickable?: boolean;



    /**

     * Whether this card is highlighted (for example, as a range selection anchor)

     * @type {boolean}

     * @default false

     */

    highlighted?: boolean;

}



const props = withDefaults(defineProps<Props>(), {
@@ -110,6 +117,7 @@ const props = withDefaults(defineProps<Props>(), { 
    selected: false,

    sharedView: false,

    clickable: false,

    highlighted: false,

});



const router = useRouter();
@@ -260,6 +268,7 @@ function onKeyDown(event: KeyboardEvent) { 
        :max-visible-tags="props.gridView ? 2 : 8"

        :update-time="history.update_time"

        :clickable="props.clickable"

        :highlighted="props.highlighted"

        @titleClick="onTitleClick"

        @rename="() => router.push(`/histories/rename?id=${history.id}`)"

        @select="isMyHistory(history) && emit('select', history)"

client/src/components/History/HistoryCardList.vue

+1 −9
Original line number Diff line number Diff line
@@ -167,8 +167,8 @@ const emit = defineEmits<{ 
            :selectable="props.selectable"

            :selected="props.selectedHistoryIds.some((selected) => selected.id === history.id)"

            :clickable="props.clickable"

            :highlighted="props.rangeSelectAnchor?.id === history.id"

            class="history-card-in-list"

            :class="{ 'range-select-anchor-history': props.rangeSelectAnchor?.id === history.id }"

            @select="isMyHistory(history) && emit('select', history)"

            @tagClick="(...args) => emit('tagClick', ...args)"

            @refreshList="(...args) => emit('refreshList', ...args)"
@@ -183,13 +183,5 @@ const emit = defineEmits<{ 


.history-card-list {

    container: cards-list / inline-size;



    .history-card-in-list {

        &.range-select-anchor-history {

            &:deep(.g-card-content) {

                box-shadow: 0 0 0 0.2rem transparentize($brand-primary, 0.75);

            }

        }

    }

}

</style>