desktop-icons.svelte RawHistoryFolder

1<script lang="ts">
2    let { showChatRoom = $bindable(), showAuth = $bindable() } = $props();
3
4    function handleKeydown(event: KeyboardEvent, action: () => void) {
5        if (event.key === 'Enter' || event.key === ' ') {
6            event.preventDefault();
7            action();
8        }
9    }
10
11    function handleChatRoomClick() {
12        console.log('handleChatRoomClick');
13        showChatRoom = true
14    }
15
16    function handleAuthClick() {
17        console.log('handleAuthClick');
18        showAuth = true;
19    }
20</script>
21
22<div class="desktop-icons">
23    <div 
24        class="desktop-icon" 
25        ondblclick={handleChatRoomClick}
26        onkeydown={(e) => handleKeydown(e, handleChatRoomClick)}
27        role="button" 
28        tabindex="0"
29    >
30        <img src="/desktop/aim-desktop-icon.png" alt="Chat Room" />
31        <span class="icon-label">Pdr Aim</span>
32    </div>
33    
34    <div 
35        class="desktop-icon" 
36        ondblclick={handleAuthClick}
37        onkeydown={(e) => handleKeydown(e, handleAuthClick)}
38        role="button" 
39        tabindex="0"
40    >
41        <img src="/desktop/application-x-shellscript.png" alt="Sign In" />
42        <span class="icon-label">login</span>
43    </div>
44</div>
45
46<style>
47    .desktop-icons {
48        position: fixed;
49        top: 20px;
50        left: 20px;
51        display: flex;
52        flex-direction: column;
53        gap: 20px;
54    }
55
56    .desktop-icon {
57        display: flex;
58        flex-direction: column;
59        align-items: center;
60        cursor: pointer;
61        width: 75px;
62        text-align: center;
63        padding: 8px;
64        border: 1px dotted transparent;
65        border-radius: 2px;
66        margin: 2px;
67    }
68
69    .desktop-icon:hover, .desktop-icon:focus {
70        background: rgba(49, 106, 197, 0.2);
71        border: 1px dotted rgba(255, 255, 255, 0.8);
72        outline: 1px solid rgba(49, 106, 197, 0.6);
73        outline-offset: -1px;
74    }
75
76    .desktop-icon:active {
77        background: rgba(49, 106, 197, 0.4);
78    }
79
80    .desktop-icon img {
81        width: 48px;
82        height: 48px;
83        margin-bottom: 5px;
84        pointer-events: none; /* Prevents image from interfering with hover */
85    }
86
87    .icon-label {
88        color: white;
89        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
90        font-size: 12px;
91        user-select: none;
92        pointer-events: none; /* Prevents text from interfering with hover */
93        max-width: 100%;
94        overflow-wrap: break-word;
95    }
96</style>